From c3d72bf8805348161e967b47be16f083d943dc4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Sun, 24 Mar 2024 11:08:55 +0300
Subject: [PATCH 001/194] IconField Core

---
 components/doc/iconfield/basicdoc.js      |  84 +++++++++++++
 components/lib/iconfield/IconField.d.ts   |  90 ++++++++++++++
 components/lib/iconfield/IconField.js     |  37 ++++++
 components/lib/iconfield/IconFieldBase.js |  24 ++++
 components/lib/inputicon/InputIcon.d.ts   |  73 +++++++++++
 components/lib/inputicon/InputIcon.js     |  35 ++++++
 components/lib/inputicon/InputIconBase.js |  17 +++
 pages/iconfield/index.js                  | 143 ++++++++++++++++++++++
 8 files changed, 503 insertions(+)
 create mode 100644 components/doc/iconfield/basicdoc.js
 create mode 100644 components/lib/iconfield/IconField.d.ts
 create mode 100644 components/lib/iconfield/IconField.js
 create mode 100644 components/lib/iconfield/IconFieldBase.js
 create mode 100644 components/lib/inputicon/InputIcon.d.ts
 create mode 100644 components/lib/inputicon/InputIcon.js
 create mode 100644 components/lib/inputicon/InputIconBase.js
 create mode 100644 pages/iconfield/index.js

diff --git a/components/doc/iconfield/basicdoc.js b/components/doc/iconfield/basicdoc.js
new file mode 100644
index 0000000000..6fbc887278
--- /dev/null
+++ b/components/doc/iconfield/basicdoc.js
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<IconField iconPosition="left">
+    <InputIcon className="pi pi-search"> </InputIcon>
+    <InputText v-model="value1" placeholder="Search" />
+</IconField>
+
+<IconField>
+    <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+    <InputText v-model="value2" />
+</IconField>
+        `,
+        javascript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function BasicDemo() {
+    return (
+        <IconField iconPosition="left">
+            <InputIcon className="pi pi-search"> </InputIcon>
+            <InputText v-model="value1" placeholder="Search" />
+        </IconField>
+
+        <IconField>
+            <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+            <InputText v-model="value2" />
+        </IconField>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function BasicDemo() {
+    return (
+        <IconField iconPosition="left">
+            <InputIcon className="pi pi-search"> </InputIcon>
+            <InputText v-model="value1" placeholder="Search" />
+        </IconField>
+
+        <IconField>
+            <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+            <InputText v-model="value2" />
+        </IconField>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    IconField is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search"> </InputIcon>
+                    <InputText v-model="value1" placeholder="Search" />
+                </IconField>
+
+                <IconField>
+                    <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                    <InputText v-model="value2" />
+                </IconField>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/lib/iconfield/IconField.d.ts b/components/lib/iconfield/IconField.d.ts
new file mode 100644
index 0000000000..a3aa55bbcb
--- /dev/null
+++ b/components/lib/iconfield/IconField.d.ts
@@ -0,0 +1,90 @@
+/**
+ *
+ * IconField wraps an input and an icon.
+ *
+ * [Live Demo](https://www.primereact.org/iconfield/)
+ *
+ * @module iconfield
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type IconFieldPassThroughType<T> = PassThroughType<T, IconFieldPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface IconFieldPassThroughMethodOptions {
+    props: IconFieldProps;
+    context: IconFieldContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link IconFieldProps.pt}
+ */
+export interface IconFieldPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: IconFieldPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in IconField component.
+ */
+export interface IconFieldContext {
+    /**
+     * Position of the icon
+     * @defaultValue right
+     */
+    iconPosition?: 'left' | 'right' | undefined;
+}
+
+/**
+ * Defines valid properties in IconField component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface IconFieldProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'iconPosition'> {
+    /**
+     * Position of the icon
+     * @defaultValue right
+     */
+    iconPosition?: 'left' | 'right' | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {IconFieldPassThroughOptions}
+     */
+    pt?: IconFieldPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - IconField**
+ *
+ * _IconField is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const IconField: React.ForwardRefExoticComponent<IconFieldProps & React.RefAttributes<HTMLInputElement>>;
diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js
new file mode 100644
index 0000000000..b1e060acbe
--- /dev/null
+++ b/components/lib/iconfield/IconField.js
@@ -0,0 +1,37 @@
+import React, { useContext, useRef } from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { PrimeReactContext } from '../api/Api';
+import { IconFieldBase } from './IconFieldBase';
+
+export const IconField = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const elementRef = useRef(ref);
+        const mergeProps = useMergeProps();
+        const context = useContext(PrimeReactContext);
+        const props = IconFieldBase.getProps(inProps, context);
+
+        const { ptm, cx } = IconFieldBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            context: {
+                iconPosition: props.iconPosition
+            }
+        });
+
+        const rootProps = mergeProps(
+            {
+                className: cx('root', { iconPosition: props.iconPosition })
+            },
+            IconFieldBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps} ref={elementRef}>
+                <>{props.children}</>
+            </div>
+        );
+    })
+);
+
+IconField.displayName = 'IconField';
diff --git a/components/lib/iconfield/IconFieldBase.js b/components/lib/iconfield/IconFieldBase.js
new file mode 100644
index 0000000000..bed83a0160
--- /dev/null
+++ b/components/lib/iconfield/IconFieldBase.js
@@ -0,0 +1,24 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-icon-field', {
+            'p-icon-field-right': props.iconPosition === 'right',
+            'p-icon-field-left': props.iconPosition === 'left'
+        })
+};
+
+export const IconFieldBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'IconField',
+        __parentMetadata: null,
+        children: undefined,
+        className: null,
+        iconPosition: 'right'
+    },
+
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/inputicon/InputIcon.d.ts b/components/lib/inputicon/InputIcon.d.ts
new file mode 100644
index 0000000000..b1e3c260a2
--- /dev/null
+++ b/components/lib/inputicon/InputIcon.d.ts
@@ -0,0 +1,73 @@
+/**
+ *
+ * InputIcon displays an icon.
+ *
+ * [Live Demo](https://www.primereact.org/iconfield/)
+ *
+ * @module inputicon
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type InputIconPassThroughType<T> = PassThroughType<T, InputIconPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputIconPassThroughMethodOptions {
+    props: InputIconProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputIconProps.pt}
+ */
+export interface InputIconPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputIconPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in InputIcon component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface InputIconProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>> {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputIconPassThroughOptions}
+     */
+    pt?: InputIconPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputIcon**
+ *
+ * _InputIcon is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputIcon: React.ForwardRefExoticComponent<InputIconProps & React.RefAttributes<HTMLInputElement>>;
diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js
new file mode 100644
index 0000000000..865e37a9fa
--- /dev/null
+++ b/components/lib/inputicon/InputIcon.js
@@ -0,0 +1,35 @@
+import React, { useContext, useRef } from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { PrimeReactContext } from '../api/Api';
+import { InputIconBase } from './InputIconBase';
+import { classNames } from '../utils/Utils';
+
+export const InputIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const elementRef = useRef(ref);
+        const mergeProps = useMergeProps();
+        const context = useContext(PrimeReactContext);
+        const props = InputIconBase.getProps(inProps, context);
+
+        const { ptm, cx } = InputIconBase.setMetaData({
+            props,
+            ...props.__parentMetadata
+        });
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root'))
+            },
+            InputIconBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <span {...rootProps} ref={elementRef} />
+            </>
+        );
+    })
+);
+
+InputIcon.displayName = 'InputIcon';
diff --git a/components/lib/inputicon/InputIconBase.js b/components/lib/inputicon/InputIconBase.js
new file mode 100644
index 0000000000..283f41f741
--- /dev/null
+++ b/components/lib/inputicon/InputIconBase.js
@@ -0,0 +1,17 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-input-icon'
+};
+
+export const InputIconBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputIcon',
+        __parentMetadata: null,
+        className: null
+    },
+
+    css: {
+        classes
+    }
+});
diff --git a/pages/iconfield/index.js b/pages/iconfield/index.js
new file mode 100644
index 0000000000..92107372c8
--- /dev/null
+++ b/pages/iconfield/index.js
@@ -0,0 +1,143 @@
+import React from 'react';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+// import { AccessibilityDoc } from '@/components/doc/iconfield/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/iconfield/basicdoc';
+// // import { DisabledDoc } from '@/components/doc/iconfield/disableddoc';
+// import { FloatLabelDoc } from '@/components/doc/iconfield/floatlabeldoc';
+// import { FormikDoc } from '@/components/doc/iconfield/form/formikdoc';
+// import { HookFormDoc } from '@/components/doc/iconfield/form/hookformdoc';
+// import { HelpTextDoc } from '@/components/doc/iconfield/helptextdoc';
+// import { IconsDoc } from '@/components/doc/iconfield/iconsdoc';
+// import { ImportDoc } from '@/components/doc/iconfield/importdoc';
+// import { InvalidDoc } from '@/components/doc/iconfield/invaliddoc';
+// import { KeyFilterDoc } from '@/components/doc/iconfield/keyfilterdoc';
+// import { PTDoc } from '@/components/doc/iconfield/pt/ptdoc';
+// import { Wireframe } from '@/components/doc/iconfield/pt/wireframe';
+// import { SizesDoc } from '@/components/doc/iconfield/sizesdoc';
+// import { StyledDoc } from '@/components/doc/iconfield/theming/styleddoc';
+// import { TailwindDoc } from '@/components/doc/iconfield/theming/tailwinddoc';
+
+const IconFieldDemo = () => {
+    const docs = [
+        // {
+        //     id: 'import',
+        //     label: 'Import',
+        //     component: ImportDoc
+        // },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+        //     {
+        //         id: 'icons',
+        //         label: 'Icons',
+        //         component: IconsDoc
+        //     },
+        //     {
+        //         id: 'keyfilter',
+        //         label: 'Key Filter',
+        //         component: KeyFilterDoc
+        //     },
+        //     {
+        //         id: 'sizes',
+        //         label: 'Sizes',
+        //         component: SizesDoc
+        //     },
+        //     {
+        //         id: 'helptext',
+        //         label: 'Help Text',
+        //         component: HelpTextDoc
+        //     },
+        //     {
+        //         id: 'floatlabel',
+        //         label: 'Float Label',
+        //         component: FloatLabelDoc
+        //     },
+        //     {
+        //         id: 'invalid',
+        //         label: 'Invalid',
+        //         component: InvalidDoc
+        //     },
+        //     {
+        //         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',
+        //         component: AccessibilityDoc
+        //     }
+        // ];
+        // const ptDocs = [
+        //     {
+        //         id: 'pt.wireframe',
+        //         label: 'Wireframe',
+        //         component: Wireframe
+        //     },
+        //     {
+        //         id: 'pt.iconfield.options',
+        //         label: 'IconField PT Options',
+        //         component: DocApiTable
+        //     },
+        //     {
+        //         id: 'pt.demo',
+        //         label: 'Example',
+        //         component: PTDoc
+        //     }
+    ];
+
+    const themingDocs = [
+        // {
+        //     id: 'styled',
+        //     label: 'Styled',
+        //     component: StyledDoc
+        // },
+        // {
+        //     id: 'unstyled',
+        //     label: 'Unstyled',
+        //     description: 'Theming is implemented with the pass through properties in unstyled mode.',
+        //     children: [
+        //         {
+        //             id: 'tailwind',
+        //             label: 'Tailwind',
+        //             component: TailwindDoc
+        //         }
+        //     ]
+        // }
+    ];
+
+    return (
+        <DocComponent
+            title="React Input Component"
+            header="IconField"
+            description="IconField is an extension to standard input element with theming and keyfiltering."
+            componentDocs={docs}
+            apiDocs={['IconField']}
+            // ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default IconFieldDemo;

From 58c0779bc0204aad60097173beb50f4ccf60511e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Sun, 24 Mar 2024 11:09:04 +0300
Subject: [PATCH 002/194] IconField Themes

---
 public/themes/arya-blue/theme.css             |  29 +++++
 public/themes/arya-green/theme.css            |  29 +++++
 public/themes/arya-orange/theme.css           |  29 +++++
 public/themes/bootstrap4-dark-blue/theme.css  |  29 +++++
 public/themes/bootstrap4-light-blue/theme.css |  29 +++++
 public/themes/fluent-light/theme.css          |  29 +++++
 public/themes/lara-dark-amber/theme.css       | 107 +++++-----------
 public/themes/lara-dark-blue/theme.css        | 107 +++++-----------
 public/themes/lara-dark-cyan/theme.css        | 107 +++++-----------
 public/themes/lara-dark-green/theme.css       | 107 +++++-----------
 public/themes/lara-dark-indigo/theme.css      | 107 +++++-----------
 public/themes/lara-dark-pink/theme.css        | 107 +++++-----------
 public/themes/lara-dark-teal/theme.css        | 107 +++++-----------
 public/themes/lara-light-amber/theme.css      | 107 +++++-----------
 public/themes/lara-light-blue/theme.css       | 107 +++++-----------
 public/themes/lara-light-cyan/theme.css       | 107 +++++-----------
 public/themes/lara-light-green/theme.css      | 107 +++++-----------
 public/themes/lara-light-indigo/theme.css     | 107 +++++-----------
 public/themes/lara-light-pink/theme.css       | 107 +++++-----------
 public/themes/lara-light-teal/theme.css       | 107 +++++-----------
 public/themes/luna-amber/theme.css            |  29 +++++
 public/themes/luna-blue/theme.css             |  29 +++++
 public/themes/luna-green/theme.css            |  29 +++++
 public/themes/luna-pink/theme.css             |  29 +++++
 public/themes/md-dark-deeppurple/theme.css    | 120 +++++-------------
 public/themes/md-dark-indigo/theme.css        | 107 +++++-----------
 public/themes/md-light-deeppurple/theme.css   | 120 +++++-------------
 public/themes/md-light-indigo/theme.css       | 120 +++++-------------
 public/themes/mdc-dark-deeppurple/theme.css   | 120 +++++-------------
 public/themes/mdc-dark-indigo/theme.css       | 120 +++++-------------
 public/themes/mdc-light-deeppurple/theme.css  | 120 +++++-------------
 public/themes/mdc-light-indigo/theme.css      | 120 +++++-------------
 public/themes/mira/theme.css                  |  29 +++++
 public/themes/nano/theme.css                  |  29 +++++
 public/themes/nova-accent/theme.css           |  29 +++++
 public/themes/nova-alt/theme.css              |  29 +++++
 public/themes/nova/theme.css                  |  29 +++++
 public/themes/rhea/theme.css                  |  29 +++++
 public/themes/saga-blue/theme.css             |  29 +++++
 public/themes/saga-green/theme.css            |  29 +++++
 public/themes/saga-orange/theme.css           |  29 +++++
 public/themes/soho-dark/theme.css             |  29 +++++
 public/themes/soho-light/theme.css            |  29 +++++
 public/themes/tailwind-light/theme.css        |  29 +++++
 public/themes/vela-blue/theme.css             |  29 +++++
 public/themes/vela-green/theme.css            |  29 +++++
 public/themes/vela-orange/theme.css           |  29 +++++
 public/themes/viva-dark/theme.css             |  29 +++++
 public/themes/viva-light/theme.css            |  29 +++++
 49 files changed, 1421 insertions(+), 1807 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index c375c85e1f..6b66aaa3e4 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index e20c2bafd6..241a3de1d3 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 7773af6477..501398ec7a 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index e48a24f07b..943d193453 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 67294f0743..07c9168182 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #495057;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #495057;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index e76f218683..f112aad638 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #605e5c;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #605e5c;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #605e5c;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 3c98fe3d0c..0149fc680c 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #fca5a5;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 1px;
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 1px;
-    color: #111827;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #111827;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #fca5a5;
   }
-  .p-message.p-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #020617;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #111827;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #fca5a5;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #111827;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 7e7ad0c287..1a0aca8bc4 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #fca5a5;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 1px;
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 1px;
-    color: #111827;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #111827;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #fca5a5;
   }
-  .p-message.p-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #020617;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #111827;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #fca5a5;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #111827;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 0370c7e57e..0cc6d46caf 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #fca5a5;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 1px;
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 1px;
-    color: #111827;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #111827;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #fca5a5;
   }
-  .p-message.p-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #020617;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #111827;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #fca5a5;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #111827;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 15f9960115..baa625cbce 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #fca5a5;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 1px;
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 1px;
-    color: #111827;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #111827;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #fca5a5;
   }
-  .p-message.p-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #020617;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #111827;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #fca5a5;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #111827;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 227618f06c..0c7ed144b9 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #fca5a5;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 1px;
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 1px;
-    color: #111827;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #111827;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #fca5a5;
   }
-  .p-message.p-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #020617;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #111827;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #fca5a5;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #111827;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 64601078a8..8f4705ed84 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #fca5a5;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 1px;
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 1px;
-    color: #111827;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #111827;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #fca5a5;
   }
-  .p-message.p-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #020617;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #111827;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #fca5a5;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #111827;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 7897cc8ed3..35280f02a4 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #fca5a5;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 1px;
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #020617;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 1px;
-    color: #111827;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #111827;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #fca5a5;
   }
-  .p-message.p-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #020617;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #020617;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #111827;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #111827;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #fca5a5;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #94a3b8;
-    border: solid #94a3b8;
-    border-width: 0 0 0 6px;
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #020617;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid #ffffff;
-    border-width: 0 0 0 6px;
-    color: #111827;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #111827;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #f87171;
     color: #450a0a;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #94a3b8;
-    color: #020617;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #111827;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index ff91a0bb64..fe9451e887 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #ff5757;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #ff5757;
   }
-  .p-message.p-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index adc2756489..baece88b80 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #ff5757;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #ff5757;
   }
-  .p-message.p-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index ad70f3f678..29cfaec965 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #ff5757;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #ff5757;
   }
-  .p-message.p-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 95933f4bb0..8cafc7eb44 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #ff5757;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #ff5757;
   }
-  .p-message.p-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 2f3f787e3f..a3ce1b5fef 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #ff5757;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #ff5757;
   }
-  .p-message.p-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index c5bcbada70..63d3d3c7e4 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #ff5757;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #ff5757;
   }
-  .p-message.p-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index ccc915989c..c135d2f699 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -5977,24 +6006,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #ff5757;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6079,30 +6090,6 @@
   .p-message.p-message-error .p-message-close {
     color: #ff5757;
   }
-  .p-message.p-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6204,26 +6191,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #64748b;
-    border: solid #64748b;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #1f2937;
-    border: solid #1f2937;
-    border-width: 0 0 0 6px;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6489,14 +6456,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6632,14 +6591,6 @@
     background-color: #ef4444;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #64748b;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 01ddf4e0a1..b3db63e517 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 62ac651699..003373d4a9 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index c0533f7d1d..49a107a451 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index bcb6374466..dd83ac6696 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 8aaecffed5..608c877a0d 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 3rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 1.25rem 1.25rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -1926,19 +1955,6 @@
   .p-rating.p-readonly .p-rating-item {
     cursor: default;
   }
-  .p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .p-rating.p-readonly .p-rating-item {
-    cursor: default;
-  }
   .p-rating {
     gap: 0.5rem;
   }
@@ -6042,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #A5D6A7;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #121212;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6144,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #A5D6A7;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #121212;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #121212;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6269,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #A5D6A7;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #121212;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6554,14 +6508,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #A5D6A7;
-    color: #121212;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6697,14 +6643,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #A5D6A7;
-    color: #121212;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 3f69ee157c..7182658c35 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 3rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 1.25rem 1.25rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -6029,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #F48FB1;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #121212;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6131,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #F48FB1;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #121212;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #121212;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6256,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #F48FB1;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #121212;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6541,14 +6508,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #F48FB1;
-    color: #121212;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6684,14 +6643,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #F48FB1;
-    color: #121212;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 55fe91819b..db4c8533f4 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 3rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 1.25rem 1.25rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -1926,19 +1955,6 @@
   .p-rating.p-readonly .p-rating-item {
     cursor: default;
   }
-  .p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .p-rating.p-readonly .p-rating-item {
-    cursor: default;
-  }
   .p-rating {
     gap: 0.5rem;
   }
@@ -6042,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #4CAF50;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6144,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #4CAF50;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6269,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #4CAF50;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6554,14 +6508,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #4CAF50;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6697,14 +6643,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #4CAF50;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 46ba455ecb..1440302113 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 3rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 1.25rem 1.25rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -1926,19 +1955,6 @@
   .p-rating.p-readonly .p-rating-item {
     cursor: default;
   }
-  .p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .p-rating.p-readonly .p-rating-item {
-    cursor: default;
-  }
   .p-rating {
     gap: 0.5rem;
   }
@@ -6042,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #ff4081;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6144,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #ff4081;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6269,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #ff4081;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6554,14 +6508,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #ff4081;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6697,14 +6643,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #ff4081;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 2019bec822..8a060caee6 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -1926,19 +1955,6 @@
   .p-rating.p-readonly .p-rating-item {
     cursor: default;
   }
-  .p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .p-rating.p-readonly .p-rating-item {
-    cursor: default;
-  }
   .p-rating {
     gap: 0.5rem;
   }
@@ -6042,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #A5D6A7;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #121212;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6144,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #A5D6A7;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #121212;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #121212;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6269,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #A5D6A7;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #121212;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6554,14 +6508,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #A5D6A7;
-    color: #121212;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6697,14 +6643,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #A5D6A7;
-    color: #121212;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 38cdd92c0d..a310e7fcd3 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -1926,19 +1955,6 @@
   .p-rating.p-readonly .p-rating-item {
     cursor: default;
   }
-  .p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .p-rating.p-readonly .p-rating-item {
-    cursor: default;
-  }
   .p-rating {
     gap: 0.5rem;
   }
@@ -6042,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #F48FB1;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 1px;
-    color: #121212;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #121212;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6144,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #F48FB1;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #121212;
-  }
-  .p-message.p-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #121212;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #121212;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6269,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #F48FB1;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #ffffff;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #121212;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #121212;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6554,14 +6508,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #F48FB1;
-    color: #121212;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6697,14 +6643,6 @@
     background-color: #ef9a9a;
     color: #212121;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #F48FB1;
-    color: #121212;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #ffffff;
-    color: #121212;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index acbb1950f9..cbd08b4dae 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -1926,19 +1955,6 @@
   .p-rating.p-readonly .p-rating-item {
     cursor: default;
   }
-  .p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .p-rating.p-readonly .p-rating-item {
-    cursor: default;
-  }
   .p-rating {
     gap: 0.5rem;
   }
@@ -6042,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #4CAF50;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6144,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #4CAF50;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6269,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #4CAF50;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6554,14 +6508,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #4CAF50;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6697,14 +6643,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #4CAF50;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 29af34f9d0..7029f746a3 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -1926,19 +1955,6 @@
   .p-rating.p-readonly .p-rating-item {
     cursor: default;
   }
-  .p-rating {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .p-rating-item {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .p-rating.p-readonly .p-rating-item {
-    cursor: default;
-  }
   .p-rating {
     gap: 0.5rem;
   }
@@ -6042,24 +6058,6 @@
   .p-inline-message.p-inline-message-error .p-inline-message-icon {
     color: #b71c1c;
   }
-  .p-inline-message.p-inline-message-secondary {
-    background: #ff4081;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-secondary .p-inline-message-icon {
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 1px;
-    color: #ffffff;
-  }
-  .p-inline-message.p-inline-message-contrast .p-inline-message-icon {
-    color: #ffffff;
-  }
   .p-inline-message .p-inline-message-icon {
     font-size: 1rem;
     margin-right: 0.5rem;
@@ -6144,30 +6142,6 @@
   .p-message.p-message-error .p-message-close {
     color: #b71c1c;
   }
-  .p-message.p-message-secondary {
-    background: #ff4081;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-secondary .p-message-close {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-icon {
-    color: #ffffff;
-  }
-  .p-message.p-message-contrast .p-message-close {
-    color: #ffffff;
-  }
   .p-message .p-message-text {
     font-size: 1rem;
     font-weight: 500;
@@ -6269,26 +6243,6 @@
   .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #b71c1c;
   }
-  .p-toast .p-toast-message.p-toast-message-secondary {
-    background: #ff4081;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast {
-    background: #212121;
-    border: solid transparent;
-    border-width: 0 0 0 0;
-    color: #ffffff;
-  }
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
-  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
-    color: #ffffff;
-  }
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
     background: transparent;
@@ -6554,14 +6508,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-tag.p-tag-secondary {
-    background-color: #ff4081;
-    color: #ffffff;
-  }
-  .p-tag.p-tag-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-tag .p-tag-icon {
     margin-right: 0.25rem;
     font-size: 0.75rem;
@@ -6697,14 +6643,6 @@
     background-color: #d32f2f;
     color: #ffffff;
   }
-  .p-badge.p-badge-secondary {
-    background-color: #ff4081;
-    color: #ffffff;
-  }
-  .p-badge.p-badge-contrast {
-    background-color: #212121;
-    color: #ffffff;
-  }
   .p-badge.p-badge-lg {
     font-size: 1.125rem;
     min-width: 2.25rem;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 172c2b13d3..e2d536dcf9 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1386,6 +1386,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #4c566a;
   }
@@ -1415,6 +1424,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 553af1d71b..c1267ceba3 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #697077;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.3125rem 0.3125rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.25rem;
+    color: #697077;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.25rem;
+    color: #697077;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 7bacbd9e13..db77063198 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #666666;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 2eadc309e4..95cae540b6 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #666666;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 44c76afdfc..6d854ada92 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #666666;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 64a1c245ac..bc9c461cd2 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #a6a6a6;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 7b0329d15a..a44dbf3f84 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 10171d736a..99285c4aef 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 53ae1864f3..61e5ff55fc 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index fbbce7d9f3..dbf7c7ab2b 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -1383,6 +1383,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1412,6 +1421,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 5951c08be2..d62444da7e 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1383,6 +1383,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #708da9;
   }
@@ -1412,6 +1421,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #708da9;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #708da9;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index e352778067..713ec9ebc0 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1392,6 +1392,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #71717a;
   }
@@ -1421,6 +1430,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #71717a;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #71717a;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 13fc592684..111f6e2b89 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index d9766a9714..769375be7d 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 80626138fd..ac43b45665 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 0de8514948..e707d671b2 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1390,6 +1390,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1419,6 +1428,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 876283887a..2b49eac850 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1390,6 +1390,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #898989;
   }
@@ -1419,6 +1428,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #898989;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #898989;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }

From ffb399d392cccaf2a448f7be4aa68fb142ec5c22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Sun, 24 Mar 2024 11:36:07 +0300
Subject: [PATCH 003/194] IconField Docs

---
 components/doc/common/apidoc/index.json       | 226 ++++++++++++++++++
 components/doc/iconfield/accessibilitydoc.js  |  14 ++
 components/doc/iconfield/basicdoc.js          |   4 +-
 components/doc/iconfield/importdoc.js         |  18 ++
 components/doc/iconfield/pt/ptdoc.js          |  26 ++
 components/doc/iconfield/pt/wireframe.js      |  12 +
 components/doc/iconfield/templatedoc.js       | 168 +++++++++++++
 components/doc/iconfield/theming/styleddoc.js |  40 ++++
 components/doc/inputtext/pt/ptdoc.js          |  80 -------
 .../doc/metergroup/theming/styleddoc.js       |   2 +-
 components/lib/iconfield/IconField.d.ts       |   5 +
 components/lib/inputicon/InputIcon.d.ts       |   7 +-
 components/lib/inputicon/InputIcon.js         |   4 +-
 pages/iconfield/index.js                      | 150 +++---------
 14 files changed, 559 insertions(+), 197 deletions(-)
 create mode 100644 components/doc/iconfield/accessibilitydoc.js
 create mode 100644 components/doc/iconfield/importdoc.js
 create mode 100644 components/doc/iconfield/pt/ptdoc.js
 create mode 100644 components/doc/iconfield/pt/wireframe.js
 create mode 100644 components/doc/iconfield/templatedoc.js
 create mode 100644 components/doc/iconfield/theming/styleddoc.js
 delete mode 100644 components/doc/inputtext/pt/ptdoc.js

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index ca6b044646..ff14d7c024 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -27015,6 +27015,133 @@
             }
         }
     },
+    "iconfield": {
+        "description": "IconField wraps an input and an icon.\n\n[Live Demo](https://www.primereact.org/iconfield/)",
+        "components": {
+            "IconField": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in IconField component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "iconPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "right",
+                            "description": "Position of the icon"
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconFieldPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "IconFieldPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "IconFieldProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "IconFieldContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "IconFieldPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconFieldPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "IconFieldContext": {
+                    "description": "Defines current options in IconField component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "iconPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "description": "Position of the icon"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "IconFieldPassThroughType": {
+                    "values": "PassThroughType<T, IconFieldPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
     "icons/angledoubledown": {
         "components": {
             "AngleDoubleDownIcon": {
@@ -29742,6 +29869,105 @@
             }
         }
     },
+    "inputicon": {
+        "description": "InputIcon displays an icon.\n\n[Live Demo](https://www.primereact.org/iconfield/)",
+        "components": {
+            "InputIcon": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in InputIcon component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputIconPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputIconPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputIconProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputIconPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputIconPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputIconPassThroughType": {
+                    "values": "PassThroughType<T, InputIconPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
     "inputmask": {
         "description": "InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.\n\n[Live Demo](https://www.primereact.org/inputmask/)",
         "components": {
diff --git a/components/doc/iconfield/accessibilitydoc.js b/components/doc/iconfield/accessibilitydoc.js
new file mode 100644
index 0000000000..8c202c9261
--- /dev/null
+++ b/components/doc/iconfield/accessibilitydoc.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>IconField and InputIcon does not require any roles and attributes.</p>
+
+            <h3>Keyboard Support</h3>
+            <p>Components does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/iconfield/basicdoc.js b/components/doc/iconfield/basicdoc.js
index 6fbc887278..e9cbb87f0d 100644
--- a/components/doc/iconfield/basicdoc.js
+++ b/components/doc/iconfield/basicdoc.js
@@ -69,12 +69,12 @@ export default function BasicDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <IconField iconPosition="left">
-                    <InputIcon className="pi pi-search"> </InputIcon>
+                    <InputIcon className="pi pi-search" />
                     <InputText v-model="value1" placeholder="Search" />
                 </IconField>
 
                 <IconField>
-                    <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                    <InputIcon className="pi pi-spin pi-spinner" />
                     <InputText v-model="value2" />
                 </IconField>
             </div>
diff --git a/components/doc/iconfield/importdoc.js b/components/doc/iconfield/importdoc.js
new file mode 100644
index 0000000000..bd5a1a51a4
--- /dev/null
+++ b/components/doc/iconfield/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/iconfield/pt/ptdoc.js b/components/doc/iconfield/pt/ptdoc.js
new file mode 100644
index 0000000000..781271232a
--- /dev/null
+++ b/components/doc/iconfield/pt/ptdoc.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function PTDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    pt={{
+                        root: { className: 'border-primary-400' }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/iconfield/pt/wireframe.js b/components/doc/iconfield/pt/wireframe.js
new file mode 100644
index 0000000000..ba0f5cde16
--- /dev/null
+++ b/components/doc/iconfield/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="inputtext" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/iconfield/templatedoc.js b/components/doc/iconfield/templatedoc.js
new file mode 100644
index 0000000000..566a8ecbf5
--- /dev/null
+++ b/components/doc/iconfield/templatedoc.js
@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function TemplateDoc(props) {
+    const code = {
+        basic: `
+<IconField iconPosition="left">
+    <InputIcon>
+        <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g mask="url(#mask0_2642_713)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="..."
+                    fill="var(--primary-color)"
+                />
+            </g>
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="..."
+                fill="var(--primary-color)"
+            />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+        </svg>
+    </InputIcon>
+    <InputText v-model="value1" placeholder="Search" />
+</IconField>
+        `,
+        javascript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function TemplateDemo() {
+    return (
+        <IconField iconPosition="left">
+            <InputIcon>
+                <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g mask="url(#mask0_2642_713)">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="..."
+                            fill="var(--primary-color)"
+                        />
+                    </g>
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="..."
+                        fill="var(--primary-color)"
+                    />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                </svg>
+            </InputIcon>
+            <InputText v-model="value1" placeholder="Search" />
+        </IconField>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function TemplateDemo() {
+    return (
+        <IconField iconPosition="left">
+            <InputIcon>
+                <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g mask="url(#mask0_2642_713)">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="..."
+                            fill="var(--primary-color)"
+                        />
+                    </g>
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="..."
+                        fill="var(--primary-color)"
+                    />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                </svg>
+            </InputIcon>
+            <InputText v-model="value1" placeholder="Search" />
+        </IconField>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    IconField is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <IconField iconPosition="left">
+                    <InputIcon>
+                        <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="var(--primary-color)"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z"
+                                fill="var(--primary-color)"
+                            />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                        </svg>
+                    </InputIcon>
+                    <InputText v-model="value1" placeholder="Search" />
+                </IconField>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/iconfield/theming/styleddoc.js b/components/doc/iconfield/theming/styleddoc.js
new file mode 100644
index 0000000000..4b671474d5
--- /dev/null
+++ b/components/doc/iconfield/theming/styleddoc.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-icon-field</td>
+                            <td>Container of element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-icon-field-right</td>
+                            <td>Right input icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-icon-field-left</td>
+                            <td>Left input icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-input-icon</td>
+                            <td>Container of input icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputtext/pt/ptdoc.js b/components/doc/inputtext/pt/ptdoc.js
deleted file mode 100644
index 00b97c9e8e..0000000000
--- a/components/doc/inputtext/pt/ptdoc.js
+++ /dev/null
@@ -1,80 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState('');
-
-    const code = {
-        basic: `
-<InputText
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    pt={{
-        root: { className: 'border-primary-400' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { InputText } from "primereact/inputtext";
-
-export default function PTDemo() {
-    const [value, setValue] = useState('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputText
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                pt={{
-                    root: { className: 'border-primary-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { InputText } from "primereact/inputtext";
-
-export default function PTDemo() {
-    const [value, setValue] = useState<string>('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputText
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                pt={{
-                    root: { className: 'border-primary-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <InputText
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    pt={{
-                        root: { className: 'border-primary-400' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/metergroup/theming/styleddoc.js b/components/doc/metergroup/theming/styleddoc.js
index 8d1a458f7f..b1e38fa655 100644
--- a/components/doc/metergroup/theming/styleddoc.js
+++ b/components/doc/metergroup/theming/styleddoc.js
@@ -8,7 +8,7 @@ export function StyledDoc() {
                 <p>List of class names used in the styled mode.</p>
             </DocSectionText>
             <div className="doc-tablewrapper">
-                <table class="doc-table">
+                <table className="doc-table">
                     <thead>
                         <tr>
                             <th>Name</th>
diff --git a/components/lib/iconfield/IconField.d.ts b/components/lib/iconfield/IconField.d.ts
index a3aa55bbcb..a0cf2bea64 100644
--- a/components/lib/iconfield/IconField.d.ts
+++ b/components/lib/iconfield/IconField.d.ts
@@ -59,6 +59,11 @@ export interface IconFieldProps extends Omit<React.DetailedHTMLProps<React.Input
      * @defaultValue right
      */
     iconPosition?: 'left' | 'right' | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {IconFieldPassThroughOptions}
diff --git a/components/lib/inputicon/InputIcon.d.ts b/components/lib/inputicon/InputIcon.d.ts
index b1e3c260a2..816b4962db 100644
--- a/components/lib/inputicon/InputIcon.d.ts
+++ b/components/lib/inputicon/InputIcon.d.ts
@@ -41,7 +41,12 @@ export interface InputIconPassThroughOptions {
  * Defines valid properties in InputIcon component. In addition to these, all properties of HTMLInputElement can be used in this component.
  * @group Properties
  */
-export interface InputIconProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>> {
+export interface InputIconProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {InputIconPassThroughOptions}
diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js
index 865e37a9fa..4e27cbc248 100644
--- a/components/lib/inputicon/InputIcon.js
+++ b/components/lib/inputicon/InputIcon.js
@@ -26,7 +26,9 @@ export const InputIcon = React.memo(
 
         return (
             <>
-                <span {...rootProps} ref={elementRef} />
+                <span {...rootProps} ref={elementRef}>
+                    {props.children}
+                </span>
             </>
         );
     })
diff --git a/pages/iconfield/index.js b/pages/iconfield/index.js
index 92107372c8..1863c8af43 100644
--- a/pages/iconfield/index.js
+++ b/pages/iconfield/index.js
@@ -1,130 +1,56 @@
 import React from 'react';
 import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
-// import { AccessibilityDoc } from '@/components/doc/iconfield/accessibilitydoc';
+import { ImportDoc } from '@/components/doc/iconfield/importdoc';
 import { BasicDoc } from '@/components/doc/iconfield/basicdoc';
-// // import { DisabledDoc } from '@/components/doc/iconfield/disableddoc';
-// import { FloatLabelDoc } from '@/components/doc/iconfield/floatlabeldoc';
-// import { FormikDoc } from '@/components/doc/iconfield/form/formikdoc';
-// import { HookFormDoc } from '@/components/doc/iconfield/form/hookformdoc';
-// import { HelpTextDoc } from '@/components/doc/iconfield/helptextdoc';
-// import { IconsDoc } from '@/components/doc/iconfield/iconsdoc';
-// import { ImportDoc } from '@/components/doc/iconfield/importdoc';
-// import { InvalidDoc } from '@/components/doc/iconfield/invaliddoc';
-// import { KeyFilterDoc } from '@/components/doc/iconfield/keyfilterdoc';
-// import { PTDoc } from '@/components/doc/iconfield/pt/ptdoc';
-// import { Wireframe } from '@/components/doc/iconfield/pt/wireframe';
-// import { SizesDoc } from '@/components/doc/iconfield/sizesdoc';
-// import { StyledDoc } from '@/components/doc/iconfield/theming/styleddoc';
-// import { TailwindDoc } from '@/components/doc/iconfield/theming/tailwinddoc';
+import { TemplateDoc } from '@/components/doc/iconfield/templatedoc';
+import { AccessibilityDoc } from '@/components/doc/iconfield/accessibilitydoc';
+import { Wireframe } from '@/components/doc/iconfield/pt/wireframe';
+import { StyledDoc } from '@/components/doc/iconfield/theming/styleddoc';
 
 const IconFieldDemo = () => {
     const docs = [
-        // {
-        //     id: 'import',
-        //     label: 'Import',
-        //     component: ImportDoc
-        // },
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
         {
             id: 'basic',
             label: 'Basic',
             component: BasicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
         }
-        //     {
-        //         id: 'icons',
-        //         label: 'Icons',
-        //         component: IconsDoc
-        //     },
-        //     {
-        //         id: 'keyfilter',
-        //         label: 'Key Filter',
-        //         component: KeyFilterDoc
-        //     },
-        //     {
-        //         id: 'sizes',
-        //         label: 'Sizes',
-        //         component: SizesDoc
-        //     },
-        //     {
-        //         id: 'helptext',
-        //         label: 'Help Text',
-        //         component: HelpTextDoc
-        //     },
-        //     {
-        //         id: 'floatlabel',
-        //         label: 'Float Label',
-        //         component: FloatLabelDoc
-        //     },
-        //     {
-        //         id: 'invalid',
-        //         label: 'Invalid',
-        //         component: InvalidDoc
-        //     },
-        //     {
-        //         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',
-        //         component: AccessibilityDoc
-        //     }
-        // ];
-        // const ptDocs = [
-        //     {
-        //         id: 'pt.wireframe',
-        //         label: 'Wireframe',
-        //         component: Wireframe
-        //     },
-        //     {
-        //         id: 'pt.iconfield.options',
-        //         label: 'IconField PT Options',
-        //         component: DocApiTable
-        //     },
-        //     {
-        //         id: 'pt.demo',
-        //         label: 'Example',
-        //         component: PTDoc
-        //     }
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.iconfield.options',
+            label: 'IconField PT Options',
+            component: DocApiTable
+        }
     ];
 
     const themingDocs = [
-        // {
-        //     id: 'styled',
-        //     label: 'Styled',
-        //     component: StyledDoc
-        // },
-        // {
-        //     id: 'unstyled',
-        //     label: 'Unstyled',
-        //     description: 'Theming is implemented with the pass through properties in unstyled mode.',
-        //     children: [
-        //         {
-        //             id: 'tailwind',
-        //             label: 'Tailwind',
-        //             component: TailwindDoc
-        //         }
-        //     ]
-        // }
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        }
     ];
 
     return (
@@ -134,7 +60,7 @@ const IconFieldDemo = () => {
             description="IconField is an extension to standard input element with theming and keyfiltering."
             componentDocs={docs}
             apiDocs={['IconField']}
-            // ptDocs={ptDocs}
+            ptDocs={ptDocs}
             themingDocs={themingDocs}
         />
     );

From efddd732585c858616a781dad3ad2f17b1d94bb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Sun, 24 Mar 2024 11:42:33 +0300
Subject: [PATCH 004/194] Recovered ptdoc for inputtext

---
 components/doc/inputtext/pt/ptdoc.js | 80 ++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 components/doc/inputtext/pt/ptdoc.js

diff --git a/components/doc/inputtext/pt/ptdoc.js b/components/doc/inputtext/pt/ptdoc.js
new file mode 100644
index 0000000000..00b97c9e8e
--- /dev/null
+++ b/components/doc/inputtext/pt/ptdoc.js
@@ -0,0 +1,80 @@
+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 PTDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputText
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    pt={{
+        root: { className: 'border-primary-400' }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function PTDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                pt={{
+                    root: { className: 'border-primary-400' }
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function PTDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                pt={{
+                    root: { className: 'border-primary-400' }
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    pt={{
+                        root: { className: 'border-primary-400' }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

From 76865d1b07dd0f7711070b301845999731e362ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Sun, 24 Mar 2024 11:43:44 +0300
Subject: [PATCH 005/194] Disabled ESLint for build

---
 .eslintignore | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..f9383a07c6
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+//Remove '*' during the development.
+*
\ No newline at end of file

From 0bed147299e9cc341bbae207c5e9d160459e175b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Sun, 24 Mar 2024 11:46:21 +0300
Subject: [PATCH 006/194] Removed icons demo from inputtext

---
 components/doc/inputtext/iconsdoc.js | 81 ----------------------------
 pages/inputtext/index.js             |  6 ---
 2 files changed, 87 deletions(-)
 delete mode 100644 components/doc/inputtext/iconsdoc.js

diff --git a/components/doc/inputtext/iconsdoc.js b/components/doc/inputtext/iconsdoc.js
deleted file mode 100644
index c97b4c941c..0000000000
--- a/components/doc/inputtext/iconsdoc.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputText } from '@/components/lib/inputtext/InputText';
-
-export function IconsDoc(props) {
-    const code = {
-        basic: `
-<span className="p-input-icon-left">
-    <i className="pi pi-search" />
-    <InputText placeholder="Search" />
-</span>
-
-<span className="p-input-icon-right">
-    <i className="pi pi-spin pi-spinner" />
-    <InputText />
-</span>
-        `,
-        javascript: `
-import React from 'react'; 
-import { InputText } from "primereact/inputtext";
-
-export default function IconsDemo() {
-    return (
-        <div className="card flex flex-wrap justify-content-center gap-3">
-            <span className="p-input-icon-left">
-                <i className="pi pi-search" />
-                <InputText placeholder="Search" />
-            </span>
-
-            <span className="p-input-icon-right">
-                <i className="pi pi-spin pi-spinner" />
-                <InputText />
-            </span>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { InputText } from "primereact/inputtext";
-
-export default function IconsDemo() {
-    return (
-        <div className="card flex flex-wrap justify-content-center gap-3">
-            <span className="p-input-icon-left">
-                <i className="pi pi-search" />
-                <InputText placeholder="Search" />
-            </span>
-
-            <span className="p-input-icon-right">
-                <i className="pi pi-spin pi-spinner" />
-                <InputText />
-            </span>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either <i>.p-input-icon-left</i> or <i>p-input-icon-right</i> class.
-                </p>
-            </DocSectionText>
-            <div className="card flex flex-wrap justify-content-center gap-3 ">
-                <span className="p-input-icon-left">
-                    <i className="pi pi-search" />
-                    <InputText placeholder="Search" />
-                </span>
-
-                <span className="p-input-icon-right">
-                    <i className="pi pi-spin pi-spinner" />
-                    <InputText />
-                </span>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
index 34ea7023c6..3db6315769 100644
--- a/pages/inputtext/index.js
+++ b/pages/inputtext/index.js
@@ -7,7 +7,6 @@ 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 { IconsDoc } from '@/components/doc/inputtext/iconsdoc';
 import { ImportDoc } from '@/components/doc/inputtext/importdoc';
 import { InvalidDoc } from '@/components/doc/inputtext/invaliddoc';
 import { KeyFilterDoc } from '@/components/doc/inputtext/keyfilterdoc';
@@ -29,11 +28,6 @@ const InputTextDemo = () => {
             label: 'Basic',
             component: BasicDoc
         },
-        {
-            id: 'icons',
-            label: 'Icons',
-            component: IconsDoc
-        },
         {
             id: 'keyfilter',
             label: 'Key Filter',

From 491e1fdae48af2cdf4a6863eba034e5947775474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Sun, 24 Mar 2024 11:53:35 +0300
Subject: [PATCH 007/194] Theme Update

---
 public/themes/arya-blue/theme.css             | 124 +--
 public/themes/arya-green/theme.css            | 124 +--
 public/themes/arya-orange/theme.css           | 124 +--
 public/themes/bootstrap4-dark-blue/theme.css  | 144 +--
 .../themes/bootstrap4-dark-purple/theme.css   | 969 ++++++++++++++----
 public/themes/bootstrap4-light-blue/theme.css | 144 +--
 .../themes/bootstrap4-light-purple/theme.css  | 969 ++++++++++++++----
 public/themes/fluent-light/theme.css          | 124 +--
 public/themes/lara-dark-amber/theme.css       | 144 +--
 public/themes/lara-dark-blue/theme.css        | 144 +--
 public/themes/lara-dark-cyan/theme.css        | 144 +--
 public/themes/lara-dark-green/theme.css       | 144 +--
 public/themes/lara-dark-indigo/theme.css      | 144 +--
 public/themes/lara-dark-pink/theme.css        | 144 +--
 public/themes/lara-dark-teal/theme.css        | 144 +--
 public/themes/lara-light-amber/theme.css      | 144 +--
 public/themes/lara-light-blue/theme.css       | 144 +--
 public/themes/lara-light-cyan/theme.css       | 144 +--
 public/themes/lara-light-green/theme.css      | 144 +--
 public/themes/lara-light-indigo/theme.css     | 144 +--
 public/themes/lara-light-pink/theme.css       | 144 +--
 public/themes/lara-light-teal/theme.css       | 144 +--
 public/themes/luna-amber/theme.css            | 124 +--
 public/themes/luna-blue/theme.css             | 124 +--
 public/themes/luna-green/theme.css            | 124 +--
 public/themes/luna-pink/theme.css             | 124 +--
 public/themes/md-dark-deeppurple/theme.css    | 220 ++--
 public/themes/md-dark-indigo/theme.css        | 220 ++--
 public/themes/md-light-deeppurple/theme.css   | 220 ++--
 public/themes/md-light-indigo/theme.css       | 220 ++--
 public/themes/mdc-dark-deeppurple/theme.css   | 220 ++--
 public/themes/mdc-dark-indigo/theme.css       | 220 ++--
 public/themes/mdc-light-deeppurple/theme.css  | 220 ++--
 public/themes/mdc-light-indigo/theme.css      | 220 ++--
 public/themes/mira/theme.css                  | 124 +--
 public/themes/nano/theme.css                  | 124 +--
 public/themes/nova-accent/theme.css           | 124 +--
 public/themes/nova-alt/theme.css              | 124 +--
 public/themes/nova/theme.css                  | 124 +--
 public/themes/rhea/theme.css                  | 124 +--
 public/themes/saga-blue/theme.css             | 124 +--
 public/themes/saga-green/theme.css            | 124 +--
 public/themes/saga-orange/theme.css           | 124 +--
 public/themes/soho-dark/theme.css             | 144 +--
 public/themes/soho-light/theme.css            | 144 +--
 public/themes/tailwind-light/theme.css        | 124 +--
 public/themes/vela-blue/theme.css             | 124 +--
 public/themes/vela-green/theme.css            | 124 +--
 public/themes/vela-orange/theme.css           | 124 +--
 public/themes/viva-dark/theme.css             | 146 +--
 public/themes/viva-light/theme.css            | 146 +--
 51 files changed, 5188 insertions(+), 3998 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 6b66aaa3e4..0d097df55a 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #78909c;
     border: 1px solid #78909c;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #69838f;
     color: #ffffff;
     border-color: #69838f;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a1b1ba;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #5d747f;
     color: #ffffff;
     border-color: #5d747f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #78909c;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #121212;
     background: #81d4fa;
     border: 1px solid #81d4fa;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #5dc8f9;
     color: #121212;
     border-color: #5dc8f9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a7e1fc;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #38bbf7;
     color: #121212;
     border-color: #38bbf7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #81d4fa;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #121212;
     background: #c5e1a5;
     border: 1px solid #c5e1a5;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #b2d788;
     color: #121212;
     border-color: #b2d788;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d6eac0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #9fce6b;
     color: #121212;
     border-color: #9fce6b;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #121212;
     background: #ffe082;
     border: 1px solid #ffe082;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd65c;
     color: #121212;
     border-color: #ffd65c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffe9a8;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffcd35;
     color: #121212;
     border-color: #ffcd35;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #c278ce;
     color: #121212;
     border-color: #c278ce;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ddb3e4;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #b65ec5;
     color: #121212;
     border-color: #b65ec5;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #121212;
     background: #f48fb1;
     border: 1px solid #f48fb1;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #f16c98;
     color: #121212;
     border-color: #f16c98;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f7b1c8;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #ed4980;
     color: #121212;
     border-color: #ed4980;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f48fb1;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #f48fb1;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #f48fb1;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 241a3de1d3..cd00aad3e1 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #78909c;
     border: 1px solid #78909c;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #69838f;
     color: #ffffff;
     border-color: #69838f;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a1b1ba;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #5d747f;
     color: #ffffff;
     border-color: #5d747f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #78909c;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #121212;
     background: #81d4fa;
     border: 1px solid #81d4fa;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #5dc8f9;
     color: #121212;
     border-color: #5dc8f9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a7e1fc;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #38bbf7;
     color: #121212;
     border-color: #38bbf7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #81d4fa;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #121212;
     background: #c5e1a5;
     border: 1px solid #c5e1a5;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #b2d788;
     color: #121212;
     border-color: #b2d788;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d6eac0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #9fce6b;
     color: #121212;
     border-color: #9fce6b;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #121212;
     background: #ffe082;
     border: 1px solid #ffe082;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd65c;
     color: #121212;
     border-color: #ffd65c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffe9a8;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffcd35;
     color: #121212;
     border-color: #ffcd35;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #c278ce;
     color: #121212;
     border-color: #c278ce;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ddb3e4;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #b65ec5;
     color: #121212;
     border-color: #b65ec5;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #121212;
     background: #f48fb1;
     border: 1px solid #f48fb1;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #f16c98;
     color: #121212;
     border-color: #f16c98;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f7b1c8;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #ed4980;
     color: #121212;
     border-color: #ed4980;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f48fb1;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #f48fb1;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #f48fb1;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 501398ec7a..de400d03da 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #78909c;
     border: 1px solid #78909c;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #69838f;
     color: #ffffff;
     border-color: #69838f;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a1b1ba;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #5d747f;
     color: #ffffff;
     border-color: #5d747f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #78909c;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #121212;
     background: #81d4fa;
     border: 1px solid #81d4fa;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #5dc8f9;
     color: #121212;
     border-color: #5dc8f9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a7e1fc;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #38bbf7;
     color: #121212;
     border-color: #38bbf7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #81d4fa;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #121212;
     background: #c5e1a5;
     border: 1px solid #c5e1a5;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #b2d788;
     color: #121212;
     border-color: #b2d788;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d6eac0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #9fce6b;
     color: #121212;
     border-color: #9fce6b;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #121212;
     background: #ffe082;
     border: 1px solid #ffe082;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd65c;
     color: #121212;
     border-color: #ffd65c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffe9a8;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffcd35;
     color: #121212;
     border-color: #ffcd35;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #c278ce;
     color: #121212;
     border-color: #c278ce;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ddb3e4;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #b65ec5;
     color: #121212;
     border-color: #b65ec5;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #121212;
     background: #f48fb1;
     border: 1px solid #f48fb1;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #f16c98;
     color: #121212;
     border-color: #f16c98;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f7b1c8;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #ed4980;
     color: #121212;
     border-color: #ed4980;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f48fb1;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #f48fb1;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #f48fb1;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 943d193453..ece99f85e1 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2400,344 +2400,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #6c757d;
     border: 1px solid #6c757d;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #5a6268;
     color: #ffffff;
     border-color: #5a6268;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #545b62;
     color: #ffffff;
     border-color: #4e555b;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #6c757d;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #151515;
     background: #7fd8e6;
     border: 1px solid #4cc8db;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #4cc8db;
     color: #151515;
     border-color: #26bdd3;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b1e8f0;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #26bdd3;
     color: #151515;
     border-color: #00b2cc;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #7fd8e6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(127, 216, 230, 0.04);
     color: #7fd8e6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(127, 216, 230, 0.16);
     color: #7fd8e6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #7fd8e6;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(127, 216, 230, 0.04);
     border-color: transparent;
     color: #7fd8e6;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(127, 216, 230, 0.16);
     border-color: transparent;
     color: #7fd8e6;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #151515;
     background: #9fdaa8;
     border: 1px solid #78cc86;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #78cc86;
     color: #151515;
     border-color: #5ac06c;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #c5e8ca;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #5ac06c;
     color: #151515;
     border-color: #3cb553;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #9fdaa8;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(159, 218, 168, 0.04);
     color: #9fdaa8;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(159, 218, 168, 0.16);
     color: #9fdaa8;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #9fdaa8;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(159, 218, 168, 0.04);
     border-color: transparent;
     color: #9fdaa8;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(159, 218, 168, 0.16);
     border-color: transparent;
     color: #9fdaa8;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #151515;
     background: #ffe082;
     border: 1px solid #ffd54f;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd54f;
     color: #151515;
     border-color: #ffca28;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffecb3;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffca28;
     color: #151515;
     border-color: #ffc107;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #151515;
     background: #b7a2e0;
     border: 1px solid #9a7cd4;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9a7cd4;
     color: #151515;
     border-color: #845fca;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3c7ec;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #845fca;
     color: #151515;
     border-color: #6d43c0;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #b7a2e0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(183, 162, 224, 0.04);
     color: #b7a2e0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(183, 162, 224, 0.16);
     color: #b7a2e0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #b7a2e0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(183, 162, 224, 0.04);
     border-color: transparent;
     color: #b7a2e0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(183, 162, 224, 0.16);
     border-color: transparent;
     color: #b7a2e0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #151515;
     background: #f19ea6;
     border: 1px solid #e97984;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #e97984;
     color: #151515;
     border-color: #f75965;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffd0d9;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #f75965;
     color: #151515;
     border-color: #fd464e;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f19ea6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(241, 158, 166, 0.04);
     color: #f19ea6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(241, 158, 166, 0.16);
     color: #f19ea6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f19ea6;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(241, 158, 166, 0.04);
     border-color: transparent;
     color: #f19ea6;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(241, 158, 166, 0.16);
     border-color: transparent;
     color: #f19ea6;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #20262e;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #d2d4d5;
     color: #20262e;
     border-color: #d2d4d5;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #bcbec0;
     color: #20262e;
     border-color: #bcbec0;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 73ca072706..274cc1be41 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -722,8 +722,56 @@
     background-color: #3f4b5b;
   }
   .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #3f4b5b;
+    background: #20262e;
     width: 20px;
     height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #151515;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
   }
   .p-checkbox .p-checkbox-box {
     border: 1px solid #3f4b5b;
@@ -733,6 +781,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 4px;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.15s;
@@ -743,67 +792,143 @@
     width: 14px;
     height: 14px;
   }
-  .p-checkbox .p-checkbox-box.p-highlight {
+  .p-checkbox.p-highlight .p-checkbox-box {
     border-color: #c298d8;
     background: #c298d8;
   }
-  .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #3f4b5b;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     border-color: #9954bb;
     background: #9954bb;
     color: #151515;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    border-color: #3f4b5b;
-  }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #f0e6f5;
     border-color: #c298d8;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-    border-color: #9954bb;
-    background: #9954bb;
-    color: #151515;
-  }
   .p-checkbox.p-invalid > .p-checkbox-box {
     border-color: #f19ea6;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #c298d8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9954bb;
+  }
   .p-input-filled .p-checkbox .p-checkbox-box {
     background-color: #3f4b5b;
   }
-  .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #c298d8;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
     background-color: #3f4b5b;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9954bb;
   }
   .p-highlight .p-checkbox .p-checkbox-box {
     border-color: #151515;
   }
-  .p-chips .p-chips-multiple-container {
-    padding: 0.25rem 0.75rem;
-    gap: 0.5rem;
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #c298d8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9954bb;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #3f4b5b;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #f0e6f5;
     border-color: #c298d8;
   }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
-    background: #c298d8;
+    background: #3f4b5b;
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #4c5866;
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
     margin-left: 0.5rem;
   }
@@ -836,11 +961,90 @@
   .p-colorpicker-overlay-panel {
     box-shadow: none;
   }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
   .p-dropdown {
     background: #20262e;
     border: 1px solid #3f4b5b;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-dropdown:not(.p-disabled):hover {
     border-color: #3f4b5b;
@@ -851,6 +1055,18 @@
     box-shadow: 0 0 0 1px #f0e6f5;
     border-color: #c298d8;
   }
+  .p-dropdown.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
   .p-dropdown.p-dropdown-clearable .p-dropdown-label {
     padding-right: 1.75rem;
   }
@@ -861,7 +1077,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -903,13 +1119,6 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
-    padding-right: 3.5rem;
-    margin-right: -3.5rem;
-  }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
-    right: 2.5rem;
-  }
   .p-dropdown-panel .p-dropdown-items {
     padding: 0.5rem 0;
   }
@@ -922,14 +1131,28 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
     color: #151515;
     background: #c298d8;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .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: rgba(255, 255, 255, 0.04);
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
     padding: 0.75rem 1rem;
@@ -942,18 +1165,6 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
-  .p-input-filled .p-dropdown {
-    background: #3f4b5b;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: #3f4b5b;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-    background-color: #3f4b5b;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-    background-color: transparent;
-  }
   .p-inputgroup-addon {
     background: #2a323d;
     color: rgba(255, 255, 255, 0.6);
@@ -1020,14 +1231,50 @@
   .p-inputnumber.p-invalid.p-component > .p-inputtext {
     border-color: #f19ea6;
   }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
   .p-inputswitch {
     width: 3rem;
     height: 1.75rem;
   }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 4px;
+  }
   .p-inputswitch .p-inputswitch-slider {
     background: #3f4b5b;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputswitch .p-inputswitch-slider:before {
     background: rgba(255, 255, 255, 0.6);
@@ -1038,27 +1285,25 @@
     border-radius: 4px;
     transition-duration: 0.15s;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    transform: translateX(1.25rem);
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #c298d8;
   }
-  .p-inputswitch.p-focus .p-inputswitch-slider {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #f0e6f5;
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #151515;
+    transform: translateX(1.25rem);
   }
-  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
     background: #3f4b5b;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: #c298d8;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    background: #151515;
-  }
-  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-    background: #c298d8;
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
   }
-  .p-inputswitch.p-invalid .p-inputswitch-slider {
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
     border-color: #f19ea6;
   }
   .p-inputtext {
@@ -1122,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1151,11 +1405,60 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
   .p-listbox {
     background: #2a323d;
     color: rgba(255, 255, 255, 0.87);
     border: 1px solid #3f4b5b;
     border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem 1.5rem;
@@ -1175,6 +1478,7 @@
   }
   .p-listbox .p-listbox-list {
     padding: 0.5rem 0;
+    outline: 0 none;
   }
   .p-listbox .p-listbox-list .p-listbox-item {
     margin: 0;
@@ -1184,15 +1488,16 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
   .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
     color: #151515;
     background: #c298d8;
   }
-  .p-listbox .p-listbox-list .p-listbox-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
-  }
   .p-listbox .p-listbox-list .p-listbox-item-group {
     margin: 0;
     padding: 0.75rem 1rem;
@@ -1205,10 +1510,27 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
   .p-listbox.p-invalid {
     border-color: #f19ea6;
   }
@@ -1239,11 +1561,100 @@
     color: #151515;
     background: #c298d8;
   }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
   .p-multiselect {
     background: #20262e;
     border: 1px solid #3f4b5b;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-multiselect:not(.p-disabled):hover {
     border-color: #3f4b5b;
@@ -1254,8 +1665,14 @@
     box-shadow: 0 0 0 1px #f0e6f5;
     border-color: #c298d8;
   }
-  .p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
+  .p-multiselect.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.5rem 0.75rem;
@@ -1281,22 +1698,12 @@
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
-  .p-multiselect .p-multiselect-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 2.357rem;
-  }
   .p-multiselect.p-invalid.p-component {
     border-color: #f19ea6;
   }
   .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.25rem 0.75rem;
   }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
-    padding: 0.5rem 0.75rem;
-  }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
-  }
   .p-multiselect-panel {
     background: #2a323d;
     color: rgba(255, 255, 255, 0.87);
@@ -1313,9 +1720,6 @@
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-    margin: 0 0.5rem;
-  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
     padding-right: 1.75rem;
   }
@@ -1323,7 +1727,11 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5rem;
+  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    margin-left: 0.5rem;
     width: 2rem;
     height: 2rem;
     color: rgba(255, 255, 255, 0.6);
@@ -1354,19 +1762,23 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
     color: #151515;
     background: #c298d8;
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .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: rgba(255, 255, 255, 0.04);
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
-  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
   }
@@ -1382,15 +1794,6 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
-  .p-input-filled .p-multiselect {
-    background: #3f4b5b;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: #3f4b5b;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-    background-color: #3f4b5b;
-  }
   .p-password.p-invalid.p-component > .p-inputtext {
     border-color: #f19ea6;
   }
@@ -1415,10 +1818,50 @@
   .p-password-panel .p-password-meter .p-password-strength.strong {
     background: #9fdaa8;
   }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
   .p-radiobutton {
     width: 20px;
     height: 20px;
   }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #3f4b5b;
+    border-radius: 50%;
+  }
   .p-radiobutton .p-radiobutton-box {
     border: 1px solid #3f4b5b;
     background: #20262e;
@@ -1427,15 +1870,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 50%;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-    border-color: #3f4b5b;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #f0e6f5;
-    border-color: #c298d8;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
     width: 12px;
@@ -1443,31 +1878,51 @@
     transition-duration: 0.15s;
     background-color: #151515;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-radiobutton.p-highlight .p-radiobutton-box {
     border-color: #c298d8;
     background: #c298d8;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #3f4b5b;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     border-color: #9954bb;
     background: #9954bb;
-    color: #151515;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #151515;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
   }
   .p-radiobutton.p-invalid > .p-radiobutton-box {
     border-color: #f19ea6;
   }
-  .p-radiobutton:focus {
-    outline: 0 none;
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #3f4b5b;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box {
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #c298d8;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
     background-color: #3f4b5b;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #9954bb;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
     background-color: #3f4b5b;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #c298d8;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #9954bb;
   }
   .p-highlight .p-radiobutton .p-radiobutton-box {
@@ -1718,44 +2173,78 @@
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
     background-color: #3f4b5b;
   }
-  .p-togglebutton.p-button {
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #6c757d;
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
     background: #6c757d;
     border: 1px solid #6c757d;
     color: #ffffff;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
   }
-  .p-togglebutton.p-button .p-button-icon-left,
-  .p-togglebutton.p-button .p-button-icon-right {
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
     color: #ffffff;
   }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
-    background: #5a6268;
-    border-color: #545b62;
+  .p-togglebutton.p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
     color: #ffffff;
   }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight {
-    background: #545b62;
-    border-color: #4e555b;
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #5a6268;
+    border-color: #545b62;
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight .p-button-icon-right {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight:hover {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
     background: #545b62;
     border-color: #4e555b;
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
+  .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: #ffffff;
   }
-  .p-togglebutton.p-button.p-invalid > .p-button {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-togglebutton.p-invalid > .p-button {
     border-color: #f19ea6;
   }
   .p-button {
@@ -1911,300 +2400,348 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #6c757d;
     border: 1px solid #6c757d;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #5a6268;
     color: #ffffff;
     border-color: #5a6268;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #545b62;
     color: #ffffff;
     border-color: #4e555b;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #6c757d;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #151515;
     background: #7fd8e6;
     border: 1px solid #4cc8db;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #4cc8db;
     color: #151515;
     border-color: #26bdd3;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b1e8f0;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #26bdd3;
     color: #151515;
     border-color: #00b2cc;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #7fd8e6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(127, 216, 230, 0.04);
     color: #7fd8e6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(127, 216, 230, 0.16);
     color: #7fd8e6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #7fd8e6;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(127, 216, 230, 0.04);
     border-color: transparent;
     color: #7fd8e6;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(127, 216, 230, 0.16);
     border-color: transparent;
     color: #7fd8e6;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #151515;
     background: #9fdaa8;
     border: 1px solid #78cc86;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #78cc86;
     color: #151515;
     border-color: #5ac06c;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #c5e8ca;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #5ac06c;
     color: #151515;
     border-color: #3cb553;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #9fdaa8;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(159, 218, 168, 0.04);
     color: #9fdaa8;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(159, 218, 168, 0.16);
     color: #9fdaa8;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #9fdaa8;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(159, 218, 168, 0.04);
     border-color: transparent;
     color: #9fdaa8;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(159, 218, 168, 0.16);
     border-color: transparent;
     color: #9fdaa8;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #151515;
     background: #ffe082;
     border: 1px solid #ffd54f;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd54f;
     color: #151515;
     border-color: #ffca28;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffecb3;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffca28;
     color: #151515;
     border-color: #ffc107;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #151515;
     background: #b7a2e0;
     border: 1px solid #9a7cd4;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9a7cd4;
     color: #151515;
     border-color: #845fca;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3c7ec;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #845fca;
     color: #151515;
     border-color: #6d43c0;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #b7a2e0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(183, 162, 224, 0.04);
     color: #b7a2e0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(183, 162, 224, 0.16);
     color: #b7a2e0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #b7a2e0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(183, 162, 224, 0.04);
     border-color: transparent;
     color: #b7a2e0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(183, 162, 224, 0.16);
     border-color: transparent;
     color: #b7a2e0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #151515;
     background: #f19ea6;
     border: 1px solid #e97984;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #e97984;
     color: #151515;
     border-color: #f75965;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffd0d9;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #f75965;
     color: #151515;
     border-color: #fd464e;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f19ea6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(241, 158, 166, 0.04);
     color: #f19ea6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(241, 158, 166, 0.16);
     color: #f19ea6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f19ea6;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(241, 158, 166, 0.04);
     border-color: transparent;
     color: #f19ea6;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(241, 158, 166, 0.16);
     border-color: transparent;
     color: #f19ea6;
   }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #20262e;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d2d4d5;
+    color: #20262e;
+    border-color: #d2d4d5;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #bcbec0;
+    color: #20262e;
+    border-color: #bcbec0;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #c298d8;
     background: transparent;
@@ -5982,6 +6519,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #f0e6f5;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #c298d8;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #c298d8;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 1.5rem;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 07c9168182..569674e4c2 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2400,344 +2400,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #6c757d;
     border: 1px solid #6c757d;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #5a6268;
     color: #ffffff;
     border-color: #5a6268;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #545b62;
     color: #ffffff;
     border-color: #4e555b;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #6c757d;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #17a2b8;
     border: 1px solid #17a2b8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #138496;
     color: #ffffff;
     border-color: #117a8b;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #138496;
     color: #ffffff;
     border-color: #117a8b;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #17a2b8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(23, 162, 184, 0.04);
     color: #17a2b8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(23, 162, 184, 0.16);
     color: #17a2b8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #17a2b8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(23, 162, 184, 0.04);
     border-color: transparent;
     color: #17a2b8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(23, 162, 184, 0.16);
     border-color: transparent;
     color: #17a2b8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #28a745;
     border: 1px solid #28a745;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #218838;
     color: #ffffff;
     border-color: #1e7e34;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #1e7e34;
     color: #ffffff;
     border-color: #1c7430;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #28a745;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(40, 167, 69, 0.04);
     color: #28a745;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(40, 167, 69, 0.16);
     color: #28a745;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #28a745;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(40, 167, 69, 0.04);
     border-color: transparent;
     color: #28a745;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(40, 167, 69, 0.16);
     border-color: transparent;
     color: #28a745;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #ffc107;
     border: 1px solid #ffc107;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #e0a800;
     color: #212529;
     border-color: #d39e00;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #d39e00;
     color: #212529;
     border-color: #c69500;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffc107;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 193, 7, 0.04);
     color: #ffc107;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 193, 7, 0.16);
     color: #ffc107;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffc107;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 193, 7, 0.04);
     border-color: transparent;
     color: #ffc107;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 193, 7, 0.16);
     border-color: transparent;
     color: #ffc107;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #6f42c1;
     border: 1px solid #6f42c1;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #633bad;
     color: #ffffff;
     border-color: #58349a;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #d3c6ec;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #58349a;
     color: #ffffff;
     border-color: #4d2e87;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #6f42c1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(111, 66, 193, 0.04);
     color: #6f42c1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(111, 66, 193, 0.16);
     color: #6f42c1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #6f42c1;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(111, 66, 193, 0.04);
     border-color: transparent;
     color: #6f42c1;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(111, 66, 193, 0.16);
     border-color: transparent;
     color: #6f42c1;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #dc3545;
     border: 1px solid #dc3545;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c82333;
     color: #ffffff;
     border-color: #bd2130;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #bd2130;
     color: #ffffff;
     border-color: #b21f2d;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #dc3545;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(220, 53, 69, 0.04);
     color: #dc3545;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(220, 53, 69, 0.16);
     color: #dc3545;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #dc3545;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(220, 53, 69, 0.04);
     border-color: transparent;
     color: #dc3545;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(220, 53, 69, 0.16);
     border-color: transparent;
     color: #dc3545;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #212529;
     border: 1px solid #212529;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #343a40;
     color: #ffffff;
     border-color: #343a40;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #495057;
     color: #ffffff;
     border-color: #495057;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #212529;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 37, 41, 0.04);
     color: #212529;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(33, 37, 41, 0.16);
     color: #212529;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(33, 37, 41, 0.04);
     border-color: transparent;
     color: #212529;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(33, 37, 41, 0.16);
     border-color: transparent;
     color: #212529;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 5eac14ec25..4eac467e11 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -721,10 +721,39 @@
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
     background-color: #efefef;
   }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .p-checkbox {
     width: 20px;
     height: 20px;
   }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #ced4da;
+    border-radius: 4px;
+  }
   .p-checkbox .p-checkbox-box {
     border: 2px solid #ced4da;
     background: #ffffff;
@@ -733,6 +762,7 @@
     color: #212529;
     border-radius: 4px;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.15s;
@@ -743,67 +773,162 @@
     width: 14px;
     height: 14px;
   }
-  .p-checkbox .p-checkbox-box.p-highlight {
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #212529;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
     border-color: #883cae;
     background: #883cae;
   }
-  .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ced4da;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     border-color: #68329e;
     background: #68329e;
     color: #ffffff;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    border-color: #ced4da;
-  }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
     border-color: #883cae;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-    border-color: #68329e;
-    background: #68329e;
-    color: #ffffff;
-  }
   .p-checkbox.p-invalid > .p-checkbox-box {
     border-color: #dc3545;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #883cae;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #68329e;
+  }
   .p-input-filled .p-checkbox .p-checkbox-box {
     background-color: #efefef;
   }
-  .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #883cae;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
     background-color: #efefef;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #68329e;
   }
   .p-highlight .p-checkbox .p-checkbox-box {
     border-color: #ffffff;
   }
-  .p-chips .p-chips-multiple-container {
-    padding: 0.25rem 0.75rem;
-    gap: 0.5rem;
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #883cae;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #68329e;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #ced4da;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
     border-color: #883cae;
   }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
-    background: #883cae;
+    background: #dee2e6;
     color: #212529;
     border-radius: 16px;
   }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #ced4da;
+    color: #212529;
+  }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
     margin-left: 0.5rem;
   }
@@ -836,11 +961,90 @@
   .p-colorpicker-overlay-panel {
     box-shadow: none;
   }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
   .p-dropdown {
     background: #ffffff;
     border: 1px solid #ced4da;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-dropdown:not(.p-disabled):hover {
     border-color: #ced4da;
@@ -851,6 +1055,18 @@
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
     border-color: #883cae;
   }
+  .p-dropdown.p-variant-filled {
+    background: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
   .p-dropdown.p-dropdown-clearable .p-dropdown-label {
     padding-right: 1.75rem;
   }
@@ -861,7 +1077,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -903,13 +1119,6 @@
     right: 0.75rem;
     color: #495057;
   }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
-    padding-right: 3.5rem;
-    margin-right: -3.5rem;
-  }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
-    right: 2.5rem;
-  }
   .p-dropdown-panel .p-dropdown-items {
     padding: 0.5rem 0;
   }
@@ -922,14 +1131,28 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
     color: #ffffff;
     background: #883cae;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #212529;
     background: #e9ecef;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
     padding: 0.75rem 1rem;
@@ -942,18 +1165,6 @@
     color: #212529;
     background: transparent;
   }
-  .p-input-filled .p-dropdown {
-    background: #efefef;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: #efefef;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-    background-color: #efefef;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-    background-color: transparent;
-  }
   .p-inputgroup-addon {
     background: #e9ecef;
     color: #495057;
@@ -1020,14 +1231,50 @@
   .p-inputnumber.p-invalid.p-component > .p-inputtext {
     border-color: #dc3545;
   }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
   .p-inputswitch {
     width: 3rem;
     height: 1.75rem;
   }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 4px;
+  }
   .p-inputswitch .p-inputswitch-slider {
     background: #ced4da;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputswitch .p-inputswitch-slider:before {
     background: #ffffff;
@@ -1038,27 +1285,25 @@
     border-radius: 4px;
     transition-duration: 0.15s;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    transform: translateX(1.25rem);
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #883cae;
   }
-  .p-inputswitch.p-focus .p-inputswitch-slider {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
   }
-  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
     background: #ced4da;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: #883cae;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    background: #ffffff;
-  }
-  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-    background: #883cae;
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   }
-  .p-inputswitch.p-invalid .p-inputswitch-slider {
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
     border-color: #dc3545;
   }
   .p-inputtext {
@@ -1122,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1151,11 +1405,60 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #495057;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
   .p-listbox {
     background: #ffffff;
     color: #212529;
     border: 1px solid #ced4da;
     border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem 1.5rem;
@@ -1175,6 +1478,7 @@
   }
   .p-listbox .p-listbox-list {
     padding: 0.5rem 0;
+    outline: 0 none;
   }
   .p-listbox .p-listbox-list .p-listbox-item {
     margin: 0;
@@ -1184,15 +1488,16 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
   .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
     color: #ffffff;
     background: #883cae;
   }
-  .p-listbox .p-listbox-list .p-listbox-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
-  }
   .p-listbox .p-listbox-list .p-listbox-item-group {
     margin: 0;
     padding: 0.75rem 1rem;
@@ -1205,10 +1510,27 @@
     color: #212529;
     background: transparent;
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: #212529;
     background: #e9ecef;
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
   .p-listbox.p-invalid {
     border-color: #dc3545;
   }
@@ -1239,11 +1561,100 @@
     color: #ffffff;
     background: #883cae;
   }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
   .p-multiselect {
     background: #ffffff;
     border: 1px solid #ced4da;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-multiselect:not(.p-disabled):hover {
     border-color: #ced4da;
@@ -1254,8 +1665,14 @@
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
     border-color: #883cae;
   }
-  .p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
+  .p-multiselect.p-variant-filled {
+    background: #efefef;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.5rem 0.75rem;
@@ -1281,22 +1698,12 @@
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
-  .p-multiselect .p-multiselect-clear-icon {
-    color: #495057;
-    right: 2.357rem;
-  }
   .p-multiselect.p-invalid.p-component {
     border-color: #dc3545;
   }
   .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.25rem 0.75rem;
   }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
-    padding: 0.5rem 0.75rem;
-  }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
-  }
   .p-multiselect-panel {
     background: #ffffff;
     color: #212529;
@@ -1313,9 +1720,6 @@
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-    margin: 0 0.5rem;
-  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
     padding-right: 1.75rem;
   }
@@ -1323,7 +1727,11 @@
     right: 0.75rem;
     color: #495057;
   }
+  .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5rem;
+  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    margin-left: 0.5rem;
     width: 2rem;
     height: 2rem;
     color: #6c757d;
@@ -1354,19 +1762,23 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
     color: #ffffff;
     background: #883cae;
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #212529;
     background: #e9ecef;
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
-  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
   }
@@ -1382,15 +1794,6 @@
     color: #212529;
     background: transparent;
   }
-  .p-input-filled .p-multiselect {
-    background: #efefef;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: #efefef;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-    background-color: #efefef;
-  }
   .p-password.p-invalid.p-component > .p-inputtext {
     border-color: #dc3545;
   }
@@ -1415,10 +1818,50 @@
   .p-password-panel .p-password-meter .p-password-strength.strong {
     background: #28a745;
   }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
   .p-radiobutton {
     width: 20px;
     height: 20px;
   }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #ced4da;
+    border-radius: 50%;
+  }
   .p-radiobutton .p-radiobutton-box {
     border: 2px solid #ced4da;
     background: #ffffff;
@@ -1427,15 +1870,7 @@
     color: #212529;
     border-radius: 50%;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-    border-color: #ced4da;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
-    border-color: #883cae;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
     width: 12px;
@@ -1443,31 +1878,51 @@
     transition-duration: 0.15s;
     background-color: #ffffff;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-radiobutton.p-highlight .p-radiobutton-box {
     border-color: #883cae;
     background: #883cae;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ced4da;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     border-color: #68329e;
     background: #68329e;
-    color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
   }
   .p-radiobutton.p-invalid > .p-radiobutton-box {
     border-color: #dc3545;
   }
-  .p-radiobutton:focus {
-    outline: 0 none;
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #efefef;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box {
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #883cae;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
     background-color: #efefef;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #68329e;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
     background-color: #efefef;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #883cae;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #68329e;
   }
   .p-highlight .p-radiobutton .p-radiobutton-box {
@@ -1718,44 +2173,78 @@
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
     background-color: #efefef;
   }
-  .p-togglebutton.p-button {
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #6c757d;
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
     background: #6c757d;
     border: 1px solid #6c757d;
     color: #ffffff;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
   }
-  .p-togglebutton.p-button .p-button-icon-left,
-  .p-togglebutton.p-button .p-button-icon-right {
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
     color: #ffffff;
   }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
-    background: #5a6268;
-    border-color: #545b62;
+  .p-togglebutton.p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
     color: #ffffff;
   }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight {
-    background: #545b62;
-    border-color: #4e555b;
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #5a6268;
+    border-color: #545b62;
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight .p-button-icon-right {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight:hover {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
     background: #545b62;
     border-color: #4e555b;
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
+  .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: #ffffff;
   }
-  .p-togglebutton.p-button.p-invalid > .p-button {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-togglebutton.p-invalid > .p-button {
     border-color: #dc3545;
   }
   .p-button {
@@ -1911,300 +2400,348 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #6c757d;
     border: 1px solid #6c757d;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #5a6268;
     color: #ffffff;
     border-color: #5a6268;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #545b62;
     color: #ffffff;
     border-color: #4e555b;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     color: #6c757d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #6c757d;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(108, 117, 125, 0.04);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(108, 117, 125, 0.16);
     border-color: transparent;
     color: #6c757d;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #17a2b8;
     border: 1px solid #17a2b8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #138496;
     color: #ffffff;
     border-color: #117a8b;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #138496;
     color: #ffffff;
     border-color: #117a8b;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #17a2b8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(23, 162, 184, 0.04);
     color: #17a2b8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(23, 162, 184, 0.16);
     color: #17a2b8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #17a2b8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(23, 162, 184, 0.04);
     border-color: transparent;
     color: #17a2b8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(23, 162, 184, 0.16);
     border-color: transparent;
     color: #17a2b8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #28a745;
     border: 1px solid #28a745;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #218838;
     color: #ffffff;
     border-color: #1e7e34;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #1e7e34;
     color: #ffffff;
     border-color: #1c7430;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #28a745;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(40, 167, 69, 0.04);
     color: #28a745;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(40, 167, 69, 0.16);
     color: #28a745;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #28a745;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(40, 167, 69, 0.04);
     border-color: transparent;
     color: #28a745;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(40, 167, 69, 0.16);
     border-color: transparent;
     color: #28a745;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #ffc107;
     border: 1px solid #ffc107;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #e0a800;
     color: #212529;
     border-color: #d39e00;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #d39e00;
     color: #212529;
     border-color: #c69500;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffc107;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 193, 7, 0.04);
     color: #ffc107;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 193, 7, 0.16);
     color: #ffc107;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffc107;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 193, 7, 0.04);
     border-color: transparent;
     color: #ffc107;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 193, 7, 0.16);
     border-color: transparent;
     color: #ffc107;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #6f42c1;
     border: 1px solid #6f42c1;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #633bad;
     color: #ffffff;
     border-color: #58349a;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #d3c6ec;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #58349a;
     color: #ffffff;
     border-color: #4d2e87;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #6f42c1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(111, 66, 193, 0.04);
     color: #6f42c1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(111, 66, 193, 0.16);
     color: #6f42c1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #6f42c1;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(111, 66, 193, 0.04);
     border-color: transparent;
     color: #6f42c1;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(111, 66, 193, 0.16);
     border-color: transparent;
     color: #6f42c1;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #dc3545;
     border: 1px solid #dc3545;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c82333;
     color: #ffffff;
     border-color: #bd2130;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #bd2130;
     color: #ffffff;
     border-color: #b21f2d;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #dc3545;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(220, 53, 69, 0.04);
     color: #dc3545;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(220, 53, 69, 0.16);
     color: #dc3545;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #dc3545;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(220, 53, 69, 0.04);
     border-color: transparent;
     color: #dc3545;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(220, 53, 69, 0.16);
     border-color: transparent;
     color: #dc3545;
   }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212529;
+    border: 1px solid #212529;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #343a40;
+    color: #ffffff;
+    border-color: #343a40;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #495057;
+    color: #ffffff;
+    border-color: #495057;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    border-color: transparent;
+    color: #212529;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    border-color: transparent;
+    color: #212529;
+  }
   .p-button.p-button-link {
     color: #883cae;
     background: transparent;
@@ -5982,6 +6519,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e9ecef;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #883cae;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #883cae;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 1.5rem;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index f112aad638..2508cabe9d 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #d45c00;
     border: 1px solid #d45c00;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #bf5300;
     color: #ffffff;
     border-color: #bf5300;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ffbc88;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #aa4a00;
     color: #ffffff;
     border-color: #aa4a00;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #d45c00;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(212, 92, 0, 0.04);
     color: #d45c00;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(212, 92, 0, 0.16);
     color: #d45c00;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #d45c00;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(212, 92, 0, 0.04);
     border-color: transparent;
     color: #d45c00;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(212, 92, 0, 0.16);
     border-color: transparent;
     color: #d45c00;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #00b7c3;
     border: 1px solid #00b7c3;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #00a5b0;
     color: #ffffff;
     border-color: #00a5b0;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #81f7ff;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #00929c;
     color: #ffffff;
     border-color: #00929c;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #00b7c3;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(0, 183, 195, 0.04);
     color: #00b7c3;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(0, 183, 195, 0.16);
     color: #00b7c3;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #00b7c3;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(0, 183, 195, 0.04);
     border-color: transparent;
     color: #00b7c3;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(0, 183, 195, 0.16);
     border-color: transparent;
     color: #00b7c3;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #498205;
     border: 1px solid #498205;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #427505;
     color: #ffffff;
     border-color: #427505;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #baf96f;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #3a6804;
     color: #ffffff;
     border-color: #3a6804;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #498205;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(73, 130, 5, 0.04);
     color: #498205;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(73, 130, 5, 0.16);
     color: #498205;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #498205;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(73, 130, 5, 0.04);
     border-color: transparent;
     color: #498205;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(73, 130, 5, 0.16);
     border-color: transparent;
     color: #498205;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #323130;
     background: #ffaa44;
     border: 1px solid #ffaa44;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ff9b24;
     color: #323130;
     border-color: #ff9b24;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ffddb4;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ff8d03;
     color: #323130;
     border-color: #ff8d03;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffaa44;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 170, 68, 0.04);
     color: #ffaa44;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 170, 68, 0.16);
     color: #ffaa44;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffaa44;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 170, 68, 0.04);
     border-color: transparent;
     color: #ffaa44;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 170, 68, 0.16);
     border-color: transparent;
     color: #ffaa44;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #8378de;
     border: 1px solid #8378de;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #6a5dd7;
     color: #ffffff;
     border-color: #6a5dd7;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #cdc9f2;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #5141d1;
     color: #ffffff;
     border-color: #5141d1;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #8378de;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(131, 120, 222, 0.04);
     color: #8378de;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(131, 120, 222, 0.16);
     color: #8378de;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #8378de;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(131, 120, 222, 0.04);
     border-color: transparent;
     color: #8378de;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(131, 120, 222, 0.16);
     border-color: transparent;
     color: #8378de;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d13438;
     border: 1px solid #d13438;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c02b2f;
     color: #ffffff;
     border-color: #c02b2f;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #edaeaf;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #aa272a;
     color: #ffffff;
     border-color: #aa272a;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d13438;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(209, 52, 56, 0.04);
     color: #d13438;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(209, 52, 56, 0.16);
     color: #d13438;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d13438;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(209, 52, 56, 0.04);
     border-color: transparent;
     color: #d13438;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(209, 52, 56, 0.16);
     border-color: transparent;
     color: #d13438;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 0149fc680c..0e23685c33 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #111827;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #f3f4f6;
     color: #111827;
     border-color: #f3f4f6;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #e5e7eb;
     color: #111827;
     border-color: #e5e7eb;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 1a0aca8bc4..f089065134 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #111827;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #f3f4f6;
     color: #111827;
     border-color: #f3f4f6;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #e5e7eb;
     color: #111827;
     border-color: #e5e7eb;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 0cc6d46caf..a2cb7701c0 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #111827;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #f3f4f6;
     color: #111827;
     border-color: #f3f4f6;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #e5e7eb;
     color: #111827;
     border-color: #e5e7eb;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index baa625cbce..49aa8d76ed 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #111827;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #f3f4f6;
     color: #111827;
     border-color: #f3f4f6;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #e5e7eb;
     color: #111827;
     border-color: #e5e7eb;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 0c7ed144b9..c2851ea9d8 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #111827;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #f3f4f6;
     color: #111827;
     border-color: #f3f4f6;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #e5e7eb;
     color: #111827;
     border-color: #e5e7eb;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 8f4705ed84..db3c11fa79 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #111827;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #f3f4f6;
     color: #111827;
     border-color: #f3f4f6;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #e5e7eb;
     color: #111827;
     border-color: #e5e7eb;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 35280f02a4..f2c4f24d22 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #111827;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #f3f4f6;
     color: #111827;
     border-color: #f3f4f6;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #e5e7eb;
     color: #111827;
     border-color: #e5e7eb;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index fe9451e887..50ee92463b 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #1f2937;
     border: 1px solid #1f2937;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #374151;
     color: #ffffff;
     border-color: #374151;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #4b5563;
     color: #ffffff;
     border-color: #4b5563;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #1f2937;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     border-color: transparent;
     color: #1f2937;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     border-color: transparent;
     color: #1f2937;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index baece88b80..0a43a820a5 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #1f2937;
     border: 1px solid #1f2937;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #374151;
     color: #ffffff;
     border-color: #374151;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #4b5563;
     color: #ffffff;
     border-color: #4b5563;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #1f2937;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     border-color: transparent;
     color: #1f2937;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     border-color: transparent;
     color: #1f2937;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 29cfaec965..ade85feffb 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #1f2937;
     border: 1px solid #1f2937;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #374151;
     color: #ffffff;
     border-color: #374151;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #4b5563;
     color: #ffffff;
     border-color: #4b5563;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #1f2937;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     border-color: transparent;
     color: #1f2937;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     border-color: transparent;
     color: #1f2937;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 8cafc7eb44..528164aad6 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #1f2937;
     border: 1px solid #1f2937;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #374151;
     color: #ffffff;
     border-color: #374151;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #4b5563;
     color: #ffffff;
     border-color: #4b5563;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #1f2937;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     border-color: transparent;
     color: #1f2937;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     border-color: transparent;
     color: #1f2937;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index a3ce1b5fef..f18ff876a7 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #1f2937;
     border: 1px solid #1f2937;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #374151;
     color: #ffffff;
     border-color: #374151;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #4b5563;
     color: #ffffff;
     border-color: #4b5563;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #1f2937;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     border-color: transparent;
     color: #1f2937;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     border-color: transparent;
     color: #1f2937;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 63d3d3c7e4..f684960e15 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #1f2937;
     border: 1px solid #1f2937;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #374151;
     color: #ffffff;
     border-color: #374151;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #4b5563;
     color: #ffffff;
     border-color: #4b5563;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #1f2937;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     border-color: transparent;
     color: #1f2937;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     border-color: transparent;
     color: #1f2937;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index c135d2f699..993ba9f78b 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -2408,344 +2408,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #1f2937;
     border: 1px solid #1f2937;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #374151;
     color: #ffffff;
     border-color: #374151;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #4b5563;
     color: #ffffff;
     border-color: #4b5563;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     color: #1f2937;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #1f2937;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(31, 41, 55, 0.04);
     border-color: transparent;
     color: #1f2937;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(31, 41, 55, 0.16);
     border-color: transparent;
     color: #1f2937;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index b3db63e517..230693fdf8 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2400,296 +2400,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #b0bec5;
     border: 1px solid #b0bec5;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #90a4ae;
     color: #121212;
     border-color: #90a4ae;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #cfd8dc;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #78909c;
     color: #121212;
     border-color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #b0bec5;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212529;
     background: #4fc3f7;
     border: 1px solid #4fc3f7;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #29b6f6;
     color: #212529;
     border-color: #29b6f6;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #e1f5fe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #03a9f4;
     color: #212529;
     border-color: #03a9f4;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #4fc3f7;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212529;
     background: #aed581;
     border: 1px solid #aed581;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #9ccc65;
     color: #212529;
     border-color: #9ccc65;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #f1f8e9;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #8bc34a;
     color: #212529;
     border-color: #8bc34a;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #aed581;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #ffb74d;
     border: 1px solid #ffb74d;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffa726;
     color: #212529;
     border-color: #ffa726;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #fffde7;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ff9800;
     color: #212529;
     border-color: #ff9800;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffb74d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #ba68c8;
     color: #121212;
     border-color: #ba68c8;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #ab47bc;
     color: #121212;
     border-color: #ab47bc;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212529;
     background: #e57373;
     border: 1px solid #e57373;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #ef5350;
     color: #212529;
     border-color: #ef5350;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #ffebee;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #f44336;
     color: #212529;
     border-color: #f44336;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e57373;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     border-color: transparent;
     color: #e57373;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     border-color: transparent;
     color: #e57373;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 003373d4a9..e8a7bfd8ed 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2400,296 +2400,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #b0bec5;
     border: 1px solid #b0bec5;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #90a4ae;
     color: #121212;
     border-color: #90a4ae;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #cfd8dc;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #78909c;
     color: #121212;
     border-color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #b0bec5;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212529;
     background: #4fc3f7;
     border: 1px solid #4fc3f7;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #29b6f6;
     color: #212529;
     border-color: #29b6f6;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #e1f5fe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #03a9f4;
     color: #212529;
     border-color: #03a9f4;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #4fc3f7;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212529;
     background: #aed581;
     border: 1px solid #aed581;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #9ccc65;
     color: #212529;
     border-color: #9ccc65;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #f1f8e9;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #8bc34a;
     color: #212529;
     border-color: #8bc34a;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #aed581;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #ffb74d;
     border: 1px solid #ffb74d;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffa726;
     color: #212529;
     border-color: #ffa726;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #fffde7;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ff9800;
     color: #212529;
     border-color: #ff9800;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffb74d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #ba68c8;
     color: #121212;
     border-color: #ba68c8;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #ab47bc;
     color: #121212;
     border-color: #ab47bc;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212529;
     background: #e57373;
     border: 1px solid #e57373;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #ef5350;
     color: #212529;
     border-color: #ef5350;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #ffebee;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #f44336;
     color: #212529;
     border-color: #f44336;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e57373;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     border-color: transparent;
     color: #e57373;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     border-color: transparent;
     color: #e57373;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 49a107a451..01b68a90d7 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2400,296 +2400,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #b0bec5;
     border: 1px solid #b0bec5;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #90a4ae;
     color: #121212;
     border-color: #90a4ae;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #cfd8dc;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #78909c;
     color: #121212;
     border-color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #b0bec5;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212529;
     background: #4fc3f7;
     border: 1px solid #4fc3f7;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #29b6f6;
     color: #212529;
     border-color: #29b6f6;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #e1f5fe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #03a9f4;
     color: #212529;
     border-color: #03a9f4;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #4fc3f7;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212529;
     background: #aed581;
     border: 1px solid #aed581;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #9ccc65;
     color: #212529;
     border-color: #9ccc65;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #f1f8e9;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #8bc34a;
     color: #212529;
     border-color: #8bc34a;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #aed581;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #ffb74d;
     border: 1px solid #ffb74d;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffa726;
     color: #212529;
     border-color: #ffa726;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #fffde7;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ff9800;
     color: #212529;
     border-color: #ff9800;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffb74d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #ba68c8;
     color: #121212;
     border-color: #ba68c8;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #ab47bc;
     color: #121212;
     border-color: #ab47bc;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212529;
     background: #e57373;
     border: 1px solid #e57373;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #ef5350;
     color: #212529;
     border-color: #ef5350;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #ffebee;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #f44336;
     color: #212529;
     border-color: #f44336;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e57373;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     border-color: transparent;
     color: #e57373;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     border-color: transparent;
     color: #e57373;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index dd83ac6696..f04367e6b3 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2400,296 +2400,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #b0bec5;
     border: 1px solid #b0bec5;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #90a4ae;
     color: #121212;
     border-color: #90a4ae;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #cfd8dc;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #78909c;
     color: #121212;
     border-color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     color: #b0bec5;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #b0bec5;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(176, 190, 197, 0.04);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(176, 190, 197, 0.16);
     border-color: transparent;
     color: #b0bec5;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212529;
     background: #4fc3f7;
     border: 1px solid #4fc3f7;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #29b6f6;
     color: #212529;
     border-color: #29b6f6;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #e1f5fe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #03a9f4;
     color: #212529;
     border-color: #03a9f4;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     color: #4fc3f7;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #4fc3f7;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(79, 195, 247, 0.04);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(79, 195, 247, 0.16);
     border-color: transparent;
     color: #4fc3f7;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212529;
     background: #aed581;
     border: 1px solid #aed581;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #9ccc65;
     color: #212529;
     border-color: #9ccc65;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #f1f8e9;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #8bc34a;
     color: #212529;
     border-color: #8bc34a;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     color: #aed581;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #aed581;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(174, 213, 129, 0.04);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(174, 213, 129, 0.16);
     border-color: transparent;
     color: #aed581;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #ffb74d;
     border: 1px solid #ffb74d;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffa726;
     color: #212529;
     border-color: #ffa726;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #fffde7;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ff9800;
     color: #212529;
     border-color: #ff9800;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     color: #ffb74d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffb74d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 183, 77, 0.04);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 183, 77, 0.16);
     border-color: transparent;
     color: #ffb74d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #ba68c8;
     color: #121212;
     border-color: #ba68c8;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #ab47bc;
     color: #121212;
     border-color: #ab47bc;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212529;
     background: #e57373;
     border: 1px solid #e57373;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #ef5350;
     color: #212529;
     border-color: #ef5350;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #ffebee;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #f44336;
     color: #212529;
     border-color: #f44336;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     color: #e57373;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e57373;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(229, 115, 115, 0.04);
     border-color: transparent;
     color: #e57373;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(229, 115, 115, 0.16);
     border-color: transparent;
     color: #e57373;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 608c877a0d..42d7722f4b 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(165, 214, 167, 0.92);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(165, 214, 167, 0.68);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(165, 214, 167, 0.04);
     color: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(165, 214, 167, 0.16);
     color: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #A5D6A7;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(165, 214, 167, 0.04);
     border-color: transparent;
     color: #A5D6A7;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(165, 214, 167, 0.16);
     border-color: transparent;
     color: #A5D6A7;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212121;
     background: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #90caf9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212121;
     background: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212121;
     background: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fff59d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #212121;
     background: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212121;
     background: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef9a9a;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #121212;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #d0d0d0;
     color: #121212;
     border-color: #d0d0d0;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #b8b8b8;
     color: #121212;
     border-color: #b8b8b8;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(165, 214, 167, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(165, 214, 167, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(165, 214, 167, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(165, 214, 167, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(165, 214, 167, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(239, 154, 154, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(255, 255, 255, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(255, 255, 255, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(255, 255, 255, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(255, 255, 255, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(255, 255, 255, 0.16);
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 7182658c35..0400aee557 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.92);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(244, 143, 177, 0.68);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #F48FB1;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #F48FB1;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #F48FB1;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212121;
     background: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #90caf9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212121;
     background: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212121;
     background: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fff59d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #212121;
     background: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212121;
     background: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef9a9a;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #121212;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #d0d0d0;
     color: #121212;
     border-color: #d0d0d0;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #b8b8b8;
     color: #121212;
     border-color: #b8b8b8;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(244, 143, 177, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(244, 143, 177, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(244, 143, 177, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(244, 143, 177, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(239, 154, 154, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(255, 255, 255, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(255, 255, 255, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(255, 255, 255, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(255, 255, 255, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(255, 255, 255, 0.16);
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index db4c8533f4..b4387c1153 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(76, 175, 80, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(76, 175, 80, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(76, 175, 80, 0.04);
     color: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(76, 175, 80, 0.16);
     color: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #4CAF50;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(76, 175, 80, 0.04);
     border-color: transparent;
     color: #4CAF50;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(76, 175, 80, 0.16);
     border-color: transparent;
     color: #4CAF50;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #2196f3;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #689f38;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.92);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fbc02d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d32f2f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #212121;
     border: 1px solid #212121;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #424242;
     color: #ffffff;
     border-color: #424242;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #616161;
     color: #ffffff;
     border-color: #616161;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     border-color: transparent;
     color: #212121;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     border-color: transparent;
     color: #212121;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(76, 175, 80, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(76, 175, 80, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(76, 175, 80, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(76, 175, 80, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(76, 175, 80, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(211, 47, 47, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(33, 33, 33, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(33, 33, 33, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(33, 33, 33, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(33, 33, 33, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(33, 33, 33, 0.16);
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 1440302113..f136901b87 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(255, 64, 129, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(255, 64, 129, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 64, 129, 0.04);
     color: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(255, 64, 129, 0.16);
     color: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #ff4081;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(255, 64, 129, 0.04);
     border-color: transparent;
     color: #ff4081;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(255, 64, 129, 0.16);
     border-color: transparent;
     color: #ff4081;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #2196f3;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #689f38;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.92);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fbc02d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d32f2f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #212121;
     border: 1px solid #212121;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #424242;
     color: #ffffff;
     border-color: #424242;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #616161;
     color: #ffffff;
     border-color: #616161;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     border-color: transparent;
     color: #212121;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     border-color: transparent;
     color: #212121;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(255, 64, 129, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(255, 64, 129, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(255, 64, 129, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(255, 64, 129, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(255, 64, 129, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(211, 47, 47, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(33, 33, 33, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(33, 33, 33, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(33, 33, 33, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(33, 33, 33, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(33, 33, 33, 0.16);
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 8a060caee6..60b3853301 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.25rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(165, 214, 167, 0.92);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(165, 214, 167, 0.68);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(165, 214, 167, 0.04);
     color: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(165, 214, 167, 0.16);
     color: #A5D6A7;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #A5D6A7;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(165, 214, 167, 0.04);
     border-color: transparent;
     color: #A5D6A7;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(165, 214, 167, 0.16);
     border-color: transparent;
     color: #A5D6A7;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212121;
     background: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #90caf9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212121;
     background: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212121;
     background: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fff59d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #212121;
     background: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212121;
     background: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef9a9a;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #121212;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #d0d0d0;
     color: #121212;
     border-color: #d0d0d0;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #b8b8b8;
     color: #121212;
     border-color: #b8b8b8;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(165, 214, 167, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(165, 214, 167, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(165, 214, 167, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(165, 214, 167, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(165, 214, 167, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(239, 154, 154, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(255, 255, 255, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(255, 255, 255, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(255, 255, 255, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(255, 255, 255, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(255, 255, 255, 0.16);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index a310e7fcd3..4c31fb3d01 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.25rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #121212;
     background: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.92);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(244, 143, 177, 0.68);
     color: #121212;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #F48FB1;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #F48FB1;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #F48FB1;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #F48FB1;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #212121;
     background: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     color: #90caf9;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #90caf9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(144, 202, 249, 0.04);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
     border-color: transparent;
     color: #90caf9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #212121;
     background: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212121;
     background: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     color: #fff59d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fff59d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 245, 157, 0.04);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
     border-color: transparent;
     color: #fff59d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #212121;
     background: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #212121;
     background: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.92);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     color: #ef9a9a;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef9a9a;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 154, 154, 0.04);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
     border-color: transparent;
     color: #ef9a9a;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #121212;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #d0d0d0;
     color: #121212;
     border-color: #d0d0d0;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #b8b8b8;
     color: #121212;
     border-color: #b8b8b8;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(244, 143, 177, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(244, 143, 177, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(244, 143, 177, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(244, 143, 177, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(144, 202, 249, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(144, 202, 249, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(144, 202, 249, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(197, 225, 165, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(197, 225, 165, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(197, 225, 165, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(255, 245, 157, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(255, 245, 157, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(255, 245, 157, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(206, 147, 216, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(206, 147, 216, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(206, 147, 216, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(239, 154, 154, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(239, 154, 154, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(239, 154, 154, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(255, 255, 255, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(255, 255, 255, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(255, 255, 255, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(255, 255, 255, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(255, 255, 255, 0.16);
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index cbd08b4dae..884b74f187 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.25rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(76, 175, 80, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(76, 175, 80, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(76, 175, 80, 0.04);
     color: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(76, 175, 80, 0.16);
     color: #4CAF50;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #4CAF50;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(76, 175, 80, 0.04);
     border-color: transparent;
     color: #4CAF50;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(76, 175, 80, 0.16);
     border-color: transparent;
     color: #4CAF50;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #2196f3;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #689f38;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.92);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fbc02d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d32f2f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #212121;
     border: 1px solid #212121;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #424242;
     color: #ffffff;
     border-color: #424242;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #616161;
     color: #ffffff;
     border-color: #616161;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     border-color: transparent;
     color: #212121;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     border-color: transparent;
     color: #212121;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(76, 175, 80, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(76, 175, 80, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(76, 175, 80, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(76, 175, 80, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(76, 175, 80, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(211, 47, 47, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(33, 33, 33, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(33, 33, 33, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(33, 33, 33, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(33, 33, 33, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(33, 33, 33, 0.16);
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 7029f746a3..a36d6b6fb7 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -2411,344 +2411,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.25rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: rgba(255, 64, 129, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(255, 64, 129, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 64, 129, 0.04);
     color: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(255, 64, 129, 0.16);
     color: #ff4081;
     border: 0 none;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #ff4081;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(255, 64, 129, 0.04);
     border-color: transparent;
     color: #ff4081;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(255, 64, 129, 0.16);
     border-color: transparent;
     color: #ff4081;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     color: #2196f3;
     border: 0 none;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #2196f3;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(33, 150, 243, 0.04);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
     border-color: transparent;
     color: #2196f3;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     color: #689f38;
     border: 0 none;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #689f38;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.92);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     color: #fbc02d;
     border: 0 none;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fbc02d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 0 none;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.92);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     color: #d32f2f;
     border: 0 none;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d32f2f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #212121;
     border: 1px solid #212121;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #424242;
     color: #ffffff;
     border-color: #424242;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #616161;
     color: #ffffff;
     border-color: #616161;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     color: #212121;
     border: 0 none;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #212121;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(33, 33, 33, 0.04);
     border-color: transparent;
     color: #212121;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(33, 33, 33, 0.16);
     border-color: transparent;
     color: #212121;
@@ -6850,123 +6850,123 @@
   .p-button.p-button-raised:not(:disabled):focus {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     background: rgba(255, 64, 129, 0.76);
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: rgba(255, 64, 129, 0.68);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
     background: rgba(255, 64, 129, 0.12);
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(255, 64, 129, 0.16);
   }
-  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
     background-color: rgba(255, 64, 129, 0.16);
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.76);
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: rgba(33, 150, 243, 0.68);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
     background: rgba(33, 150, 243, 0.12);
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
     background-color: rgba(33, 150, 243, 0.16);
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.76);
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: rgba(104, 159, 56, 0.68);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
     background: rgba(104, 159, 56, 0.12);
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
     background-color: rgba(104, 159, 56, 0.16);
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.76);
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: rgba(251, 192, 45, 0.68);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
     background: rgba(251, 192, 45, 0.12);
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
     background-color: rgba(251, 192, 45, 0.16);
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.76);
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: rgba(156, 39, 176, 0.68);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
     background: rgba(156, 39, 176, 0.12);
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
     background-color: rgba(156, 39, 176, 0.16);
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.76);
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: rgba(211, 47, 47, 0.68);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
     background: rgba(211, 47, 47, 0.12);
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
-  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
     background-color: rgba(211, 47, 47, 0.16);
   }
   .p-button.p-button-contrast:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
     background: rgba(33, 33, 33, 0.76);
   }
   .p-button.p-button-contrast:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button:enabled:active {
     background: rgba(33, 33, 33, 0.68);
   }
   .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
     background: rgba(33, 33, 33, 0.12);
   }
   .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
     background: rgba(33, 33, 33, 0.16);
   }
   .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink,
-  .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
   .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
     background-color: rgba(33, 33, 33, 0.16);
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index e2d536dcf9..472b144623 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -2413,296 +2413,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #4c566a;
     border: 2px solid #4c566a;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #707888;
     color: #ffffff;
     border-color: #4c566a;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #b3bac8;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #2e3440;
     color: #ffffff;
     border-color: #2e3440;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #4c566a;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(76, 86, 106, 0.12);
     color: #4c566a;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(76, 86, 106, 0.24);
     color: #4c566a;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #4c566a;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(76, 86, 106, 0.12);
     border-color: transparent;
     color: #4c566a;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(76, 86, 106, 0.24);
     border-color: transparent;
     color: #4c566a;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #639bb2;
     border: 2px solid #639bb2;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #88c0d0;
     color: #ffffff;
     border-color: #639bb2;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #c1d7e0;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #497e94;
     color: #ffffff;
     border-color: #497e94;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #639bb2;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(99, 155, 178, 0.12);
     color: #639bb2;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(99, 155, 178, 0.24);
     color: #639bb2;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #639bb2;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(99, 155, 178, 0.12);
     border-color: transparent;
     color: #639bb2;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(99, 155, 178, 0.24);
     border-color: transparent;
     color: #639bb2;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #7fa366;
     border: 2px solid #7fa366;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #a3be8c;
     color: #ffffff;
     border-color: #7fa366;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ccdac2;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #658450;
     color: #ffffff;
     border-color: #658450;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #7fa366;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(127, 163, 102, 0.12);
     color: #7fa366;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(127, 163, 102, 0.24);
     color: #7fa366;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #7fa366;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(127, 163, 102, 0.12);
     border-color: transparent;
     color: #7fa366;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(127, 163, 102, 0.24);
     border-color: transparent;
     color: #7fa366;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #d08770;
     border: 2px solid #d08770;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #e2ac94;
     color: #ffffff;
     border-color: #d08770;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #eccfc6;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c05f40;
     color: #ffffff;
     border-color: #c05f40;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #d08770;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(208, 135, 112, 0.12);
     color: #d08770;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(208, 135, 112, 0.24);
     color: #d08770;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #d08770;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(208, 135, 112, 0.12);
     border-color: transparent;
     color: #d08770;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(208, 135, 112, 0.24);
     border-color: transparent;
     color: #d08770;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9a6796;
     border: 2px solid #9a6796;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #b48ead;
     color: #ffffff;
     border-color: #9a6796;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #d7c2d5;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7c5278;
     color: #ffffff;
     border-color: #7c5278;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9a6796;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(154, 103, 150, 0.12);
     color: #9a6796;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(154, 103, 150, 0.24);
     color: #9a6796;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9a6796;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(154, 103, 150, 0.12);
     border-color: transparent;
     color: #9a6796;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(154, 103, 150, 0.24);
     border-color: transparent;
     color: #9a6796;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #bf616a;
     border: 2px solid #bf616a;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #d88889;
     color: #ffffff;
     border-color: #bf616a;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e5c0c3;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #a4424c;
     color: #ffffff;
     border-color: #a4424c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #bf616a;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(191, 97, 106, 0.12);
     color: #bf616a;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(191, 97, 106, 0.24);
     color: #bf616a;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #bf616a;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(191, 97, 106, 0.12);
     border-color: transparent;
     color: #bf616a;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(191, 97, 106, 0.24);
     border-color: transparent;
     color: #bf616a;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index c1267ceba3..8baf87c0c3 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #697077;
     border: 1px solid #697077;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #5f656b;
     color: #ffffff;
     border-color: #5f656b;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #c2c6c9;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #545a5f;
     color: #ffffff;
     border-color: #545a5f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #697077;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(105, 112, 119, 0.04);
     color: #697077;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(105, 112, 119, 0.16);
     color: #697077;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #697077;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(105, 112, 119, 0.04);
     border-color: transparent;
     color: #697077;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(105, 112, 119, 0.16);
     border-color: transparent;
     color: #697077;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #107d79;
     border: 1px solid #107d79;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0e716d;
     color: #ffffff;
     border-color: #0e716d;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #7ceeea;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0d6461;
     color: #ffffff;
     border-color: #0d6461;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #107d79;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(16, 125, 121, 0.04);
     color: #107d79;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(16, 125, 121, 0.16);
     color: #107d79;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #107d79;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(16, 125, 121, 0.04);
     border-color: transparent;
     color: #107d79;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(16, 125, 121, 0.16);
     border-color: transparent;
     color: #107d79;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #207f3b;
     border: 1px solid #207f3b;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #1d7235;
     color: #ffffff;
     border-color: #1d7235;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #8fe3a7;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #1a662f;
     color: #ffffff;
     border-color: #1a662f;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #207f3b;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(32, 127, 59, 0.04);
     color: #207f3b;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(32, 127, 59, 0.16);
     color: #207f3b;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #207f3b;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(32, 127, 59, 0.04);
     border-color: transparent;
     color: #207f3b;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(32, 127, 59, 0.16);
     border-color: transparent;
     color: #207f3b;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #f0c135;
     border: 1px solid #f0c135;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #eeb91a;
     color: #212529;
     border-color: #eeb91a;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f9e6ae;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #daa710;
     color: #212529;
     border-color: #daa710;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f0c135;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(240, 193, 53, 0.04);
     color: #f0c135;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(240, 193, 53, 0.16);
     color: #f0c135;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f0c135;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(240, 193, 53, 0.04);
     border-color: transparent;
     color: #f0c135;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(240, 193, 53, 0.16);
     border-color: transparent;
     color: #f0c135;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #8949f8;
     border: 1px solid #8949f8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #752af7;
     color: #ffffff;
     border-color: #752af7;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #d0b6fc;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #610bf6;
     color: #ffffff;
     border-color: #610bf6;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #8949f8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(137, 73, 248, 0.04);
     color: #8949f8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(137, 73, 248, 0.16);
     color: #8949f8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #8949f8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(137, 73, 248, 0.04);
     border-color: transparent;
     color: #8949f8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(137, 73, 248, 0.16);
     border-color: transparent;
     color: #8949f8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d8222f;
     border: 1px solid #d8222f;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c21f2a;
     color: #ffffff;
     border-color: #c21f2a;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f1a5ab;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #ad1b26;
     color: #ffffff;
     border-color: #ad1b26;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d8222f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(216, 34, 47, 0.04);
     color: #d8222f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(216, 34, 47, 0.16);
     color: #d8222f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d8222f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(216, 34, 47, 0.04);
     border-color: transparent;
     color: #d8222f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(216, 34, 47, 0.16);
     border-color: transparent;
     color: #d8222f;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index db77063198..b804fa3141 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #607d8b;
     border: 1px solid #607d8b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #546e7a;
     color: #ffffff;
     border-color: #546e7a;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #b0bec5;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #455a64;
     color: #ffffff;
     border-color: #455a64;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #607d8b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #007ad9;
     border: 1px solid #007ad9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #116fbf;
     color: #ffffff;
     border-color: #116fbf;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #005b9f;
     color: #ffffff;
     border-color: #005b9f;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(0, 122, 217, 0.04);
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(0, 122, 217, 0.16);
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #007ad9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(0, 122, 217, 0.04);
     border-color: transparent;
     color: #007ad9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(0, 122, 217, 0.16);
     border-color: transparent;
     color: #007ad9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #34a835;
     border: 1px solid #34a835;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #107d11;
     color: #ffffff;
     border-color: #107d11;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #aae5aa;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #0c6b0d;
     color: #ffffff;
     border-color: #0c6b0d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(52, 168, 53, 0.04);
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(52, 168, 53, 0.16);
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #34a835;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(52, 168, 53, 0.04);
     border-color: transparent;
     color: #34a835;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(52, 168, 53, 0.16);
     border-color: transparent;
     color: #34a835;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #333333;
     background: #ffba01;
     border: 1px solid #ffba01;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ed990b;
     color: #333333;
     border-color: #ed990b;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ffeab4;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #d38b10;
     color: #333333;
     border-color: #d38b10;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 186, 1, 0.04);
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 186, 1, 0.16);
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffba01;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 186, 1, 0.04);
     border-color: transparent;
     color: #ffba01;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 186, 1, 0.16);
     border-color: transparent;
     color: #ffba01;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 1px solid #9c27b0;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #8e24aa;
     color: #ffffff;
     border-color: #8e24aa;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7b1fa2;
     color: #ffffff;
     border-color: #7b1fa2;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #e91224;
     border: 1px solid #e91224;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c01120;
     color: #ffffff;
     border-color: #c01120;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f9b4ba;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #a90000;
     color: #ffffff;
     border-color: #a90000;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(233, 18, 36, 0.04);
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(233, 18, 36, 0.16);
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e91224;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(233, 18, 36, 0.04);
     border-color: transparent;
     color: #e91224;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(233, 18, 36, 0.16);
     border-color: transparent;
     color: #e91224;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 95cae540b6..9fb0fb3bd1 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -2400,296 +2400,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #607d8b;
     border: 1px solid #607d8b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #546e7a;
     color: #ffffff;
     border-color: #546e7a;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #b0bec5;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #455a64;
     color: #ffffff;
     border-color: #455a64;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #607d8b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #007ad9;
     border: 1px solid #007ad9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #116fbf;
     color: #ffffff;
     border-color: #116fbf;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #005b9f;
     color: #ffffff;
     border-color: #005b9f;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(0, 122, 217, 0.04);
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(0, 122, 217, 0.16);
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #007ad9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(0, 122, 217, 0.04);
     border-color: transparent;
     color: #007ad9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(0, 122, 217, 0.16);
     border-color: transparent;
     color: #007ad9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #34a835;
     border: 1px solid #34a835;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #107d11;
     color: #ffffff;
     border-color: #107d11;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #aae5aa;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #0c6b0d;
     color: #ffffff;
     border-color: #0c6b0d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(52, 168, 53, 0.04);
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(52, 168, 53, 0.16);
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #34a835;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(52, 168, 53, 0.04);
     border-color: transparent;
     color: #34a835;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(52, 168, 53, 0.16);
     border-color: transparent;
     color: #34a835;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #333333;
     background: #ffba01;
     border: 1px solid #ffba01;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ed990b;
     color: #333333;
     border-color: #ed990b;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ffeab4;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #d38b10;
     color: #333333;
     border-color: #d38b10;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 186, 1, 0.04);
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 186, 1, 0.16);
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffba01;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 186, 1, 0.04);
     border-color: transparent;
     color: #ffba01;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 186, 1, 0.16);
     border-color: transparent;
     color: #ffba01;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 1px solid #9c27b0;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #8e24aa;
     color: #ffffff;
     border-color: #8e24aa;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7b1fa2;
     color: #ffffff;
     border-color: #7b1fa2;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #e91224;
     border: 1px solid #e91224;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c01120;
     color: #ffffff;
     border-color: #c01120;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f9b4ba;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #a90000;
     color: #ffffff;
     border-color: #a90000;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(233, 18, 36, 0.04);
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(233, 18, 36, 0.16);
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e91224;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(233, 18, 36, 0.04);
     border-color: transparent;
     color: #e91224;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(233, 18, 36, 0.16);
     border-color: transparent;
     color: #e91224;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 6d854ada92..acf5859651 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -2400,296 +2400,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #607d8b;
     border: 1px solid #607d8b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #546e7a;
     color: #ffffff;
     border-color: #546e7a;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #b0bec5;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #455a64;
     color: #ffffff;
     border-color: #455a64;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #607d8b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #007ad9;
     border: 1px solid #007ad9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #116fbf;
     color: #ffffff;
     border-color: #116fbf;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #005b9f;
     color: #ffffff;
     border-color: #005b9f;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(0, 122, 217, 0.04);
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(0, 122, 217, 0.16);
     color: #007ad9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #007ad9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(0, 122, 217, 0.04);
     border-color: transparent;
     color: #007ad9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(0, 122, 217, 0.16);
     border-color: transparent;
     color: #007ad9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #34a835;
     border: 1px solid #34a835;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #107d11;
     color: #ffffff;
     border-color: #107d11;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #aae5aa;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #0c6b0d;
     color: #ffffff;
     border-color: #0c6b0d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(52, 168, 53, 0.04);
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(52, 168, 53, 0.16);
     color: #34a835;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #34a835;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(52, 168, 53, 0.04);
     border-color: transparent;
     color: #34a835;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(52, 168, 53, 0.16);
     border-color: transparent;
     color: #34a835;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #333333;
     background: #ffba01;
     border: 1px solid #ffba01;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ed990b;
     color: #333333;
     border-color: #ed990b;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ffeab4;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #d38b10;
     color: #333333;
     border-color: #d38b10;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 186, 1, 0.04);
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 186, 1, 0.16);
     color: #ffba01;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffba01;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 186, 1, 0.04);
     border-color: transparent;
     color: #ffba01;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 186, 1, 0.16);
     border-color: transparent;
     color: #ffba01;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 1px solid #9c27b0;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #8e24aa;
     color: #ffffff;
     border-color: #8e24aa;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7b1fa2;
     color: #ffffff;
     border-color: #7b1fa2;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #e91224;
     border: 1px solid #e91224;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c01120;
     color: #ffffff;
     border-color: #c01120;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f9b4ba;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #a90000;
     color: #ffffff;
     border-color: #a90000;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(233, 18, 36, 0.04);
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(233, 18, 36, 0.16);
     color: #e91224;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e91224;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(233, 18, 36, 0.04);
     border-color: transparent;
     color: #e91224;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(233, 18, 36, 0.16);
     border-color: transparent;
     color: #e91224;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index bc9c461cd2..dabad8a1bd 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #a3897b;
     border: 1px solid #8e6f5f;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #8e6f5f;
     color: #ffffff;
     border-color: #7a5743;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfaaa0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #7a5743;
     color: #ffffff;
     border-color: #6e4e3c;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #a3897b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(163, 137, 123, 0.04);
     color: #a3897b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(163, 137, 123, 0.16);
     color: #a3897b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #a3897b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(163, 137, 123, 0.04);
     border-color: transparent;
     color: #a3897b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(163, 137, 123, 0.16);
     border-color: transparent;
     color: #a3897b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #3d4447;
     background: #a3def8;
     border: 1px solid #79c8eb;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #81cbec;
     color: #3d4447;
     border-color: #60b7de;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #d2effc;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #3ea9db;
     color: #3d4447;
     border-color: #2987b1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #a3def8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(163, 222, 248, 0.04);
     color: #a3def8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(163, 222, 248, 0.16);
     color: #a3def8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #a3def8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(163, 222, 248, 0.04);
     border-color: transparent;
     color: #a3def8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(163, 222, 248, 0.16);
     border-color: transparent;
     color: #a3def8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #323e39;
     background: #a3e2c6;
     border: 1px solid #80caaa;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #80caaa;
     color: #323e39;
     border-color: #5ea285;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #caeede;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #31b57c;
     color: #323e39;
     border-color: #5ea285;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #a3e2c6;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(163, 226, 198, 0.04);
     color: #a3e2c6;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(163, 226, 198, 0.16);
     color: #a3e2c6;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #a3e2c6;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(163, 226, 198, 0.04);
     border-color: transparent;
     color: #a3e2c6;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(163, 226, 198, 0.16);
     border-color: transparent;
     color: #a3e2c6;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #333333;
     background: #ffe38e;
     border: 1px solid #ffd95e;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd95e;
     color: #333333;
     border-color: #ffce3c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ffe9a8;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffce3c;
     color: #333333;
     border-color: #ffc62a;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe38e;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 227, 142, 0.04);
     color: #ffe38e;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 227, 142, 0.16);
     color: #ffe38e;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe38e;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 227, 142, 0.04);
     border-color: transparent;
     color: #ffe38e;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 227, 142, 0.16);
     border-color: transparent;
     color: #ffe38e;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #333333;
     background: #e9bef1;
     border: 1px solid #de9eea;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #de9eea;
     color: #333333;
     border-color: #d37de3;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f0d3f6;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #d37de3;
     color: #333333;
     border-color: #c85ddc;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #e9bef1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(233, 190, 241, 0.04);
     color: #e9bef1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(233, 190, 241, 0.16);
     color: #e9bef1;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #e9bef1;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(233, 190, 241, 0.04);
     border-color: transparent;
     color: #e9bef1;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(233, 190, 241, 0.16);
     border-color: transparent;
     color: #e9bef1;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #262222;
     background: #f4b6b6;
     border: 1px solid #e38787;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #ef9999;
     color: #262222;
     border-color: #cb5858;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fbe2e2;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #eb5656;
     color: #262222;
     border-color: #b73737;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f4b6b6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 182, 182, 0.04);
     color: #f4b6b6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(244, 182, 182, 0.16);
     color: #f4b6b6;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f4b6b6;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(244, 182, 182, 0.04);
     border-color: transparent;
     color: #f4b6b6;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(244, 182, 182, 0.16);
     border-color: transparent;
     color: #f4b6b6;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index a44dbf3f84..3de4636100 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #607d8b;
     border: 1px solid #607d8b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #56717d;
     color: #ffffff;
     border-color: #56717d;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #beccd2;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #4d646f;
     color: #ffffff;
     border-color: #4d646f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #607d8b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0288d1;
     border: 1px solid #0288d1;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #027abc;
     color: #ffffff;
     border-color: #027abc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #89d4fe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #026da7;
     color: #ffffff;
     border-color: #026da7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(2, 136, 209, 0.04);
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(2, 136, 209, 0.16);
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0288d1;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(2, 136, 209, 0.04);
     border-color: transparent;
     color: #0288d1;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(2, 136, 209, 0.16);
     border-color: transparent;
     color: #0288d1;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #689f38;
     border: 1px solid #689f38;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #5e8f32;
     color: #ffffff;
     border-color: #5e8f32;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #c2e0a8;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #537f2d;
     color: #ffffff;
     border-color: #537f2d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #689f38;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #fbc02d;
     border: 1px solid #fbc02d;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fab710;
     color: #212529;
     border-color: #fab710;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde6ab;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #e8a704;
     color: #212529;
     border-color: #e8a704;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fbc02d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 1px solid #9c27b0;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #8c239e;
     color: #ffffff;
     border-color: #8c239e;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #df9eea;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7d1f8d;
     color: #ffffff;
     border-color: #7d1f8d;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d32f2f;
     border: 1px solid #d32f2f;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c02929;
     color: #ffffff;
     border-color: #c02929;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #edacac;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #aa2424;
     color: #ffffff;
     border-color: #aa2424;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d32f2f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     border-color: transparent;
     color: #d32f2f;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 99285c4aef..6b29a27337 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #607d8b;
     border: 1px solid #607d8b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #56717d;
     color: #ffffff;
     border-color: #56717d;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #beccd2;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #4d646f;
     color: #ffffff;
     border-color: #4d646f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #607d8b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0288d1;
     border: 1px solid #0288d1;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #027abc;
     color: #ffffff;
     border-color: #027abc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #89d4fe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #026da7;
     color: #ffffff;
     border-color: #026da7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(2, 136, 209, 0.04);
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(2, 136, 209, 0.16);
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0288d1;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(2, 136, 209, 0.04);
     border-color: transparent;
     color: #0288d1;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(2, 136, 209, 0.16);
     border-color: transparent;
     color: #0288d1;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #689f38;
     border: 1px solid #689f38;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #5e8f32;
     color: #ffffff;
     border-color: #5e8f32;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #c2e0a8;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #537f2d;
     color: #ffffff;
     border-color: #537f2d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #689f38;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #fbc02d;
     border: 1px solid #fbc02d;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fab710;
     color: #212529;
     border-color: #fab710;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde6ab;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #e8a704;
     color: #212529;
     border-color: #e8a704;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fbc02d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 1px solid #9c27b0;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #8c239e;
     color: #ffffff;
     border-color: #8c239e;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #df9eea;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7d1f8d;
     color: #ffffff;
     border-color: #7d1f8d;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d32f2f;
     border: 1px solid #d32f2f;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c02929;
     color: #ffffff;
     border-color: #c02929;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #edacac;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #aa2424;
     color: #ffffff;
     border-color: #aa2424;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d32f2f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     border-color: transparent;
     color: #d32f2f;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 61e5ff55fc..f2fa5a3289 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #607d8b;
     border: 1px solid #607d8b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #56717d;
     color: #ffffff;
     border-color: #56717d;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #beccd2;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #4d646f;
     color: #ffffff;
     border-color: #4d646f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     color: #607d8b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #607d8b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(96, 125, 139, 0.04);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(96, 125, 139, 0.16);
     border-color: transparent;
     color: #607d8b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0288d1;
     border: 1px solid #0288d1;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #027abc;
     color: #ffffff;
     border-color: #027abc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #89d4fe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #026da7;
     color: #ffffff;
     border-color: #026da7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(2, 136, 209, 0.04);
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(2, 136, 209, 0.16);
     color: #0288d1;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0288d1;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(2, 136, 209, 0.04);
     border-color: transparent;
     color: #0288d1;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(2, 136, 209, 0.16);
     border-color: transparent;
     color: #0288d1;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #689f38;
     border: 1px solid #689f38;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #5e8f32;
     color: #ffffff;
     border-color: #5e8f32;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #c2e0a8;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #537f2d;
     color: #ffffff;
     border-color: #537f2d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     color: #689f38;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #689f38;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(104, 159, 56, 0.04);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(104, 159, 56, 0.16);
     border-color: transparent;
     color: #689f38;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #212529;
     background: #fbc02d;
     border: 1px solid #fbc02d;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fab710;
     color: #212529;
     border-color: #fab710;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde6ab;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #e8a704;
     color: #212529;
     border-color: #e8a704;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     color: #fbc02d;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fbc02d;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 192, 45, 0.04);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 192, 45, 0.16);
     border-color: transparent;
     color: #fbc02d;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #9c27b0;
     border: 1px solid #9c27b0;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #8c239e;
     color: #ffffff;
     border-color: #8c239e;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #df9eea;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7d1f8d;
     color: #ffffff;
     border-color: #7d1f8d;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     color: #9c27b0;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #9c27b0;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(156, 39, 176, 0.04);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(156, 39, 176, 0.16);
     border-color: transparent;
     color: #9c27b0;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d32f2f;
     border: 1px solid #d32f2f;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #c02929;
     color: #ffffff;
     border-color: #c02929;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #edacac;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #aa2424;
     color: #ffffff;
     border-color: #aa2424;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     color: #d32f2f;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d32f2f;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(211, 47, 47, 0.04);
     border-color: transparent;
     color: #d32f2f;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
     border-color: transparent;
     color: #d32f2f;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index dbf7c7ab2b..54421d3164 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -2410,344 +2410,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #1d1e27;
     background: #d4ea93;
     border: 1px solid #d4ea93;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #c7e473;
     color: #1d1e27;
     border-color: #c7e473;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #e1f0b3;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #bbde53;
     color: #1d1e27;
     border-color: #bbde53;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #d4ea93;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(212, 234, 147, 0.04);
     color: #d4ea93;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(212, 234, 147, 0.16);
     color: #d4ea93;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #d4ea93;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(212, 234, 147, 0.04);
     border-color: transparent;
     color: #d4ea93;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(212, 234, 147, 0.16);
     border-color: transparent;
     color: #d4ea93;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #1d1e27;
     background: #9bcaff;
     border: 1px solid #9bcaff;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #72b4ff;
     color: #1d1e27;
     border-color: #72b4ff;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b9daff;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #499fff;
     color: #1d1e27;
     border-color: #499fff;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #9bcaff;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(155, 202, 255, 0.04);
     color: #9bcaff;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(155, 202, 255, 0.16);
     color: #9bcaff;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #9bcaff;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(155, 202, 255, 0.04);
     border-color: transparent;
     color: #9bcaff;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(155, 202, 255, 0.16);
     border-color: transparent;
     color: #9bcaff;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #1d1e27;
     background: #93deac;
     border: 1px solid #93deac;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #77d596;
     color: #1d1e27;
     border-color: #77d596;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b3e8c5;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #5acd81;
     color: #1d1e27;
     border-color: #5acd81;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #93deac;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(147, 222, 172, 0.04);
     color: #93deac;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(147, 222, 172, 0.16);
     color: #93deac;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #93deac;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(147, 222, 172, 0.04);
     border-color: transparent;
     color: #93deac;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(147, 222, 172, 0.16);
     border-color: transparent;
     color: #93deac;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #1d1e27;
     background: #ffcf91;
     border: 1px solid #ffcf91;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffbe69;
     color: #1d1e27;
     border-color: #ffbe69;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffddb2;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffac41;
     color: #1d1e27;
     border-color: #ffac41;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffcf91;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 207, 145, 0.04);
     color: #ffcf91;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 207, 145, 0.16);
     color: #ffcf91;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffcf91;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 207, 145, 0.04);
     border-color: transparent;
     color: #ffcf91;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 207, 145, 0.16);
     border-color: transparent;
     color: #ffcf91;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #1d1e27;
     background: #86e0e7;
     border: 1px solid #86e0e7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #68d8e1;
     color: #1d1e27;
     border-color: #68d8e1;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #aae9ee;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #49d0db;
     color: #1d1e27;
     border-color: #49d0db;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #86e0e7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(134, 224, 231, 0.04);
     color: #86e0e7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(134, 224, 231, 0.16);
     color: #86e0e7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #86e0e7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(134, 224, 231, 0.04);
     border-color: transparent;
     color: #86e0e7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(134, 224, 231, 0.16);
     border-color: transparent;
     color: #86e0e7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #1d1e27;
     background: #eb9a9c;
     border: 1px solid #eb9a9c;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #e57a7c;
     color: #1d1e27;
     border-color: #e57a7c;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f1b8ba;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #de595c;
     color: #1d1e27;
     border-color: #de595c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #eb9a9c;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(235, 154, 156, 0.04);
     color: #eb9a9c;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(235, 154, 156, 0.16);
     color: #eb9a9c;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #eb9a9c;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(235, 154, 156, 0.04);
     border-color: transparent;
     color: #eb9a9c;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(235, 154, 156, 0.16);
     border-color: transparent;
     color: #eb9a9c;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #1d1e27;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #d2d2d4;
     color: #1d1e27;
     border-color: #d2d2d4;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #bbbcbe;
     color: #1d1e27;
     border-color: #bbbcbe;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index d62444da7e..662e7c65e4 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -2410,344 +2410,344 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #a1c30d;
     border: 1px solid #a1c30d;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #91b00c;
     color: #ffffff;
     border-color: #91b00c;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e4f78e;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #819c0a;
     color: #ffffff;
     border-color: #819c0a;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #a1c30d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(161, 195, 13, 0.04);
     color: #a1c30d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(161, 195, 13, 0.16);
     color: #a1c30d;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #a1c30d;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(161, 195, 13, 0.04);
     border-color: transparent;
     color: #a1c30d;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(161, 195, 13, 0.16);
     border-color: transparent;
     color: #a1c30d;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #5486f3;
     border: 1px solid #5486f3;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #3570f1;
     color: #ffffff;
     border-color: #3570f1;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbcffa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #175bef;
     color: #ffffff;
     border-color: #175bef;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #5486f3;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(84, 134, 243, 0.04);
     color: #5486f3;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(84, 134, 243, 0.16);
     color: #5486f3;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #5486f3;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(84, 134, 243, 0.04);
     border-color: transparent;
     color: #5486f3;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(84, 134, 243, 0.16);
     border-color: transparent;
     color: #5486f3;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #29c76f;
     border: 1px solid #29c76f;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #25b364;
     color: #ffffff;
     border-color: #25b364;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #a5edc5;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #219f59;
     color: #ffffff;
     border-color: #219f59;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #29c76f;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(41, 199, 111, 0.04);
     color: #29c76f;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(41, 199, 111, 0.16);
     color: #29c76f;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #29c76f;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(41, 199, 111, 0.04);
     border-color: transparent;
     color: #29c76f;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(41, 199, 111, 0.16);
     border-color: transparent;
     color: #29c76f;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #ff9f42;
     border: 1px solid #ff9f42;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ff8f22;
     color: #ffffff;
     border-color: #ff8f22;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #ffd9b3;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ff7e02;
     color: #ffffff;
     border-color: #ff7e02;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ff9f42;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 159, 66, 0.04);
     color: #ff9f42;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 159, 66, 0.16);
     color: #ff9f42;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ff9f42;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 159, 66, 0.04);
     border-color: transparent;
     color: #ff9f42;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 159, 66, 0.16);
     border-color: transparent;
     color: #ff9f42;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #3ec9d6;
     border: 1px solid #3ec9d6;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #2cbfcd;
     color: #ffffff;
     border-color: #2cbfcd;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #b2e9ef;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #27aab6;
     color: #ffffff;
     border-color: #27aab6;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #3ec9d6;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(62, 201, 214, 0.04);
     color: #3ec9d6;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(62, 201, 214, 0.16);
     color: #3ec9d6;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #3ec9d6;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(62, 201, 214, 0.04);
     border-color: transparent;
     color: #3ec9d6;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(62, 201, 214, 0.16);
     border-color: transparent;
     color: #3ec9d6;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ea5455;
     border: 1px solid #ea5455;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #e73839;
     color: #ffffff;
     border-color: #e73839;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f7bbbb;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #e31c1d;
     color: #ffffff;
     border-color: #e31c1d;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ea5455;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(234, 84, 85, 0.04);
     color: #ea5455;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(234, 84, 85, 0.16);
     color: #ea5455;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ea5455;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(234, 84, 85, 0.04);
     border-color: transparent;
     color: #ea5455;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(234, 84, 85, 0.16);
     border-color: transparent;
     color: #ea5455;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #212529;
     border: 1px solid #212529;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #343a40;
     color: #ffffff;
     border-color: #343a40;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #043d75;
     color: #ffffff;
     border-color: #043d75;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #212529;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(33, 37, 41, 0.04);
     color: #212529;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(33, 37, 41, 0.16);
     color: #212529;
     border: 1px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #212529;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(33, 37, 41, 0.04);
     border-color: transparent;
     color: #212529;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(33, 37, 41, 0.16);
     border-color: transparent;
     color: #212529;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 713ec9ebc0..be52a4f586 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -2419,296 +2419,296 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #c0c7d2;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #3b82f6;
     border: 1px solid #3b82f6;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #2563eb;
     color: #ffffff;
     border-color: #2563eb;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #b1cdfb;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #2563eb;
     color: #ffffff;
     border-color: #2563eb;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #3b82f6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(59, 130, 246, 0.04);
     color: #3b82f6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(59, 130, 246, 0.16);
     color: #3b82f6;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #3b82f6;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(59, 130, 246, 0.04);
     border-color: transparent;
     color: #3b82f6;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(59, 130, 246, 0.16);
     border-color: transparent;
     color: #3b82f6;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #a0efbd;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f59e0b;
     border: 1px solid #f59e0b;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #d97706;
     color: #ffffff;
     border-color: #d97706;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fbd89d;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #d97706;
     color: #ffffff;
     border-color: #d97706;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f59e0b;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(245, 158, 11, 0.04);
     color: #f59e0b;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(245, 158, 11, 0.16);
     color: #f59e0b;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f59e0b;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(245, 158, 11, 0.04);
     border-color: transparent;
     color: #f59e0b;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(245, 158, 11, 0.16);
     border-color: transparent;
     color: #f59e0b;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #dcbbfc;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #f9b4b4;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 111f6e2b89..0d076a90a9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #78909c;
     border: 1px solid #78909c;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #69838f;
     color: #ffffff;
     border-color: #69838f;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a1b1ba;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #5d747f;
     color: #ffffff;
     border-color: #5d747f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #78909c;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #121212;
     background: #81d4fa;
     border: 1px solid #81d4fa;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #5dc8f9;
     color: #121212;
     border-color: #5dc8f9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a7e1fc;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #38bbf7;
     color: #121212;
     border-color: #38bbf7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #81d4fa;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #121212;
     background: #c5e1a5;
     border: 1px solid #c5e1a5;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #b2d788;
     color: #121212;
     border-color: #b2d788;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d6eac0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #9fce6b;
     color: #121212;
     border-color: #9fce6b;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #121212;
     background: #ffe082;
     border: 1px solid #ffe082;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd65c;
     color: #121212;
     border-color: #ffd65c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffe9a8;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffcd35;
     color: #121212;
     border-color: #ffcd35;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #c278ce;
     color: #121212;
     border-color: #c278ce;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ddb3e4;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #b65ec5;
     color: #121212;
     border-color: #b65ec5;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #121212;
     background: #f48fb1;
     border: 1px solid #f48fb1;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #f16c98;
     color: #121212;
     border-color: #f16c98;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f7b1c8;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #ed4980;
     color: #121212;
     border-color: #ed4980;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f48fb1;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #f48fb1;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #f48fb1;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 769375be7d..6f2f99496a 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #78909c;
     border: 1px solid #78909c;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #69838f;
     color: #ffffff;
     border-color: #69838f;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a1b1ba;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #5d747f;
     color: #ffffff;
     border-color: #5d747f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #78909c;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #121212;
     background: #81d4fa;
     border: 1px solid #81d4fa;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #5dc8f9;
     color: #121212;
     border-color: #5dc8f9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a7e1fc;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #38bbf7;
     color: #121212;
     border-color: #38bbf7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #81d4fa;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #121212;
     background: #c5e1a5;
     border: 1px solid #c5e1a5;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #b2d788;
     color: #121212;
     border-color: #b2d788;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d6eac0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #9fce6b;
     color: #121212;
     border-color: #9fce6b;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #121212;
     background: #ffe082;
     border: 1px solid #ffe082;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd65c;
     color: #121212;
     border-color: #ffd65c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffe9a8;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffcd35;
     color: #121212;
     border-color: #ffcd35;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #c278ce;
     color: #121212;
     border-color: #c278ce;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ddb3e4;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #b65ec5;
     color: #121212;
     border-color: #b65ec5;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #121212;
     background: #f48fb1;
     border: 1px solid #f48fb1;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #f16c98;
     color: #121212;
     border-color: #f16c98;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f7b1c8;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #ed4980;
     color: #121212;
     border-color: #ed4980;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f48fb1;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #f48fb1;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #f48fb1;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index ac43b45665..5a1bd6ee85 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2391,296 +2391,296 @@
   .p-fluid .p-button-icon-only {
     width: 2.357rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #78909c;
     border: 1px solid #78909c;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #69838f;
     color: #ffffff;
     border-color: #69838f;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a1b1ba;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #5d747f;
     color: #ffffff;
     border-color: #5d747f;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     color: #78909c;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #78909c;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(120, 144, 156, 0.04);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(120, 144, 156, 0.16);
     border-color: transparent;
     color: #78909c;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #121212;
     background: #81d4fa;
     border: 1px solid #81d4fa;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #5dc8f9;
     color: #121212;
     border-color: #5dc8f9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #a7e1fc;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #38bbf7;
     color: #121212;
     border-color: #38bbf7;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     color: #81d4fa;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #81d4fa;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(129, 212, 250, 0.04);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(129, 212, 250, 0.16);
     border-color: transparent;
     color: #81d4fa;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #121212;
     background: #c5e1a5;
     border: 1px solid #c5e1a5;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #b2d788;
     color: #121212;
     border-color: #b2d788;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d6eac0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #9fce6b;
     color: #121212;
     border-color: #9fce6b;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     color: #c5e1a5;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #c5e1a5;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(197, 225, 165, 0.04);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(197, 225, 165, 0.16);
     border-color: transparent;
     color: #c5e1a5;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #121212;
     background: #ffe082;
     border: 1px solid #ffe082;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd65c;
     color: #121212;
     border-color: #ffd65c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ffe9a8;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffcd35;
     color: #121212;
     border-color: #ffcd35;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     color: #ffe082;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe082;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 130, 0.04);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 130, 0.16);
     border-color: transparent;
     color: #ffe082;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #121212;
     background: #ce93d8;
     border: 1px solid #ce93d8;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #c278ce;
     color: #121212;
     border-color: #c278ce;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ddb3e4;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #b65ec5;
     color: #121212;
     border-color: #b65ec5;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     color: #ce93d8;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #ce93d8;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(206, 147, 216, 0.04);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(206, 147, 216, 0.16);
     border-color: transparent;
     color: #ce93d8;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #121212;
     background: #f48fb1;
     border: 1px solid #f48fb1;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #f16c98;
     color: #121212;
     border-color: #f16c98;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f7b1c8;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #ed4980;
     color: #121212;
     border-color: #ed4980;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     color: #f48fb1;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f48fb1;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(244, 143, 177, 0.04);
     border-color: transparent;
     color: #f48fb1;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(244, 143, 177, 0.16);
     border-color: transparent;
     color: #f48fb1;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index e707d671b2..8602d72bcd 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -2417,344 +2417,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.857rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #0e1315;
     background: #b4bfcd;
     border: 1px solid #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #9dabbe;
     color: #0e1315;
     border-color: #9dabbe;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 1px #e1e5eb;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #8698ae;
     color: #0e1315;
     border-color: #8698ae;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #b4bfcd;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(180, 191, 205, 0.04);
     color: #b4bfcd;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(180, 191, 205, 0.16);
     color: #b4bfcd;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #b4bfcd;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(180, 191, 205, 0.04);
     border-color: transparent;
     color: #b4bfcd;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(180, 191, 205, 0.16);
     border-color: transparent;
     color: #b4bfcd;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #35a4cc;
     border: 1px solid #35a4cc;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #2f94b9;
     color: #ffffff;
     border-color: #2f94b9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #aedbeb;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #2984a4;
     color: #ffffff;
     border-color: #2984a4;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #35a4cc;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(53, 164, 204, 0.04);
     color: #35a4cc;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(53, 164, 204, 0.16);
     color: #35a4cc;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #35a4cc;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(53, 164, 204, 0.04);
     border-color: transparent;
     color: #35a4cc;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(53, 164, 204, 0.16);
     border-color: transparent;
     color: #35a4cc;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #0e1315;
     background: #cede9c;
     border: 1px solid #cede9c;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #c0d580;
     color: #0e1315;
     border-color: #c0d580;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #ebf2d7;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #b2cb63;
     color: #0e1315;
     border-color: #b2cb63;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #cede9c;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(206, 222, 156, 0.04);
     color: #cede9c;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(206, 222, 156, 0.16);
     color: #cede9c;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #cede9c;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(206, 222, 156, 0.04);
     border-color: transparent;
     color: #cede9c;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(206, 222, 156, 0.16);
     border-color: transparent;
     color: #cede9c;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #0e1315;
     background: #ffe08a;
     border: 1px solid #ffe08a;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ffd663;
     color: #0e1315;
     border-color: #ffd663;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fff3d0;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ffcb3b;
     color: #0e1315;
     border-color: #ffcb3b;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ffe08a;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 224, 138, 0.04);
     color: #ffe08a;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 224, 138, 0.16);
     color: #ffe08a;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ffe08a;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 224, 138, 0.04);
     border-color: transparent;
     color: #ffe08a;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 224, 138, 0.16);
     border-color: transparent;
     color: #ffe08a;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #0e1315;
     background: #b09ce5;
     border: 1px solid #b09ce5;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #987edd;
     color: #0e1315;
     border-color: #987edd;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #dfd7f5;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7f5fd5;
     color: #0e1315;
     border-color: #7f5fd5;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #b09ce5;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(176, 156, 229, 0.04);
     color: #b09ce5;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(176, 156, 229, 0.16);
     color: #b09ce5;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #b09ce5;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(176, 156, 229, 0.04);
     border-color: transparent;
     color: #b09ce5;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(176, 156, 229, 0.16);
     border-color: transparent;
     color: #b09ce5;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #0e1315;
     background: #e693a9;
     border: 1px solid #e693a9;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #df7491;
     color: #0e1315;
     border-color: #df7491;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #f5d4dd;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #d85678;
     color: #0e1315;
     border-color: #d85678;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #e693a9;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(230, 147, 169, 0.04);
     color: #e693a9;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(230, 147, 169, 0.16);
     color: #e693a9;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #e693a9;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(230, 147, 169, 0.04);
     border-color: transparent;
     color: #e693a9;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(230, 147, 169, 0.16);
     border-color: transparent;
     color: #e693a9;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #0e1315;
     background: #ffffff;
     border: 1px solid #ffffff;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #cfd0d0;
     color: #0e1315;
     border-color: #cfd0d0;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #b7b8b9;
     color: #0e1315;
     border-color: #b7b8b9;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #ffffff;
     border: 2px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     border: 2px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     color: #ffffff;
     border: 2px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #ffffff;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: transparent;
     color: #ffffff;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(255, 255, 255, 0.16);
     border-color: transparent;
     color: #ffffff;
@@ -6692,7 +6692,7 @@
   .p-button .p-button-label {
     font-weight: 600;
   }
-  .p-buttonset .p-button-label,
+  .p-button-group .p-button-label,
   .p-togglebutton .p-button-label {
     font-weight: 400;
   }
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 2b49eac850..8be69a9004 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -2417,344 +2417,344 @@
   .p-fluid .p-button-icon-only {
     width: 2.857rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #8191a6;
     border: 1px solid #8191a6;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #70829a;
     color: #ffffff;
     border-color: #70829a;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #cdd3db;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #62738a;
     color: #ffffff;
     border-color: #62738a;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #8191a6;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(129, 145, 166, 0.04);
     color: #8191a6;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(129, 145, 166, 0.16);
     color: #8191a6;
     border: 2px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #8191a6;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(129, 145, 166, 0.04);
     border-color: transparent;
     color: #8191a6;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(129, 145, 166, 0.16);
     border-color: transparent;
     color: #8191a6;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #35a4cc;
     border: 1px solid #35a4cc;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #2f94b9;
     color: #ffffff;
     border-color: #2f94b9;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #aedbeb;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #2984a4;
     color: #ffffff;
     border-color: #2984a4;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #35a4cc;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(53, 164, 204, 0.04);
     color: #35a4cc;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(53, 164, 204, 0.16);
     color: #35a4cc;
     border: 2px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #35a4cc;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(53, 164, 204, 0.04);
     border-color: transparent;
     color: #35a4cc;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(53, 164, 204, 0.16);
     border-color: transparent;
     color: #35a4cc;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #8bae2c;
     border: 1px solid #8bae2c;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #7d9d28;
     color: #ffffff;
     border-color: #7d9d28;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #d5e7a2;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #6f8b23;
     color: #ffffff;
     border-color: #6f8b23;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #8bae2c;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(139, 174, 44, 0.04);
     color: #8bae2c;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(139, 174, 44, 0.16);
     color: #8bae2c;
     border: 2px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #8bae2c;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(139, 174, 44, 0.04);
     border-color: transparent;
     color: #8bae2c;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(139, 174, 44, 0.16);
     border-color: transparent;
     color: #8bae2c;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #ff922a;
     border: 1px solid #ff922a;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ff830c;
     color: #ffffff;
     border-color: #ff830c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #ffd3aa;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #ee7400;
     color: #ffffff;
     border-color: #ee7400;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #ff922a;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(255, 146, 42, 0.04);
     color: #ff922a;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(255, 146, 42, 0.16);
     color: #ff922a;
     border: 2px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #ff922a;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(255, 146, 42, 0.04);
     border-color: transparent;
     color: #ff922a;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(255, 146, 42, 0.16);
     border-color: transparent;
     color: #ff922a;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #7654d4;
     border: 1px solid #7654d4;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #633cce;
     color: #ffffff;
     border-color: #633cce;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #c8bbee;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #5530bd;
     color: #ffffff;
     border-color: #5530bd;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #7654d4;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(118, 84, 212, 0.04);
     color: #7654d4;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(118, 84, 212, 0.16);
     color: #7654d4;
     border: 2px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #7654d4;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(118, 84, 212, 0.04);
     border-color: transparent;
     color: #7654d4;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(118, 84, 212, 0.16);
     border-color: transparent;
     color: #7654d4;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #d45472;
     border: 1px solid #d45472;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #ce3c5e;
     color: #ffffff;
     border-color: #ce3c5e;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.1rem #eebbc7;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #bd3051;
     color: #ffffff;
     border-color: #bd3051;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #d45472;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(212, 84, 114, 0.04);
     color: #d45472;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(212, 84, 114, 0.16);
     color: #d45472;
     border: 2px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #d45472;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(212, 84, 114, 0.04);
     border-color: transparent;
     color: #d45472;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(212, 84, 114, 0.16);
     border-color: transparent;
     color: #d45472;
   }
-  .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
     color: #ffffff;
     background: #3b3b3b;
     border: 1px solid #3b3b3b;
   }
-  .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
     background: #585858;
     color: #ffffff;
     border-color: #585858;
   }
-  .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
     box-shadow: none;
   }
-  .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
     background: #6c6c6c;
     color: #ffffff;
     border-color: #6c6c6c;
   }
-  .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
     background-color: transparent;
     color: #3b3b3b;
     border: 2px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(59, 59, 59, 0.04);
     color: #3b3b3b;
     border: 2px solid;
   }
-  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(59, 59, 59, 0.16);
     color: #3b3b3b;
     border: 2px solid;
   }
-  .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
     background-color: transparent;
     color: #3b3b3b;
     border-color: transparent;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(59, 59, 59, 0.04);
     border-color: transparent;
     color: #3b3b3b;
   }
-  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
     background: rgba(59, 59, 59, 0.16);
     border-color: transparent;
     color: #3b3b3b;
@@ -6692,7 +6692,7 @@
   .p-button .p-button-label {
     font-weight: 600;
   }
-  .p-buttonset .p-button-label,
+  .p-button-group .p-button-label,
   .p-togglebutton .p-button-label {
     font-weight: 400;
   }

From ca69190d83f3d7ac9d54c41a86153e99231dfebc Mon Sep 17 00:00:00 2001
From: Shubham Saurabh <shubhamsaurabh@outlook.com>
Date: Mon, 25 Mar 2024 14:30:13 +0530
Subject: [PATCH 008/194] Fix #5998: fixed minute values updated by hour
 changes with stepMinute (#6217)

Co-authored-by: Shubham Saurabh <shubhamsaurabh@Shubhams-MacBook-Pro.local>
---
 components/lib/calendar/Calendar.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 3faee5af18..311cc3e2fc 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -576,6 +576,14 @@ export const Calendar = React.memo(
             }
         };
 
+        const roundMinutesToStep = (minutes) => {
+            if (props.stepMinute) {
+                return Math.round(minutes / props.stepMinute) * props.stepMinute;
+            }
+
+            return minutes;
+        };
+
         const incrementHour = (event) => {
             const currentTime = getCurrentDateTime();
             const currentHour = currentTime.getHours();
@@ -606,10 +614,10 @@ export const Calendar = React.memo(
                             updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
                         }
                     } else {
-                        updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                        updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
                     }
                 } else {
-                    updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                    updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
                 }
             }
 
@@ -646,10 +654,10 @@ export const Calendar = React.memo(
                             updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
                         }
                     } else {
-                        updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                        updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
                     }
                 } else {
-                    updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                    updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
                 }
             }
 

From ac0037a0daed862241c126c35c8def2d998c9280 Mon Sep 17 00:00:00 2001
From: Shubham Saurabh <shubhamsaurabh@outlook.com>
Date: Mon, 25 Mar 2024 14:32:03 +0530
Subject: [PATCH 009/194] Fix #6151: fixed maxDate prop validation issue
 (#6214)

Co-authored-by: Shubham Saurabh <shubhamsaurabh@Shubhams-MacBook-Pro.local>
---
 components/lib/calendar/Calendar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 311cc3e2fc..62a4ab8557 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -809,7 +809,7 @@ export const Calendar = React.memo(
             const currentHour = currentTime.getHours();
             const newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
 
-            if (validateHour(convertTo24Hour(newHour, !(currentHour > 11)), currentTime)) {
+            if (validateHour(convertTo24Hour(newHour, currentHour > 11), currentTime)) {
                 updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
             }
 

From cec8ca8e1ed3c0e4f56f184f0051e08f6faf8ba2 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 25 Mar 2024 05:07:44 -0400
Subject: [PATCH 010/194] Fix #6194: Datatable rowClassName fixed (#6199)

---
 components/lib/datatable/BodyRow.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
index 670b92af21..129d9b8d52 100644
--- a/components/lib/datatable/BodyRow.js
+++ b/components/lib/datatable/BodyRow.js
@@ -493,7 +493,7 @@ export const BodyRow = React.memo((props) => {
         },
         getBodyRowPTOptions('bodyRow'),
         {
-            className: rowClassName // #5983 must be last so all unstyled merging takes place first
+            className: classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
         }
     );
 

From d372c68318c0ec258c5123b1dc95824d4bf83914 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 25 Mar 2024 05:13:35 -0400
Subject: [PATCH 011/194] Fix #6192: InputNumber restore Copy and Paste
 functionality (#6193)

---
 components/lib/inputnumber/InputNumber.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index d0cb6b61f8..e246470cff 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -322,7 +322,7 @@ export const InputNumber = React.memo(
                 return;
             }
 
-            if (event.shiftKey || event.altKey) {
+            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
                 isSpecialChar.current = true;
 
                 return;

From 6a9159f6a09bb6e0b7f47cf0fab7e9c6c9294792 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 25 Mar 2024 05:33:15 -0400
Subject: [PATCH 012/194] Fix #6165: TabView refactor closeIcon like other
 icons (#6166)

---
 components/lib/tabview/TabView.js     | 12 +++++++++---
 components/lib/tabview/TabViewBase.js |  1 +
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index cbea0248c7..848c5c4e88 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -338,9 +338,15 @@ export const TabView = React.forwardRef((inProps, ref) => {
         );
         const titleElement = <span {...headerTitleProps}>{header}</span>;
         const rightIconElement = rightIcon && IconUtils.getJSXIcon(rightIcon, undefined, { props });
-        const iconClassName = 'p-tabview-close';
-        const icon = closeIcon || <TimesIcon className={iconClassName} onClick={(e) => onTabHeaderClose(e, index)} />;
-        const closableIconElement = closable ? IconUtils.getJSXIcon(icon, { className: iconClassName, onClick: (e) => onTabHeaderClose(e, index) }, { props }) : null;
+        const closeIconProps = mergeProps(
+            {
+                className: cx('tab.closeIcon'),
+                onClick: (e) => onTabHeaderClose(e, index)
+            },
+            getTabPT(tab, 'closeIcon', index)
+        );
+        const icon = closeIcon || <TimesIcon {...closeIconProps} />;
+        const closableIconElement = closable ? IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props }) : null;
 
         const headerActionProps = mergeProps(
             {
diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js
index e6a4bbc89c..b658ed6306 100644
--- a/components/lib/tabview/TabViewBase.js
+++ b/components/lib/tabview/TabViewBase.js
@@ -21,6 +21,7 @@ const classes = {
         header: ({ selected, disabled, headerClassName, _className }) => classNames('p-unselectable-text', { 'p-tabview-selected p-highlight': selected, 'p-disabled': disabled }, headerClassName, _className),
         headertitle: 'p-tabview-title',
         headeraction: 'p-tabview-nav-link',
+        closeIcon: 'p-tabview-close',
         content: ({ props, selected, getTabProp, tab, isSelected, shouldUseTab, index }) =>
             shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index)) ? classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), 'p-tabview-panel', { 'p-hidden': !selected }) : undefined
     }

From df21be0939a8c9068d809c739259e03da204c54a Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 25 Mar 2024 05:42:43 -0400
Subject: [PATCH 013/194] Fix #6023: Support NumpadEnter (#6025)

---
 components/lib/accordion/Accordion.js               | 1 +
 components/lib/calendar/Calendar.js                 | 8 ++++----
 components/lib/chip/Chip.js                         | 2 +-
 components/lib/contextmenu/ContextMenu.js           | 1 +
 components/lib/datatable/BodyCell.js                | 2 +-
 components/lib/datatable/BodyRow.js                 | 1 +
 components/lib/datatable/HeaderCell.js              | 2 +-
 components/lib/dock/Dock.js                         | 1 +
 components/lib/dropdown/Dropdown.js                 | 1 +
 components/lib/fieldset/Fieldset.js                 | 2 +-
 components/lib/fileupload/FileUpload.js             | 2 +-
 components/lib/galleria/GalleriaItem.js             | 1 +
 components/lib/galleria/GalleriaThumbnails.js       | 2 +-
 components/lib/inplace/Inplace.js                   | 2 +-
 components/lib/inputnumber/InputNumber.js           | 1 +
 components/lib/megamenu/MegaMenu.js                 | 2 +-
 components/lib/menu/Menu.js                         | 1 +
 components/lib/menubar/Menubar.js                   | 3 ++-
 components/lib/speeddial/SpeedDial.js               | 1 +
 components/lib/splitter/Splitter.js                 | 2 ++
 components/lib/steps/Steps.js                       | 1 +
 components/lib/tabmenu/TabMenu.js                   | 1 +
 components/lib/tabview/TabView.js                   | 1 +
 components/lib/terminal/Terminal.js                 | 1 +
 components/lib/tieredmenu/TieredMenu.js             | 1 +
 components/lib/treetable/TreeTableHeader.js         | 2 +-
 components/lib/tristatecheckbox/TriStateCheckbox.js | 2 +-
 27 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
index 4d96b61a6b..37eb772670 100644
--- a/components/lib/accordion/Accordion.js
+++ b/components/lib/accordion/Accordion.js
@@ -106,6 +106,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
                 break;
 
             case 'Enter':
+            case 'NumpadEnter':
             case 'Space':
                 onTabEnterKey(event, tab, index);
                 break;
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 62a4ab8557..803151775a 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -218,7 +218,7 @@ export const Calendar = React.memo(
         };
 
         const onPickerKeyDown = (event, type, direction) => {
-            if (event.code === 'Enter' || event.code === 'Space') {
+            if (event.key === 'Enter' || event.key === 'Space') {
                 onTimePickerElementMouseDown(event, type, direction);
                 event.preventDefault();
 
@@ -229,7 +229,7 @@ export const Calendar = React.memo(
         };
 
         const onPickerKeyUp = (event) => {
-            if (event.code === 'Enter' || event.code === 'Space') {
+            if (event.key === 'Enter' || event.key === 'Space') {
                 onTimePickerElementMouseUp();
                 event.preventDefault();
 
@@ -1678,7 +1678,7 @@ export const Calendar = React.memo(
         };
 
         const switchToMonthView = (event) => {
-            if (event && event.code && (event.code === 'Enter' || event.code === 'Space')) {
+            if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
                 viewChangedWithKeyDown.current = true;
             }
 
@@ -1687,7 +1687,7 @@ export const Calendar = React.memo(
         };
 
         const switchToYearView = (event) => {
-            if (event && event.code && (event.code === 'Enter' || event.code === 'Space')) {
+            if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
                 viewChangedWithKeyDown.current = true;
             }
 
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 0e3b9af89f..5e7085fdad 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -20,7 +20,7 @@ export const Chip = React.memo(
         useHandleStyle(ChipBase.css.styles, isUnstyled, { name: 'chip' });
 
         const onKeyDown = (event) => {
-            if (event.code === 'Enter' || event.code === 'Backspace') {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Backspace') {
                 close(event);
             }
         };
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index 892f28239c..14f6eca0f8 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -384,6 +384,7 @@ export const ContextMenu = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                     onEnterKey(event);
                     break;
 
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index 2f1b35c792..42104ad9c0 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -362,7 +362,7 @@ export const BodyCell = React.memo((props) => {
 
     const onKeyDown = (event) => {
         if (props.editMode !== 'row') {
-            if (event.code === 'Enter' || event.code === 'Tab') {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Tab') {
                 switchCellToViewMode(event, true);
             }
 
diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
index 129d9b8d52..f5434129a5 100644
--- a/components/lib/datatable/BodyRow.js
+++ b/components/lib/datatable/BodyRow.js
@@ -179,6 +179,7 @@ export const BodyRow = React.memo((props) => {
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                     onEnterKey(row, event, target);
                     break;
 
diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
index b85ff3376a..ba09f28238 100644
--- a/components/lib/datatable/HeaderCell.js
+++ b/components/lib/datatable/HeaderCell.js
@@ -169,7 +169,7 @@ export const HeaderCell = React.memo((props) => {
     };
 
     const onKeyDown = (event) => {
-        if ((event.code == 'Enter' || event.code == 'Space') && event.currentTarget === elementRef.current && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === 'true') {
+        if ((event.code == 'Enter' || event.code === 'NumpadEnter' || event.code == 'Space') && event.currentTarget === elementRef.current && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === 'true') {
             onClick(event);
 
             event.preventDefault();
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index 9abf680f42..f3579a35a6 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -97,6 +97,7 @@ export const Dock = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                 case 'Space':
                     onSpaceKey(event);
                     event.preventDefault();
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 6e5dfc3f3f..19da68f96a 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -267,6 +267,7 @@ export const Dropdown = React.memo(
 
                 case 'Escape':
                 case 'Enter':
+                case 'NumpadEnter':
                     onEnterKey(event);
                     event.preventDefault();
                     break;
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
index 1215b8fac1..e0a1ba0524 100644
--- a/components/lib/fieldset/Fieldset.js
+++ b/components/lib/fieldset/Fieldset.js
@@ -69,7 +69,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
     });
 
     const onKeyDown = (event) => {
-        if (event.code === 'Enter' || event.code === 'Space') {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
             toggle(event);
             event.preventDefault();
         }
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 646c6bc838..8f3c714772 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -292,7 +292,7 @@ export const FileUpload = React.memo(
         };
 
         const onKeyDown = (event) => {
-            if (event.code === 'Enter') {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 choose();
             }
         };
diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js
index fae40c0b93..5c8106c5a5 100644
--- a/components/lib/galleria/GalleriaItem.js
+++ b/components/lib/galleria/GalleriaItem.js
@@ -88,6 +88,7 @@ export const GalleriaItem = React.memo(
         const onIndicatorKeyDown = (event, index) => {
             switch (event.code) {
                 case 'Enter':
+                case 'NumpadEnter':
                 case 'Space':
                     stopSlideShow();
 
diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
index ce857f9c3f..5f125742d1 100644
--- a/components/lib/galleria/GalleriaThumbnails.js
+++ b/components/lib/galleria/GalleriaThumbnails.js
@@ -31,7 +31,7 @@ const GalleriaThumbnailItem = React.memo((props) => {
     };
 
     const onThumbnailKeydown = (event) => {
-        if (event.code === 'Enter' || event.code === 'Space') {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
             props.onItemClick({
                 originalEvent: event,
                 index: props.index
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 9bc041b290..16243eff43 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -63,7 +63,7 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     };
 
     const onDisplayKeyDown = (event) => {
-        if (event.code === 'Enter' || event.code === 'Space') {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
             open(event);
             event.preventDefault();
         }
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index e246470cff..f1ec8707d2 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -377,6 +377,7 @@ export const InputNumber = React.memo(
                 case 'Tab':
                 case 'NumpadEnter':
                 case 'Enter':
+                case 'NumpadEnter':
                     newValueStr = validateValue(parseValue(inputValue));
                     inputRef.current.value = formatValue(newValueStr);
                     inputRef.current.setAttribute('aria-valuenow', newValueStr);
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index fa823eee67..73f60591b7 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -391,6 +391,7 @@ export const MegaMenu = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                     onEnterKey(event);
                     break;
 
@@ -406,7 +407,6 @@ export const MegaMenu = React.memo(
                 case 'PageUp':
                 case 'Backspace':
                 case 'ShiftLeft':
-                    focusedItemInfo;
                 case 'ShiftRight':
                     //NOOP
                     break;
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index 0f7b948491..5e412859d6 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -131,6 +131,7 @@ export const Menu = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                     onEnterKey(event);
                     break;
 
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index bdd9a742e0..f3717698b7 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -96,7 +96,7 @@ export const Menubar = React.memo(
         };
 
         const menuButtonKeydown = (event) => {
-            (event.code === 'Enter' || event.code === 'Space') && toggle(event);
+            (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && toggle(event);
         };
 
         const isOutsideClicked = (event) => {
@@ -167,6 +167,7 @@ export const Menubar = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                     onEnterKey(event);
                     break;
 
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index bbf543ade4..f692bdb36f 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -106,6 +106,7 @@ export const SpeedDial = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                 case 'Space':
                     onEnterKey(event);
                     break;
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index 6cddd15d13..962163df76 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -266,6 +266,8 @@ export const Splitter = React.memo(
                     break;
                 }
 
+                case 'NumpadEnter':
+
                 case 'Enter': {
                     if (prevSize.current >= 100 - (minSize || 5)) {
                         resizePanel(index, minSize, 100 - minSize);
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index f5dc862a1f..d9c64d538b 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -84,6 +84,7 @@ export const Steps = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                 case 'Space':
                     itemClick(event, item, index);
                     event.preventDefault();
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index f159114f75..541dfbf3d0 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -138,6 +138,7 @@ export const TabMenu = React.memo(
 
                 case 'Space':
                 case 'Enter':
+                case 'NumpadEnter':
                     itemClick(event, item, index);
                     event.preventDefault();
                     break;
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index 848c5c4e88..8e70c16a9d 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -149,6 +149,7 @@ export const TabView = React.forwardRef((inProps, ref) => {
                 break;
 
             case 'Enter':
+            case 'NumpadEnter':
             case 'Space':
                 onTabEnterKey(event, tab, index);
                 break;
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index 29cb420a79..acaa97fb76 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -58,6 +58,7 @@ export const Terminal = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                     if (!!commandTextState) {
                         let newCommands = [...commandsState];
 
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index ffd1070bbc..9d037dffcf 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -153,6 +153,7 @@ export const TieredMenu = React.memo(
                     break;
 
                 case 'Enter':
+                case 'NumpadEnter':
                     onEnterKey(event);
                     break;
 
diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
index 382d050877..5d2bed3498 100644
--- a/components/lib/treetable/TreeTableHeader.js
+++ b/components/lib/treetable/TreeTableHeader.js
@@ -64,7 +64,7 @@ export const TreeTableHeader = React.memo((props) => {
     };
 
     const onHeaderKeyDown = (event, column) => {
-        if (event.key === 'Enter' && event.key === 'Space') {
+        if (event.key === 'Enter' || event.code === 'Space') {
             onHeaderClick(event, column);
             event.preventDefault();
         }
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index d2f0bc9b2e..db6c901a04 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -61,7 +61,7 @@ export const TriStateCheckbox = React.memo(
         };
 
         const onKeyDown = (e) => {
-            if (e.code === 'Enter' || e.code === 'Space') {
+            if (e.code === 'Enter' || e.code === 'NumpadEnter' || e.code === 'Space') {
                 onChange(e);
                 e.preventDefault();
             }

From 54df499ab9312f3c99865356ab206e948fc3699c Mon Sep 17 00:00:00 2001
From: Dnyaneshwar Ware <dnyaneshwarw@sahaj.ai>
Date: Mon, 25 Mar 2024 15:14:50 +0530
Subject: [PATCH 014/194] Feature: "notIn" mode for Datatable filters (#5460)

* feat: add notIn filter in FilterService.js

* Fix: test function names  for FilterService

* Add 'notIn' in match mode types declarations

* Add 'notIn' type entry in missing components
---
 components/doc/common/apidoc/index.json       | 24 +++++-----
 components/lib/api/FilterService.js           | 13 ++++++
 components/lib/api/test/FilterService.spec.js | 44 ++++++++++++++++---
 components/lib/column/column.d.ts             |  2 +-
 components/lib/datatable/datatable.d.ts       | 10 ++---
 components/lib/picklist/picklist.d.ts         |  2 +-
 components/lib/treetable/treetable.d.ts       |  8 ++--
 7 files changed, 75 insertions(+), 28 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index a482a9582a..3115eae269 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -13913,7 +13913,7 @@
                             "name": "matchMode",
                             "optional": false,
                             "readonly": false,
-                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
                             "description": "Type of filter match."
                         }
                     ],
@@ -16328,7 +16328,7 @@
                                 },
                                 {
                                     "name": "mode",
-                                    "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
+                                    "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
                                     "description": "Filter match mode"
                                 },
                                 {
@@ -16709,9 +16709,9 @@
                             "name": "globalFilterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
                             "default": "contains",
-                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
                         },
                         {
                             "name": "groupRowsBy",
@@ -18639,7 +18639,7 @@
                             "name": "matchMode",
                             "optional": false,
                             "readonly": false,
-                            "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
+                            "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
                             "description": "Type of filter match."
                         }
                     ],
@@ -19623,8 +19623,8 @@
                             "name": "globalFilterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
-                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
                         },
                         {
                             "name": "groupRowsBy",
@@ -41177,7 +41177,7 @@
                             "readonly": false,
                             "type": "string",
                             "default": "contains",
-                            "description": "Defines how the items are filtered, valid values are \"contains\" (default) \"startsWith\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\" and \"gte\"."
+                            "description": "Defines how the items are filtered, valid values are \"contains\" (default) \"startsWith\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\" and \"gte\"."
                         },
                         {
                             "name": "id",
@@ -53153,7 +53153,7 @@
                                 },
                                 {
                                     "name": "mode",
-                                    "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                                    "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
                                     "description": "Filter match mode."
                                 }
                             ],
@@ -53343,9 +53343,9 @@
                             "name": "globalFilterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
+                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
                             "default": "contains",
-                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
                         },
                         {
                             "name": "header",
@@ -54762,7 +54762,7 @@
                             "name": "matchMode",
                             "optional": false,
                             "readonly": false,
-                            "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                            "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
                             "description": "Type of filter match."
                         }
                     ],
diff --git a/components/lib/api/FilterService.js b/components/lib/api/FilterService.js
index 08842992c3..bedf45bb59 100644
--- a/components/lib/api/FilterService.js
+++ b/components/lib/api/FilterService.js
@@ -122,6 +122,19 @@ export const FilterService = {
 
             return false;
         },
+        notIn(value, filter) {
+            if (filter === undefined || filter === null || filter.length === 0) {
+                return true;
+            }
+
+            for (let i = 0; i < filter.length; i++) {
+                if (ObjectUtils.equals(value, filter[i])) {
+                    return false;
+                }
+            }
+
+            return true;
+        },
         between(value, filter) {
             if (filter == null || filter[0] == null || filter[1] == null) {
                 return true;
diff --git a/components/lib/api/test/FilterService.spec.js b/components/lib/api/test/FilterService.spec.js
index 2d4d551102..51e0169a65 100644
--- a/components/lib/api/test/FilterService.spec.js
+++ b/components/lib/api/test/FilterService.spec.js
@@ -8,20 +8,20 @@ afterEach(() => {
 });
 
 const checkParametersNullOrUndefined = (filterType) => {
-    it('When value parameter is undefined', () => {
+    it('When filter parameter is undefined', () => {
         expect(filters[filterType]('value', undefined)).toBeTruthy();
     });
 
-    it('When value parameter is null', () => {
+    it('When filter parameter is null', () => {
         expect(filters[filterType]('value', null)).toBeTruthy();
     });
 
-    it('When filter parameter is undefined', () => {
+    it('When value parameter is undefined', () => {
         expect(filters[filterType](undefined, 'filter')).toBeFalsy();
     });
 
-    it('When filter parameter is null', () => {
-        expect(filters[filterType](undefined, 'filter')).toBeFalsy();
+    it('When value parameter is null', () => {
+        expect(filters[filterType](null, 'filter')).toBeFalsy();
     });
 };
 
@@ -141,6 +141,40 @@ describe('FilterService', () => {
         });
     });
 
+    describe('notIn filter test', () => {
+        it('When filter parameter is undefined', () => {
+            expect(filters.notIn('value', undefined)).toBeTruthy();
+        });
+
+        it('When filter parameter is null', () => {
+            expect(filters.notIn('value', null)).toBeTruthy();
+        });
+
+        it('When value parameter is undefined', () => {
+            expect(filters.notIn(undefined, 'filter')).toBeTruthy();
+        });
+
+        it('When value parameter is null', () => {
+            expect(filters.notIn(null, 'filter')).toBeTruthy();
+        });
+
+        it('When value parameter equal to any filter word', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockImplementation((value, filter) => value === filter);
+
+            const notInFilter = filters.notIn('e', 'filter');
+
+            expect(notInFilter).toBeFalsy();
+        });
+
+        it('When value parameter not equal to any filter word', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockImplementation((value, filter) => value === filter);
+
+            const notInFilter = filters.notIn('d', 'filter');
+
+            expect(notInFilter).toBeTruthy();
+        });
+    });
+
     describe('between filter test', () => {
         checkParametersNullOrUndefined('between');
         it('When value has getTime func and smaller than filter[0]', () => {
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index 3621252555..5f51fab3ed 100644
--- a/components/lib/column/column.d.ts
+++ b/components/lib/column/column.d.ts
@@ -682,7 +682,7 @@ interface ColumnFilterMetaData {
     /**
      * Type of filter match.
      */
-    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom';
+    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom';
 }
 
 interface ColumnFilterMetaDataWithConstraint {
diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts
index 51a7642cdf..8e54490817 100644
--- a/components/lib/datatable/datatable.d.ts
+++ b/components/lib/datatable/datatable.d.ts
@@ -91,7 +91,7 @@ interface DataTableFilterMetaData {
     /**
      * Type of filter match.
      */
-    matchMode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom' | undefined;
+    matchMode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom' | undefined;
 }
 
 /**
@@ -1173,10 +1173,10 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      */
     globalFilterFields?: string[] | undefined;
     /**
-     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".
+     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
      * @defaultValue contains
      */
-    globalFilterMatchMode?: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined;
+    globalFilterMatchMode?: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined;
     /**
      * Used for either be grouped by a separate grouping row or using rowspan.
      */
@@ -1804,7 +1804,7 @@ export declare class DataTable<TValue extends DataTableValueArray> extends React
      * Filters the data.
      * @param {T} value - The filter value
      * @param {string} field - The filter field
-     * @param {'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom'} mode - Filter match mode
+     * @param {'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom'} mode - Filter match mode
      * @param  {number} index - Index of the filter
      */
     public filter<T>(
@@ -1819,7 +1819,7 @@ export declare class DataTable<TValue extends DataTableValueArray> extends React
         /**
          * Filter match mode.
          */
-        mode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom',
+        mode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom',
         /**
          * Index of the filter.
          */
diff --git a/components/lib/picklist/picklist.d.ts b/components/lib/picklist/picklist.d.ts
index c4336af677..36c825069c 100755
--- a/components/lib/picklist/picklist.d.ts
+++ b/components/lib/picklist/picklist.d.ts
@@ -363,7 +363,7 @@ export interface PickListProps {
      */
     filterBy?: string | undefined;
     /**
-     * 	Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".
+     * 	Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt" and "gte".
      * @defaultValue contains
      */
     filterMatchMode?: string | undefined;
diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts
index 4583df72f4..b6dc664262 100644
--- a/components/lib/treetable/treetable.d.ts
+++ b/components/lib/treetable/treetable.d.ts
@@ -396,7 +396,7 @@ interface TreeTableFilterMetaData {
     /**
      * Type of filter match.
      */
-    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined;
+    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined;
 }
 
 /**
@@ -676,10 +676,10 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
      */
     globalFilter?: string | undefined | null;
     /**
-     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".
+     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
      * @defaultValue contains
      */
-    globalFilterMatchMode?: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom' | undefined;
+    globalFilterMatchMode?: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom' | undefined;
     /**
      * Header content of the table.
      */
@@ -998,7 +998,7 @@ export declare class TreeTable extends React.Component<TreeTableProps, any> {
         /**
          * Filter match mode.
          */
-        mode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined
+        mode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined
     ): void;
     /**
      * Used to get container element.

From 6ba53ca52d782bb697832ae54bb4d21477ea08a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 25 Mar 2024 13:48:47 +0300
Subject: [PATCH 015/194] Dropdown Component focusOnHover

---
 components/lib/dropdown/Dropdown.js      | 6 +++---
 components/lib/dropdown/DropdownBase.js  | 1 +
 components/lib/dropdown/DropdownItem.js  | 3 ++-
 components/lib/dropdown/DropdownPanel.js | 9 ++++++++-
 components/lib/dropdown/dropdown.d.ts    | 5 +++++
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 19da68f96a..77a7befc25 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -1251,9 +1251,9 @@ export const Dropdown = React.memo(
                         onOptionClick={onOptionClick}
                         ptm={ptm}
                         resetFilter={resetFilter}
-                        setFocusedOptionIndex={setFocusedOptionIndex}
-                        firstFocusableElement={<span {...firstHiddenFocusableElementProps}></span>}
-                        lastFocusableElement={<span {...lastHiddenFocusableElementProps}></span>}
+                        changeFocusedOptionIndex={changeFocusedOptionIndex}
+                        firstFocusableElement={<span {...firstHiddenFocusableElementProps} />}
+                        lastFocusableElement={<span {...lastHiddenFocusableElementProps} />}
                         sx={sx}
                     />
                 </div>
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 498e0c4722..27369dc56d 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -200,6 +200,7 @@ export const DropdownBase = ComponentBase.extend({
         optionDisabled: null,
         optionGroupChildren: 'items',
         selectOnFocus: false,
+        focusOnHover: true,
         autoOptionFocus: false,
         optionGroupLabel: null,
         optionGroupTemplate: null,
diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
index b226609ab4..50e160b252 100644
--- a/components/lib/dropdown/DropdownItem.js
+++ b/components/lib/dropdown/DropdownItem.js
@@ -39,7 +39,8 @@ export const DropdownItem = React.memo((props) => {
             'aria-selected': selected,
             'data-p-highlight': selected,
             'data-p-focused': focusedOptionIndex === index,
-            'data-p-disabled': disabled
+            'data-p-disabled': disabled,
+            onMouseMove: (e) => props?.onMouseMove(e, index)
         },
         getPTOptions('item', { selected, disabled, option, label })
     );
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 2440546c9c..979789e845 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -14,7 +14,6 @@ export const DropdownPanel = React.memo(
         const mergeProps = useMergeProps();
         const { ptm, cx, sx } = props;
         const context = React.useContext(PrimeReactContext);
-        const virtualScrollerRef = React.useRef(null);
 
         const filterInputRef = React.useRef(null);
         const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
@@ -71,6 +70,12 @@ export const DropdownPanel = React.memo(
             return null;
         };
 
+        const onMouseMoveChangeHoverItem = (event, index) => {
+            if (props.focusOnHover) {
+                props?.changeFocusedOptionIndex?.(event, index);
+            }
+        };
+
         const createGroupChildren = (optionGroup, style) => {
             const groupChildren = props.getOptionGroupChildren(optionGroup);
 
@@ -95,6 +100,7 @@ export const DropdownPanel = React.memo(
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}
+                        onMouseMove={onMouseMoveChangeHoverItem}
                     />
                 );
             });
@@ -166,6 +172,7 @@ export const DropdownPanel = React.memo(
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}
+                        onMouseMove={onMouseMoveChangeHoverItem}
                     />
                 );
             }
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index 66e705448e..ff0feb297f 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -355,6 +355,11 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @defaultValue false
      */
     selectOnFocus?: false;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Whether to focus on the first visible or selected element.
      * @defaultValue false

From 736a9daa8cf1a706cb07d949e078b5cdca4910f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 25 Mar 2024 14:19:46 +0300
Subject: [PATCH 016/194] MultiSelect component focusOnHover

---
 components/lib/multiselect/MultiSelect.js      | 1 +
 components/lib/multiselect/MultiSelectBase.js  | 1 +
 components/lib/multiselect/MultiSelectItem.js  | 3 ++-
 components/lib/multiselect/MultiSelectPanel.js | 8 ++++++++
 components/lib/multiselect/multiselect.d.ts    | 5 +++++
 5 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 5aad33ae65..f47700d7ba 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1106,6 +1106,7 @@ export const MultiSelect = React.memo(
                         sx={sx}
                         isUnstyled={isUnstyled}
                         metaData={metaData}
+                        changeFocusedOptionIndex={changeFocusedOptionIndex}
                     />
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index a84eb0cc90..ae83183653 100644
--- a/components/lib/multiselect/MultiSelectBase.js
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -221,6 +221,7 @@ export const MultiSelectBase = ComponentBase.extend({
         filterInputAutoFocus: true,
         filterLocale: undefined,
         selectOnFocus: false,
+        focusOnHover: true,
         autoOptionFocus: false,
         filterMatchMode: 'contains',
         filterPlaceholder: null,
diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
index 63a21dae8b..c132363a6b 100644
--- a/components/lib/multiselect/MultiSelectItem.js
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -71,7 +71,8 @@ export const MultiSelectItem = React.memo((props) => {
             role: 'option',
             'aria-selected': props.selected,
             'data-p-highlight': props.selected,
-            'data-p-disabled': props.disabled
+            'data-p-disabled': props.disabled,
+            onMouseMove: (e) => props?.onMouseMove(e, props.index)
         },
         getPTOptions('item')
     );
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index f46eb9c95f..f02830f5a9 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -94,6 +94,12 @@ export const MultiSelectPanel = React.memo(
             return null;
         };
 
+        const onMouseMoveChangeHoverItem = (event, index) => {
+            if (props.focusOnHover) {
+                props?.changeFocusedOptionIndex?.(event, index);
+            }
+        };
+
         const createGroupChildren = (optionGroup, style) => {
             const groupChildren = props.getOptionGroupChildren(optionGroup);
 
@@ -123,6 +129,7 @@ export const MultiSelectPanel = React.memo(
                         isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
+                        onMouseMove={onMouseMoveChangeHoverItem}
                     />
                 );
             });
@@ -201,6 +208,7 @@ export const MultiSelectPanel = React.memo(
                         isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
+                        onMouseMove={onMouseMoveChangeHoverItem}
                     />
                 );
             }
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index bc9b4f407b..5c5700e39c 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -699,6 +699,11 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * @defaultValue false
      */
     selectOnFocus?: false;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Whether to focus on the first visible or selected element.
      * @defaultValue false

From cd2f68b0cf8a4577b973f16728f112f18cebb025 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 25 Mar 2024 14:38:39 +0300
Subject: [PATCH 017/194] OrderList component focusOnHover

---
 components/lib/orderlist/OrderList.js        |  2 ++
 components/lib/orderlist/OrderListBase.js    |  1 +
 components/lib/orderlist/OrderListSubList.js | 12 ++++++++++--
 components/lib/orderlist/orderlist.d.ts      |  5 +++++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 3f65aba079..921177b779 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -477,6 +477,8 @@ export const OrderList = React.memo(
                     isUnstyled={isUnstyled}
                     ptm={ptm}
                     cx={cx}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    {...props}
                 />
             </div>
         );
diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js
index 0156dcab15..da9e651166 100644
--- a/components/lib/orderlist/OrderListBase.js
+++ b/components/lib/orderlist/OrderListBase.js
@@ -100,6 +100,7 @@ export const OrderListBase = ComponentBase.extend({
         moveBottomIcon: null,
         dataKey: null,
         autoOptionFocus: true,
+        focusOnHover: true,
         breakpoint: '960px',
         onChange: null,
         itemTemplate: null,
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
index 06f7acdf17..5f076a6afa 100644
--- a/components/lib/orderlist/OrderListSubList.js
+++ b/components/lib/orderlist/OrderListSubList.js
@@ -97,6 +97,12 @@ export const OrderListSubList = React.memo(
             }
         };
 
+        const onMouseMoveChangeHoverItem = (event, index) => {
+            if (props.focusOnHover && props.focused) {
+                props?.changeFocusedOptionIndex?.(index);
+            }
+        };
+
         const createDropPoint = (index, key) => {
             const droppointProps = mergeProps(
                 {
@@ -147,7 +153,8 @@ export const OrderListSubList = React.memo(
                                 className: classNames(props.className, cx('item', { selected, focused })),
                                 'aria-selected': selected,
                                 'data-p-highlight': selected,
-                                'data-p-focused': focused
+                                'data-p-focused': focused,
+                                onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i)
                             },
                             getPTOptions(item, 'item')
                         );
@@ -178,7 +185,8 @@ export const OrderListSubList = React.memo(
                                 className: classNames(props.className, cx('item', { selected, focused })),
                                 'aria-selected': selected,
                                 'data-p-highlight': selected,
-                                'data-p-focused': focused
+                                'data-p-focused': focused,
+                                onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i)
                             },
                             getPTOptions(item, 'item')
                         );
diff --git a/components/lib/orderlist/orderlist.d.ts b/components/lib/orderlist/orderlist.d.ts
index 3239f88312..8597793541 100755
--- a/components/lib/orderlist/orderlist.d.ts
+++ b/components/lib/orderlist/orderlist.d.ts
@@ -176,6 +176,11 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @defaultValue true
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Inline style of the list element.
      */

From c0703e2126d256aa2a6e2781572274ea85669236 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 25 Mar 2024 16:03:32 +0300
Subject: [PATCH 018/194] PickList component focusOnHover

---
 components/lib/picklist/PickList.js        | 6 ++++++
 components/lib/picklist/PickListBase.js    | 1 +
 components/lib/picklist/PickListItem.js    | 3 ++-
 components/lib/picklist/PickListSubList.js | 7 +++++++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index a74b599c5e..de7ba1c140 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -652,6 +652,9 @@ export const PickList = React.memo(
                     sourceFilterIcon={props.sourceFilterIcon}
                     ptm={ptm}
                     cx={cx}
+                    focusedList={focused}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    focusOnHover={props.focusOnHover}
                 />
 
                 <PickListTransferControls
@@ -706,6 +709,9 @@ export const PickList = React.memo(
                     targetFilterIcon={props.targetFilterIcon}
                     ptm={ptm}
                     cx={cx}
+                    focusedList={focused}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    focusOnHover={props.focusOnHover}
                 />
 
                 {props.showTargetControls && (
diff --git a/components/lib/picklist/PickListBase.js b/components/lib/picklist/PickListBase.js
index 4d7f413234..2735f84e8c 100644
--- a/components/lib/picklist/PickListBase.js
+++ b/components/lib/picklist/PickListBase.js
@@ -115,6 +115,7 @@ export const PickListBase = ComponentBase.extend({
         tabIndex: 0,
         dataKey: null,
         autoOptionFocus: true,
+        focusOnHover: true,
         breakpoint: '960px',
         itemTemplate: null,
         sourceItemTemplate: null,
diff --git a/components/lib/picklist/PickListItem.js b/components/lib/picklist/PickListItem.js
index 4acdf8a178..220e62da2c 100644
--- a/components/lib/picklist/PickListItem.js
+++ b/components/lib/picklist/PickListItem.js
@@ -60,7 +60,8 @@ export const PickListItem = React.memo((props) => {
             role: 'option',
             'aria-selected': props.selected,
             'data-p-highlight': props.selected,
-            'data-p-focused': props.focused
+            'data-p-focused': props.focused,
+            onMouseMove: props.onMouseMove
         },
         getPTOptions('item')
     );
diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js
index eba6e2b85a..2b7fc8867d 100644
--- a/components/lib/picklist/PickListSubList.js
+++ b/components/lib/picklist/PickListSubList.js
@@ -57,6 +57,12 @@ export const PickListSubList = React.memo(
             return null;
         };
 
+        const onMouseMoveChangeHoverItem = (index) => {
+            if (props.focusOnHover && props.focusedList[props.type]) {
+                props?.changeFocusedOptionIndex?.(index, props.type);
+            }
+        };
+
         const createItems = () => {
             if (props.list) {
                 return props.list.map((item, index) => {
@@ -78,6 +84,7 @@ export const PickListSubList = React.memo(
                             onMouseDown={(event) => props.onOptionMouseDown({ ...event, index, type: props.type })}
                             ptm={ptm}
                             cx={cx}
+                            onMouseMove={() => onMouseMoveChangeHoverItem(index)}
                         />
                     );
                 });

From 4cafa77c78c13f17d37caec27dcffbaf9ea42551 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 25 Mar 2024 12:22:46 -0400
Subject: [PATCH 019/194] Fix #6220: MultiSelect locale selectionMessage
 (#6221)

---
 components/lib/multiselect/MultiSelect.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 5aad33ae65..d14c63efd1 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
@@ -791,12 +791,13 @@ export const MultiSelect = React.memo(
 
         const getSelectedItemsLabel = () => {
             const pattern = /{(.*?)}/;
+            const selectedItemsLabel = props.selectedItemsLabel || localeOption('selectionMessage');
 
-            if (pattern.test(props.selectedItemsLabel)) {
-                return props.selectedItemsLabel.replace(props.selectedItemsLabel.match(pattern)[0], props.value.length + '');
+            if (pattern.test(selectedItemsLabel)) {
+                return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], props.value.length + '');
             }
 
-            return props.selectedItemsLabel;
+            return selectedItemsLabel;
         };
 
         const getLabel = () => {

From d05353dfc2176f36463651696a4c63abeea2945b Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 25 Mar 2024 13:17:33 -0400
Subject: [PATCH 020/194] Fix #6223: RadioButton onChange called twice

---
 components/lib/checkbox/Checkbox.js       |  2 +-
 components/lib/radiobutton/RadioButton.js | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index da8ec025a7..fa7b0e9193 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -56,7 +56,7 @@ export const Checkbox = React.memo(
                     }
                 };
 
-                props.onChange && props.onChange(eventData);
+                props?.onChange?.(eventData);
 
                 // do not continue if the user defined click wants to prevent
                 if (event.defaultPrevented) {
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index e616120f78..19dff128ad 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -57,16 +57,14 @@ export const RadioButton = React.memo(
                     }
                 };
 
-                props?.onChange?.(eventData);
-
-                // do not continue if the user defined click wants to prevent
-                if (event.defaultPrevented) {
-                    return;
-                }
-
                 if (isInputToggled || isRadioToggled) {
                     props?.onChange?.(eventData);
 
+                    // do not continue if the user defined click wants to prevent
+                    if (event.defaultPrevented) {
+                        return;
+                    }
+
                     if (isRadioToggled) {
                         inputRef.current.checked = value;
                     }
@@ -163,7 +161,7 @@ export const RadioButton = React.memo(
 
             return (
                 <div {...boxProps}>
-                    <div {...iconProps}></div>
+                    <div {...iconProps} />
                 </div>
             );
         };

From 09e38447114f921b1dfc9c090467dfed5d5d2de5 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 26 Mar 2024 13:08:13 +0300
Subject: [PATCH 021/194] New Component - Stepper

---
 components/lib/stepper/Stepper.js             | 316 ++++++++++++++++++
 components/lib/stepper/StepperBase.js         | 116 +++++++
 components/lib/stepper/StepperContent.js      |  41 +++
 components/lib/stepper/StepperHeader.js       |  29 ++
 components/lib/stepper/StepperSeparator.js    |  18 +
 components/lib/stepper/package.json           |   7 +
 components/lib/stepperpanel/StepperPanel.js   |  20 ++
 .../lib/stepperpanel/StepperPanelBase.js      |  14 +
 components/lib/stepperpanel/package.json      |   7 +
 public/themes/arya-blue/theme.css             | 132 ++++++++
 public/themes/arya-green/theme.css            | 132 ++++++++
 public/themes/arya-orange/theme.css           | 132 ++++++++
 public/themes/bootstrap4-dark-blue/theme.css  | 132 ++++++++
 public/themes/bootstrap4-light-blue/theme.css | 132 ++++++++
 public/themes/fluent-light/theme.css          | 126 +++++++
 public/themes/lara-dark-amber/theme.css       | 140 ++++++++
 public/themes/lara-dark-blue/theme.css        | 140 ++++++++
 public/themes/lara-dark-cyan/theme.css        | 140 ++++++++
 public/themes/lara-dark-green/theme.css       | 140 ++++++++
 public/themes/lara-dark-indigo/theme.css      | 140 ++++++++
 public/themes/lara-dark-pink/theme.css        | 140 ++++++++
 public/themes/lara-dark-teal/theme.css        | 140 ++++++++
 public/themes/lara-light-amber/theme.css      | 136 ++++++++
 public/themes/lara-light-blue/theme.css       | 136 ++++++++
 public/themes/lara-light-cyan/theme.css       | 136 ++++++++
 public/themes/lara-light-green/theme.css      | 136 ++++++++
 public/themes/lara-light-indigo/theme.css     | 136 ++++++++
 public/themes/lara-light-pink/theme.css       | 136 ++++++++
 public/themes/lara-light-teal/theme.css       | 136 ++++++++
 public/themes/luna-amber/theme.css            | 132 ++++++++
 public/themes/luna-blue/theme.css             | 132 ++++++++
 public/themes/luna-green/theme.css            | 132 ++++++++
 public/themes/luna-pink/theme.css             | 132 ++++++++
 public/themes/md-dark-indigo/theme.css        | 150 +++++++++
 public/themes/md-light-indigo/theme.css       | 150 +++++++++
 public/themes/mdc-dark-indigo/theme.css       | 150 +++++++++
 public/themes/mdc-light-indigo/theme.css      | 150 +++++++++
 public/themes/mira/theme.css                  | 132 ++++++++
 public/themes/nano/theme.css                  | 132 ++++++++
 public/themes/nova-accent/theme.css           | 132 ++++++++
 public/themes/nova-alt/theme.css              | 132 ++++++++
 public/themes/nova/theme.css                  | 132 ++++++++
 public/themes/rhea/theme.css                  | 132 ++++++++
 public/themes/saga-blue/theme.css             | 132 ++++++++
 public/themes/saga-green/theme.css            | 132 ++++++++
 public/themes/saga-orange/theme.css           | 132 ++++++++
 public/themes/soho-dark/theme.css             | 132 ++++++++
 public/themes/soho-light/theme.css            | 132 ++++++++
 public/themes/tailwind-light/theme.css        | 132 ++++++++
 public/themes/vela-blue/theme.css             | 132 ++++++++
 public/themes/vela-green/theme.css            | 132 ++++++++
 public/themes/vela-orange/theme.css           | 132 ++++++++
 public/themes/viva-dark/theme.css             | 132 ++++++++
 public/themes/viva-light/theme.css            | 132 ++++++++
 54 files changed, 6658 insertions(+)
 create mode 100644 components/lib/stepper/Stepper.js
 create mode 100644 components/lib/stepper/StepperBase.js
 create mode 100644 components/lib/stepper/StepperContent.js
 create mode 100644 components/lib/stepper/StepperHeader.js
 create mode 100644 components/lib/stepper/StepperSeparator.js
 create mode 100644 components/lib/stepper/package.json
 create mode 100644 components/lib/stepperpanel/StepperPanel.js
 create mode 100644 components/lib/stepperpanel/StepperPanelBase.js
 create mode 100644 components/lib/stepperpanel/package.json

diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
new file mode 100644
index 0000000000..224cca999c
--- /dev/null
+++ b/components/lib/stepper/Stepper.js
@@ -0,0 +1,316 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/Componentbase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { UniqueComponentId, classNames } from '../utils/Utils';
+import { StepperBase } from './StepperBase';
+import { StepperContent } from './StepperContent';
+import { StepperHeader } from './StepperHeader';
+import { StepperSeparator } from './StepperSeparator';
+
+export const Stepper = React.memo(
+    React.forwardRef((inProps) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = StepperBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({
+            props
+        });
+        const [activeStepState, setActiveStepState] = React.useState(props.activeStep);
+        const navRef = React.useRef();
+
+        useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' });
+
+        const getStepProp = (step, name) => {
+            return step.props ? step.props[name] : undefined;
+        };
+
+        const getStepKey = (step, index) => {
+            return getStepProp(step, 'header') || index;
+        };
+
+        const isStep = (child) => {
+            return child.type.displayName === 'StepperPanel';
+        };
+
+        const isStepActive = (index) => {
+            return activeStepState === index;
+        };
+
+        const isItemDisabled = (index) => {
+            return props.linear && !isStepActive(index);
+        };
+
+        const updateActiveStep = (event, index) => {
+            setActiveStepState(index);
+
+            //component event propu olarak ekle
+            props.onChangeStep && props.onChangeStep({ originalEvent: event, index });
+        };
+
+        const getStepHeaderActionId = (index) => {
+            return `${UniqueComponentId()}_${index}_header_action`;
+        };
+
+        const getStepContentId = (index) => {
+            return `${UniqueComponentId()}_${index}content`;
+        };
+
+        const stepperPanels = () => {
+            return React.Children.toArray(props.children).reduce((stepperpanels, child) => {
+                if (isStep(child)) {
+                    stepperpanels.push(child);
+                } else if (child && Array.isArray(child)) {
+                    React.Children.toArray(child.props.children).forEach((nestedChild) => {
+                        if (isStep(nestedChild)) {
+                            stepperpanels.push(nestedChild);
+                        }
+                    });
+                }
+
+                return stepperpanels;
+            }, []);
+        };
+
+        const prevCallback = (event, index) => {
+            if (index !== 0) {
+                updateActiveStep(event, index - 1);
+            }
+        };
+
+        const nextCallback = (event, index) => {
+            if (index !== stepperPanels().length - 1) {
+                updateActiveStep(event, index + 1);
+            }
+        };
+
+        const getStepPT = (step, key, index) => {
+            const count = stepperPanels().length;
+
+            const stepMetaData = {
+                props: step.props,
+                parent: {
+                    props: props
+                },
+                context: {
+                    index,
+                    count,
+                    first: index === 0,
+                    last: index === count - 1,
+                    active: isStepActive(index),
+                    highlighted: index < activeStepState,
+                    disabled: isItemDisabled(index)
+                }
+            };
+
+            return mergeProps(ptm(`stepperpanel.${key}`, { stepperpanel: stepMetaData }), ptm(`stepperpanel.${key}`, stepMetaData), ptmo(getStepProp(step, 'pt'), key, stepMetaData));
+        };
+
+        const onItemClick = (event, index) => {
+            if (props.linear) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (index !== activeStepState) {
+                updateActiveStep(event, index);
+            }
+        };
+
+        const createPanel = () => {
+            return stepperPanels().map((step, index) => {
+                const panelProps = mergeProps(
+                    {
+                        className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index })),
+                        'aria-current': isStepActive(index) ? 'step' : undefined,
+                        role: 'presentation',
+                        'data-p-highlight': isStepActive(index),
+                        'data-p-disabled': isItemDisabled(index),
+                        'data-p-active': isStepActive(index)
+                    },
+                    ptm('stepperpanel')
+                );
+
+                return (
+                    <li key={getStepKey(step, index)} {...panelProps}>
+                        <StepperHeader
+                            id={getStepHeaderActionId(index)}
+                            template={step.children?.header}
+                            stepperpanel={step}
+                            index={index}
+                            disabled={isItemDisabled(index)}
+                            active={isStepActive(index)}
+                            highlighted={index < activeStepState}
+                            ariaControls={getStepContentId(index)}
+                            clickCallback={onItemClick}
+                            getStepPT={getStepPT}
+                            getStepProp={getStepProp}
+                            cx={cx}
+                        />
+                        {index !== stepperPanels().length - 1 && (
+                            <StepperSeparator template={step.children?.separator} separatorClass={cx('stepper.separator')} stepperpanel={step} index={index} active={isStepActive(index)} highlighted={index < activeStepState} getStepPT={getStepPT} />
+                        )}
+                    </li>
+                );
+            });
+        };
+
+        const createPanelContent = () => {
+            return stepperPanels().map((step, index) => {
+                if (!isStepActive(index)) {
+                    return null;
+                }
+
+                return (
+                    <StepperContent
+                        key={getStepContentId(index)}
+                        id={getStepContentId(index)}
+                        tempate={step?.children?.content}
+                        stepperpanel={step}
+                        index={index}
+                        active={isStepActive(index)}
+                        highlighted={index < activeStepState}
+                        clickCallback={onItemClick}
+                        prevCallback={prevCallback}
+                        nextCallback={nextCallback}
+                        getStepPT={getStepPT}
+                        ariaLabelledby={getStepHeaderActionId(index)}
+                        ptm={ptm}
+                        cx={cx}
+                    />
+                );
+            });
+        };
+
+        const createHorizontal = () => {
+            const items = createPanel();
+            const navProps = mergeProps(
+                {
+                    className: classNames(cx('nav')),
+                    ref: navRef
+                },
+                ptm('nav')
+            );
+
+            const panelContainerProps = mergeProps(
+                {
+                    className: cx('panelContainer')
+                },
+                ptm('panelContainer')
+            );
+
+            return (
+                <>
+                    <ul {...navProps}>{items}</ul>
+                    <div {...panelContainerProps}>{createPanelContent()}</div>
+                </>
+            );
+        };
+
+        const createVertical = () => {
+            return stepperPanels().map((step, index) => {
+                const navProps = mergeProps(
+                    {
+                        ref: navRef,
+                        className: cx('panel', { props, index, isStepActive }),
+                        'aria-current': isStepActive(index) ? 'step' : undefined,
+                        ...getStepPT(step, 'root', index),
+                        ...getStepPT(step, 'panel', index),
+                        'data-p-highlight': isStepActive(index),
+                        'data-p-disabled': isItemDisabled(index),
+                        'data-p-active': isStepActive(index)
+                    },
+                    ptm('nav')
+                );
+
+                const headerProps = mergeProps({
+                    className: cx('stepper.header', { step, isStepActive, isItemDisabled, index }),
+                    ...getStepPT(step, 'header', index)
+                });
+
+                const transitionProps = mergeProps({
+                    ...getStepPT(step, 'transition', index)
+                });
+
+                const toggleableContentProps = mergeProps({
+                    className: cx('stepper.toggleableContent'),
+                    ...getStepPT(step, 'toggleableContent', index)
+                });
+
+                return (
+                    <div key={getStepKey(step, index)} {...navProps}>
+                        <div {...headerProps}>
+                            <StepperHeader
+                                id={getStepHeaderActionId(index)}
+                                template={step.children?.header}
+                                stepperpanel={step}
+                                index={index}
+                                disabled={isItemDisabled(index)}
+                                active={isStepActive(index)}
+                                highlighted={index < activeStepState}
+                                ariaControls={getStepContentId(index)}
+                                clickCallback={onItemClick}
+                                getStepPT={getStepPT}
+                                getStepProp={getStepProp}
+                                cx={cx}
+                            />
+                        </div>
+                        <CSSTransition {...transitionProps}>
+                            <div style={{ display: !isStepActive(index) && 'none' }} {...toggleableContentProps}>
+                                {index !== stepperPanels().length - 1 && (
+                                    <StepperSeparator
+                                        template={step.children?.separator}
+                                        separatorClass={cx('stepper.separator')}
+                                        stepperpanel={step}
+                                        index={index}
+                                        active={isStepActive(index)}
+                                        highlighted={index < activeStepState}
+                                        getStepPT={getStepPT}
+                                    />
+                                )}
+                                <StepperContent
+                                    key={getStepContentId(index)}
+                                    id={getStepContentId(index)}
+                                    tempate={step?.children?.content}
+                                    stepperpanel={step}
+                                    index={index}
+                                    active={isStepActive(index)}
+                                    highlighted={index < activeStepState}
+                                    clickCallback={onItemClick}
+                                    prevCallback={prevCallback}
+                                    nextCallback={nextCallback}
+                                    getStepPT={getStepPT}
+                                    ariaLabelledby={getStepHeaderActionId(index)}
+                                    ptm={ptm}
+                                    cx={cx}
+                                />
+                            </div>
+                        </CSSTransition>
+                    </div>
+                );
+            });
+        };
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(cx('root')),
+                role: 'tablist'
+            },
+            StepperBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {props.start && props.start()}
+                {props.orientation === 'horizontal' && createHorizontal()}
+                {props.orientation === 'vertical' && createVertical()}
+                {props.end && props.end()}
+            </div>
+        );
+    })
+);
+
+StepperBase.displayName = 'StepperBase';
diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js
new file mode 100644
index 0000000000..3148101cc1
--- /dev/null
+++ b/components/lib/stepper/StepperBase.js
@@ -0,0 +1,116 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-stepper p-component', {
+            'p-stepper-horizontal': props.orientation === 'horizontal',
+            'p-stepper-vertical': props.orientation === 'vertical',
+            'p-readonly': props.linear
+        }),
+    nav: 'p-stepper-nav',
+    stepper: {
+        header: ({ isStepActive, isItemDisabled, index }) => {
+            return classNames('p-stepper-header', {
+                'p-highlight': isStepActive(index),
+                'p-disabled': isItemDisabled(index)
+            });
+        },
+        action: 'p-stepper-action',
+        number: 'p-stepper-number',
+        title: 'p-stepper-title',
+        separator: 'p-stepper-separator',
+        toggleableContent: 'p-stepper-toggleable-content',
+        content: ({ props }) =>
+            classNames('p-stepper-content', {
+                'p-toggleable-content': props.orientation === 'vertical'
+            })
+    },
+    panelContainer: 'p-stepper-panels',
+    panel: ({ props, isStepActive, index }) =>
+        classNames('p-stepper-panel', {
+            'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-stepper .p-stepper-nav {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        overflow-x: auto;
+    }
+    
+    .p-stepper-vertical .p-stepper-nav {
+        flex-direction: column;
+    }
+    
+    .p-stepper-header {
+        position: relative;
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+    
+        &:last-of-type {
+            flex: initial;
+        }
+    }
+    
+    .p-stepper-header .p-stepper-action {
+        border: 0 none;
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+        cursor: pointer;
+    
+        &:focus-visible {
+            @include focused();
+        }
+    }
+    
+    .p-stepper.p-stepper-readonly .p-stepper-header {
+        cursor: auto;
+    }
+    
+    .p-stepper-header.p-highlight .p-stepper-action {
+        cursor: default;
+    }
+    
+    .p-stepper-title {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+    
+    .p-stepper-number {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-stepper-separator {
+        flex: 1 1 0;
+    }
+}
+`;
+
+export const StepperBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Stepper',
+        activeStep: 0,
+        orientation: 'horizontal',
+        linear: false
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js
new file mode 100644
index 0000000000..4e27353998
--- /dev/null
+++ b/components/lib/stepper/StepperContent.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+
+export const StepperContent = React.memo(
+    React.forwardRef((props) => {
+        const mergeProps = useMergeProps();
+        const { cx, ptm } = props;
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }),
+                role: 'tabpanel',
+                'aria-labelledby': props.ariaLabelledby,
+                ...props.getStepPT(props.stepperpanel, 'root', props.index),
+                ...props.getStepPT(props.stepperpanel, 'content', props.index),
+                'data-p-active': props.active
+            },
+            ptm('stepperpanel')
+        );
+
+        const createContent = () => {
+            const ComponentToRender = props.template;
+
+            return (
+                <ComponentToRender
+                    index={props.index}
+                    active={props.active}
+                    highlighted={props.highlighted}
+                    clickCallback={(event) => props.onItemClick(event, props.index)}
+                    prevCallback={(event) => props.prevCallback(event, props.index)}
+                    nextCallback={(event) => props.nextCallback(event, props.index)}
+                />
+            );
+        };
+
+        return <div {...rootProps}>{props.template ? createContent() : props.stepperpanel}</div>;
+    })
+);
+
+StepperContent.displayName = 'StepperContent';
diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js
new file mode 100644
index 0000000000..c3ff1f7128
--- /dev/null
+++ b/components/lib/stepper/StepperHeader.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+
+export const StepperHeader = React.memo(
+    React.forwardRef((props) => {
+        const mergeProps = useMergeProps();
+        const { cx } = props;
+
+        const buttonProps = mergeProps({
+            id: props.id,
+            className: cx('stepper.action'),
+            role: 'tab',
+            tabIndex: props.disabled ? -1 : undefined,
+            'aria-controls': props.ariaControls,
+            onClick: (e) => props.clickCallback(e, props.index)
+        });
+
+        return props.template ? (
+            props.template()
+        ) : (
+            <button {...buttonProps}>
+                <span className={cx('stepper.number')}>{props.index + 1}</span>
+                <span className={cx('stepper.title')}>{props.getStepProp(props.stepperpanel, 'header')}</span>
+            </button>
+        );
+    })
+);
+
+StepperHeader.displayName = 'StepperHeader';
diff --git a/components/lib/stepper/StepperSeparator.js b/components/lib/stepper/StepperSeparator.js
new file mode 100644
index 0000000000..0ebc1e4d01
--- /dev/null
+++ b/components/lib/stepper/StepperSeparator.js
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+
+export const StepperSeparator = React.memo(
+    React.forwardRef((props) => {
+        const mergeProps = useMergeProps();
+
+        const separatorProps = mergeProps({
+            'aria-hidden': true,
+            className: props.separatorClass,
+            ...props.getStepPT(props.stepperpanel, 'separator', props.index)
+        });
+
+        return props.template ? props.template() : <span {...separatorProps} />;
+    })
+);
+
+StepperSeparator.displayName = 'StepperSeparator';
diff --git a/components/lib/stepper/package.json b/components/lib/stepper/package.json
new file mode 100644
index 0000000000..89e9b22850
--- /dev/null
+++ b/components/lib/stepper/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./stepper.cjs.js",
+    "module": "./stepper.esm.js",
+    "unpkg": "./stepper.min.js",
+    "types": "./stepper.d.ts",
+    "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js
new file mode 100644
index 0000000000..bf0a4905f3
--- /dev/null
+++ b/components/lib/stepperpanel/StepperPanel.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/Componentbase';
+import { StepperPanelBase } from './StepperPanelBase';
+
+export const StepperPanel = React.memo(
+    React.forwardRef((inProps) => {
+        const context = React.useContext(PrimeReactContext);
+        const props = StepperPanelBase.getProps(inProps, context);
+        const { isUnstyled } = StepperPanelBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(StepperPanelBase.css.styles, isUnstyled, { name: 'StepperPanel' });
+
+        return <>{props.children}</>;
+    })
+);
+
+StepperPanel.displayName = 'StepperPanel';
diff --git a/components/lib/stepperpanel/StepperPanelBase.js b/components/lib/stepperpanel/StepperPanelBase.js
new file mode 100644
index 0000000000..e32e34bd7d
--- /dev/null
+++ b/components/lib/stepperpanel/StepperPanelBase.js
@@ -0,0 +1,14 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const styles = '';
+
+export const StepperPanelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'StepperPanel',
+        children: undefined,
+        header: null
+    },
+    css: {
+        styles
+    }
+});
diff --git a/components/lib/stepperpanel/package.json b/components/lib/stepperpanel/package.json
new file mode 100644
index 0000000000..b821047691
--- /dev/null
+++ b/components/lib/stepperpanel/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./stepperpanel.cjs.js",
+    "module": "./stepperpanel.esm.js",
+    "unpkg": "./stepperpanel.min.js",
+    "types": "./stepperpanel.d.ts",
+    "sideEffects": false
+}
\ No newline at end of file
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d98ad44d15..db6a1475a9 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index a1f1a7be09..d108de749a 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 38d828d13b..17a8fa3f89 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index dd5593a0f5..317d46829d 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4385,6 +4414,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #8dd0ff;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #2a323d;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3f4b5b;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #8dd0ff;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f4b5b;
     border: 0 none;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index e6efd22ece..ffb8f0cca9 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #495057;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #495057;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4385,6 +4414,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007bff;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #212529;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007bff;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #efefef;
     border: 0 none;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index afe26358fd..3d0828f7f3 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #605e5c;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #605e5c;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #605e5c;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4303,6 +4332,103 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #edebe9;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #605e5c;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #323130;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #323130;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #a19f9d;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #323130;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f3f2f1;
     border: 0 none;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 0298d73c00..e512a45287 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #fbbf24;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #fbbf24;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6681,4 +6813,12 @@
     background: #fbbf24;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #fbbf24;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 5c702aadd3..69f3b71a5f 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #60a5fa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #60a5fa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6681,4 +6813,12 @@
     background: #60a5fa;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #60a5fa;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index fedc6542ed..c34e2a7d2a 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #22d3ee;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #22d3ee;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6681,4 +6813,12 @@
     background: #22d3ee;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #22d3ee;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index c95c001e55..2b9344a727 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #34d399;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #34d399;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6681,4 +6813,12 @@
     background: #34d399;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #34d399;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 73be1e31ec..0b41989e97 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #818cf8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #818cf8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6681,4 +6813,12 @@
     background: #818cf8;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #818cf8;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index e84779e668..23cbfa1f27 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f472b6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f472b6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6681,4 +6813,12 @@
     background: #f472b6;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #f472b6;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 6ca9c67fbd..7376a3a2c3 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #2dd4bf;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #2dd4bf;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6681,4 +6813,12 @@
     background: #2dd4bf;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #2dd4bf;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index d51e954e9e..e078a2d64b 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f59e0b;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f59e0b;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6675,4 +6807,8 @@
     background: #f59e0b;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f59e0b;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 9fe3ce2cb3..a8058cb1e8 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3b82f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3b82f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6675,4 +6807,8 @@
     background: #3b82f6;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #3b82f6;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 591d6a8b90..a1cef928f1 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #06b6d4;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #06b6d4;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6675,4 +6807,8 @@
     background: #06b6d4;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #06b6d4;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 518893ee33..941a11a31a 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #10b981;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #10b981;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6675,4 +6807,8 @@
     background: #10b981;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #10b981;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index d20a5ac5bd..29c0c66490 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #6366f1;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #6366f1;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6675,4 +6807,8 @@
     background: #6366f1;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #6366f1;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index ca3494bf48..d24f8b64e2 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ec4899;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ec4899;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6675,4 +6807,8 @@
     background: #ec4899;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ec4899;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 25a5788c0e..d87f4ac6c2 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1381,6 +1381,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #6b7280;
   }
@@ -1410,6 +1419,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4368,6 +4397,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #14b8a6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #14b8a6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6675,4 +6807,8 @@
     background: #14b8a6;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #14b8a6;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 850accb5ad..ab3d9f6165 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4312,6 +4341,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffe082;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffe082;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 450bced75d..4777fd66aa 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4312,6 +4341,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81d4fa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81d4fa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index a59449d13f..773889e7e0 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4312,6 +4341,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #c5e1a5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #c5e1a5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 5309fcdc36..af0aa05d07 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #9b9b9b;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4312,6 +4341,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f48fb1;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f48fb1;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 14631845ea..6b81bb0725 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 3rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 1.25rem 1.25rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4396,6 +4425,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0deg, 0%, 100%, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -7866,6 +7998,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 342009d383..8f35779ec6 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 3rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 1.25rem 1.25rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4396,6 +4425,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -7866,6 +7998,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #3F51B5;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index e6c72495ba..c882683309 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4396,6 +4425,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0deg, 0%, 100%, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -7866,6 +7998,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index a0c2255b58..037a8352d0 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1384,6 +1384,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
@@ -1413,6 +1422,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4396,6 +4425,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -7866,6 +7998,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #3F51B5;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index ca2ea5bfd2..ad3749439b 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1386,6 +1386,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #4c566a;
   }
@@ -1415,6 +1424,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4350,6 +4379,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #c2c7d1;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #81a1c1;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4c566a;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #5e81ac;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #4c566a;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e9f0;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #5e81ac;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eceff4;
     border: 0 none;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 530a41d7ec..c425d8b6bd 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #697077;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.3125rem 0.3125rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.25rem;
+    color: #697077;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.25rem;
+    color: #697077;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #697077;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #343a3f;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #1174c0;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.5rem;
+    color: #343a3f;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #343a3f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #1174c0;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f2f4f8;
     border: 0 none;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 8373c92d5b..e4582fea5b 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #666666;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4303,6 +4332,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 40ee63fa8d..975968a736 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #666666;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4312,6 +4341,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index d0332b1ef8..320d374f80 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1367,6 +1367,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #666666;
   }
@@ -1396,6 +1405,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4312,6 +4341,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index d970d35779..3dbfd9408a 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 1.858rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
   ::-webkit-input-placeholder {
     color: #a6a6a6;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.53625rem 0.53625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4303,6 +4332,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dadada;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #a6a6a6;
+    border: 1px solid #c8c8c8;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #a6a6a6;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #666666;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #7b95a3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #666666;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #666666;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #7b95a3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index c83f32023c..3878434d4c 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #2196f3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #2196f3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 1fdae1f888..1daf616c28 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #4caf50;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #4caf50;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 8e1add16fe..549fd90aff 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: #6c757d;
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffc107;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffc107;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 0ce1e1997a..1f9aa09e1c 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -1383,6 +1383,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1412,6 +1421,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4370,6 +4399,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #3e4053;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #b19df7;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #282936;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3e4053;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #b19df7;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3e4053;
     border: 0 none;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 14bc204db0..96a48ad2b7 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1383,6 +1383,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #708da9;
   }
@@ -1412,6 +1421,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #708da9;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #708da9;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4370,6 +4399,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dfe7ef;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #043d75;
+    border: 1px solid #f6f9fc;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #708da9;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #043d75;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #7254f3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #043d75;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dfe7ef;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #043d75;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #7254f3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eff3f8;
     border: 0 none;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 44a143db4e..0a25d12f4b 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1392,6 +1392,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #71717a;
   }
@@ -1421,6 +1430,26 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #71717a;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #71717a;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4356,6 +4385,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 0.375rem;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #71717a;
+    font-weight: 600;
+    transition: none;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #3f3f46;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #4f46e5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #3f3f46;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #3f3f46;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #4f46e5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #fafafa;
     border: 0 none;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index f4c3ff9d4e..fdc5dae56b 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index cf7afa5e48..8970d9a548 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index fe6f001289..2bf1e624b9 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1364,6 +1364,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1393,6 +1402,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4328,6 +4357,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index e57b2e62cf..38da8f13b1 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1390,6 +1390,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
@@ -1419,6 +1428,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4402,6 +4431,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #263238;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9eade6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #161d21;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #263238;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.3s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9eade6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #263238;
     border: 0 none;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index a6eb4d25db..85b374d3c4 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1390,6 +1390,15 @@
   .p-input-icon-right > .p-inputtext {
     padding-right: 2.5rem;
   }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
   ::-webkit-input-placeholder {
     color: #898989;
   }
@@ -1419,6 +1428,26 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #898989;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #898989;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4402,6 +4431,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #ebebeb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #898989;
+    font-weight: 600;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #6c6c6c;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #5472d4;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #6c6c6c;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #ebebeb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.3s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #6c6c6c;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #5472d4;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f5f5f5;
     border: 0 none;

From b5e7538839b282ca4d9fcdc8cdf8bcdc913db89e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 26 Mar 2024 13:30:36 +0300
Subject: [PATCH 022/194] Slider - Update component structure v2

---
 components/lib/slider/Slider.js | 61 +++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index ba20cee9b9..e291592e6a 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -51,8 +51,14 @@ export const Slider = React.memo(
             dragging.current = true;
             updateDomData();
             sliderHandleClick.current = true;
-            handleIndex.current = index;
-            //event.preventDefault();
+
+            if (props.range && value[0] === props.max) {
+                handleIndex.current = 0;
+            } else {
+                handleIndex.current = index;
+            }
+
+            event.preventDefault();
         };
 
         const onDrag = (event) => {
@@ -181,8 +187,11 @@ export const Slider = React.memo(
                 return;
             }
 
-            if (horizontal) handleValue = ((pageX - initX.current) * 100) / barWidth.current;
-            else handleValue = ((initY.current + barHeight.current - pageY) * 100) / barHeight.current;
+            if (horizontal) {
+                handleValue = ((pageX - initX.current) * 100) / barWidth.current;
+            } else {
+                handleValue = ((initY.current + barHeight.current - pageY) * 100) / barHeight.current;
+            }
 
             let newValue = (props.max - props.min) * (handleValue / 100) + props.min;
 
@@ -190,8 +199,11 @@ export const Slider = React.memo(
                 const oldValue = props.range ? value[handleIndex.current] : value;
                 const diff = newValue - oldValue;
 
-                if (diff < 0) newValue = oldValue + Math.ceil(newValue / props.step - oldValue / props.step) * props.step;
-                else if (diff > 0) newValue = oldValue + Math.floor(newValue / props.step - oldValue / props.step) * props.step;
+                if (diff < 0) {
+                    newValue = oldValue + Math.ceil(newValue / props.step - oldValue / props.step) * props.step;
+                } else if (diff > 0) {
+                    newValue = oldValue + Math.floor(newValue / props.step - oldValue / props.step) * props.step;
+                }
             } else {
                 newValue = Math.floor(newValue);
             }
@@ -205,11 +217,15 @@ export const Slider = React.memo(
 
             if (props.range) {
                 if (handleIndex.current === 0) {
-                    if (parsedValue < props.min) parsedValue = props.min;
-                    else if (parsedValue > props.max) parsedValue = props.max;
-                } else {
-                    if (parsedValue > props.max) parsedValue = props.max;
-                    else if (parsedValue < props.min) parsedValue = props.min;
+                    if (parsedValue < props.min) {
+                        parsedValue = props.min;
+                    } else if (parsedValue > props.max) {
+                        parsedValue = props.max;
+                    }
+                } else if (parsedValue > props.max) {
+                    parsedValue = props.max;
+                } else if (parsedValue < props.min) {
+                    parsedValue = props.min;
                 }
 
                 newValue = [...value];
@@ -222,8 +238,11 @@ export const Slider = React.memo(
                     });
                 }
             } else {
-                if (parsedValue < props.min) parsedValue = props.min;
-                else if (parsedValue > props.max) parsedValue = props.max;
+                if (parsedValue < props.min) {
+                    parsedValue = props.min;
+                } else if (parsedValue > props.max) {
+                    parsedValue = props.max;
+                }
 
                 newValue = parsedValue;
 
@@ -266,7 +285,7 @@ export const Slider = React.memo(
                 ptm('handle')
             );
 
-            return <span {...handleProps}></span>;
+            return <span {...handleProps} />;
         };
 
         const createRangeSlider = () => {
@@ -290,7 +309,7 @@ export const Slider = React.memo(
 
             return (
                 <>
-                    <span {...rangeProps}></span>
+                    <span {...rangeProps} />
                     {rangeStartHandle}
                     {rangeEndHandle}
                 </>
@@ -300,9 +319,13 @@ export const Slider = React.memo(
         const createSingleSlider = () => {
             let handleValue;
 
-            if (value < props.min) handleValue = props.min;
-            else if (value > props.max) handleValue = props.max;
-            else handleValue = ((value - props.min) * 100) / (props.max - props.min);
+            if (value < props.min) {
+                handleValue = props.min;
+            } else if (value > props.max) {
+                handleValue = props.max;
+            } else {
+                handleValue = ((value - props.min) * 100) / (props.max - props.min);
+            }
 
             const rangeStyle = horizontal ? { width: handleValue + '%' } : { height: handleValue + '%' };
             const handle = horizontal ? createHandle(handleValue, null, null) : createHandle(null, handleValue, null);
@@ -317,7 +340,7 @@ export const Slider = React.memo(
 
             return (
                 <>
-                    <span {...rangeProps}></span>
+                    <span {...rangeProps} />
                     {handle}
                 </>
             );

From 7070358af6977293e749b8001135d5033a1c1597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Tue, 26 Mar 2024 14:32:53 +0300
Subject: [PATCH 023/194] Renamed the function name

---
 components/lib/dropdown/DropdownPanel.js       | 6 +++---
 components/lib/multiselect/MultiSelectPanel.js | 6 +++---
 components/lib/orderlist/OrderListSubList.js   | 6 +++---
 components/lib/picklist/PickListSubList.js     | 4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 979789e845..7804b715fc 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -70,7 +70,7 @@ export const DropdownPanel = React.memo(
             return null;
         };
 
-        const onMouseMoveChangeHoverItem = (event, index) => {
+        const changeFocusedItemOnHover = (event, index) => {
             if (props.focusOnHover) {
                 props?.changeFocusedOptionIndex?.(event, index);
             }
@@ -100,7 +100,7 @@ export const DropdownPanel = React.memo(
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}
-                        onMouseMove={onMouseMoveChangeHoverItem}
+                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             });
@@ -172,7 +172,7 @@ export const DropdownPanel = React.memo(
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}
-                        onMouseMove={onMouseMoveChangeHoverItem}
+                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             }
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index f02830f5a9..4ae7e74584 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -94,7 +94,7 @@ export const MultiSelectPanel = React.memo(
             return null;
         };
 
-        const onMouseMoveChangeHoverItem = (event, index) => {
+        const changeFocusedItemOnHover = (event, index) => {
             if (props.focusOnHover) {
                 props?.changeFocusedOptionIndex?.(event, index);
             }
@@ -129,7 +129,7 @@ export const MultiSelectPanel = React.memo(
                         isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
-                        onMouseMove={onMouseMoveChangeHoverItem}
+                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             });
@@ -208,7 +208,7 @@ export const MultiSelectPanel = React.memo(
                         isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
-                        onMouseMove={onMouseMoveChangeHoverItem}
+                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             }
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
index 5f076a6afa..6520d13f82 100644
--- a/components/lib/orderlist/OrderListSubList.js
+++ b/components/lib/orderlist/OrderListSubList.js
@@ -97,7 +97,7 @@ export const OrderListSubList = React.memo(
             }
         };
 
-        const onMouseMoveChangeHoverItem = (event, index) => {
+        const changeFocusedItemOnHover = (event, index) => {
             if (props.focusOnHover && props.focused) {
                 props?.changeFocusedOptionIndex?.(index);
             }
@@ -154,7 +154,7 @@ export const OrderListSubList = React.memo(
                                 'aria-selected': selected,
                                 'data-p-highlight': selected,
                                 'data-p-focused': focused,
-                                onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i)
+                                onMouseMove: (e) => changeFocusedItemOnHover(e, i)
                             },
                             getPTOptions(item, 'item')
                         );
@@ -186,7 +186,7 @@ export const OrderListSubList = React.memo(
                                 'aria-selected': selected,
                                 'data-p-highlight': selected,
                                 'data-p-focused': focused,
-                                onMouseMove: (e) => onMouseMoveChangeHoverItem(e, i)
+                                onMouseMove: (e) => changeFocusedItemOnHover(e, i)
                             },
                             getPTOptions(item, 'item')
                         );
diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js
index 2b7fc8867d..4ca3448f4b 100644
--- a/components/lib/picklist/PickListSubList.js
+++ b/components/lib/picklist/PickListSubList.js
@@ -57,7 +57,7 @@ export const PickListSubList = React.memo(
             return null;
         };
 
-        const onMouseMoveChangeHoverItem = (index) => {
+        const changeFocusedItemOnHover = (index) => {
             if (props.focusOnHover && props.focusedList[props.type]) {
                 props?.changeFocusedOptionIndex?.(index, props.type);
             }
@@ -84,7 +84,7 @@ export const PickListSubList = React.memo(
                             onMouseDown={(event) => props.onOptionMouseDown({ ...event, index, type: props.type })}
                             ptm={ptm}
                             cx={cx}
-                            onMouseMove={() => onMouseMoveChangeHoverItem(index)}
+                            onMouseMove={() => changeFocusedItemOnHover(index)}
                         />
                     );
                 });

From adbb5bb9c42dab88f94582401cf0aba08e091250 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Tue, 26 Mar 2024 14:36:48 +0300
Subject: [PATCH 024/194] Build API Doc

---
 .eslintignore                           |  1 +
 components/doc/common/apidoc/index.json | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..72e8ffc0db
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+*
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 3115eae269..80fab963c2 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -23094,6 +23094,14 @@
                             "default": "",
                             "description": "Reference of the focusable input element."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "highlightOnSelect",
                             "optional": true,
@@ -35497,6 +35505,14 @@
                             "default": "false",
                             "description": "Use flex layout for the items panel."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "id",
                             "optional": true,
@@ -37150,6 +37166,14 @@
                             "default": "",
                             "description": "Custom template of filter element."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "header",
                             "optional": true,

From 846c16411f1a74ab6e584f9a60cd2053d1e02697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Tue, 26 Mar 2024 14:41:53 +0300
Subject: [PATCH 025/194] Removed unnecessary tag

---
 components/lib/iconfield/IconField.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js
index b1e060acbe..a4ef6c66ee 100644
--- a/components/lib/iconfield/IconField.js
+++ b/components/lib/iconfield/IconField.js
@@ -28,7 +28,7 @@ export const IconField = React.memo(
 
         return (
             <div {...rootProps} ref={elementRef}>
-                <>{props.children}</>
+                {props.children}
             </div>
         );
     })

From bbfed7627122fe837d66ffbf2585d69c7ce8d802 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 26 Mar 2024 14:43:22 +0300
Subject: [PATCH 026/194] MultiSelect - Update component structure v2

---
 components/lib/multiselect/MultiSelect.js     | 227 ++++++++++--------
 .../lib/multiselect/MultiSelectHeader.js      |  13 +-
 .../lib/multiselect/MultiSelectPanel.js       | 118 ++++-----
 3 files changed, 196 insertions(+), 162 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index d14c63efd1..f8a05a760c 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -84,13 +84,13 @@ export const MultiSelect = React.memo(
         };
 
         const findNextSelectedOptionIndex = (index) => {
-            const matchedOptionIndex = hasSelectedOption && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidSelectedOption(option)) : -1;
+            const matchedOptionIndex = hasSelectedOption() && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidSelectedOption(option)) : -1;
 
             return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
         };
 
         const findPrevSelectedOptionIndex = (index) => {
-            const matchedOptionIndex = hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidSelectedOption(option)) : -1;
+            const matchedOptionIndex = hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidSelectedOption(option)) : -1;
 
             return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
         };
@@ -98,7 +98,7 @@ export const MultiSelect = React.memo(
         const findNearestSelectedOptionIndex = (index, firstCheckUp = false) => {
             let matchedOptionIndex = -1;
 
-            if (hasSelectedOption) {
+            if (hasSelectedOption()) {
                 if (firstCheckUp) {
                     matchedOptionIndex = findPrevSelectedOptionIndex(index);
                     matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
@@ -135,8 +135,11 @@ export const MultiSelect = React.memo(
             let selected = isSelected(option);
             let value = null;
 
-            if (selected) value = props.value.filter((val) => !ObjectUtils.equals(val, getOptionValue(option), equalityKey));
-            else value = [...(props.value || []), getOptionValue(option)];
+            if (selected) {
+                value = props.value.filter((val) => !ObjectUtils.equals(val, getOptionValue(option), equalityKey));
+            } else {
+                value = [...(props.value || []), getOptionValue(option)];
+            }
 
             updateModel(event, value, option);
             index !== -1 && setFocusedOptionIndex(index);
@@ -203,10 +206,11 @@ export const MultiSelect = React.memo(
             if (!overlayVisibleState) {
                 setFocusedOptionIndex(-1);
                 onArrowDownKey(event);
-            } else {
-                if (focusedOptionIndex !== -1) {
-                    if (event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);
-                    else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+            } else if (focusedOptionIndex !== -1) {
+                if (event.shiftKey) {
+                    onOptionSelectRange(event, focusedOptionIndex);
+                } else {
+                    onOptionSelect(event, visibleOptions[focusedOptionIndex]);
                 }
             }
 
@@ -294,12 +298,18 @@ export const MultiSelect = React.memo(
 
             switch (event.code) {
                 case 'ArrowUp':
-                    if (props.inline) break;
+                    if (props.inline) {
+                        break;
+                    }
+
                     onArrowUpKey(event);
                     break;
 
                 case 'ArrowDown':
-                    if (props.inline) break;
+                    if (props.inline) {
+                        break;
+                    }
+
                     onArrowDownKey(event);
 
                     break;
@@ -307,18 +317,27 @@ export const MultiSelect = React.memo(
                 case 'Space':
                 case 'NumpadEnter':
                 case 'Enter':
-                    if (props.inline) break;
+                    if (props.inline) {
+                        break;
+                    }
+
                     onEnterKey(event);
                     break;
 
                 case 'Home':
-                    if (props.inline) break;
+                    if (props.inline) {
+                        break;
+                    }
+
                     onHomeKey(event);
                     event.preventDefault();
                     break;
 
                 case 'End':
-                    if (props.inline) break;
+                    if (props.inline) {
+                        break;
+                    }
+
                     onEndKey(event);
                     event.preventDefault();
                     break;
@@ -332,7 +351,10 @@ export const MultiSelect = React.memo(
                     break;
 
                 case 'Escape':
-                    if (props.inline) break;
+                    if (props.inline) {
+                        break;
+                    }
+
                     hide();
                     break;
 
@@ -464,7 +486,7 @@ export const MultiSelect = React.memo(
         };
 
         const onOverlayEnter = (callback) => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             alignOverlay();
             scrollInView();
@@ -521,9 +543,9 @@ export const MultiSelect = React.memo(
                     const optionIndex = props.options.findIndex((optionGroup, i) => (groupIndex = i) && findOptionIndexInList(props.value, getOptionGroupChildren(optionGroup)) !== -1);
 
                     return optionIndex !== -1 ? { group: groupIndex, option: optionIndex } : -1;
-                } else {
-                    return findOptionIndexInList(props.value, props.options);
                 }
+
+                return findOptionIndexInList(props.value, props.options);
             }
 
             return -1;
@@ -589,33 +611,33 @@ export const MultiSelect = React.memo(
         const isAllSelected = () => {
             if (props.onSelectAll) {
                 return props.selectAll;
-            } else {
-                if (ObjectUtils.isEmpty(visibleOptions)) {
-                    return false;
-                }
+            }
 
-                const options = visibleOptions.filter((option) => !isOptionDisabled(option));
+            if (ObjectUtils.isEmpty(visibleOptions)) {
+                return false;
+            }
 
-                if (props.optionGroupLabel) {
-                    let areAllSelected = true;
+            const options = visibleOptions.filter((option) => !isOptionDisabled(option));
 
-                    for (let optionGroup of options) {
-                        const visibleOptionsGroupChildren = getOptionGroupChildren(optionGroup).filter((option) => !isOptionDisabled(option));
+            if (props.optionGroupLabel) {
+                let areAllSelected = true;
 
-                        if (visibleOptionsGroupChildren.some((option) => !isSelected(option)) === true) {
-                            areAllSelected = false;
-                        }
-                    }
+                for (let optionGroup of options) {
+                    const visibleOptionsGroupChildren = getOptionGroupChildren(optionGroup).filter((option) => !isOptionDisabled(option));
 
-                    return areAllSelected;
-                } else {
-                    return !options.some((option) => !isSelected(option));
+                    if (visibleOptionsGroupChildren.some((option) => !isSelected(option)) === true) {
+                        areAllSelected = false;
+                    }
                 }
+
+                return areAllSelected;
             }
+
+            return !options.some((option) => !isSelected(option));
         };
 
         const getOptionLabel = (option) => {
-            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
         };
 
         const getOptionValue = (option) => {
@@ -629,7 +651,7 @@ export const MultiSelect = React.memo(
                 return data !== null ? data : option;
             }
 
-            return option && option['value'] !== undefined ? option['value'] : option;
+            return option && option.value !== undefined ? option.value : option;
         };
 
         const getOptionRenderKey = (option) => {
@@ -653,11 +675,11 @@ export const MultiSelect = React.memo(
                 return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
             }
 
-            return option && option['disabled'] !== undefined ? option['disabled'] : false;
+            return option && option.disabled !== undefined ? option.disabled : false;
         };
 
         const isOptionValueUsed = (option) => {
-            return (!props.useOptionAsValue && props.optionValue) || (option && option['value'] !== undefined);
+            return (!props.useOptionAsValue && props.optionValue) || (option && option.value !== undefined);
         };
 
         const isOptionGroup = (option) => {
@@ -694,7 +716,9 @@ export const MultiSelect = React.memo(
                     const value = props.value[index];
                     const matchedOptionIndex = visibleOptions.findIndex((option) => isValidSelectedOption(option) && isEquals(value, getOptionValue(option)));
 
-                    if (matchedOptionIndex > -1) return matchedOptionIndex;
+                    if (matchedOptionIndex > -1) {
+                        return matchedOptionIndex;
+                    }
                 }
             }
 
@@ -806,13 +830,13 @@ export const MultiSelect = React.memo(
             if (!empty && !props.fixedPlaceholder) {
                 if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
                     return getSelectedItemsLabel();
-                } else {
-                    if (ObjectUtils.isArray(props.value)) {
-                        return props.value.reduce((acc, value, index) => acc + (index !== 0 ? ', ' : '') + getLabelByValue(value), '');
-                    } else {
-                        return '';
-                    }
                 }
+
+                if (ObjectUtils.isArray(props.value)) {
+                    return props.value.reduce((acc, value, index) => acc + (index !== 0 ? ', ' : '') + getLabelByValue(value), '');
+                }
+
+                return '';
             }
 
             return label;
@@ -823,64 +847,64 @@ export const MultiSelect = React.memo(
                 if (!empty) {
                     if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
                         return getSelectedItemsLabel();
-                    } else {
-                        return props.value.map((val, index) => {
-                            const item = ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
-
-                            return <React.Fragment key={index}>{item}</React.Fragment>;
-                        });
                     }
-                } else {
-                    return ObjectUtils.getJSXElement(props.selectedItemTemplate);
-                }
-            } else {
-                if (props.display === 'chip' && !empty) {
-                    const value = props.value.slice(0, props.maxSelectedLabels || props.value.length);
-
-                    return value.map((val, i) => {
-                        const context = {
-                            context: {
-                                value: val,
-                                index: i
-                            }
-                        };
-                        const label = getLabelByValue(val);
-                        const iconProps = mergeProps(
-                            {
-                                key: i,
-                                className: cx('removeTokenIcon'),
-                                onClick: (e) => removeChip(e, val)
-                            },
-                            ptm('removeTokenIcon', context)
-                        );
-                        const icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, { ...iconProps }, { props }) : <TimesCircleIcon {...iconProps} />);
-
-                        const tokenProps = mergeProps(
-                            {
-                                className: cx('token')
-                            },
-                            ptm('token', context)
-                        );
 
-                        const tokenLabelProps = mergeProps(
-                            {
-                                key: label + i,
-                                className: cx('tokenLabel')
-                            },
-                            ptm('tokenLabel', context)
-                        );
+                    return props.value.map((val, index) => {
+                        const item = ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
 
-                        return (
-                            <div {...tokenProps} key={label}>
-                                <span {...tokenLabelProps}>{label}</span>
-                                {icon}
-                            </div>
-                        );
+                        return <React.Fragment key={index}>{item}</React.Fragment>;
                     });
                 }
 
-                return getLabel();
+                return ObjectUtils.getJSXElement(props.selectedItemTemplate);
+            }
+
+            if (props.display === 'chip' && !empty) {
+                const value = props.value.slice(0, props.maxSelectedLabels || props.value.length);
+
+                return value.map((val, i) => {
+                    const context = {
+                        context: {
+                            value: val,
+                            index: i
+                        }
+                    };
+                    const label = getLabelByValue(val);
+                    const iconProps = mergeProps(
+                        {
+                            key: i,
+                            className: cx('removeTokenIcon'),
+                            onClick: (e) => removeChip(e, val)
+                        },
+                        ptm('removeTokenIcon', context)
+                    );
+                    const icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, { ...iconProps }, { props }) : <TimesCircleIcon {...iconProps} />);
+
+                    const tokenProps = mergeProps(
+                        {
+                            className: cx('token')
+                        },
+                        ptm('token', context)
+                    );
+
+                    const tokenLabelProps = mergeProps(
+                        {
+                            key: label + i,
+                            className: cx('tokenLabel')
+                        },
+                        ptm('tokenLabel', context)
+                    );
+
+                    return (
+                        <div {...tokenProps} key={label}>
+                            <span {...tokenLabelProps}>{label}</span>
+                            {icon}
+                        </div>
+                    );
+                });
             }
+
+            return getLabel();
         };
 
         const getVisibleOptions = () => {
@@ -900,12 +924,12 @@ export const MultiSelect = React.memo(
                     }
 
                     return filteredGroups;
-                } else {
-                    return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
                 }
-            } else {
-                return props.options;
+
+                return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
             }
+
+            return props.options;
         };
 
         React.useImperativeHandle(ref, () => ({
@@ -1082,6 +1106,9 @@ export const MultiSelect = React.memo(
                         lastHiddenFocusableElementOnOverlay={lastHiddenFocusableElementOnOverlay}
                         setFocusedOptionIndex={setFocusedOptionIndex}
                         hasFilter={hasFilter}
+                        isValidOption={isValidOption}
+                        getOptionValue={getOptionValue}
+                        updateModel={updateModel}
                         onFilterInputChange={onFilterInputChange}
                         resetFilter={resetFilter}
                         onCloseClick={onCloseClick}
diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js
index 8a6c66dd23..ebd5710186 100644
--- a/components/lib/multiselect/MultiSelectHeader.js
+++ b/components/lib/multiselect/MultiSelectHeader.js
@@ -33,16 +33,17 @@ export const MultiSelectHeader = React.memo((props) => {
         }
     };
 
-    const onSelectAll = (event) => {
+    const onToggleAll = (event) => {
         if (props.onSelectAll) {
             props.onSelectAll({
                 originalEvent: event,
                 checked: props.selectAll
             });
-        }
+        } else {
+            const value = props.isAllSelected() ? [] : props.visibleOptions.filter((option) => props.isValidOption(option)).map((option) => props.getOptionValue(option));
 
-        event.preventDefault();
-        event.stopPropagation();
+            props.updateModel(event, value, value);
+        }
     };
 
     const createFilterElement = () => {
@@ -130,7 +131,7 @@ export const MultiSelectHeader = React.memo((props) => {
 
     const checkboxElement = props.showSelectAll && (
         <div {...headerCheckboxContainerProps}>
-            <Checkbox id={selectAllId} checked={props.selectAll} onChange={onSelectAll} role="checkbox" aria-checked={props.selectAll} icon={itemCheckboxIcon} pt={ptm('headerCheckbox')} unstyled={isUnstyled()} />
+            <Checkbox id={selectAllId} checked={props.selectAll} onChange={onToggleAll} role="checkbox" aria-checked={props.selectAll} icon={itemCheckboxIcon} pt={ptm('headerCheckbox')} unstyled={isUnstyled()} />
             {!props.filter && <label {...headerSelectAllLabelProps}>{props.selectAllLabel}</label>}
         </div>
     );
@@ -182,7 +183,7 @@ export const MultiSelectHeader = React.memo((props) => {
             className: 'p-multiselect-header',
             checkboxElement,
             checked: props.selectAll,
-            onChange: onSelectAll,
+            onChange: onToggleAll,
             filterElement,
             closeElement,
             closeElementClassName: 'p-multiselect-close p-link',
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index f46eb9c95f..17f1cb3978 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -64,6 +64,10 @@ export const MultiSelectPanel = React.memo(
                     filterRef={filterInputRef}
                     filterValue={props.filterValue}
                     filterTemplate={props.filterTemplate}
+                    visibleOptions={props.visibleOptions}
+                    isValidOption={props.isValidOption}
+                    getOptionValue={props.getOptionValue}
+                    updateModel={props.updateModel}
                     onFilter={onFilterInputChange}
                     filterPlaceholder={props.filterPlaceholder}
                     onClose={props.onCloseClick}
@@ -175,43 +179,43 @@ export const MultiSelectPanel = React.memo(
                         {groupChildrenContent}
                     </React.Fragment>
                 );
-            } else {
-                const optionLabel = props.getOptionLabel(option);
-                const optionKey = index + '_' + props.getOptionRenderKey(option);
-                const disabled = props.isOptionDisabled(option);
-                const tabIndex = disabled ? null : props.tabIndex || 0;
-                const selected = props.isSelected(option);
-
-                return (
-                    <MultiSelectItem
-                        hostName={props.hostName}
-                        key={optionKey}
-                        focusedOptionIndex={props.focusedOptionIndex}
-                        label={optionLabel}
-                        option={option}
-                        style={style}
-                        index={index}
-                        template={props.itemTemplate}
-                        selected={selected}
-                        onClick={props.onOptionSelect}
-                        tabIndex={tabIndex}
-                        disabled={disabled}
-                        className={props.itemClassName}
-                        checkboxIcon={props.checkboxIcon}
-                        isUnstyled={isUnstyled}
-                        ptm={ptm}
-                        cx={cx}
-                    />
-                );
             }
+
+            const optionLabel = props.getOptionLabel(option);
+            const optionKey = index + '_' + props.getOptionRenderKey(option);
+            const disabled = props.isOptionDisabled(option);
+            const tabIndex = disabled ? null : props.tabIndex || 0;
+            const selected = props.isSelected(option);
+
+            return (
+                <MultiSelectItem
+                    hostName={props.hostName}
+                    key={optionKey}
+                    focusedOptionIndex={props.focusedOptionIndex}
+                    label={optionLabel}
+                    option={option}
+                    style={style}
+                    index={index}
+                    template={props.itemTemplate}
+                    selected={selected}
+                    onClick={props.onOptionSelect}
+                    tabIndex={tabIndex}
+                    disabled={disabled}
+                    className={props.itemClassName}
+                    checkboxIcon={props.checkboxIcon}
+                    isUnstyled={isUnstyled}
+                    ptm={ptm}
+                    cx={cx}
+                />
+            );
         };
 
         const createItems = () => {
             if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
                 return props.visibleOptions.map(createItem);
-            } else {
-                return props.hasFilter ? createEmptyFilter() : createEmptyContent();
             }
+
+            return props.hasFilter ? createEmptyFilter() : createEmptyContent();
         };
 
         const createContent = () => {
@@ -245,32 +249,32 @@ export const MultiSelectPanel = React.memo(
                 };
 
                 return <VirtualScroller ref={virtualScrollerRef} {...virtualScrollerProps} pt={ptm('virtualScroller')} __parentMetadata={{ parent: props.metaData }} />;
-            } else {
-                const items = createItems();
+            }
 
-                const wrapperProps = mergeProps(
-                    {
-                        className: cx('wrapper'),
-                        style: { maxHeight: props.scrollHeight }
-                    },
-                    getPTOptions('wrapper')
-                );
+            const items = createItems();
 
-                const listProps = mergeProps(
-                    {
-                        className: cx('list'),
-                        role: 'listbox',
-                        'aria-multiselectable': true
-                    },
-                    getPTOptions('list')
-                );
+            const wrapperProps = mergeProps(
+                {
+                    className: cx('wrapper'),
+                    style: { maxHeight: props.scrollHeight }
+                },
+                getPTOptions('wrapper')
+            );
 
-                return (
-                    <div {...wrapperProps}>
-                        <ul {...listProps}>{items}</ul>
-                    </div>
-                );
-            }
+            const listProps = mergeProps(
+                {
+                    className: cx('list'),
+                    role: 'listbox',
+                    'aria-multiselectable': true
+                },
+                getPTOptions('list')
+            );
+
+            return (
+                <div {...wrapperProps}>
+                    <ul {...listProps}>{items}</ul>
+                </div>
+            );
         };
 
         const createElement = () => {
@@ -343,11 +347,11 @@ export const MultiSelectPanel = React.memo(
             return (
                 <CSSTransition nodeRef={ref} {...transitionProps}>
                     <div ref={ref} {...panelProps}>
-                        <span {...firstHiddenElementProps}></span>
+                        <span {...firstHiddenElementProps} />
                         {header}
                         {content}
                         {footer}
-                        <span {...lastHiddenElementProps}></span>
+                        <span {...lastHiddenElementProps} />
                     </div>
                 </CSSTransition>
             );
@@ -355,7 +359,9 @@ export const MultiSelectPanel = React.memo(
 
         const element = createElement();
 
-        if (props.inline) return element;
+        if (props.inline) {
+            return element;
+        }
 
         return <Portal element={element} appendTo={props.appendTo} />;
     })

From b30964920d86ec5997320e137dc615199d94de3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Tue, 26 Mar 2024 14:54:11 +0300
Subject: [PATCH 027/194] Picklist API Update

---
 components/doc/common/apidoc/index.json | 8 ++++++++
 components/lib/picklist/picklist.d.ts   | 5 +++++
 2 files changed, 13 insertions(+)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 80fab963c2..5e9a31936e 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -41203,6 +41203,14 @@
                             "default": "contains",
                             "description": "Defines how the items are filtered, valid values are \"contains\" (default) \"startsWith\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\" and \"gte\"."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "id",
                             "optional": true,
diff --git a/components/lib/picklist/picklist.d.ts b/components/lib/picklist/picklist.d.ts
index 36c825069c..5012283529 100755
--- a/components/lib/picklist/picklist.d.ts
+++ b/components/lib/picklist/picklist.d.ts
@@ -264,6 +264,11 @@ export interface PickListProps {
      * @defaultValue true
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Inline style of the element.
      */

From e7359b7a45e66d0212a93fc8f885ec74e0f66d91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Tue, 26 Mar 2024 15:24:44 +0300
Subject: [PATCH 028/194] Reordered onMouseMove props

---
 components/lib/dropdown/DropdownItem.js        | 4 ++--
 components/lib/dropdown/DropdownPanel.js       | 4 ++--
 components/lib/multiselect/MultiSelectItem.js  | 4 ++--
 components/lib/multiselect/MultiSelectPanel.js | 4 ++--
 components/lib/orderlist/OrderListSubList.js   | 8 ++++----
 components/lib/picklist/PickListItem.js        | 4 ++--
 components/lib/picklist/PickListSubList.js     | 2 +-
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
index 50e160b252..6f5b841f5d 100644
--- a/components/lib/dropdown/DropdownItem.js
+++ b/components/lib/dropdown/DropdownItem.js
@@ -35,12 +35,12 @@ export const DropdownItem = React.memo((props) => {
             className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex, highlightOnSelect })),
             style: props.style,
             onClick: (e) => onClick(e, index),
+            onMouseMove: (e) => props?.onMouseMove(e, index),
             'aria-label': label,
             'aria-selected': selected,
             'data-p-highlight': selected,
             'data-p-focused': focusedOptionIndex === index,
-            'data-p-disabled': disabled,
-            onMouseMove: (e) => props?.onMouseMove(e, index)
+            'data-p-disabled': disabled
         },
         getPTOptions('item', { selected, disabled, option, label })
     );
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 7804b715fc..fb669a6499 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -97,10 +97,10 @@ export const DropdownPanel = React.memo(
                         highlightOnSelect={props.highlightOnSelect}
                         disabled={disabled}
                         onClick={props.onOptionClick}
+                        onMouseMove={changeFocusedItemOnHover}
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}
-                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             });
@@ -169,10 +169,10 @@ export const DropdownPanel = React.memo(
                         highlightOnSelect={props.highlightOnSelect}
                         disabled={disabled}
                         onClick={props.onOptionClick}
+                        onMouseMove={changeFocusedItemOnHover}
                         ptm={ptm}
                         cx={cx}
                         checkmark={props.checkmark}
-                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             }
diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
index c132363a6b..d8ad24ad01 100644
--- a/components/lib/multiselect/MultiSelectItem.js
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -67,12 +67,12 @@ export const MultiSelectItem = React.memo((props) => {
             onClick: onClick,
             onFocus: onFocus,
             onBlur: onBlur,
+            onMouseMove: (e) => props?.onMouseMove(e, props.index),
             tabIndex: tabIndex,
             role: 'option',
             'aria-selected': props.selected,
             'data-p-highlight': props.selected,
-            'data-p-disabled': props.disabled,
-            onMouseMove: (e) => props?.onMouseMove(e, props.index)
+            'data-p-disabled': props.disabled
         },
         getPTOptions('item')
     );
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index 4ae7e74584..632a7cf66b 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -122,6 +122,7 @@ export const MultiSelectPanel = React.memo(
                         template={props.itemTemplate}
                         selected={selected}
                         onClick={props.onOptionSelect}
+                        onMouseMove={changeFocusedItemOnHover}
                         tabIndex={tabIndex}
                         disabled={disabled}
                         className={props.itemClassName}
@@ -129,7 +130,6 @@ export const MultiSelectPanel = React.memo(
                         isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
-                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             });
@@ -201,6 +201,7 @@ export const MultiSelectPanel = React.memo(
                         template={props.itemTemplate}
                         selected={selected}
                         onClick={props.onOptionSelect}
+                        onMouseMove={changeFocusedItemOnHover}
                         tabIndex={tabIndex}
                         disabled={disabled}
                         className={props.itemClassName}
@@ -208,7 +209,6 @@ export const MultiSelectPanel = React.memo(
                         isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
-                        onMouseMove={changeFocusedItemOnHover}
                     />
                 );
             }
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
index 6520d13f82..d786542bcd 100644
--- a/components/lib/orderlist/OrderListSubList.js
+++ b/components/lib/orderlist/OrderListSubList.js
@@ -148,13 +148,13 @@ export const OrderListSubList = React.memo(
                                 draggable: 'true',
                                 onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
                                 onMouseDown: props.onOptionMouseDown,
+                                onMouseMove: (e) => changeFocusedItemOnHover(e, i),
                                 onDragStart: (e) => onDragStart(e, i),
                                 onDragEnd: onDragEnd,
                                 className: classNames(props.className, cx('item', { selected, focused })),
                                 'aria-selected': selected,
                                 'data-p-highlight': selected,
-                                'data-p-focused': focused,
-                                onMouseMove: (e) => changeFocusedItemOnHover(e, i)
+                                'data-p-focused': focused
                             },
                             getPTOptions(item, 'item')
                         );
@@ -182,11 +182,11 @@ export const OrderListSubList = React.memo(
                                 role: 'option',
                                 onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
                                 onMouseDown: props.onOptionMouseDown,
+                                onMouseMove: (e) => changeFocusedItemOnHover(e, i),
                                 className: classNames(props.className, cx('item', { selected, focused })),
                                 'aria-selected': selected,
                                 'data-p-highlight': selected,
-                                'data-p-focused': focused,
-                                onMouseMove: (e) => changeFocusedItemOnHover(e, i)
+                                'data-p-focused': focused
                             },
                             getPTOptions(item, 'item')
                         );
diff --git a/components/lib/picklist/PickListItem.js b/components/lib/picklist/PickListItem.js
index 220e62da2c..fa70279c0f 100644
--- a/components/lib/picklist/PickListItem.js
+++ b/components/lib/picklist/PickListItem.js
@@ -57,11 +57,11 @@ export const PickListItem = React.memo((props) => {
             onKeyDown,
             onFocus,
             onMouseDown,
+            onMouseMove: props.onMouseMove,
             role: 'option',
             'aria-selected': props.selected,
             'data-p-highlight': props.selected,
-            'data-p-focused': props.focused,
-            onMouseMove: props.onMouseMove
+            'data-p-focused': props.focused
         },
         getPTOptions('item')
     );
diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js
index 4ca3448f4b..b15cfe0639 100644
--- a/components/lib/picklist/PickListSubList.js
+++ b/components/lib/picklist/PickListSubList.js
@@ -82,9 +82,9 @@ export const PickListSubList = React.memo(
                             onClick={props.onItemClick}
                             onKeyDown={props.onItemKeyDown}
                             onMouseDown={(event) => props.onOptionMouseDown({ ...event, index, type: props.type })}
+                            onMouseMove={() => changeFocusedItemOnHover(index)}
                             ptm={ptm}
                             cx={cx}
-                            onMouseMove={() => changeFocusedItemOnHover(index)}
                         />
                     );
                 });

From 7d8aee6f41f441eeeb5bad595ed18de1224f2a90 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 27 Mar 2024 06:46:22 -0400
Subject: [PATCH 029/194] Temporarily remove Lint

---
 .github/workflows/node.js.yml | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index c6a5d8acc0..5cc583c264 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [20.x]
 
     steps:
     - uses: actions/checkout@v4
@@ -30,11 +30,6 @@ jobs:
       run: |
         npm install
 
-    - name: Lint Check
-      if: ${{ success() }}
-      run: |
-        npm run lint
-
     - name: Code Format
       if: ${{ success() }}
       run: |

From 619cd12c24c490d4de0b4560333991cc56a741bf Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Tue, 26 Mar 2024 09:53:01 -0400
Subject: [PATCH 030/194] Fix #6231: Checkbox typescript and onClick event

---
 components/lib/checkbox/CheckboxBase.js | 1 -
 components/lib/checkbox/checkbox.d.ts   | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js
index de4a4e57cc..101f10158b 100644
--- a/components/lib/checkbox/CheckboxBase.js
+++ b/components/lib/checkbox/CheckboxBase.js
@@ -29,7 +29,6 @@ export const CheckboxBase = ComponentBase.extend({
         invalid: false,
         name: null,
         onChange: null,
-        onClick: null,
         onContextMenu: null,
         onMouseDown: null,
         readOnly: false,
diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts
index 077e348105..7e03bfd851 100644
--- a/components/lib/checkbox/checkbox.d.ts
+++ b/components/lib/checkbox/checkbox.d.ts
@@ -86,7 +86,7 @@ interface CheckboxChangeEvent extends FormEvent {}
  * Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLDivElement>, 'onChange' | 'ref'> {
     /**
      * Unique identifier of the element.
      */

From f70bcc9077fe8df23a8decd8052e506df5b820d6 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Tue, 26 Mar 2024 07:35:44 -0400
Subject: [PATCH 031/194] Fix #6226: JumpToPageInput use correct totalPages
 prop

---
 components/lib/paginator/JumpToPageInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/paginator/JumpToPageInput.js b/components/lib/paginator/JumpToPageInput.js
index 59998ed8c9..62be57ebf1 100644
--- a/components/lib/paginator/JumpToPageInput.js
+++ b/components/lib/paginator/JumpToPageInput.js
@@ -18,7 +18,7 @@ export const JumpToPageInput = React.memo((inProps) => {
         }
     };
 
-    const value = props.pageCount > 0 ? props.page + 1 : 0;
+    const value = props.totalPages > 0 ? props.page + 1 : 0;
     const element = (
         <InputNumber value={value} onChange={onChange} className="p-paginator-page-input" disabled={props.disabled} pt={props.ptm('JTPInput')} unstyled={props.unstyled} __parentMetadata={{ parent: props.metaData }} aria-label={ariaLabelValue} />
     );

From 90d1f75c5b6466a2eebd1069a7860dbde22b2daf Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Fri, 15 Mar 2024 19:06:35 -0400
Subject: [PATCH 032/194] Fix #6163: p-hidden-accessible modernization

---
 components/lib/componentbase/ComponentBase.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index 159e130d7f..40bbb1e052 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -4,14 +4,15 @@ import { ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 
 const baseStyle = `
 .p-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+    border: 0 !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    position: absolute !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
 }
 
 .p-hidden-accessible input,

From 1cb1d5cabf97617ffa835e5748a8513e11679575 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 25 Mar 2024 08:31:04 -0400
Subject: [PATCH 033/194] Update ComponentBase.js

---
 components/lib/componentbase/ComponentBase.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index 40bbb1e052..fd27b05139 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -4,15 +4,16 @@ import { ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 
 const baseStyle = `
 .p-hidden-accessible {
-    border: 0 !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    position: absolute !important;
-    height: 1px !important;
-    width: 1px !important;
-    overflow: hidden !important;
-    clip-path: inset(50%) !important;
-    white-space: nowrap !important;
+    border: 0;
+    padding: 0;
+    margin: -1px;
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
 }
 
 .p-hidden-accessible input,

From 603967dbf1b9098f1896ce2e65d34de0a09accaa Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 27 Mar 2024 08:08:17 -0400
Subject: [PATCH 034/194] Fix #6233: FilterMatchMode typescript updates (#6236)

---
 components/lib/api/api.d.ts                 |  1 +
 components/lib/column/column.d.ts           | 16 ++++++++--------
 components/lib/dropdown/dropdown.d.ts       |  2 +-
 components/lib/listbox/listbox.d.ts         |  4 ++--
 components/lib/multiselect/multiselect.d.ts |  2 +-
 components/lib/orderlist/orderlist.d.ts     |  4 ++--
 components/lib/picklist/picklist.d.ts       |  4 ++--
 7 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 0ae2a96a39..34a4531797 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -1446,6 +1446,7 @@ export declare enum FilterMatchMode {
     EQUALS = 'equals',
     NOT_EQUALS = 'notEquals',
     IN = 'in',
+    NOT_IN = 'notIn',
     LESS_THAN = 'lt',
     LESS_THAN_OR_EQUAL_TO = 'lte',
     GREATER_THAN = 'gt',
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index 5f51fab3ed..504b6b6219 100644
--- a/components/lib/column/column.d.ts
+++ b/components/lib/column/column.d.ts
@@ -680,9 +680,9 @@ interface ColumnFilterMetaData {
      */
     value: any;
     /**
-     * Type of filter match.
+     * Type of filter match; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
      */
-    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom';
+    matchMode: FilterMatchMode | string;
 }
 
 interface ColumnFilterMetaDataWithConstraint {
@@ -723,9 +723,9 @@ interface ColumnFilterMatchModeChangeEvent {
      */
     field: string;
     /**
-     * Type of filter match.
+     * Type of filter match; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
      */
-    matchMode: FilterMatchMode;
+    matchMode: FilterMatchMode | string;
 }
 
 /**
@@ -818,9 +818,9 @@ interface ColumnFilterMatchModeOptions {
      */
     label: string;
     /**
-     * The match mode type
+     * Type of filter match; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
      */
-    value: FilterMatchMode | string;
+    matchMode: FilterMatchMode | string;
 }
 
 /**
@@ -962,9 +962,9 @@ export interface ColumnProps {
      */
     filterHeaderStyle?: React.CSSProperties | undefined;
     /**
-     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".
+     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
      */
-    filterMatchMode?: FilterMatchMode | undefined;
+    filterMatchMode?: FilterMatchMode | string | undefined;
     /**
      * An array of label-value pairs to override the global match mode options.
      */
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index ff0feb297f..9283c03ff3 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -329,7 +329,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      */
     filterLocale?: string | undefined;
     /**
-     * Defines how the items are filtered.
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
      * @defaultValue contains
      */
     filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
diff --git a/components/lib/listbox/listbox.d.ts b/components/lib/listbox/listbox.d.ts
index 14f79129fe..bccc75d13b 100755
--- a/components/lib/listbox/listbox.d.ts
+++ b/components/lib/listbox/listbox.d.ts
@@ -301,10 +301,10 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
      */
     filterLocale?: string | undefined;
     /**
-     * Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
      * @defaultValue contains
      */
-    filterMatchMode?: string | undefined;
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
     /**
      * Placeholder text to show when filter input is empty.
      */
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index 5c5700e39c..f8df62b51c 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -502,7 +502,7 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
      * @defaultValue contains
      */
-    filterMatchMode?: string | undefined;
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
     /**
      * Placeholder text to show when filter input is empty.
      */
diff --git a/components/lib/orderlist/orderlist.d.ts b/components/lib/orderlist/orderlist.d.ts
index 8597793541..aa8e092a48 100755
--- a/components/lib/orderlist/orderlist.d.ts
+++ b/components/lib/orderlist/orderlist.d.ts
@@ -248,10 +248,10 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      */
     filterBy?: string | undefined;
     /**
-     * Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
      * @defaultValue contains
      */
-    filterMatchMode?: string | undefined;
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
     /**
      * Placeholder text to show when filter input is empty.
      */
diff --git a/components/lib/picklist/picklist.d.ts b/components/lib/picklist/picklist.d.ts
index 5012283529..a7ea394a8d 100755
--- a/components/lib/picklist/picklist.d.ts
+++ b/components/lib/picklist/picklist.d.ts
@@ -368,10 +368,10 @@ export interface PickListProps {
      */
     filterBy?: string | undefined;
     /**
-     * 	Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt" and "gte".
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
      * @defaultValue contains
      */
-    filterMatchMode?: string | undefined;
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      * @defaultValue undefined

From 0e219381c9802b73e80e48c11d57f0da6cd04f74 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Wed, 27 Mar 2024 12:08:55 +0000
Subject: [PATCH 035/194] Update API doc

---
 components/doc/common/apidoc/index.json | 32 ++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 9e0733b909..35826fa2a4 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -12005,9 +12005,9 @@
                             "name": "filterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "FilterMatchMode",
+                            "type": "string",
                             "default": "",
-                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
                         },
                         {
                             "name": "filterMatchModeOptions",
@@ -12663,8 +12663,8 @@
                             "name": "matchMode",
                             "optional": false,
                             "readonly": false,
-                            "type": "FilterMatchMode",
-                            "description": "Type of filter match."
+                            "type": "string",
+                            "description": "Type of filter match; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
                         }
                     ]
                 },
@@ -13913,8 +13913,8 @@
                             "name": "matchMode",
                             "optional": false,
                             "readonly": false,
-                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
-                            "description": "Type of filter match."
+                            "type": "string",
+                            "description": "Type of filter match; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
                         }
                     ],
                     "callbacks": []
@@ -13962,11 +13962,11 @@
                             "description": "The label to display for the match mode"
                         },
                         {
-                            "name": "value",
+                            "name": "matchMode",
                             "optional": false,
                             "readonly": false,
                             "type": "string",
-                            "description": "The match mode type"
+                            "description": "Type of filter match; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
                         }
                     ],
                     "callbacks": []
@@ -23067,7 +23067,7 @@
                             "readonly": false,
                             "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
                             "default": "contains",
-                            "description": "Defines how the items are filtered."
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
                         },
                         {
                             "name": "filterPlaceholder",
@@ -32291,9 +32291,9 @@
                             "name": "filterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
                             "default": "contains",
-                            "description": "Defines how the items are filtered, valid values are \"contains\" (default), \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
                         },
                         {
                             "name": "filterPlaceholder",
@@ -35695,7 +35695,7 @@
                             "name": "filterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
                             "default": "contains",
                             "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
                         },
@@ -37372,9 +37372,9 @@
                             "name": "filterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
                             "default": "contains",
-                            "description": "Defines how the items are filtered, valid values are \"contains\" (default), \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
                         },
                         {
                             "name": "filterPlaceholder",
@@ -41425,9 +41425,9 @@
                             "name": "filterMatchMode",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
                             "default": "contains",
-                            "description": "Defines how the items are filtered, valid values are \"contains\" (default) \"startsWith\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\" and \"gte\"."
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
                         },
                         {
                             "name": "focusOnHover",

From 5cfbb6af2bf4d57f461f4bbcc744284550b1dc0d Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 01:30:48 +0300
Subject: [PATCH 036/194] Datatable - Update component structure

---
 components/lib/datatable/DataTableBase.js  | 14 ----
 components/lib/datatable/HeaderCheckbox.js | 56 ++++----------
 components/lib/datatable/RowCheckbox.js    | 58 ++++----------
 components/lib/datatable/RowRadioButton.js | 90 +++-------------------
 4 files changed, 37 insertions(+), 181 deletions(-)

diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
index 8f4e794b79..19612edd7c 100644
--- a/components/lib/datatable/DataTableBase.js
+++ b/components/lib/datatable/DataTableBase.js
@@ -389,21 +389,7 @@ const classes = {
     emptyMessage: 'p-datatable-emptymessage',
     sortBadge: 'p-sortable-column-badge',
     sortIcon: 'p-sortable-column-icon',
-    checkboxWrapper: ({ rowProps: props, focusedState }) => classNames('p-checkbox p-component', { 'p-checkbox-focused': focusedState, 'p-disabled': props.disabled }),
-    checkbox: ({ rowProps: props, focusedState }) => classNames('p-checkbox-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }),
-    checkboxIcon: 'p-checkbox-icon',
-    radiobuttonWrapper: ({ rowProps: props, focusedState }) => classNames('p-radiobutton p-component', { 'p-radiobutton-focused': focusedState, 'p-disabled': props.disabled }),
-    radiobutton: ({ rowProps: props, focusedState }) => classNames('p-radiobutton-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }),
-    radiobuttonIcon: 'p-radiobutton-icon',
     headerTitle: 'p-column-title',
-    headerCheckboxWrapper: 'p-checkbox p-component',
-    headerCheckbox: ({ headerProps: props, focusedState }) =>
-        classNames('p-checkbox-box p-component', {
-            'p-highlight': props.checked,
-            'p-disabled': props.disabled,
-            'p-focus': focusedState
-        }),
-    headerCheckboxIcon: 'p-checkbox-icon',
     headerContent: 'p-column-header-content',
     headerCell: ({ headerProps: props, frozen, sortMeta, align, _isSortableDisabled, getColumnProp }) =>
         ObjectUtils.isEmpty(props)
diff --git a/components/lib/datatable/HeaderCheckbox.js b/components/lib/datatable/HeaderCheckbox.js
index 9e5eff621d..638574bf4a 100644
--- a/components/lib/datatable/HeaderCheckbox.js
+++ b/components/lib/datatable/HeaderCheckbox.js
@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { ariaLabel } from '../api/Locale';
+import { Checkbox } from '../checkbox/Checkbox';
 import { ColumnBase } from '../column/ColumnBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { IconUtils } from '../utils/Utils';
-import { ariaLabel } from '../api/Locale';
 
 export const HeaderCheckbox = React.memo((props) => {
-    const [focusedState, setFocusedState] = React.useState(false);
     const mergeProps = useMergeProps();
     const getColumnProps = () => ColumnBase.getCProps(props.column);
-    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const { ptm, ptmo } = props.ptCallbacks;
 
     const getColumnPTOptions = (key) => {
         const cProps = getColumnProps();
@@ -18,9 +18,7 @@ export const HeaderCheckbox = React.memo((props) => {
             props: cProps,
             parent: props.metaData,
             hostName: props.hostName,
-            state: {
-                focused: focusedState
-            },
+            state: {},
             context: {
                 checked: props.checked,
                 disabled: props.disabled
@@ -30,18 +28,8 @@ export const HeaderCheckbox = React.memo((props) => {
         return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData));
     };
 
-    const onFocus = () => {
-        setFocusedState(true);
-    };
-
-    const onBlur = () => {
-        setFocusedState(false);
-    };
-
-    const onClick = (event) => {
+    const onChange = (event) => {
         if (!props.disabled) {
-            setFocusedState(true);
-
             props.onChange({
                 originalEvent: event,
                 checked: !props.checked
@@ -49,50 +37,32 @@ export const HeaderCheckbox = React.memo((props) => {
         }
     };
 
-    const onKeyDown = (event) => {
-        if (event.code === 'Space' || event.key === ' ') {
-            // event.key is for Android support
-            onClick(event);
-            event.preventDefault();
-        }
-    };
-
     const headerCheckboxIconProps = mergeProps(
         {
-            className: cx('headerCheckboxIcon')
+            className: 'p-checkbox-icon'
         },
-        getColumnPTOptions('headerCheckboxIcon')
+        getColumnPTOptions('headerCheckbox.icon')
     );
+
     const icon = props.checked ? props.checkIcon || <CheckIcon {...headerCheckboxIconProps} /> : null;
     const checkIcon = IconUtils.getJSXIcon(icon, { ...headerCheckboxIconProps }, { props });
     const tabIndex = props.disabled ? null : 0;
-    const headerCheckboxWrapperProps = mergeProps(
-        {
-            className: cx('headerCheckboxWrapper'),
-            onClick: (e) => onClick(e)
-        },
-        getColumnPTOptions('headerCheckboxWrapper')
-    );
 
     const headerCheckboxProps = mergeProps(
         {
-            className: cx('headerCheckbox', { headerProps: props, focusedState }),
             role: 'checkbox',
             'aria-checked': props.checked,
             'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
             tabIndex: tabIndex,
-            onFocus: (e) => onFocus(e),
-            onBlur: (e) => onBlur(e),
-            onKeyDown: (e) => onKeyDown(e)
+            onChange: onChange,
+            icon: checkIcon,
+            checked: props.checked,
+            disabled: props.disabled
         },
         getColumnPTOptions('headerCheckbox')
     );
 
-    return (
-        <div {...headerCheckboxWrapperProps}>
-            <div {...headerCheckboxProps}>{checkIcon}</div>
-        </div>
-    );
+    return <Checkbox {...headerCheckboxProps} />;
 });
 
 HeaderCheckbox.displayName = 'HeaderCheckbox';
diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js
index b177566fc2..5b15fc029e 100644
--- a/components/lib/datatable/RowCheckbox.js
+++ b/components/lib/datatable/RowCheckbox.js
@@ -1,23 +1,21 @@
 import * as React from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
 import { ColumnBase } from '../column/ColumnBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { IconUtils } from '../utils/Utils';
 
 export const RowCheckbox = React.memo((props) => {
-    const [focusedState, setFocusedState] = React.useState(false);
     const mergeProps = useMergeProps();
     const getColumnProps = () => ColumnBase.getCProps(props.column);
-    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const { ptm, ptmo } = props.ptCallbacks;
 
     const getColumnPTOptions = (key) => {
         const columnMetaData = {
             props: getColumnProps(),
             parent: props.metaData,
             hostName: props.hostName,
-            state: {
-                focused: focusedState
-            },
+            state: {},
             context: {
                 index: props.tabIndex,
                 checked: props.checked,
@@ -28,67 +26,37 @@ export const RowCheckbox = React.memo((props) => {
         return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
     };
 
-    const onFocus = () => {
-        setFocusedState(true);
-    };
-
-    const onBlur = () => {
-        setFocusedState(false);
-    };
-
-    const onClick = (event) => {
+    const onChange = (event) => {
         if (!props.disabled) {
-            setFocusedState(true);
-
             props.onChange(event);
-            event.preventDefault();
-        }
-    };
-
-    const onKeyDown = (event) => {
-        if (event.code === 'Space' || event.key === ' ') {
-            // event.key is for Android support
-            onClick(event);
-            event.preventDefault();
         }
     };
 
     const checkboxIconProps = mergeProps(
         {
-            className: cx('checkboxIcon')
+            className: 'p-checkbox-icon'
         },
-        getColumnPTOptions('checkboxIcon')
+        getColumnPTOptions('rowCheckbox.icon')
     );
     const icon = props.checked ? props.checkIcon || <CheckIcon {...checkboxIconProps} /> : null;
     const checkIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, { props });
     const tabIndex = props.disabled ? null : '0';
-    const checkboxWrapperProps = mergeProps(
-        {
-            className: cx('checkboxWrapper', { rowProps: props, focusedState }),
-            onClick: (e) => onClick(e)
-        },
-        getColumnPTOptions('checkboxWrapper')
-    );
 
     const checkboxProps = mergeProps(
         {
-            className: cx('checkbox', { rowProps: props, focusedState }),
             role: 'checkbox',
             'aria-checked': props.checked,
             tabIndex: tabIndex,
-            onKeyDown: (e) => onKeyDown(e),
-            onFocus: (e) => onFocus(e),
-            onBlur: (e) => onBlur(e),
-            'aria-label': props.ariaLabel
+            onChange: onChange,
+            'aria-label': props.ariaLabel,
+            checked: props.checked,
+            icon: checkIcon,
+            disabled: props.disabled
         },
-        getColumnPTOptions('checkbox')
+        getColumnPTOptions('rowCheckbox')
     );
 
-    return (
-        <div {...checkboxWrapperProps}>
-            <div {...checkboxProps}>{checkIcon}</div>
-        </div>
-    );
+    return <Checkbox {...checkboxProps} />;
 });
 
 RowCheckbox.displayName = 'RowCheckbox';
diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js
index b69987eee9..3d3718bae6 100644
--- a/components/lib/datatable/RowRadioButton.js
+++ b/components/lib/datatable/RowRadioButton.js
@@ -1,23 +1,19 @@
 import * as React from 'react';
 import { ColumnBase } from '../column/ColumnBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { DomHandler } from '../utils/Utils';
+import { RadioButton } from '../radioButton/RadioButton';
 
 export const RowRadioButton = React.memo((props) => {
-    const [focusedState, setFocusedState] = React.useState(false);
-    const inputRef = React.useRef(null);
     const mergeProps = useMergeProps();
     const getColumnProps = () => ColumnBase.getCProps(props.column);
-    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const { ptm, ptmo } = props.ptCallbacks;
 
     const getColumnPTOptions = (key) => {
         const columnMetaData = {
             props: getColumnProps(),
             parent: props.metaData,
             hostName: props.hostName,
-            state: {
-                focused: focusedState
-            },
+            state: {},
             context: {
                 index: props.tabIndex,
                 checked: props.checked,
@@ -28,89 +24,25 @@ export const RowRadioButton = React.memo((props) => {
         return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
     };
 
-    const onFocus = () => {
-        setFocusedState(true);
-    };
-
-    const onBlur = () => {
-        setFocusedState(false);
-    };
-
-    const onClick = (event) => {
+    const onChange = (event) => {
         if (!props.disabled) {
             props.onChange(event);
-
-            DomHandler.focus(inputRef.current);
         }
     };
 
-    const onKeyDown = (event) => {
-        if (event.code === 'Space' || event.key === ' ') {
-            // event.key is for Android support
-            onClick(event);
-            event.preventDefault();
-        }
-    };
-
-    const onChange = (event) => {
-        onClick(event);
-    };
-
-    const name = `${props.tableSelector}_dt_radio`;
-    const radiobuttonWrapperProps = mergeProps(
-        {
-            className: cx('radiobuttonWrapper', { rowProps: props, focusedState })
-        },
-        getColumnPTOptions('radiobuttonWrapper')
-    );
-    const hiddenInputWrapperProps = mergeProps(
-        {
-            className: 'p-hidden-accessible'
-        },
-        getColumnPTOptions('hiddenInputWrapper')
-    );
-
-    const hiddenInputProps = mergeProps(
+    const radioButtonProps = mergeProps(
         {
-            name,
-            type: 'radio',
-            checked: props.checked,
-            onFocus: (e) => onFocus(e),
-            onBlur: (e) => onBlur(e),
-            onChange: (e) => onChange(e),
-            onKeyDown: (e) => onKeyDown(e),
-            'aria-label': props.ariaLabel
-        },
-        getColumnPTOptions('hiddenInput')
-    );
-
-    const radiobuttonProps = mergeProps(
-        {
-            className: cx('radiobutton', { rowProps: props, focusedState }),
-            onClick: (e) => onClick(e),
             role: 'radio',
-            'aria-checked': props.checked
+            'aria-checked': props.checked,
+            checked: props.checked,
+            disabled: props.disabled,
+            name: `${props.tableSelector}_dt_radio`,
+            onChange: onChange
         },
         getColumnPTOptions('radiobutton')
     );
 
-    const radiobuttonIconProps = mergeProps(
-        {
-            className: cx('radiobuttonIcon')
-        },
-        getColumnPTOptions('radiobuttonIcon')
-    );
-
-    return (
-        <div {...radiobuttonWrapperProps}>
-            <div {...hiddenInputWrapperProps}>
-                <input ref={inputRef} {...hiddenInputProps} />
-            </div>
-            <div {...radiobuttonProps}>
-                <div {...radiobuttonIconProps}></div>
-            </div>
-        </div>
-    );
+    return <RadioButton {...radioButtonProps} />;
 });
 
 RowRadioButton.displayName = 'RowRadioButton';

From b4ff4b79bef5f3f7d12099751ffe388a0492271d Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 01:31:07 +0300
Subject: [PATCH 037/194] Update apidoc

---
 components/doc/common/apidoc/index.json | 84 -------------------------
 components/lib/column/column.d.ts       | 48 --------------
 2 files changed, 132 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 3115eae269..561a80e3bc 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -12999,27 +12999,6 @@
                             "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
                             "description": "Uses to pass attributes to the sort badge's DOM element."
                         },
-                        {
-                            "name": "headerCheckboxWrapper",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the checkbox wrapper's DOM element."
-                        },
-                        {
-                            "name": "headerCheckbox",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the header checkbox's DOM element."
-                        },
-                        {
-                            "name": "headerCheckboxIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
-                            "description": "Uses to pass attributes to the header checkbox icon's DOM element."
-                        },
                         {
                             "name": "columnFilter",
                             "optional": true,
@@ -13195,48 +13174,6 @@
                             "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
                             "description": "Uses to pass attributes to the column title's DOM element."
                         },
-                        {
-                            "name": "radiobuttonWrapper",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the radiobutton wrapper's DOM element."
-                        },
-                        {
-                            "name": "radiobutton",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the radiobutton's DOM element."
-                        },
-                        {
-                            "name": "radiobuttonIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the radiobutton icon's DOM element."
-                        },
-                        {
-                            "name": "checkboxWrapper",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the checkbox wrapper's DOM element."
-                        },
-                        {
-                            "name": "checkbox",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the checkbox's DOM element."
-                        },
-                        {
-                            "name": "checkboxIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
-                            "description": "Uses to pass attributes to the checkbox icon's DOM element."
-                        },
                         {
                             "name": "rowToggler",
                             "optional": true,
@@ -13307,27 +13244,6 @@
                             "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
                             "description": "Uses to pass attributes to the row editor cancel icon's DOM element."
                         },
-                        {
-                            "name": "hiddenHeaderInputWrapper",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
-                        },
-                        {
-                            "name": "hiddenInputWrapper",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
-                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
-                        },
-                        {
-                            "name": "hiddenInput",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLInputElement>>",
-                            "description": "Uses to pass attributes to the hidden input's DOM element."
-                        },
                         {
                             "name": "hooks",
                             "optional": true,
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index 5f51fab3ed..53041e2dcc 100644
--- a/components/lib/column/column.d.ts
+++ b/components/lib/column/column.d.ts
@@ -162,18 +162,6 @@ export interface ColumnPassThroughOptions {
      * Uses to pass attributes to the sort badge's DOM element.
      */
     sortBadge?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the checkbox wrapper's DOM element.
-     */
-    headerCheckboxWrapper?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the header checkbox's DOM element.
-     */
-    headerCheckbox?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the header checkbox icon's DOM element.
-     */
-    headerCheckboxIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the column filter's DOM element.
      */
@@ -280,30 +268,6 @@ export interface ColumnPassThroughOptions {
      * Uses to pass attributes to the column title's DOM element.
      */
     columnTitle?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the radiobutton wrapper's DOM element.
-     */
-    radiobuttonWrapper?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the radiobutton's DOM element.
-     */
-    radiobutton?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the radiobutton icon's DOM element.
-     */
-    radiobuttonIcon?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the checkbox wrapper's DOM element.
-     */
-    checkboxWrapper?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the checkbox's DOM element.
-     */
-    checkbox?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the checkbox icon's DOM element.
-     */
-    checkboxIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the rowtoggler's DOM element.
      */
@@ -344,18 +308,6 @@ export interface ColumnPassThroughOptions {
      * Uses to pass attributes to the row editor cancel icon's DOM element.
      */
     rowEditorCancelIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
-    /**
-     * Uses to pass attributes to the hidden input wrapper's DOM element.
-     */
-    hiddenHeaderInputWrapper?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the hidden input wrapper's DOM element.
-     */
-    hiddenInputWrapper?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the hidden input's DOM element.
-     */
-    hiddenInput?: ColumnPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
     /**
      * Used to manage all lifecycle hooks
      * @see {@link ComponentHooks}

From f23c3d3560c2fe0b1a2736de97f98d1d951c206f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 28 Mar 2024 04:33:13 +0300
Subject: [PATCH 038/194] Tree checkbox enhancement

---
 components/lib/tree/Tree.js       |   1 +
 components/lib/tree/TreeBase.js   |  58 ++++++-------
 components/lib/tree/UITreeNode.js | 136 +++++++++++++++---------------
 3 files changed, 98 insertions(+), 97 deletions(-)

diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 2e5e9b6029..968f874e72 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -412,6 +412,7 @@ export const Tree = React.memo(
                     selectionKeys={props.selectionKeys}
                     selectionMode={props.selectionMode}
                     togglerTemplate={props.togglerTemplate}
+                    isUnstyled={isUnstyled}
                 />
             );
         };
diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js
index a619b4e360..30d14c716e 100644
--- a/components/lib/tree/TreeBase.js
+++ b/components/lib/tree/TreeBase.js
@@ -2,45 +2,46 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    container: 'p-tree-container',
-    loadingIcon: 'p-tree-loading-icon',
+    root: ({ props }) =>
+    classNames('p-tree p-component', {
+        'p-tree-selectable': props.selectionMode,
+        'p-tree-loading': props.loading,
+        'p-disabled': props.disabled
+    }),
     loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
-    searchIcon: 'p-tree-filter-icon',
-    emptyMessage: 'p-treenode p-tree-empty-message',
+    loadingIcon: 'p-tree-loading-icon',
     filterContainer: 'p-tree-filter-container',
     input: 'p-tree-filter p-inputtext p-component',
-    header: 'p-tree-header',
-    footer: 'p-tree-footer',
-    root: ({ props }) =>
-        classNames('p-tree p-component', {
-            'p-tree-selectable': props.selectionMode,
-            'p-tree-loading': props.loading,
-            'p-disabled': props.disabled
-        }),
-    label: 'p-treenode-label',
-    checkboxIcon: 'p-checkbox-icon p-c',
-    checkboxContainer: 'p-checkbox p-component',
-    checkbox: ({ nodeProps: props, checked, partialChecked }) => classNames('p-checkbox-box', { 'p-highlight': checked, 'p-indeterminate': partialChecked, 'p-disabled': props.disabled }),
-    nodeIcon: 'p-treenode-icon',
-    togglerIcon: 'p-tree-toggler-icon',
-    toggler: 'p-tree-toggler p-link',
-    droppoint: 'p-treenode-droppoint',
+    searchIcon: 'p-tree-filter-icon',
+    wrapper: 'p-tree-wrapper',
+    container: 'p-tree-container',
+    node: ({ isLeaf }) =>
+        classNames('p-treenode', {
+            'p-treenode-leaf': isLeaf
+    }),
     content: ({ nodeProps: props, checked, selected, isCheckboxSelectionMode }) =>
         classNames('p-treenode-content', {
             'p-treenode-selectable': props.selectionMode && props.node.selectable !== false,
             'p-highlight': isCheckboxSelectionMode() ? checked : selected,
             'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
             'p-disabled': props.disabled
-        }),
+    }),
+    toggler: 'p-tree-toggler p-link',
+    togglerIcon: 'p-tree-toggler-icon',
+    nodeCheckbox: ({ partialChecked }) => classNames({ 'p-indeterminate': partialChecked }),
+    nodeIcon: 'p-treenode-icon',
+    label: 'p-treenode-label',
     subgroup: 'p-treenode-children',
-    node: ({ isLeaf }) =>
-        classNames('p-treenode', {
-            'p-treenode-leaf': isLeaf
-        })
+
+    emptyMessage: 'p-treenode p-tree-empty-message',
+    droppoint: 'p-treenode-droppoint',
+    header: 'p-tree-header',
+    footer: 'p-tree-footer',
+  
 };
 
+
 const styles = `
-@layer primereact {
     .p-tree-container {
         margin: 0;
         padding: 0;
@@ -107,7 +108,7 @@ const styles = `
         align-items: center;
         justify-content: center;
     }
-}
+
 `;
 
 export const TreeBase = ComponentBase.extend({
@@ -166,7 +167,6 @@ export const TreeBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes,
-        styles
+        classes
     }
 });
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 055774ab04..92c33cb8d1 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -6,6 +6,7 @@ import { ChevronRightIcon } from '../icons/chevronright';
 import { MinusIcon } from '../icons/minus';
 import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { Checkbox } from '../checkbox/Checkbox';
 
 export const UITreeNode = React.memo((props) => {
     const contentRef = React.useRef(null);
@@ -670,33 +671,24 @@ export const UITreeNode = React.memo((props) => {
         if (isCheckboxSelectionMode() && props.node.selectable !== false) {
             const checked = isChecked();
             const partialChecked = isPartialChecked();
-            const checkboxIconProps = mergeProps(
-                {
-                    className: cx('checkboxIcon')
-                },
-                getPTOptions('checkboxIcon')
-            );
-            const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon {...checkboxIconProps} /> : null;
-            const checkboxIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, props);
-            const checkboxContainerProps = mergeProps(
-                {
-                    'aria-hidden': true,
-                    className: cx('checkboxContainer')
-                },
-                getPTOptions('checkboxContainer')
-            );
+            const icon = checked ? props.checkboxIcon || <CheckIcon /> : partialChecked ? props.checkboxIcon || <MinusIcon  /> : null;
+            const checkboxIcon = IconUtils.getJSXIcon(icon, {}, props);
             const checkboxProps = mergeProps(
                 {
-                    className: cx('checkbox', { checked, partialChecked, nodeProps: props }),
-                    role: 'checkbox'
+                    className: cx('nodeCheckbox', {  partialChecked }),
+                    checked: checked || partialChecked, 
+                    icon: checkboxIcon,
+                    tabIndex: -1,
+                    unstyled: props?.isUnstyled?.(),
+                    'data-p-checked': checked,
+                    'data-p-partialchecked': partialChecked,
+                    onChange: onClick
                 },
-                getPTOptions('checkbox')
+                getPTOptions('nodeCheckbox')
             );
 
             return (
-                <div {...checkboxContainerProps}>
-                    <div {...checkboxProps}>{checkboxIcon}</div>
-                </div>
+                <Checkbox {...checkboxProps} />
             );
         }
 
@@ -830,56 +822,64 @@ export const UITreeNode = React.memo((props) => {
             },
             getPTOptions('subgroup')
         );
+        const wrapperProps = mergeProps(
+            {
+                className: cx('wrapper'),
+            },
+            getPTOptions('wrapper')
+        )
 
         if (ObjectUtils.isNotEmpty(props.node.children) && expanded) {
             return (
-                <ul {...subgroupProps}>
-                    {props.node.children.map((childNode, index) => {
-                        return (
-                            <UITreeNode
-                                key={childNode.key || childNode.label}
-                                node={childNode}
-                                checkboxIcon={props.checkboxIcon}
-                                collapseIcon={props.collapseIcon}
-                                contextMenuSelectionKey={props.contextMenuSelectionKey}
-                                cx={cx}
-                                disabled={props.disabled}
-                                dragdropScope={props.dragdropScope}
-                                expandIcon={props.expandIcon}
-                                expandedKeys={props.expandedKeys}
-                                index={index}
-                                isNodeLeaf={props.isNodeLeaf}
-                                last={index === props.node.children.length - 1}
-                                metaKeySelection={props.metaKeySelection}
-                                nodeTemplate={props.nodeTemplate}
-                                onClick={props.onClick}
-                                onCollapse={props.onCollapse}
-                                onContextMenu={props.onContextMenu}
-                                onContextMenuSelectionChange={props.onContextMenuSelectionChange}
-                                onDoubleClick={props.onDoubleClick}
-                                onDragEnd={props.onDragEnd}
-                                onDragStart={props.onDragStart}
-                                onDrop={props.onDrop}
-                                onDropPoint={props.onDropPoint}
-                                onExpand={props.onExpand}
-                                onPropagateUp={propagateUp}
-                                onSelect={props.onSelect}
-                                onSelectionChange={props.onSelectionChange}
-                                onToggle={props.onToggle}
-                                onUnselect={props.onUnselect}
-                                originalOptions={props.originalOptions}
-                                parent={props.node}
-                                path={props.path + '-' + index}
-                                propagateSelectionDown={props.propagateSelectionDown}
-                                propagateSelectionUp={props.propagateSelectionUp}
-                                ptm={ptm}
-                                selectionKeys={props.selectionKeys}
-                                selectionMode={props.selectionMode}
-                                togglerTemplate={props.togglerTemplate}
-                            />
-                        );
-                    })}
-                </ul>
+                <div >
+                    <ul {...subgroupProps}>
+                        {props.node.children.map((childNode, index) => {
+                            return (
+                                <UITreeNode
+                                    key={childNode.key || childNode.label}
+                                    node={childNode}
+                                    checkboxIcon={props.checkboxIcon}
+                                    collapseIcon={props.collapseIcon}
+                                    contextMenuSelectionKey={props.contextMenuSelectionKey}
+                                    cx={cx}
+                                    disabled={props.disabled}
+                                    dragdropScope={props.dragdropScope}
+                                    expandIcon={props.expandIcon}
+                                    expandedKeys={props.expandedKeys}
+                                    index={index}
+                                    isNodeLeaf={props.isNodeLeaf}
+                                    last={index === props.node.children.length - 1}
+                                    metaKeySelection={props.metaKeySelection}
+                                    nodeTemplate={props.nodeTemplate}
+                                    onClick={props.onClick}
+                                    onCollapse={props.onCollapse}
+                                    onContextMenu={props.onContextMenu}
+                                    onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                                    onDoubleClick={props.onDoubleClick}
+                                    onDragEnd={props.onDragEnd}
+                                    onDragStart={props.onDragStart}
+                                    onDrop={props.onDrop}
+                                    onDropPoint={props.onDropPoint}
+                                    onExpand={props.onExpand}
+                                    onPropagateUp={propagateUp}
+                                    onSelect={props.onSelect}
+                                    onSelectionChange={props.onSelectionChange}
+                                    onToggle={props.onToggle}
+                                    onUnselect={props.onUnselect}
+                                    originalOptions={props.originalOptions}
+                                    parent={props.node}
+                                    path={props.path + '-' + index}
+                                    propagateSelectionDown={props.propagateSelectionDown}
+                                    propagateSelectionUp={props.propagateSelectionUp}
+                                    ptm={ptm}
+                                    selectionKeys={props.selectionKeys}
+                                    selectionMode={props.selectionMode}
+                                    togglerTemplate={props.togglerTemplate}
+                                />
+                            );
+                        })}
+                    </ul>
+                </div>
             );
         }
 

From b7f380d7c577a53a4f878295500b1838e1d855c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 28 Mar 2024 04:33:23 +0300
Subject: [PATCH 039/194] Theme update for tree component

---
 public/themes/arya-blue/theme.css             |  71 +++-
 public/themes/arya-green/theme.css            |  71 +++-
 public/themes/arya-orange/theme.css           |  71 +++-
 public/themes/bootstrap4-dark-blue/theme.css  |  71 +++-
 .../themes/bootstrap4-dark-purple/theme.css   |  71 +++-
 public/themes/bootstrap4-light-blue/theme.css |  71 +++-
 .../themes/bootstrap4-light-purple/theme.css  |  71 +++-
 public/themes/fluent-light/theme.css          |  71 +++-
 public/themes/lara-dark-amber/theme.css       |  71 +++-
 public/themes/lara-dark-blue/theme.css        |  71 +++-
 public/themes/lara-dark-cyan/theme.css        |  71 +++-
 public/themes/lara-dark-green/theme.css       |  71 +++-
 public/themes/lara-dark-indigo/theme.css      |  71 +++-
 public/themes/lara-dark-pink/theme.css        |  71 +++-
 public/themes/lara-dark-teal/theme.css        |  71 +++-
 public/themes/lara-light-amber/theme.css      |  71 +++-
 public/themes/lara-light-blue/theme.css       |  71 +++-
 public/themes/lara-light-cyan/theme.css       |  71 +++-
 public/themes/lara-light-green/theme.css      |  71 +++-
 public/themes/lara-light-indigo/theme.css     |  71 +++-
 public/themes/lara-light-pink/theme.css       |  71 +++-
 public/themes/lara-light-teal/theme.css       |  71 +++-
 public/themes/luna-amber/theme.css            |  71 +++-
 public/themes/luna-blue/theme.css             |  71 +++-
 public/themes/luna-green/theme.css            |  71 +++-
 public/themes/luna-pink/theme.css             |  71 +++-
 public/themes/md-dark-deeppurple/theme.css    |  71 +++-
 public/themes/md-dark-indigo/theme.css        | 359 ++++++++++--------
 public/themes/md-light-deeppurple/theme.css   |  71 +++-
 public/themes/md-light-indigo/theme.css       |  71 +++-
 public/themes/mdc-dark-deeppurple/theme.css   |  71 +++-
 public/themes/mdc-dark-indigo/theme.css       | 359 ++++++++++--------
 public/themes/mdc-light-deeppurple/theme.css  |  71 +++-
 public/themes/mdc-light-indigo/theme.css      |  71 +++-
 public/themes/mira/theme.css                  |  71 +++-
 public/themes/nano/theme.css                  |  71 +++-
 public/themes/nova-accent/theme.css           |  71 +++-
 public/themes/nova-alt/theme.css              |  71 +++-
 public/themes/nova/theme.css                  |  71 +++-
 public/themes/rhea/theme.css                  |  71 +++-
 public/themes/saga-blue/theme.css             |  71 +++-
 public/themes/saga-green/theme.css            |  71 +++-
 public/themes/saga-orange/theme.css           |  71 +++-
 public/themes/soho-dark/theme.css             | 121 ++++--
 public/themes/soho-light/theme.css            |  71 +++-
 public/themes/tailwind-light/theme.css        |  71 +++-
 public/themes/vela-blue/theme.css             |  71 +++-
 public/themes/vela-green/theme.css            |  71 +++-
 public/themes/vela-orange/theme.css           |  71 +++-
 public/themes/viva-dark/theme.css             |  71 +++-
 public/themes/viva-light/theme.css            |  71 +++-
 51 files changed, 3373 insertions(+), 874 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 0d097df55a..940642254c 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(100, 181, 246, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #383838;
     background: #1e1e1e;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(35, 150, 242, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index cd00aad3e1..1c5b1058e8 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(129, 199, 132, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #383838;
     background: #1e1e1e;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(84, 179, 88, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index de400d03da..ac9c359079 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(255, 213, 79, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #383838;
     background: #1e1e1e;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(255, 197, 12, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index ece99f85e1..429be55136 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -3849,6 +3849,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #64bfff;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #3f4b5b;
     background: #2a323d;
@@ -3897,7 +3956,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3916,10 +3975,6 @@
     background: rgba(255, 255, 255, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.04);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3941,12 +3996,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #3eafff;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 274cc1be41..9dc6b070e8 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -3849,6 +3849,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #b07acd;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #3f4b5b;
     background: #2a323d;
@@ -3897,7 +3956,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3916,10 +3975,6 @@
     background: rgba(255, 255, 255, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.04);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3941,12 +3996,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #a263c4;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 569674e4c2..67def93849 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -3849,6 +3849,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #0067d6;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dee2e6;
     background: #ffffff;
@@ -3897,7 +3956,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #212529;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3916,10 +3975,6 @@
     background: #e9ecef;
     color: #212529;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #e9ecef;
-    color: #212529;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3941,12 +3996,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #0062cc;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 0 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 4eac467e11..aa3d0f8c95 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -3849,6 +3849,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #703290;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dee2e6;
     background: #ffffff;
@@ -3897,7 +3956,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #212529;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3916,10 +3975,6 @@
     background: #e9ecef;
     color: #212529;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #e9ecef;
-    color: #212529;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3941,12 +3996,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #6d308b;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 0 0;
     border-radius: 0;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 2508cabe9d..b98a62c99b 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #e1dfdd;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #a19f9d;
     background: #ffffff;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #323130;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: #f3f2f1;
     color: #323130;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f2f1;
-    color: #323130;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #c3bcb5;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 0e23685c33..803c7e659e 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(251, 191, 36, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(225, 164, 4, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index f089065134..19b7a86673 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(96, 165, 250, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(29, 127, 248, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index a2cb7701c0..81a8903ba2 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(34, 211, 238, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(16, 177, 202, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 49aa8d76ed..45ffd2f09d 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(52, 211, 153, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(37, 173, 124, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index c2851ea9d8..a946f699ab 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(129, 140, 248, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(58, 75, 244, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index db3c11fa79..4830128e0b 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(244, 114, 182, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(239, 48, 148, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index f2c4f24d22..6417895e69 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(45, 212, 191, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(35, 171, 154, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 50ee92463b..444990c4b6 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(245, 158, 11, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f4f6;
-    color: #4b5563;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #ffe789;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 0a43a820a5..99f882d6f8 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(59, 130, 246, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f4f6;
-    color: #4b5563;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #8cbeff;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index ade85feffb..f90493cdf5 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(6, 182, 212, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f4f6;
-    color: #4b5563;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #8af9ff;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 528164aad6..48e3a19b8d 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f4f6;
-    color: #4b5563;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #99f1dd;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index f18ff876a7..9f28b7b270 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(99, 102, 241, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f4f6;
-    color: #4b5563;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #8ba7ff;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index f684960e15..c57b7befd7 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(236, 72, 153, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f4f6;
-    color: #4b5563;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #f09cca;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 993ba9f78b..b03272e4e5 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -3857,6 +3857,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(20, 184, 166, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3905,7 +3964,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,10 +3983,6 @@
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f3f4f6;
-    color: #4b5563;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3949,12 +4004,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #0c5e58;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 230693fdf8..74ffa15519 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -3801,6 +3801,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(255, 224, 130, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #191919;
     background: #323232;
@@ -3849,7 +3908,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #dedede;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3868,10 +3927,6 @@
     background: #4c4c4c;
     color: #dedede;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #4c4c4c;
-    color: #dedede;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3893,12 +3948,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #ffcd35;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index e8a7bfd8ed..9a96b98ef6 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -3801,6 +3801,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(129, 212, 250, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #191919;
     background: #323232;
@@ -3849,7 +3908,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #dedede;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3868,10 +3927,6 @@
     background: #4c4c4c;
     color: #dedede;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #4c4c4c;
-    color: #dedede;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3893,12 +3948,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #38bbf7;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 01b68a90d7..6faecfd0bf 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -3801,6 +3801,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(197, 225, 165, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #191919;
     background: #323232;
@@ -3849,7 +3908,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #dedede;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3868,10 +3927,6 @@
     background: #4c4c4c;
     color: #dedede;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #4c4c4c;
-    color: #dedede;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3893,12 +3948,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #9fce6b;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index f04367e6b3..a8363f7647 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -3801,6 +3801,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(244, 143, 177, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #191919;
     background: #323232;
@@ -3849,7 +3908,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #dedede;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3868,10 +3927,6 @@
     background: #4c4c4c;
     color: #dedede;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #4c4c4c;
-    color: #dedede;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3893,12 +3948,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #ed4980;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 42d7722f4b..e1c3364de0 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(206, 147, 216, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3927,10 +3986,6 @@
     background: hsla(0, 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);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(182, 94, 197, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 6386049da0..aab2de5825 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(0deg, 0%, 100%, 0.04);
+  background: hsla(0, 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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-datepicker .p-datepicker-buttonbar .p-button {
     width: auto;
   }
   .p-datepicker .p-timepicker {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.12);
     padding-right: 0.5rem;
     padding-left: 0.5rem;
     padding-top: 0;
@@ -656,7 +656,7 @@
   }
   .p-cascadeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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;
   }
@@ -723,7 +723,7 @@
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
@@ -733,13 +733,13 @@
     height: 0.875rem;
   }
   .p-input-filled .p-cascadeselect {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-checkbox {
     position: relative;
@@ -771,11 +771,11 @@
     height: 18px;
   }
   .p-checkbox .p-checkbox-input {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 4px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -794,7 +794,7 @@
     height: 14px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -834,25 +834,25 @@
     border-color: #f44435;
   }
   .p-checkbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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 +872,13 @@
     align-items: center;
   }
   .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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 +938,12 @@
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.24);
+    background: hsla(0, 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 +1058,7 @@
   }
   .p-dropdown {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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 +1073,13 @@
     border-color: #9FA8DA;
   }
   .p-dropdown.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
     background-color: transparent;
@@ -1121,7 +1121,7 @@
   }
   .p-dropdown-panel .p-dropdown-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1163,7 +1163,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
     position: relative;
@@ -1185,14 +1185,14 @@
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
-    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);
+    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);
     padding: 1rem 1rem;
     min-width: 2.357rem;
   }
   .p-inputgroup-addon:last-child {
-    border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
   }
   .p-inputgroup > .p-component,
   .p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1288,7 +1288,7 @@
     border-radius: 0.5rem;
   }
   .p-inputswitch .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 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 +1310,7 @@
     transform: translateX(1.5rem);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 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,7 +1330,7 @@
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     padding: 1rem 1rem;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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;
@@ -1406,13 +1406,13 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-input-filled .p-inputtext {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-inputtext:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-inputtext-sm .p-inputtext {
     font-size: 0.875rem;
@@ -1472,14 +1472,14 @@
   .p-listbox {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     margin: 0;
@@ -1532,15 +1532,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox.p-focus {
     outline: 0 none;
@@ -1572,7 +1572,7 @@
   }
   .p-mention-panel .p-mention-items .p-mention-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
     color: #9FA8DA;
@@ -1668,7 +1668,7 @@
   }
   .p-multiselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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 +1683,13 @@
     border-color: #9FA8DA;
   }
   .p-multiselect.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-multiselect .p-multiselect-label {
     padding: 1rem 1rem;
@@ -1701,7 +1701,7 @@
   .p-multiselect.p-multiselect-chip .p-multiselect-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -1730,7 +1730,7 @@
   }
   .p-multiselect-panel .p-multiselect-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1794,7 +1794,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
@@ -1876,11 +1876,11 @@
     opacity: 0;
     z-index: 1;
     outline: 0 none;
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 50%;
   }
   .p-radiobutton .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 20px;
     height: 20px;
@@ -1919,25 +1919,25 @@
     border-color: #f44435;
   }
   .p-radiobutton.p-variant-filled .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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 +2029,7 @@
     border-color: #f44435;
   }
   .p-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
     border: 0 none;
     border-radius: 4px;
   }
@@ -2069,7 +2069,7 @@
   }
   .p-treeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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;
   }
@@ -2095,7 +2095,7 @@
   .p-treeselect.p-treeselect-chip .p-treeselect-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -2125,7 +2125,7 @@
   }
   .p-treeselect-panel .p-treeselect-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -2176,13 +2176,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-togglebutton {
     position: relative;
@@ -3575,7 +3575,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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 +3583,12 @@
     box-shadow: none;
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-column-filter-overlay-menu .p-column-filter-operator {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -3597,7 +3597,7 @@
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
     margin-bottom: 0.5rem;
@@ -3661,12 +3661,12 @@
     transition: transform 0.2s, none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #9FA8DA;
@@ -3679,10 +3679,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3846,12 +3846,12 @@
     transition: transform 0.2s, none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #9FA8DA;
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(159, 168, 218, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,11 +3983,7 @@
     color: #9FA8DA;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-filter-container {
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(105, 119, 197, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
@@ -4340,7 +4389,7 @@
     padding: 0 1.25rem;
   }
   .p-divider.p-divider-horizontal:before {
-    border-top: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-horizontal .p-divider-content {
     padding: 0 0.5rem;
@@ -4350,7 +4399,7 @@
     padding: 1.25rem 0;
   }
   .p-divider.p-divider-vertical:before {
-    border-left: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-vertical .p-divider-content {
     padding: 0.5rem 0;
@@ -4412,10 +4461,10 @@
   }
   .p-splitter .p-splitter-gutter {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
@@ -4423,7 +4472,7 @@
     box-shadow: none;
   }
   .p-splitter .p-splitter-gutter-resizing {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
@@ -4838,7 +4887,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -4859,7 +4908,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-contextmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-contextmenu .p-submenu-icon {
@@ -5001,7 +5050,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5041,7 +5090,7 @@
     width: 12.5rem;
   }
   .p-megamenu .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-vertical {
@@ -5102,7 +5151,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(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5152,7 +5201,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5239,7 +5288,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5274,7 +5323,7 @@
     border-top-left-radius: 0;
   }
   .p-menu .p-menu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar {
@@ -5354,7 +5403,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5382,7 +5431,7 @@
     width: 12.5rem;
   }
   .p-menubar .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar .p-submenu-list .p-submenu-icon {
@@ -5411,7 +5460,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(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5477,7 +5526,7 @@
       width: 100%;
     }
     .p-menubar .p-menubar-root-list .p-menu-separator {
-      border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+      border-top: 1px solid hsla(0, 0%, 100%, 0.12);
       margin: 0.5rem 0;
     }
     .p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5527,7 +5576,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(0deg, 0%, 100%, 0.12);
+      background: hsla(0, 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);
@@ -5688,7 +5737,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5712,7 +5761,7 @@
     margin-right: 0.5rem;
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -5789,7 +5838,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5830,7 +5879,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-slidemenu .p-slidemenu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-slidemenu .p-slidemenu-icon {
@@ -5880,7 +5929,7 @@
   }
   .p-steps .p-steps-item:before {
     content: " ";
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     width: 100%;
     top: 50%;
     left: 0;
@@ -5986,7 +6035,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -6007,7 +6056,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-tieredmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-tieredmenu .p-submenu-icon {
@@ -6398,7 +6447,7 @@
     height: 1.5rem;
   }
   .p-avatar {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     border-radius: 4px;
   }
   .p-avatar.p-avatar-lg {
@@ -6424,7 +6473,7 @@
     border: 2px solid #1e1e1e;
   }
   .p-chip {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
     padding: 0 1rem;
@@ -6726,8 +6775,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -6737,13 +6786,13 @@
     background: transparent;
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -6972,7 +7021,7 @@
     background-color: rgba(255, 255, 255, 0.16);
   }
   .p-calendar-w-btn {
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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);
@@ -7022,7 +7071,7 @@
     order: 3;
   }
   .p-datepicker table th {
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.38);
     font-weight: 400;
     font-size: 0.875rem;
@@ -7049,8 +7098,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7060,13 +7109,13 @@
     background: transparent;
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7127,8 +7176,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7138,13 +7187,13 @@
     background: transparent;
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7186,7 +7235,7 @@
     border-radius: 2px;
   }
   .p-checkbox .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
     border-radius: 2px;
     position: relative;
   }
@@ -7205,7 +7254,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(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 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);
@@ -7214,7 +7263,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(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 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);
@@ -7260,8 +7309,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7271,13 +7320,13 @@
     background: transparent;
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7347,8 +7396,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7358,13 +7407,13 @@
     background: transparent;
   }
   .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7410,20 +7459,20 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7443,8 +7492,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7589,8 +7638,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7600,13 +7649,13 @@
     background: transparent;
   }
   .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7757,7 +7806,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(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 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);
@@ -7766,7 +7815,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(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 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);
@@ -8005,8 +8054,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -8016,13 +8065,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index b4387c1153..ba89dd38a3 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(103, 58, 183, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e0e0e0;
     background: #ffffff;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(0, 0, 0, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3927,10 +3986,6 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(0, 0, 0, 0.04);
-    color: rgba(0, 0, 0, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(82, 46, 146, 0.12);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index f136901b87..0ff57be341 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(63, 81, 181, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e0e0e0;
     background: #ffffff;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(0, 0, 0, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3927,10 +3986,6 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(0, 0, 0, 0.04);
-    color: rgba(0, 0, 0, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(50, 65, 145, 0.12);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 60b3853301..1c2818410a 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(206, 147, 216, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3927,10 +3986,6 @@
     background: hsla(0, 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);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(182, 94, 197, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index ef5bea4742..80638f5839 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(0deg, 0%, 100%, 0.04);
+  background: hsla(0, 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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-datepicker .p-datepicker-buttonbar .p-button {
     width: auto;
   }
   .p-datepicker .p-timepicker {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.12);
     padding-right: 0.5rem;
     padding-left: 0.5rem;
     padding-top: 0;
@@ -656,7 +656,7 @@
   }
   .p-cascadeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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;
   }
@@ -723,7 +723,7 @@
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
@@ -733,13 +733,13 @@
     height: 0.875rem;
   }
   .p-input-filled .p-cascadeselect {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-checkbox {
     position: relative;
@@ -771,11 +771,11 @@
     height: 18px;
   }
   .p-checkbox .p-checkbox-input {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 4px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -794,7 +794,7 @@
     height: 14px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -834,25 +834,25 @@
     border-color: #f44435;
   }
   .p-checkbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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 +872,13 @@
     align-items: center;
   }
   .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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 +938,12 @@
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.24);
+    background: hsla(0, 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 +1058,7 @@
   }
   .p-dropdown {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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 +1073,13 @@
     border-color: #9FA8DA;
   }
   .p-dropdown.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
     background-color: transparent;
@@ -1121,7 +1121,7 @@
   }
   .p-dropdown-panel .p-dropdown-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1163,7 +1163,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
     position: relative;
@@ -1185,14 +1185,14 @@
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
-    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);
+    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);
     padding: 0.75rem 0.75rem;
     min-width: 2.357rem;
   }
   .p-inputgroup-addon:last-child {
-    border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
   }
   .p-inputgroup > .p-component,
   .p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1288,7 +1288,7 @@
     border-radius: 0.5rem;
   }
   .p-inputswitch .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 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 +1310,7 @@
     transform: translateX(1.5rem);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 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,7 +1330,7 @@
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     padding: 0.75rem 0.75rem;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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;
@@ -1406,13 +1406,13 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-input-filled .p-inputtext {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-inputtext:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-inputtext-sm .p-inputtext {
     font-size: 0.875rem;
@@ -1472,14 +1472,14 @@
   .p-listbox {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     margin: 0;
@@ -1532,15 +1532,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox.p-focus {
     outline: 0 none;
@@ -1572,7 +1572,7 @@
   }
   .p-mention-panel .p-mention-items .p-mention-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
     color: #9FA8DA;
@@ -1668,7 +1668,7 @@
   }
   .p-multiselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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 +1683,13 @@
     border-color: #9FA8DA;
   }
   .p-multiselect.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.75rem 0.75rem;
@@ -1701,7 +1701,7 @@
   .p-multiselect.p-multiselect-chip .p-multiselect-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -1730,7 +1730,7 @@
   }
   .p-multiselect-panel .p-multiselect-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1794,7 +1794,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
@@ -1876,11 +1876,11 @@
     opacity: 0;
     z-index: 1;
     outline: 0 none;
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 50%;
   }
   .p-radiobutton .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 20px;
     height: 20px;
@@ -1919,25 +1919,25 @@
     border-color: #f44435;
   }
   .p-radiobutton.p-variant-filled .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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 +2029,7 @@
     border-color: #f44435;
   }
   .p-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
     border: 0 none;
     border-radius: 4px;
   }
@@ -2069,7 +2069,7 @@
   }
   .p-treeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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;
   }
@@ -2095,7 +2095,7 @@
   .p-treeselect.p-treeselect-chip .p-treeselect-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -2125,7 +2125,7 @@
   }
   .p-treeselect-panel .p-treeselect-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -2176,13 +2176,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-togglebutton {
     position: relative;
@@ -3575,7 +3575,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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 +3583,12 @@
     box-shadow: none;
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -3597,7 +3597,7 @@
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
     margin-bottom: 0.5rem;
@@ -3661,12 +3661,12 @@
     transition: transform 0.2s, none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #9FA8DA;
@@ -3679,10 +3679,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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3846,12 +3846,12 @@
     transition: transform 0.2s, none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #9FA8DA;
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(159, 168, 218, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3924,11 +3983,7 @@
     color: #9FA8DA;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    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(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-filter-container {
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(105, 119, 197, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
@@ -4340,7 +4389,7 @@
     padding: 0 1.25rem;
   }
   .p-divider.p-divider-horizontal:before {
-    border-top: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-horizontal .p-divider-content {
     padding: 0 0.5rem;
@@ -4350,7 +4399,7 @@
     padding: 1.25rem 0;
   }
   .p-divider.p-divider-vertical:before {
-    border-left: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-vertical .p-divider-content {
     padding: 0.5rem 0;
@@ -4412,10 +4461,10 @@
   }
   .p-splitter .p-splitter-gutter {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
@@ -4423,7 +4472,7 @@
     box-shadow: none;
   }
   .p-splitter .p-splitter-gutter-resizing {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
@@ -4838,7 +4887,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -4859,7 +4908,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-contextmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-contextmenu .p-submenu-icon {
@@ -5001,7 +5050,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5041,7 +5090,7 @@
     width: 12.5rem;
   }
   .p-megamenu .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-vertical {
@@ -5102,7 +5151,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(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5152,7 +5201,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5239,7 +5288,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5274,7 +5323,7 @@
     border-top-left-radius: 0;
   }
   .p-menu .p-menu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar {
@@ -5354,7 +5403,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5382,7 +5431,7 @@
     width: 12.5rem;
   }
   .p-menubar .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar .p-submenu-list .p-submenu-icon {
@@ -5411,7 +5460,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(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5477,7 +5526,7 @@
       width: 100%;
     }
     .p-menubar .p-menubar-root-list .p-menu-separator {
-      border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+      border-top: 1px solid hsla(0, 0%, 100%, 0.12);
       margin: 0.5rem 0;
     }
     .p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5527,7 +5576,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(0deg, 0%, 100%, 0.12);
+      background: hsla(0, 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);
@@ -5688,7 +5737,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5712,7 +5761,7 @@
     margin-right: 0.5rem;
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -5789,7 +5838,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -5830,7 +5879,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-slidemenu .p-slidemenu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-slidemenu .p-slidemenu-icon {
@@ -5880,7 +5929,7 @@
   }
   .p-steps .p-steps-item:before {
     content: " ";
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     width: 100%;
     top: 50%;
     left: 0;
@@ -5986,7 +6035,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(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 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);
@@ -6007,7 +6056,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-tieredmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-tieredmenu .p-submenu-icon {
@@ -6398,7 +6447,7 @@
     height: 1.5rem;
   }
   .p-avatar {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     border-radius: 4px;
   }
   .p-avatar.p-avatar-lg {
@@ -6424,7 +6473,7 @@
     border: 2px solid #1e1e1e;
   }
   .p-chip {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
     padding: 0 0.75rem;
@@ -6726,8 +6775,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -6737,13 +6786,13 @@
     background: transparent;
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -6972,7 +7021,7 @@
     background-color: rgba(255, 255, 255, 0.16);
   }
   .p-calendar-w-btn {
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 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);
@@ -7022,7 +7071,7 @@
     order: 3;
   }
   .p-datepicker table th {
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.38);
     font-weight: 400;
     font-size: 0.875rem;
@@ -7049,8 +7098,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7060,13 +7109,13 @@
     background: transparent;
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7127,8 +7176,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7138,13 +7187,13 @@
     background: transparent;
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7186,7 +7235,7 @@
     border-radius: 2px;
   }
   .p-checkbox .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
     border-radius: 2px;
     position: relative;
   }
@@ -7205,7 +7254,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(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 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);
@@ -7214,7 +7263,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(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 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);
@@ -7260,8 +7309,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7271,13 +7320,13 @@
     background: transparent;
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7347,8 +7396,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7358,13 +7407,13 @@
     background: transparent;
   }
   .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7410,20 +7459,20 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-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(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7443,8 +7492,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7589,8 +7638,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7600,13 +7649,13 @@
     background: transparent;
   }
   .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7757,7 +7806,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(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 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);
@@ -7766,7 +7815,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(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 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);
@@ -8005,8 +8054,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    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: 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-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -8016,13 +8065,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 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(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 884b74f187..fdc7b0233e 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(103, 58, 183, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e0e0e0;
     background: #ffffff;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(0, 0, 0, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3927,10 +3986,6 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(0, 0, 0, 0.04);
-    color: rgba(0, 0, 0, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(82, 46, 146, 0.12);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index a36d6b6fb7..b0c6f9aeed 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -3860,6 +3860,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(63, 81, 181, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e0e0e0;
     background: #ffffff;
@@ -3908,7 +3967,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(0, 0, 0, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3927,10 +3986,6 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(0, 0, 0, 0.04);
-    color: rgba(0, 0, 0, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3952,12 +4007,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(50, 65, 145, 0.12);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 472b144623..b368b75dcc 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -3814,6 +3814,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #bec8da;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e9f0;
     background: #ffffff;
@@ -3862,7 +3921,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4c566a;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3881,10 +3940,6 @@
     background: transparent;
     color: #4c566a;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: transparent;
-    color: #4c566a;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3906,12 +3961,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #9fadc9;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 8baf87c0c3..85a665dce5 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #1174c0;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dee2e6;
     background: #ffffff;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #343a3f;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: #dde1e6;
     color: #343a3f;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #dde1e6;
-    color: #343a3f;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #2785bd;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index b804fa3141..d4279c1ea0 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #e02365;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #c8c8c8;
     background: #ffffff;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #333333;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: #eaeaea;
     color: #333333;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #eaeaea;
-    color: #333333;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #b61a50;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 9fb0fb3bd1..bfaf6f2e4e 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -3801,6 +3801,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #007ad9;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #c8c8c8;
     background: #ffffff;
@@ -3849,7 +3908,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #333333;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3868,10 +3927,6 @@
     background: #eaeaea;
     color: #333333;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #eaeaea;
-    color: #333333;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3893,12 +3948,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #0062ae;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index acf5859651..2840ed056b 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -3801,6 +3801,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #007ad9;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #c8c8c8;
     background: #ffffff;
@@ -3849,7 +3908,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #333333;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3868,10 +3927,6 @@
     background: #eaeaea;
     color: #333333;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #eaeaea;
-    color: #333333;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3893,12 +3948,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #0062ae;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index dabad8a1bd..4a19767f6a 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #aed3c7;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dadada;
     background: #ffffff;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #666666;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: #f4f4f4;
     color: #666666;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f4f4f4;
-    color: #666666;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #7db8a6;
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 3de4636100..b93007e456 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(33, 150, 243, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dee2e6;
     background: #ffffff;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #495057;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: #e9ecef;
     color: #495057;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #e9ecef;
-    color: #495057;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #89c8f7;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 6b29a27337..032e905773 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(76, 175, 80, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dee2e6;
     background: #ffffff;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #495057;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: #e9ecef;
     color: #495057;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #e9ecef;
-    color: #495057;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #a6d8a9;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index f2fa5a3289..f7fe5c3f80 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(255, 193, 7, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dee2e6;
     background: #ffffff;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #495057;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: #e9ecef;
     color: #495057;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #e9ecef;
-    color: #495057;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #ffce80;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index bbf6059d13..64037c3e0c 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(234deg, 15%, 13%);
+  --primary-color-text: hsl(234, 15%, 13%);
   --surface-0: #1d1e27;
   --surface-50: #34343d;
   --surface-100: #4a4b52;
@@ -785,7 +785,7 @@
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 14px;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -804,7 +804,7 @@
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 14px;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -821,7 +821,7 @@
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
     outline: 0 none;
@@ -1892,7 +1892,7 @@
     width: 12px;
     height: 12px;
     transition-duration: 0.2s;
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-radiobutton.p-highlight .p-radiobutton-box {
     border-color: #b19df7;
@@ -1906,7 +1906,7 @@
     background: #9378f4;
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
     outline: 0 none;
@@ -2009,20 +2009,20 @@
   .p-selectbutton .p-button.p-highlight {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight .p-button-icon-left,
   .p-selectbutton .p-button.p-highlight .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight:hover {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 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(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-selectbutton.p-invalid > .p-button {
     border-color: #ff9a9a;
@@ -2224,11 +2224,11 @@
   .p-togglebutton.p-highlight .p-button {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton.p-highlight .p-button .p-button-icon-left,
   .p-togglebutton.p-highlight .p-button .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 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 +2242,11 @@
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 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(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
     outline: 0 none;
@@ -2258,7 +2258,7 @@
     border-color: #ff9a9a;
   }
   .p-button {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     background: #b19df7;
     border: 1px solid #b19df7;
     padding: 0.75rem 1.25rem;
@@ -2268,12 +2268,12 @@
   }
   .p-button:not(:disabled):hover {
     background: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     border-color: #a28af5;
   }
   .p-button:not(:disabled):active {
     background: #9378f4;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     border-color: #9378f4;
   }
   .p-button.p-button-outlined {
@@ -2355,7 +2355,7 @@
     height: 1rem;
     line-height: 1rem;
     color: #b19df7;
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 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);
@@ -3859,6 +3859,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(177, 157, 247, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #3e4053;
     background: #282936;
@@ -3907,7 +3966,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3926,10 +3985,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3951,12 +4006,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(118, 82, 241, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
@@ -4174,7 +4223,7 @@
     border-radius: 50%;
     width: 1rem;
     height: 1rem;
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-timeline .p-timeline-event-connector {
     background-color: #3e4053;
@@ -4611,7 +4660,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     width: 2rem;
     height: 2rem;
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
@@ -4622,7 +4671,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close:enabled:hover {
     background: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-overlaypanel:after {
     border: solid transparent;
@@ -6436,7 +6485,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;
@@ -6550,7 +6599,7 @@
     background: #b19df7;
   }
   .p-progressbar .p-progressbar-label {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     line-height: 1.5rem;
   }
   .p-terminal {
@@ -6566,7 +6615,7 @@
   }
   .p-badge {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     min-width: 1.5rem;
@@ -6607,7 +6656,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 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 662e7c65e4..7722c844ed 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -3859,6 +3859,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #cbc0fa;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #dfe7ef;
     background: #ffffff;
@@ -3907,7 +3966,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #043d75;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3926,10 +3985,6 @@
     background: #f6f9fc;
     color: #043d75;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f6f9fc;
-    color: #043d75;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3951,12 +4006,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #9a85f5;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index be52a4f586..baf5871477 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -3820,6 +3820,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #e0e7ff;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3868,7 +3927,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #3f3f46;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3887,10 +3946,6 @@
     background: #f4f4f5;
     color: #18181b;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #f4f4f5;
-    color: #18181b;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3912,12 +3967,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #8ba7ff;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 0d076a90a9..b1f38c2d99 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(100, 181, 246, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #304562;
     background: #1f2d40;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(35, 150, 242, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 6f2f99496a..b4f1286d71 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(129, 199, 132, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #304562;
     background: #1f2d40;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(84, 179, 88, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 5a1bd6ee85..d56ccf7de2 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -3792,6 +3792,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(255, 213, 79, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #304562;
     background: #1f2d40;
@@ -3840,7 +3899,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3859,10 +3918,6 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3884,12 +3939,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(255, 197, 12, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 8602d72bcd..e740ac75b6 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -3866,6 +3866,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(158, 173, 230, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 2px solid #263238;
     background: #161d21;
@@ -3914,7 +3973,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3933,10 +3992,6 @@
     background: rgba(158, 173, 230, 0.08);
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: rgba(158, 173, 230, 0.08);
-    color: rgba(255, 255, 255, 0.87);
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3958,12 +4013,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: rgba(96, 121, 214, 0.16);
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 2px 0;
     border-radius: 0;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 8be69a9004..266c3f802d 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -3866,6 +3866,65 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: #aebbe8;
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-tree-wrapper {
+    overflow: auto;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 2px solid #ebebeb;
     background: #ffffff;
@@ -3914,7 +3973,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #6c6c6c;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3933,10 +3992,6 @@
     background: #edf0fa;
     color: #6c6c6c;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: #edf0fa;
-    color: #6c6c6c;
-  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3958,12 +4013,6 @@
     width: 2rem;
     height: 2rem;
   }
-  .p-tree .p-treenode-droppoint {
-    height: 0.5rem;
-  }
-  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
-    background: #889cdd;
-  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 2px 0;
     border-radius: 0;

From a287cd8f724186bed6e56795836d42b49649aec3 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 11:03:28 +0300
Subject: [PATCH 040/194] Update imperativeHandle

---
 components/lib/stepper/Stepper.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
index 224cca999c..d2f76f2ac5 100644
--- a/components/lib/stepper/Stepper.js
+++ b/components/lib/stepper/Stepper.js
@@ -10,7 +10,7 @@ import { StepperHeader } from './StepperHeader';
 import { StepperSeparator } from './StepperSeparator';
 
 export const Stepper = React.memo(
-    React.forwardRef((inProps) => {
+    React.forwardRef((inProps, ref) => {
         const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = StepperBase.getProps(inProps, context);
@@ -157,6 +157,12 @@ export const Stepper = React.memo(
             });
         };
 
+        React.useImperativeHandle(ref, () => ({
+            getElement: () => navRef.current,
+            nextCallback: (e) => nextCallback(e, activeStepState),
+            prevCallback: (e) => prevCallback(e, activeStepState)
+        }));
+
         const createPanelContent = () => {
             return stepperPanels().map((step, index) => {
                 if (!isStepActive(index)) {

From 708bebb88a2418e4dbe8ba301dc29028a71bec34 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 11:33:01 +0300
Subject: [PATCH 041/194] Update stepper docs

---
 components/doc/stepper/basicdoc.js    | 167 ++++++++++++++++++++++++++
 components/doc/stepper/importdoc.js   |  18 +++
 components/doc/stepper/lineardoc.js   | 166 +++++++++++++++++++++++++
 components/doc/stepper/verticaldoc.js | 166 +++++++++++++++++++++++++
 components/layout/menu.json           |   4 +
 pages/stepper/index.js                |  81 +++++++++++++
 6 files changed, 602 insertions(+)
 create mode 100644 components/doc/stepper/basicdoc.js
 create mode 100644 components/doc/stepper/importdoc.js
 create mode 100644 components/doc/stepper/lineardoc.js
 create mode 100644 components/doc/stepper/verticaldoc.js
 create mode 100644 pages/stepper/index.js

diff --git a/components/doc/stepper/basicdoc.js b/components/doc/stepper/basicdoc.js
new file mode 100644
index 0000000000..7b25a5dd3e
--- /dev/null
+++ b/components/doc/stepper/basicdoc.js
@@ -0,0 +1,167 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const stepperRef = useRef(null);
+
+    const code = {
+        basic: `
+<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+    <StepperPanel header="Header I">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+        </div>
+        <div className="flex pt-4 justify-content-end">
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+        </div>
+        <div className="flex pt-4 justify-content-between">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+        </div>
+        <div className="flex pt-4 justify-content-start">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+        </div>
+    </StepperPanel>
+</Stepper>
+        `,
+        javascript: `
+import React, { useRef } from "react";
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { Button } from '@/components/lib/button/Button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from "react";
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { Button } from '@/components/lib/button/Button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead <i>prevCallback</i> and{' '}
+                    <i>nextCallback</i> events should be bound to your custom UI elements.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+                    <StepperPanel header="Header I">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-end">
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header II">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-between">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header III">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-start">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        </div>
+                    </StepperPanel>
+                </Stepper>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/stepper/importdoc.js b/components/doc/stepper/importdoc.js
new file mode 100644
index 0000000000..0320f85e7b
--- /dev/null
+++ b/components/doc/stepper/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/stepper/lineardoc.js b/components/doc/stepper/lineardoc.js
new file mode 100644
index 0000000000..a11df8fd63
--- /dev/null
+++ b/components/doc/stepper/lineardoc.js
@@ -0,0 +1,166 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { useRef } from 'react';
+
+export function LinearDoc(props) {
+    const stepperRef = useRef(null);
+
+    const code = {
+        basic: `
+<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+    <StepperPanel header="Header I">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+        </div>
+        <div className="flex pt-4 justify-content-end">
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+        </div>
+        <div className="flex pt-4 justify-content-between">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+        </div>
+        <div className="flex pt-4 justify-content-start">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+        </div>
+    </StepperPanel>
+</Stepper>
+        `,
+        javascript: `
+import React, { useRef } from "react";
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { Button } from '@/components/lib/button/Button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from "react";
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { Button } from '@/components/lib/button/Button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>linear</i> property is present, current step must be completed in order to move to the next step.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} linear>
+                    <StepperPanel header="Header I">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-end">
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header II">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-between">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header III">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-start">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        </div>
+                    </StepperPanel>
+                </Stepper>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/stepper/verticaldoc.js b/components/doc/stepper/verticaldoc.js
new file mode 100644
index 0000000000..683110ebe8
--- /dev/null
+++ b/components/doc/stepper/verticaldoc.js
@@ -0,0 +1,166 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { useRef } from 'react';
+
+export function VerticalDoc(props) {
+    const stepperRef = useRef(null);
+
+    const code = {
+        basic: `
+<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+    <StepperPanel header="Header I">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+        </div>
+        <div className="flex py-4">
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+        </div>
+        <div className="flex py-4 gap-2">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+        </div>
+        <div className="flex py-4">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+        </div>
+    </StepperPanel>
+</Stepper>
+        `,
+        javascript: `
+import React, { useRef } from "react";
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { Button } from '@/components/lib/button/Button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+                <StepperPanel header="Header I">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header II">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div className="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header III">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    </div>
+                </StepperPanel>
+            </Stepper>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from "react";
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { Button } from '@/components/lib/button/Button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+                <StepperPanel header="Header I">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header II">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div className="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header III">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    </div>
+                </StepperPanel>
+            </Stepper>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as available options.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+                    <StepperPanel header="Header I">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                        </div>
+                        <div className="flex py-4">
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header II">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                        </div>
+                        <div className="flex py-4 gap-2">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header III">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                        </div>
+                        <div className="flex py-4">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        </div>
+                    </StepperPanel>
+                </Stepper>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/layout/menu.json b/components/layout/menu.json
index a645c67cad..b534557f0e 100644
--- a/components/layout/menu.json
+++ b/components/layout/menu.json
@@ -244,6 +244,10 @@
                             "name": "Splitter",
                             "to": "/splitter"
                         },
+                        {
+                            "name": "Stepper",
+                            "to": "/stepper"
+                        },
                         {
                             "name": "TabView",
                             "to": "/tabview"
diff --git a/pages/stepper/index.js b/pages/stepper/index.js
new file mode 100644
index 0000000000..775f328a06
--- /dev/null
+++ b/pages/stepper/index.js
@@ -0,0 +1,81 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/stepper/basicdoc';
+import { ImportDoc } from '@/components/doc/stepper/importdoc';
+import { LinearDoc } from '@/components/doc/stepper/lineardoc';
+import { VerticalDoc } from '@/components/doc/stepper/verticaldoc';
+
+const StepperDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'linear',
+            label: 'Linear',
+            component: LinearDoc
+        }
+    ];
+    const ptDocs = [
+        // {
+        //     id: 'pt.wireframe',
+        //     label: 'Wireframe',
+        //     component: Wireframe
+        // },
+        // {
+        //     id: 'pt.inputtext.options',
+        //     label: 'InputText PT Options',
+        //     component: DocApiTable
+        // },
+        // {
+        //     id: 'pt.demo',
+        //     label: 'Example',
+        //     component: PTDoc
+        // }
+    ];
+
+    const themingDocs = [
+        // {
+        //     id: 'styled',
+        //     label: 'Styled',
+        //     component: StyledDoc
+        // },
+        // {
+        //     id: 'unstyled',
+        //     label: 'Unstyled',
+        //     description: 'Theming is implemented with the pass through properties in unstyled mode.',
+        //     children: [
+        //         {
+        //             id: 'tailwind',
+        //             label: 'Tailwind',
+        //             component: TailwindDoc
+        //         }
+        //     ]
+        // }
+    ];
+
+    return (
+        <DocComponent
+            title="React Input Component"
+            header="Stepper"
+            description="The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression."
+            componentDocs={docs}
+            apiDocs={['InputText']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default StepperDemo;

From 71dd6675ed355071f0e07cbb8295d0856cab8450 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 11:36:24 +0300
Subject: [PATCH 042/194] Add accessibility doc

---
 components/doc/stepper/accessibilitydoc.js | 46 ++++++++++++++++++++++
 pages/stepper/index.js                     |  6 +++
 2 files changed, 52 insertions(+)
 create mode 100644 components/doc/stepper/accessibilitydoc.js

diff --git a/components/doc/stepper/accessibilitydoc.js b/components/doc/stepper/accessibilitydoc.js
new file mode 100644
index 0000000000..70a18a6cf9
--- /dev/null
+++ b/components/doc/stepper/accessibilitydoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Stepper container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Stepper. Each stepper header has a
+                <i>tab</i> role and <i>aria-controls</i> to refer to the corresponding stepper content element. The content element of each stepper has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of the header and
+                <i>aria-labelledby</i> reference to the header as the accessible name.
+            </p>
+
+            <h3>Tab Header Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused stepper header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused stepper header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/pages/stepper/index.js b/pages/stepper/index.js
index 775f328a06..598552d042 100644
--- a/pages/stepper/index.js
+++ b/pages/stepper/index.js
@@ -1,4 +1,5 @@
 import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/stepper/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/stepper/basicdoc';
 import { ImportDoc } from '@/components/doc/stepper/importdoc';
 import { LinearDoc } from '@/components/doc/stepper/lineardoc';
@@ -25,6 +26,11 @@ const StepperDemo = () => {
             id: 'linear',
             label: 'Linear',
             component: LinearDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
         }
     ];
     const ptDocs = [

From aa1397f3ab9d0874be5b097fa750aa266c9749d3 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 11:41:34 +0300
Subject: [PATCH 043/194] update theming docs

---
 components/doc/stepper/theming/styleddoc.js   | 75 +++++++++++++++++++
 components/doc/stepper/theming/tailwinddoc.js | 13 ++++
 pages/stepper/index.js                        | 36 ++++-----
 3 files changed, 107 insertions(+), 17 deletions(-)
 create mode 100644 components/doc/stepper/theming/styleddoc.js
 create mode 100644 components/doc/stepper/theming/tailwinddoc.js

diff --git a/components/doc/stepper/theming/styleddoc.js b/components/doc/stepper/theming/styleddoc.js
new file mode 100644
index 0000000000..fe2bd9429a
--- /dev/null
+++ b/components/doc/stepper/theming/styleddoc.js
@@ -0,0 +1,75 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="styled" label="Styled">
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-stepper</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-horizontal</td>
+                            <td>Container element with horizontal layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-vertical</td>
+                            <td>Container element with vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-nav</td>
+                            <td>Container element of navigator.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-panels</td>
+                            <td>Container element of stepper panel elements.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-panel</td>
+                            <td>Container element of stepper panel element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-header</td>
+                            <td>Container element of stepper header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-action</td>
+                            <td>Container element of stepper action.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-number</td>
+                            <td>Container element of stepper number.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-title</td>
+                            <td>Container element of stepper title.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-separator</td>
+                            <td>Container element of stepper separator.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-toggleable-content</td>
+                            <td>Container element of stepper toggleable content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-content</td>
+                            <td>Container element of stepper content.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/stepper/theming/tailwinddoc.js b/components/doc/stepper/theming/tailwinddoc.js
new file mode 100644
index 0000000000..cd547e8a63
--- /dev/null
+++ b/components/doc/stepper/theming/tailwinddoc.js
@@ -0,0 +1,13 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function TailwindDoc() {
+    return (
+        <DocSectionText id="style" label="Style">
+            Visit{' '}
+            <a href="https://github.com/primefaces/primereact-tailwind" target="_blank" rel="noopener noreferrer">
+                Tailwind Presets
+            </a>{' '}
+            project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS.
+        </DocSectionText>
+    );
+}
diff --git a/pages/stepper/index.js b/pages/stepper/index.js
index 598552d042..3c44824fb0 100644
--- a/pages/stepper/index.js
+++ b/pages/stepper/index.js
@@ -3,6 +3,8 @@ import { AccessibilityDoc } from '@/components/doc/stepper/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/stepper/basicdoc';
 import { ImportDoc } from '@/components/doc/stepper/importdoc';
 import { LinearDoc } from '@/components/doc/stepper/lineardoc';
+import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc';
 import { VerticalDoc } from '@/components/doc/stepper/verticaldoc';
 
 const StepperDemo = () => {
@@ -52,23 +54,23 @@ const StepperDemo = () => {
     ];
 
     const themingDocs = [
-        // {
-        //     id: 'styled',
-        //     label: 'Styled',
-        //     component: StyledDoc
-        // },
-        // {
-        //     id: 'unstyled',
-        //     label: 'Unstyled',
-        //     description: 'Theming is implemented with the pass through properties in unstyled mode.',
-        //     children: [
-        //         {
-        //             id: 'tailwind',
-        //             label: 'Tailwind',
-        //             component: TailwindDoc
-        //         }
-        //     ]
-        // }
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
     ];
 
     return (

From d94f661c66f4a2e0002cc69587817e3484d1d425 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 11:46:20 +0300
Subject: [PATCH 044/194] update pt doc

---
 components/doc/stepper/pt/wireframe.js | 12 ++++++++++
 pages/stepper/index.js                 | 32 ++++++++++++++------------
 2 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 components/doc/stepper/pt/wireframe.js

diff --git a/components/doc/stepper/pt/wireframe.js b/components/doc/stepper/pt/wireframe.js
new file mode 100644
index 0000000000..eb2d077f02
--- /dev/null
+++ b/components/doc/stepper/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" alt="pt_image" />
+            </div>
+        </>
+    );
+};
diff --git a/pages/stepper/index.js b/pages/stepper/index.js
index 3c44824fb0..0d802d18c6 100644
--- a/pages/stepper/index.js
+++ b/pages/stepper/index.js
@@ -1,8 +1,10 @@
+import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/stepper/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/stepper/basicdoc';
 import { ImportDoc } from '@/components/doc/stepper/importdoc';
 import { LinearDoc } from '@/components/doc/stepper/lineardoc';
+import { Wireframe } from '@/components/doc/stepper/pt/wireframe';
 import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc';
 import { VerticalDoc } from '@/components/doc/stepper/verticaldoc';
@@ -36,21 +38,21 @@ const StepperDemo = () => {
         }
     ];
     const ptDocs = [
-        // {
-        //     id: 'pt.wireframe',
-        //     label: 'Wireframe',
-        //     component: Wireframe
-        // },
-        // {
-        //     id: 'pt.inputtext.options',
-        //     label: 'InputText PT Options',
-        //     component: DocApiTable
-        // },
-        // {
-        //     id: 'pt.demo',
-        //     label: 'Example',
-        //     component: PTDoc
-        // }
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.stepper.options',
+            label: 'Stepper PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.stepperpanel.options',
+            label: 'StepperPanel PT Options',
+            component: DocApiTable
+        }
     ];
 
     const themingDocs = [

From 6b2a9f1e01b522faa5f7ee38c11201be1020d35e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 28 Mar 2024 12:37:51 +0300
Subject: [PATCH 045/194] Treetable checkbox enhancement

---
 components/lib/treetable/TreeTableBase.js | 160 +---------------------
 components/lib/treetable/TreeTableRow.js  |  84 +++---------
 2 files changed, 18 insertions(+), 226 deletions(-)

diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
index bac6eb628c..29912dc233 100644
--- a/components/lib/treetable/TreeTableBase.js
+++ b/components/lib/treetable/TreeTableBase.js
@@ -2,159 +2,6 @@ import { FilterMatchMode } from '../api/Api';
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
-const styles = `
-@layer primereact {
-    .p-treetable {
-        position: relative;
-    }
-    
-    .p-treetable > .p-treetable-wrapper {
-        overflow: auto;
-    }
-    
-    .p-treetable table {
-        border-collapse: collapse;
-        width: 100%;
-        table-layout: fixed;
-    }
-    
-    .p-treetable .p-sortable-column {
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-treetable-selectable .p-treetable-tbody > tr {
-        cursor: pointer;
-    }
-    
-    .p-treetable-toggler {
-        cursor: pointer;
-        user-select: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        vertical-align: middle;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-treetable-toggler + .p-checkbox {
-        vertical-align: middle;
-    }
-    
-    .p-treetable-toggler + .p-checkbox + span {
-        vertical-align: middle;
-    }
-    
-    /* Resizable */
-    .p-treetable-resizable > .p-treetable-wrapper {
-        overflow-x: auto;
-    }
-    
-    .p-treetable-resizable .p-treetable-thead > tr > th,
-    .p-treetable-resizable .p-treetable-tfoot > tr > td,
-    .p-treetable-resizable .p-treetable-tbody > tr > td {
-        overflow: hidden;
-    }
-    
-    .p-treetable-resizable .p-resizable-column {
-        background-clip: padding-box;
-        position: relative;
-    }
-    
-    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
-        display: none;
-    }
-    
-    .p-treetable .p-column-resizer {
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        margin: 0;
-        width: 0.5rem;
-        height: 100%;
-        padding: 0px;
-        cursor: col-resize;
-        border: 1px solid transparent;
-    }
-    
-    .p-treetable .p-column-resizer-helper {
-        width: 1px;
-        position: absolute;
-        z-index: 10;
-        display: none;
-    }
-    
-    /* Scrollable */
-    .p-treetable-scrollable-wrapper {
-        position: relative;
-    }
-    .p-treetable-scrollable-header,
-    .p-treetable-scrollable-footer {
-        overflow: hidden;
-        border: 0 none;
-    }
-    
-    .p-treetable-scrollable-body {
-        overflow: auto;
-        position: relative;
-    }
-    
-    .p-treetable-virtual-table {
-        position: absolute;
-    }
-    
-    /* Frozen Columns */
-    .p-treetable-frozen-view .p-treetable-scrollable-body {
-        overflow: hidden;
-    }
-    
-    .p-treetable-unfrozen-view {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-    }
-    
-    /* Reorder */
-    .p-treetable-reorder-indicator-up,
-    .p-treetable-reorder-indicator-down {
-        position: absolute;
-        display: none;
-    }
-    
-    /* Loader */
-    .p-treetable .p-treetable-loading-overlay {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-    }
-
-    /* Alignment */
-    .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
-    .p-treetable .p-treetable-tbody > tr > td.p-align-left,
-    .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
-        text-align: left;
-        justify-content: flex-start;
-    }
-    .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
-    .p-treetable .p-treetable-tbody > tr > td.p-align-right,
-    .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
-        text-align: right;
-        justify-content: flex-end;
-    }
-    .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
-    .p-treetable .p-treetable-tbody > tr > td.p-align-center,
-    .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
-        text-align: center;
-        justify-content: center;
-    }
-}
-`;
-
 const classes = {
     root: ({ props, isRowSelectionMode }) =>
         classNames('p-treetable p-component', {
@@ -212,9 +59,7 @@ const classes = {
         'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
         'p-row-odd': props.rowIndex % 2 !== 0
     }),
-    checkboxWrapper: 'p-checkbox p-treetable-checkbox p-component',
-    checkbox: ({ checked, partialChecked }) => classNames('p-checkbox-box', { 'p-highlight': checked, 'p-indeterminate': partialChecked }),
-    checkboxIcon: 'p-checkbox-icon p-c',
+    rowCheckbox: ({ partialChecked }) => classNames('p-treetable-checkbox', { 'p-indeterminate': partialChecked }),
     rowToggler: 'p-treetable-toggler p-link p-unselectable-text',
     rowTogglerIcon: 'p-treetable-toggler-icon',
     scrollableBody: 'p-treetable-scrollable-body',
@@ -317,7 +162,6 @@ export const TreeTableBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes,
-        styles
+        classes
     }
 });
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index cf95a35ca4..70291d7e7c 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -9,6 +9,7 @@ import { MinusIcon } from '../icons/minus';
 import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 import { TreeTableBodyCell } from './TreeTableBodyCell';
+import { Checkbox } from '../checkbox/Checkbox';
 
 export const TreeTableRow = React.memo((props) => {
     const elementRef = React.useRef(null);
@@ -207,16 +208,6 @@ export const TreeTableRow = React.memo((props) => {
         DomHandler.clearSelection();
     };
 
-    const onCheckboxFocus = () => {
-        !isUnstyled() && DomHandler.addClass(checkboxBoxRef.current, 'p-focus');
-        !isUnstyled() && DomHandler.addClass(checkboxRef.current, 'p-checkbox-focused');
-    };
-
-    const onCheckboxBlur = () => {
-        !isUnstyled() && DomHandler.removeClass(checkboxBoxRef.current, 'p-focus');
-        !isUnstyled() && DomHandler.removeClass(checkboxRef.current, 'p-checkbox-focused');
-    };
-
     const propagateUp = (event) => {
         let check = event.check;
         let selectionKeys = event.selectionKeys;
@@ -342,13 +333,8 @@ export const TreeTableRow = React.memo((props) => {
 
         if (ishiddenIcon) return;
 
-        // !expanded && togglerElement.click();
         !expanded && expand(event, true);
 
-        // this.$nextTick(() => {
-        //     this.onArrowDownKey(event);
-        // });
-
         event.preventDefault();
     };
 
@@ -362,7 +348,6 @@ export const TreeTableRow = React.memo((props) => {
         const togglerElement = DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
 
         if (expanded && !ishiddenIcon) {
-            // togglerElement.click();
             collapse(event);
 
             return;
@@ -395,18 +380,11 @@ export const TreeTableRow = React.memo((props) => {
         setTabIndexForSelectionMode(event, nodeTouched.current);
 
         if (props.selectionMode === 'checkbox') {
-            // this.toggleCheckbox();
             onCheckboxChange(event);
 
             return;
         }
 
-        // this.$emit('node-click', {
-        //     originalEvent: event,
-        //     nodeTouched: nodeTouched.current,
-        //     node: this.node
-        // });
-
         props.onRowClick(event, props.node);
 
         nodeTouched.current = false;
@@ -466,7 +444,7 @@ export const TreeTableRow = React.memo((props) => {
     };
 
     const isSelected = () => {
-        if (props.selectionMode === 'single' || ((props.selectionMode === 'multiple' || props.selectionMode === 'checkbox') && props.selectionKeys)) {
+        if (props.selectionMode === 'single' || ((props.selectionMode === 'multiple' ) && props.selectionKeys)) {
             return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
         }
 
@@ -532,55 +510,25 @@ export const TreeTableRow = React.memo((props) => {
         if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
             const checked = isChecked();
             const partialChecked = isPartialChecked();
-            const checboxIconProps = mergeProps(
-                {
-                    className: cx('checkboxIcon')
-                },
-                getColumnCheckboxPTOptions(column, 'checkboxIcon')
-            );
-            const icon = checked ? props.checkboxIcon || <CheckIcon {...checboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon {...checboxIconProps} /> : null;
-            const checkIcon = IconUtils.getJSXIcon(icon, { ...checboxIconProps }, { props, checked, partialChecked });
-            const hiddenInputProps = mergeProps(
-                {
-                    type: 'checkbox',
-                    onFocus: (e) => onCheckboxFocus(e),
-                    onBlur: (e) => onCheckboxBlur(e)
-                },
-                getColumnCheckboxPTOptions(column, 'hiddenInput')
-            );
-            const checkboxWrapperProps = mergeProps(
-                {
-                    className: cx('checkboxWrapper'),
-                    onClick: (e) => onCheckboxChange(e),
-                    role: 'checkbox',
-                    'aria-checked': checked
-                },
-                getColumnCheckboxPTOptions(column, 'checkboxWrapper')
-            );
-
-            const hiddenInputWrapperProps = mergeProps(
-                {
-                    className: 'p-hidden-accessible'
-                },
-                getColumnCheckboxPTOptions(column, 'hiddenInputWrapper')
-            );
-
-            const checkboxProps = mergeProps(
+            const icon = checked ? props.checkboxIcon || <CheckIcon /> : partialChecked ? props.checkboxIcon || <MinusIcon /> : null;
+            const checkIcon = IconUtils.getJSXIcon(icon, {}, { props, checked, partialChecked });
+            const rowCheckboxProps = mergeProps(
                 {
-                    className: cx('checkbox', { checked, partialChecked })
+                    className: cx('rowCheckbox'),
+                    checked: checked || partialChecked,
+                    onChange: onCheckboxChange,
+                    icon: checkIcon,
+                    unstyled: isUnstyled?.(),
+                    tabIndex: -1,
+                    'data-p-highlight': checked,
+                    'data-p-checked': checked,
+                    'data-p-partialchecked': partialChecked
                 },
-                getColumnCheckboxPTOptions(column, 'checkbox')
+                getColumnCheckboxPTOptions(column, 'rowCheckbox')
             );
 
             return (
-                <div ref={checkboxRef} {...checkboxWrapperProps}>
-                    <div {...hiddenInputWrapperProps}>
-                        <input {...hiddenInputProps} />
-                    </div>
-                    <div ref={checkboxBoxRef} {...checkboxProps}>
-                        {checkIcon}
-                    </div>
-                </div>
+               <Checkbox {...rowCheckboxProps} />
             );
         } else {
             return null;

From fabfe5260f7962a622d9395ad4618d2da8187048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 28 Mar 2024 12:38:02 +0300
Subject: [PATCH 046/194] Tree wrapper removed

---
 components/lib/tree/TreeBase.js   |   1 -
 components/lib/tree/UITreeNode.js | 104 ++++++++++++++----------------
 2 files changed, 48 insertions(+), 57 deletions(-)

diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js
index 30d14c716e..3c988ad7a9 100644
--- a/components/lib/tree/TreeBase.js
+++ b/components/lib/tree/TreeBase.js
@@ -13,7 +13,6 @@ const classes = {
     filterContainer: 'p-tree-filter-container',
     input: 'p-tree-filter p-inputtext p-component',
     searchIcon: 'p-tree-filter-icon',
-    wrapper: 'p-tree-wrapper',
     container: 'p-tree-container',
     node: ({ isLeaf }) =>
         classNames('p-treenode', {
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 92c33cb8d1..a10119c2e0 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -822,64 +822,56 @@ export const UITreeNode = React.memo((props) => {
             },
             getPTOptions('subgroup')
         );
-        const wrapperProps = mergeProps(
-            {
-                className: cx('wrapper'),
-            },
-            getPTOptions('wrapper')
-        )
-
+        
         if (ObjectUtils.isNotEmpty(props.node.children) && expanded) {
             return (
-                <div >
-                    <ul {...subgroupProps}>
-                        {props.node.children.map((childNode, index) => {
-                            return (
-                                <UITreeNode
-                                    key={childNode.key || childNode.label}
-                                    node={childNode}
-                                    checkboxIcon={props.checkboxIcon}
-                                    collapseIcon={props.collapseIcon}
-                                    contextMenuSelectionKey={props.contextMenuSelectionKey}
-                                    cx={cx}
-                                    disabled={props.disabled}
-                                    dragdropScope={props.dragdropScope}
-                                    expandIcon={props.expandIcon}
-                                    expandedKeys={props.expandedKeys}
-                                    index={index}
-                                    isNodeLeaf={props.isNodeLeaf}
-                                    last={index === props.node.children.length - 1}
-                                    metaKeySelection={props.metaKeySelection}
-                                    nodeTemplate={props.nodeTemplate}
-                                    onClick={props.onClick}
-                                    onCollapse={props.onCollapse}
-                                    onContextMenu={props.onContextMenu}
-                                    onContextMenuSelectionChange={props.onContextMenuSelectionChange}
-                                    onDoubleClick={props.onDoubleClick}
-                                    onDragEnd={props.onDragEnd}
-                                    onDragStart={props.onDragStart}
-                                    onDrop={props.onDrop}
-                                    onDropPoint={props.onDropPoint}
-                                    onExpand={props.onExpand}
-                                    onPropagateUp={propagateUp}
-                                    onSelect={props.onSelect}
-                                    onSelectionChange={props.onSelectionChange}
-                                    onToggle={props.onToggle}
-                                    onUnselect={props.onUnselect}
-                                    originalOptions={props.originalOptions}
-                                    parent={props.node}
-                                    path={props.path + '-' + index}
-                                    propagateSelectionDown={props.propagateSelectionDown}
-                                    propagateSelectionUp={props.propagateSelectionUp}
-                                    ptm={ptm}
-                                    selectionKeys={props.selectionKeys}
-                                    selectionMode={props.selectionMode}
-                                    togglerTemplate={props.togglerTemplate}
-                                />
-                            );
-                        })}
-                    </ul>
-                </div>
+                <ul {...subgroupProps}>
+                    {props.node.children.map((childNode, index) => {
+                        return (
+                            <UITreeNode
+                                key={childNode.key || childNode.label}
+                                node={childNode}
+                                checkboxIcon={props.checkboxIcon}
+                                collapseIcon={props.collapseIcon}
+                                contextMenuSelectionKey={props.contextMenuSelectionKey}
+                                cx={cx}
+                                disabled={props.disabled}
+                                dragdropScope={props.dragdropScope}
+                                expandIcon={props.expandIcon}
+                                expandedKeys={props.expandedKeys}
+                                index={index}
+                                isNodeLeaf={props.isNodeLeaf}
+                                last={index === props.node.children.length - 1}
+                                metaKeySelection={props.metaKeySelection}
+                                nodeTemplate={props.nodeTemplate}
+                                onClick={props.onClick}
+                                onCollapse={props.onCollapse}
+                                onContextMenu={props.onContextMenu}
+                                onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                                onDoubleClick={props.onDoubleClick}
+                                onDragEnd={props.onDragEnd}
+                                onDragStart={props.onDragStart}
+                                onDrop={props.onDrop}
+                                onDropPoint={props.onDropPoint}
+                                onExpand={props.onExpand}
+                                onPropagateUp={propagateUp}
+                                onSelect={props.onSelect}
+                                onSelectionChange={props.onSelectionChange}
+                                onToggle={props.onToggle}
+                                onUnselect={props.onUnselect}
+                                originalOptions={props.originalOptions}
+                                parent={props.node}
+                                path={props.path + '-' + index}
+                                propagateSelectionDown={props.propagateSelectionDown}
+                                propagateSelectionUp={props.propagateSelectionUp}
+                                ptm={ptm}
+                                selectionKeys={props.selectionKeys}
+                                selectionMode={props.selectionMode}
+                                togglerTemplate={props.togglerTemplate}
+                            />
+                        );
+                    })}
+                </ul>
             );
         }
 

From 217452c148a6c8b3eb7fa3624e47c5f334fb4c02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 28 Mar 2024 12:38:13 +0300
Subject: [PATCH 047/194] Treetable and tree theming update

---
 public/themes/arya-blue/theme.css             | 140 +++++++++++++++++-
 public/themes/arya-green/theme.css            | 140 +++++++++++++++++-
 public/themes/arya-orange/theme.css           | 140 +++++++++++++++++-
 public/themes/bootstrap4-dark-blue/theme.css  | 140 +++++++++++++++++-
 .../themes/bootstrap4-dark-purple/theme.css   | 140 +++++++++++++++++-
 public/themes/bootstrap4-light-blue/theme.css | 140 +++++++++++++++++-
 .../themes/bootstrap4-light-purple/theme.css  | 140 +++++++++++++++++-
 public/themes/fluent-light/theme.css          | 140 +++++++++++++++++-
 public/themes/lara-dark-amber/theme.css       | 140 +++++++++++++++++-
 public/themes/lara-dark-blue/theme.css        | 140 +++++++++++++++++-
 public/themes/lara-dark-cyan/theme.css        | 140 +++++++++++++++++-
 public/themes/lara-dark-green/theme.css       | 140 +++++++++++++++++-
 public/themes/lara-dark-indigo/theme.css      | 140 +++++++++++++++++-
 public/themes/lara-dark-pink/theme.css        | 140 +++++++++++++++++-
 public/themes/lara-dark-teal/theme.css        | 140 +++++++++++++++++-
 public/themes/lara-light-amber/theme.css      | 140 +++++++++++++++++-
 public/themes/lara-light-blue/theme.css       | 140 +++++++++++++++++-
 public/themes/lara-light-cyan/theme.css       | 140 +++++++++++++++++-
 public/themes/lara-light-green/theme.css      | 140 +++++++++++++++++-
 public/themes/lara-light-indigo/theme.css     | 140 +++++++++++++++++-
 public/themes/lara-light-pink/theme.css       | 140 +++++++++++++++++-
 public/themes/lara-light-teal/theme.css       | 140 +++++++++++++++++-
 public/themes/luna-amber/theme.css            | 140 +++++++++++++++++-
 public/themes/luna-blue/theme.css             | 140 +++++++++++++++++-
 public/themes/luna-green/theme.css            | 140 +++++++++++++++++-
 public/themes/luna-pink/theme.css             | 140 +++++++++++++++++-
 public/themes/md-dark-deeppurple/theme.css    | 140 +++++++++++++++++-
 public/themes/md-dark-indigo/theme.css        | 140 +++++++++++++++++-
 public/themes/md-light-deeppurple/theme.css   | 140 +++++++++++++++++-
 public/themes/md-light-indigo/theme.css       | 140 +++++++++++++++++-
 public/themes/mdc-dark-deeppurple/theme.css   | 140 +++++++++++++++++-
 public/themes/mdc-dark-indigo/theme.css       | 140 +++++++++++++++++-
 public/themes/mdc-light-deeppurple/theme.css  | 140 +++++++++++++++++-
 public/themes/mdc-light-indigo/theme.css      | 140 +++++++++++++++++-
 public/themes/mira/theme.css                  | 140 +++++++++++++++++-
 public/themes/nano/theme.css                  | 140 +++++++++++++++++-
 public/themes/nova-accent/theme.css           | 140 +++++++++++++++++-
 public/themes/nova-alt/theme.css              | 140 +++++++++++++++++-
 public/themes/nova/theme.css                  | 140 +++++++++++++++++-
 public/themes/rhea/theme.css                  | 140 +++++++++++++++++-
 public/themes/saga-blue/theme.css             | 140 +++++++++++++++++-
 public/themes/saga-green/theme.css            | 140 +++++++++++++++++-
 public/themes/saga-orange/theme.css           | 140 +++++++++++++++++-
 public/themes/soho-dark/theme.css             | 140 +++++++++++++++++-
 public/themes/soho-light/theme.css            | 140 +++++++++++++++++-
 public/themes/tailwind-light/theme.css        | 140 +++++++++++++++++-
 public/themes/vela-blue/theme.css             | 140 +++++++++++++++++-
 public/themes/vela-green/theme.css            | 140 +++++++++++++++++-
 public/themes/vela-orange/theme.css           | 140 +++++++++++++++++-
 public/themes/viva-dark/theme.css             | 140 +++++++++++++++++-
 public/themes/viva-light/theme.css            | 140 +++++++++++++++++-
 51 files changed, 6987 insertions(+), 153 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 940642254c..7a4ea70abe 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(35, 150, 242, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 1c5b1058e8..e9306af833 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(84, 179, 88, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index ac9c359079..458fce620f 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(255, 197, 12, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 429be55136..bd5f178826 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -3860,9 +3860,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3975,6 +3972,10 @@
     background: rgba(255, 255, 255, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3996,6 +3997,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #3eafff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 9dc6b070e8..fed099ed0f 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -3860,9 +3860,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3975,6 +3972,10 @@
     background: rgba(255, 255, 255, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3996,6 +3997,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #a263c4;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 67def93849..fbbb564ef3 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -3860,9 +3860,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3975,6 +3972,10 @@
     background: #e9ecef;
     color: #212529;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #212529;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3996,6 +3997,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0062cc;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 0 0;
     border-radius: 0;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index aa3d0f8c95..3bf2b505bd 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -3860,9 +3860,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3975,6 +3972,10 @@
     background: #e9ecef;
     color: #212529;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #212529;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3996,6 +3997,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #6d308b;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 0 0;
     border-radius: 0;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index b98a62c99b..aa5eba98f7 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: #f3f2f1;
     color: #323130;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f2f1;
+    color: #323130;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #c3bcb5;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 803c7e659e..933c1e246c 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(225, 164, 4, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 19b7a86673..0b71d22e50 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(29, 127, 248, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 81a8903ba2..f52146aed7 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(16, 177, 202, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 45ffd2f09d..cdbf12bb68 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(37, 173, 124, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index a946f699ab..07951cf964 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(58, 75, 244, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 4830128e0b..1691af6c7c 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(239, 48, 148, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 6417895e69..ae4a19b8b2 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(35, 171, 154, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 444990c4b6..3135770c36 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: #f3f4f6;
     color: #4b5563;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ffe789;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 99f882d6f8..ca1fe4cc80 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: #f3f4f6;
     color: #4b5563;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8cbeff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index f90493cdf5..41a35cf598 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: #f3f4f6;
     color: #4b5563;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8af9ff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 48e3a19b8d..f648c7847a 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: #f3f4f6;
     color: #4b5563;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #99f1dd;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 9f28b7b270..acf9d0a038 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: #f3f4f6;
     color: #4b5563;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8ba7ff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index c57b7befd7..8513b8da88 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: #f3f4f6;
     color: #4b5563;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #f09cca;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index b03272e4e5..adc95cd6ea 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -3868,9 +3868,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3983,6 +3980,10 @@
     background: #f3f4f6;
     color: #4b5563;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4004,6 +4005,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0c5e58;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 74ffa15519..490960dde2 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -3812,9 +3812,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3927,6 +3924,10 @@
     background: #4c4c4c;
     color: #dedede;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3948,6 +3949,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ffcd35;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 9a96b98ef6..35ce3fcdba 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -3812,9 +3812,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3927,6 +3924,10 @@
     background: #4c4c4c;
     color: #dedede;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3948,6 +3949,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #38bbf7;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 6faecfd0bf..717a9c7efe 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -3812,9 +3812,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3927,6 +3924,10 @@
     background: #4c4c4c;
     color: #dedede;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3948,6 +3949,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #9fce6b;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index a8363f7647..62fbed8e74 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -3812,9 +3812,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3927,6 +3924,10 @@
     background: #4c4c4c;
     color: #dedede;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3948,6 +3949,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ed4980;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index e1c3364de0..006e53e72c 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: hsla(0, 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);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(182, 94, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index aab2de5825..d8d6ed996e 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: hsla(0, 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);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(105, 119, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index ba89dd38a3..1f65ee80da 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(82, 46, 146, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 0ff57be341..6831e6d0f5 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(50, 65, 145, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 1c2818410a..673c5f3249 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: hsla(0, 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);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(182, 94, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 80638f5839..2becf49a34 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: hsla(0, 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);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(105, 119, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index fdc7b0233e..0429403da8 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(82, 46, 146, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index b0c6f9aeed..cf18f1c7ec 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -3871,9 +3871,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3986,6 +3983,10 @@
     background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4007,6 +4008,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(50, 65, 145, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index b368b75dcc..afefe69caf 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -3825,9 +3825,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3940,6 +3937,10 @@
     background: transparent;
     color: #4c566a;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: transparent;
+    color: #4c566a;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3961,6 +3962,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #9fadc9;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 85a665dce5..b9b68f9394 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: #dde1e6;
     color: #343a3f;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #2785bd;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index d4279c1ea0..06fe6f4474 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: #eaeaea;
     color: #333333;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #eaeaea;
+    color: #333333;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #b61a50;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index bfaf6f2e4e..76f580820e 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -3812,9 +3812,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3927,6 +3924,10 @@
     background: #eaeaea;
     color: #333333;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #eaeaea;
+    color: #333333;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3948,6 +3949,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0062ae;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 2840ed056b..6b278ec4a2 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -3812,9 +3812,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3927,6 +3924,10 @@
     background: #eaeaea;
     color: #333333;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #eaeaea;
+    color: #333333;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3948,6 +3949,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0062ae;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 4a19767f6a..4a7523bf11 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: #f4f4f4;
     color: #666666;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f4f4f4;
+    color: #666666;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #7db8a6;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 1px 0 1px;
     border-radius: 0;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index b93007e456..7418808d37 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: #e9ecef;
     color: #495057;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #495057;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #89c8f7;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 032e905773..b8cab653c4 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: #e9ecef;
     color: #495057;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #495057;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #a6d8a9;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index f7fe5c3f80..72706aa628 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: #e9ecef;
     color: #495057;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #495057;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ffce80;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 64037c3e0c..6be7ee237c 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -3870,9 +3870,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3985,6 +3982,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4006,6 +4007,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(118, 82, 241, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 7722c844ed..f7910b3eae 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -3870,9 +3870,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3985,6 +3982,10 @@
     background: #f6f9fc;
     color: #043d75;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4006,6 +4007,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #9a85f5;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index baf5871477..9f9645075f 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -3831,9 +3831,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3946,6 +3943,10 @@
     background: #f4f4f5;
     color: #18181b;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3967,6 +3968,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8ba7ff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b1f38c2d99..fcdc5047bf 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(35, 150, 242, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index b4f1286d71..d463af8a0a 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(84, 179, 88, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index d56ccf7de2..a77af2a0cd 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -3803,9 +3803,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3918,6 +3915,10 @@
     background: rgba(255, 255, 255, 0.03);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -3939,6 +3940,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(255, 197, 12, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index e740ac75b6..411b9f7265 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -3877,9 +3877,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3992,6 +3989,10 @@
     background: rgba(158, 173, 230, 0.08);
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4013,6 +4014,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(96, 121, 214, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 2px 0;
     border-radius: 0;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 266c3f802d..29d0315e42 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -3877,9 +3877,6 @@
     padding: 0;
     list-style-type: none;
   }
-  .p-tree-wrapper {
-    overflow: auto;
-  }
   .p-treenode-selectable {
     cursor: pointer;
     user-select: none;
@@ -3992,6 +3989,10 @@
     background: #edf0fa;
     color: #6c6c6c;
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
   .p-tree .p-tree-filter-container {
     margin-bottom: 0.5rem;
   }
@@ -4013,6 +4014,139 @@
     width: 2rem;
     height: 2rem;
   }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #889cdd;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 2px 0;
     border-radius: 0;

From 57ebe7f25d32e9f5aa2829dc2eb1d74a5035cce8 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 13:28:48 +0300
Subject: [PATCH 048/194] Add stepper dts

---
 components/doc/common/apidoc/index.json       | 439 ++++++++++++++++++
 components/lib/stepper/stepper.d.ts           | 137 ++++++
 components/lib/stepperpanel/stepperpanel.d.ts | 158 +++++++
 pages/stepper/index.js                        |   4 +-
 4 files changed, 736 insertions(+), 2 deletions(-)
 create mode 100644 components/lib/stepper/stepper.d.ts
 create mode 100644 components/lib/stepperpanel/stepperpanel.d.ts

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index a482a9582a..247f0050f3 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -46342,6 +46342,445 @@
             }
         }
     },
+    "stepper": {
+        "description": "Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.\n\n[Live Demo](https://www.primereact.org/stepper/)",
+        "components": {
+            "Stepper": {
+                "description": "Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in Stepper component.",
+                    "values": [
+                        {
+                            "name": "activeStep",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Active step index of stepper."
+                        },
+                        {
+                            "name": "linear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the steps are clickable or not."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Orientation of the stepper."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "StepperChangeEvent"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active panel is changed."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "StepperPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "Stepper.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptionType",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "nav",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptionType",
+                            "description": "Used to pass attributes to the nav's DOM element."
+                        },
+                        {
+                            "name": "panelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptionType",
+                            "description": "Used to pass attributes to the panel container's DOM element."
+                        },
+                        {
+                            "name": "stepperpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the end handler's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperState": {
+                    "description": "Defines current inline state in Stepper component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "activeStep",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current active index state."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperChangeEvent": {
+                    "description": "Custom tab change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Event",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the selected stepper panel"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "StepperPassThroughOptionType": {
+                    "values": "StepperPassThroughAttributes | Function | string | null | undefined"
+                }
+            }
+        }
+    },
+    "stepperpanel": {
+        "description": "StepperPanel is a helper component for Stepper component.\n\n[Live Demo](https://www.primereact.org/stepper/)",
+        "components": {
+            "StepperPanel": {
+                "description": "StepperPanel is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in StepperPanel component.",
+                    "values": [
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Orientation of tab headers."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptions",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "StepperPanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperPanelProps",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperPanelContext",
+                            "description": "Defines current options."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "number",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the number's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the toggleable content's DOM element."
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughTransitionType",
+                            "description": "Used to control Vue Transition API."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPanelPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPanelContext": {
+                    "description": "Defines current options in StepperPanel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of the stepperpanel."
+                        },
+                        {
+                            "name": "count",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Count of stepperpanels"
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is first."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is last."
+                        },
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is active."
+                        },
+                        {
+                            "name": "highlighted",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is highlighted."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is disabled."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "StepperPanelPassThroughOptionType": {
+                    "values": "StepperPanelPassThroughAttributes | Function | string | null | undefined"
+                },
+                "StepperPanelPassThroughTransitionType": {
+                    "values": "TransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
     "steps": {
         "description": "Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.\n\n[Live Demo](https://www.primereact.org/steps/)",
         "components": {
diff --git a/components/lib/stepper/stepper.d.ts b/components/lib/stepper/stepper.d.ts
new file mode 100644
index 0000000000..0f93500a0d
--- /dev/null
+++ b/components/lib/stepper/stepper.d.ts
@@ -0,0 +1,137 @@
+/**
+ *
+ * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ *
+ * @module stepper
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { StepperPanelPassThroughOptionType } from '../stepperpanel/stepperpanel';
+
+export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepperPassThroughMethodOptions {
+    props: StepperProps;
+    state: StepperState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link Stepper.pt}
+ */
+export interface StepperPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepperPassThroughOptionType;
+    /**
+     * Used to pass attributes to the nav's DOM element.
+     */
+    nav?: StepperPassThroughOptionType;
+    /**
+     * Used to pass attributes to the panel container's DOM element.
+     */
+    panelContainer?: StepperPassThroughOptionType;
+    /**
+     * Used to pass attributes to the end handler's DOM element.
+     */
+    stepperpanel?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepperPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Stepper component.
+ */
+export interface StepperState {
+    /**
+     * Current active index state.
+     */
+    activeStep: number;
+}
+
+/**
+ * Custom tab change event.
+ * @see {@link StepperProps.onChange}
+ */
+export interface StepperChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Index of the selected stepper panel
+     */
+    index: number;
+}
+
+/**
+ * Defines valid properties in Stepper component.
+ * @group Properties
+ */
+export interface StepperProps {
+    /**
+     * Active step index of stepper.
+     * @defaultValue 0
+     */
+    activeStep?: number | undefined;
+    /**
+     * Orientation of the stepper.
+     * @defaultValue horizontal
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Whether the steps are clickable or not.
+     * @defaultValue false
+     */
+    linear?: boolean | undefined;
+    /**
+     * Callback to invoke when an active panel is changed.
+     */
+    onChange?(event: StepperChangeEvent): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {StepperPassThroughOptions}
+     */
+    pt?: StepperPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Stepper**
+ *
+ * _Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const Stepper: React.Component<StepperProps, any>;
diff --git a/components/lib/stepperpanel/stepperpanel.d.ts b/components/lib/stepperpanel/stepperpanel.d.ts
new file mode 100644
index 0000000000..39fd8c1942
--- /dev/null
+++ b/components/lib/stepperpanel/stepperpanel.d.ts
@@ -0,0 +1,158 @@
+/**
+ *
+ * StepperPanel is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ *
+ * @module stepperpanel
+ *
+ */
+import * as React from 'react';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+
+export declare type StepperPanelPassThroughOptionType = StepperPanelPassThroughAttributes | ((options: StepperPanelPassThroughMethodOptions) => StepperPanelPassThroughAttributes | string) | string | null | undefined;
+
+export declare type StepperPanelPassThroughTransitionType = TransitionProps | ((options: StepperPanelPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepperPanelPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: StepperPanelProps;
+    /**
+     * Defines current options.
+     */
+    context: StepperPanelContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepperPanelProps.pt}
+ */
+export interface StepperPanelPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the action's DOM element.
+     */
+    action?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the number's DOM element.
+     */
+    number?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     */
+    title?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the separator's DOM element.
+     */
+    separator?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the panel's DOM element.
+     */
+    panel?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: StepperPanelPassThroughTransitionType;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepperPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current options in StepperPanel component.
+ */
+export interface StepperPanelContext {
+    /**
+     * Current index of the stepperpanel.
+     */
+    index: number;
+    /**
+     * Count of stepperpanels
+     */
+    count: number;
+    /**
+     * Whether the stepperpanel is first.
+     */
+    first: boolean;
+    /**
+     * Whether the stepperpanel is last.
+     */
+    last: boolean;
+    /**
+     * Whether the stepperpanel is active.
+     */
+    active: boolean;
+    /**
+     * Whether the stepperpanel is highlighted.
+     */
+    highlighted: boolean;
+    /**
+     * Whether the stepperpanel is disabled.
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in StepperPanel component.
+ * @group Properties
+ */
+export interface StepperPanelProps {
+    /**
+     * Orientation of tab headers.
+     */
+    header?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StepperPanelPassThroughOptions}
+     */
+    pt?: StepperPanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * **PrimeReact - StepperPanel**
+ *
+ * _StepperPanel is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const StepperPanel: React.Component<StepperPanelProps, any>;
diff --git a/pages/stepper/index.js b/pages/stepper/index.js
index 0d802d18c6..85d50c9672 100644
--- a/pages/stepper/index.js
+++ b/pages/stepper/index.js
@@ -77,11 +77,11 @@ const StepperDemo = () => {
 
     return (
         <DocComponent
-            title="React Input Component"
+            title="React Stepper Component"
             header="Stepper"
             description="The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression."
             componentDocs={docs}
-            apiDocs={['InputText']}
+            apiDocs={['Stepper', 'StepperPanel']}
             ptDocs={ptDocs}
             themingDocs={themingDocs}
         />

From 2dcd3ca5cd65776148a015471b8c994d68ae64e3 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 15:14:45 +0300
Subject: [PATCH 049/194] update vertical doc

---
 components/doc/stepper/verticaldoc.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/doc/stepper/verticaldoc.js b/components/doc/stepper/verticaldoc.js
index 683110ebe8..42d592dd5a 100644
--- a/components/doc/stepper/verticaldoc.js
+++ b/components/doc/stepper/verticaldoc.js
@@ -48,7 +48,7 @@ export default function BasicDemo() {
     const stepperRef = useRef(null);
 
     return (
-        <div className="card flex justify-content-center">
+        <div className="card">
             <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
                 <StepperPanel header="Header I">
                     <div className="flex flex-column h-12rem">
@@ -90,7 +90,7 @@ export default function BasicDemo() {
     const stepperRef = useRef(null);
 
     return (
-        <div className="card flex justify-content-center">
+        <div className="card">
             <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
                 <StepperPanel header="Header I">
                     <div className="flex flex-column h-12rem">
@@ -131,8 +131,8 @@ export default function BasicDemo() {
                     Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as available options.
                 </p>
             </DocSectionText>
-            <div className="card flex justify-content-center">
-                <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+            <div className="card">
+                <Stepper ref={stepperRef} orientation="vertical">
                     <StepperPanel header="Header I">
                         <div className="flex flex-column h-12rem">
                             <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>

From 365e44d7f7b29ed9894c46aef3f1b8815afdbfa5 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 16:29:19 +0300
Subject: [PATCH 050/194] Add transition

---
 components/lib/stepper/Stepper.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
index d2f76f2ac5..46a0b96ddf 100644
--- a/components/lib/stepper/Stepper.js
+++ b/components/lib/stepper/Stepper.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/Componentbase';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { useMergeProps } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { UniqueComponentId, classNames } from '../utils/Utils';
 import { StepperBase } from './StepperBase';
 import { StepperContent } from './StepperContent';
@@ -17,11 +17,18 @@ export const Stepper = React.memo(
         const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({
             props
         });
+        const [idState, setIdState] = React.useState(props.id);
         const [activeStepState, setActiveStepState] = React.useState(props.activeStep);
         const navRef = React.useRef();
 
         useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' });
 
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
         const getStepProp = (step, name) => {
             return step.props ? step.props[name] : undefined;
         };
@@ -45,16 +52,15 @@ export const Stepper = React.memo(
         const updateActiveStep = (event, index) => {
             setActiveStepState(index);
 
-            //component event propu olarak ekle
             props.onChangeStep && props.onChangeStep({ originalEvent: event, index });
         };
 
         const getStepHeaderActionId = (index) => {
-            return `${UniqueComponentId()}_${index}_header_action`;
+            return `${idState}_${index}_header_action`;
         };
 
         const getStepContentId = (index) => {
-            return `${UniqueComponentId()}_${index}content`;
+            return `${idState}_${index}content`;
         };
 
         const stepperPanels = () => {
@@ -217,6 +223,7 @@ export const Stepper = React.memo(
 
         const createVertical = () => {
             return stepperPanels().map((step, index) => {
+                const contentRef = React.useRef();
                 const navProps = mergeProps(
                     {
                         ref: navRef,
@@ -237,10 +244,15 @@ export const Stepper = React.memo(
                 });
 
                 const transitionProps = mergeProps({
-                    ...getStepPT(step, 'transition', index)
+                    classNames: cx('stepper.content'),
+                    ...getStepPT(step, 'transition', index),
+                    timeout: { enter: 1000, exit: 450 },
+                    in: isStepActive(index),
+                    unmountOnExit: true
                 });
 
                 const toggleableContentProps = mergeProps({
+                    ref: contentRef,
                     className: cx('stepper.toggleableContent'),
                     ...getStepPT(step, 'toggleableContent', index)
                 });
@@ -263,8 +275,8 @@ export const Stepper = React.memo(
                                 cx={cx}
                             />
                         </div>
-                        <CSSTransition {...transitionProps}>
-                            <div style={{ display: !isStepActive(index) && 'none' }} {...toggleableContentProps}>
+                        <CSSTransition nodeRef={contentRef} {...transitionProps}>
+                            <div {...toggleableContentProps}>
                                 {index !== stepperPanels().length - 1 && (
                                     <StepperSeparator
                                         template={step.children?.separator}

From 18b1cb25a789a3d3ef647624726a6aa350e5597e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 17:13:42 +0300
Subject: [PATCH 051/194] Update selected row highlight

---
 components/lib/column/column.d.ts          | 4 ++++
 components/lib/datatable/DataTableBase.js  | 2 +-
 components/lib/datatable/HeaderCheckbox.js | 4 ++--
 components/lib/datatable/RowCheckbox.js    | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index 53041e2dcc..00cf51d3bf 100644
--- a/components/lib/column/column.d.ts
+++ b/components/lib/column/column.d.ts
@@ -162,6 +162,10 @@ export interface ColumnPassThroughOptions {
      * Uses to pass attributes to the sort badge's DOM element.
      */
     sortBadge?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerCheckbox?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the column filter's DOM element.
      */
diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
index 19612edd7c..f94a71e8a1 100644
--- a/components/lib/datatable/DataTableBase.js
+++ b/components/lib/datatable/DataTableBase.js
@@ -317,6 +317,7 @@ const classes = {
     thead: 'p-datatable-thead',
     tfoot: 'p-datatable-tfoot',
     footer: 'p-datatable-footer',
+    checkIcon: 'p-checkbox-icon',
     resizeHelper: 'p-column-resizer-helper',
     reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
     reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
@@ -334,7 +335,6 @@ const classes = {
     columnTitle: 'p-column-title',
     bodyRow: ({ rowProps: props }) =>
         classNames({
-            'p-highlight': (!props.allowCellSelection && props.selected) || props.contextMenuSelected,
             'p-highlight-contextmenu': props.contextMenuSelected,
             'p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }),
             'p-row-odd': props.rowIndex % 2 !== 0
diff --git a/components/lib/datatable/HeaderCheckbox.js b/components/lib/datatable/HeaderCheckbox.js
index 638574bf4a..8793faf2dd 100644
--- a/components/lib/datatable/HeaderCheckbox.js
+++ b/components/lib/datatable/HeaderCheckbox.js
@@ -9,7 +9,7 @@ import { IconUtils } from '../utils/Utils';
 export const HeaderCheckbox = React.memo((props) => {
     const mergeProps = useMergeProps();
     const getColumnProps = () => ColumnBase.getCProps(props.column);
-    const { ptm, ptmo } = props.ptCallbacks;
+    const { ptm, ptmo, cx } = props.ptCallbacks;
 
     const getColumnPTOptions = (key) => {
         const cProps = getColumnProps();
@@ -39,7 +39,7 @@ export const HeaderCheckbox = React.memo((props) => {
 
     const headerCheckboxIconProps = mergeProps(
         {
-            className: 'p-checkbox-icon'
+            className: cx('checkIcon')
         },
         getColumnPTOptions('headerCheckbox.icon')
     );
diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js
index 5b15fc029e..6c1e226c88 100644
--- a/components/lib/datatable/RowCheckbox.js
+++ b/components/lib/datatable/RowCheckbox.js
@@ -8,7 +8,7 @@ import { IconUtils } from '../utils/Utils';
 export const RowCheckbox = React.memo((props) => {
     const mergeProps = useMergeProps();
     const getColumnProps = () => ColumnBase.getCProps(props.column);
-    const { ptm, ptmo } = props.ptCallbacks;
+    const { ptm, ptmo, cx } = props.ptCallbacks;
 
     const getColumnPTOptions = (key) => {
         const columnMetaData = {
@@ -34,7 +34,7 @@ export const RowCheckbox = React.memo((props) => {
 
     const checkboxIconProps = mergeProps(
         {
-            className: 'p-checkbox-icon'
+            className: cx('checkIcon')
         },
         getColumnPTOptions('rowCheckbox.icon')
     );

From 39f2a2ec773db5b4445b8af7a7d1aeb7a2428fef Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Thu, 28 Mar 2024 14:52:11 +0000
Subject: [PATCH 052/194] Update API doc

---
 components/doc/common/apidoc/index.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index ceae3bb5dc..c81e101b9a 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -12999,6 +12999,13 @@
                             "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
                             "description": "Uses to pass attributes to the sort badge's DOM element."
                         },
+                        {
+                            "name": "headerCheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header checkbox's DOM element."
+                        },
                         {
                             "name": "columnFilter",
                             "optional": true,

From 70388bd6b2334dc5ff3dca0d4bfbaf9c65d7046d Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 17:52:23 +0300
Subject: [PATCH 053/194] Code format

---
 components/lib/multiselect/MultiSelectPanel.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index 301d35f7b3..ea63befe6c 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -186,7 +186,6 @@ export const MultiSelectPanel = React.memo(
                         {groupChildrenContent}
                     </React.Fragment>
                 );
-          
             } else {
                 const optionLabel = props.getOptionLabel(option);
                 const optionKey = index + '_' + props.getOptionRenderKey(option);
@@ -216,8 +215,8 @@ export const MultiSelectPanel = React.memo(
                         cx={cx}
                     />
                 );
-
-             }
+            }
+        };
 
         const createItems = () => {
             if (ObjectUtils.isNotEmpty(props.visibleOptions)) {

From 2af0f313f2e00bf62e3a4011d275d7921e18a487 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 18:23:13 +0300
Subject: [PATCH 054/194] Code refactor and lint fixes

---
 components/lib/stepper/Stepper.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
index 46a0b96ddf..92213a0ded 100644
--- a/components/lib/stepper/Stepper.js
+++ b/components/lib/stepper/Stepper.js
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/Componentbase';
 import { CSSTransition } from '../csstransition/CSSTransition';
@@ -30,7 +30,7 @@ export const Stepper = React.memo(
         });
 
         const getStepProp = (step, name) => {
-            return step.props ? step.props[name] : undefined;
+            return step?.props?.[name];
         };
 
         const getStepKey = (step, index) => {
@@ -130,7 +130,7 @@ export const Stepper = React.memo(
                 const panelProps = mergeProps(
                     {
                         className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index })),
-                        'aria-current': isStepActive(index) ? 'step' : undefined,
+                        'aria-current': isStepActive(index) && 'step',
                         role: 'presentation',
                         'data-p-highlight': isStepActive(index),
                         'data-p-disabled': isItemDisabled(index),
@@ -223,12 +223,13 @@ export const Stepper = React.memo(
 
         const createVertical = () => {
             return stepperPanels().map((step, index) => {
-                const contentRef = React.useRef();
+                const contentRef = React.createRef(null);
+
                 const navProps = mergeProps(
                     {
                         ref: navRef,
                         className: cx('panel', { props, index, isStepActive }),
-                        'aria-current': isStepActive(index) ? 'step' : undefined,
+                        'aria-current': isStepActive(index) && 'step',
                         ...getStepPT(step, 'root', index),
                         ...getStepPT(step, 'panel', index),
                         'data-p-highlight': isStepActive(index),

From 6d71fb07efd8f03c53d1542be6ba1b50de8b75ab Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 28 Mar 2024 18:33:00 +0300
Subject: [PATCH 055/194] Update Menu

---
 components/layout/menu.json | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/layout/menu.json b/components/layout/menu.json
index b534557f0e..964538e7a6 100644
--- a/components/layout/menu.json
+++ b/components/layout/menu.json
@@ -59,7 +59,13 @@
                         },
                         {
                             "name": "FloatLabel",
-                            "to": "/floatlabel"
+                            "to": "/floatlabel",
+                            "badge": "NEW"
+                        },
+                        {
+                            "name": "IconField",
+                            "to": "/iconfield",
+                            "badge": "NEW"
                         },
                         {
                             "name": "InputGroup",
@@ -246,7 +252,8 @@
                         },
                         {
                             "name": "Stepper",
-                            "to": "/stepper"
+                            "to": "/stepper",
+                            "badge": "NEW"
                         },
                         {
                             "name": "TabView",
@@ -407,6 +414,11 @@
                             "name": "Inplace",
                             "to": "/inplace"
                         },
+                        {
+                            "name": "MeterGroup",
+                            "to": "/metergroup",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "ScrollTop",
                             "to": "/scrolltop"
@@ -702,4 +714,4 @@
             ]
         }
     ]
-}
\ No newline at end of file
+}

From 64a5df4f01fc9047c6c15503f13622e4107eaa77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Fri, 29 Mar 2024 09:38:46 +0300
Subject: [PATCH 056/194] Updated multistate checkbox

---
 .../lib/multistatecheckbox/MultiStateCheckbox.js     | 11 ++++++++---
 .../lib/multistatecheckbox/MultiStateCheckboxBase.js | 12 +-----------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index 4e4e7608b3..025109f08a 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -5,6 +5,7 @@ import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 import { MultiStateCheckboxBase } from './MultiStateCheckboxBase';
+import { Checkbox } from '../checkbox/checkbox';
 
 export const MultiStateCheckbox = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -165,10 +166,10 @@ export const MultiStateCheckbox = React.memo(
             MultiStateCheckboxBase.getOtherProps(props),
             ptm('root')
         );
-
+        
         const checkboxProps = mergeProps(
             {
-                className: cx('checkbox', { focusedState, selectedOption }),
+                className: classNames(props.className),
                 style: sx('checkbox', { selectedOption }),
                 tabIndex: props.tabIndex,
                 onFocus: onFocus,
@@ -176,6 +177,10 @@ export const MultiStateCheckbox = React.memo(
                 onKeyDown: onKeyDown,
                 role: 'checkbox',
                 'aria-checked': ariaChecked,
+                onChange: onClick,
+                checked: !!selectedOption,
+                disabled: props?.disabled,
+                icon,
                 ...ariaProps
             },
             ptm('checkbox')
@@ -192,7 +197,7 @@ export const MultiStateCheckbox = React.memo(
         return (
             <>
                 <div {...rootProps}>
-                    <div {...checkboxProps}>{icon}</div>
+                    <Checkbox {...checkboxProps} />
                     {focusedState && <span {...srOnlyAriaProps}>{ariaValueLabel}</span>}
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
diff --git a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
index cb6a622432..7b2049a2ac 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
@@ -6,17 +6,7 @@ const classes = {
         classNames('p-checkbox-icon p-c', {
             [`${icon}`]: true
         }),
-    root: ({ props }) => classNames('p-multistatecheckbox p-checkbox p-component', props.className, { 'p-checkbox-disabled': props.disabled }),
-    checkbox: ({ props, selectedOption, focusedState }) =>
-        classNames(
-            'p-checkbox-box',
-            {
-                'p-highlight': !!selectedOption,
-                'p-disabled': props.disabled,
-                'p-focus': focusedState
-            },
-            selectedOption && selectedOption.className
-        )
+    root: ({ props }) => classNames('p-multistatecheckbox p-checkbox p-component', props.classNames),
 };
 
 const inlineStyles = {

From a1af8c76341e81e3f06664cdac79704215973297 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 14:52:35 +0300
Subject: [PATCH 057/194] Update changelog

---
 CHANGELOG.md | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 042f73de58..e2db967270 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,43 @@
 # Changelog
 
+## [10.6.0](https://github.com/primefaces/primereact/tree/10.6.0) (2024-03-29)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.5.3...10.6.0)
+
+**New Features:**
+- New Component - Stepper [\#6250](https://github.com/primefaces/primereact/issues/6250)
+- New Component - ButtonGroup [\#6251](https://github.com/primefaces/primereact/issues/6251)
+- New Component - FloatLabel [\#6190](https://github.com/primefaces/primereact/issues/6190)
+- New Component - IconField | InputIcon [\#6229](https://github.com/primefaces/primereact/issues/6229)
+- Datatable: "not-in" mode for filter function [\#6252](https://github.com/primefaces/primereact/issues/6252)
+
+**Enhancements:**
+- Component structure enhancement - Tree TreeTable [\#6240](https://github.com/primefaces/primereact/issues/6240)
+- MultistateCheckbox update [\#6249](https://github.com/primefaces/primereact/issues/6249)
+- Enhancement focusOnHover Prop [\#6230](https://github.com/primefaces/primereact/issues/6230)
+- TreeSelect: can't change default text "No results found" when not find data in filter TreeSelect [\#6173](https://github.com/primefaces/primereact/issues/6173)
+- Listbox - focusOnHover prop [\#6171](https://github.com/primefaces/primereact/issues/6171)
+
+**Fixed bugs:**
+- Paginator: JumpToPageInput is broken by latest changes in Paginator [\#6226](https://github.com/primefaces/primereact/issues/6226)
+- RadioButton: onChange is being triggered twice. [\#6223](https://github.com/primefaces/primereact/issues/6223)
+- MultiSelect: selectionMessage not changing using locales [\#6220](https://github.com/primefaces/primereact/issues/6220)
+- DataTable: NumpadEnter ignored during cell editing (and many other cases) [\#6023](https://github.com/primefaces/primereact/issues/6023)
+- InputNumber: Does not allow copy/pasting [\#6192](https://github.com/primefaces/primereact/issues/6192)
+- DataTable: RowClass conditional styling not working [\#6194](https://github.com/primefaces/primereact/issues/6194)
+- Calendar: AM/PM does not work properly if minDate and maxDate validations are provided as prop [\#6151](https://github.com/primefaces/primereact/issues/6151)
+- Calendar: When using timeonly and stepMinute prop together, minute is not showing correctly in the input field [\#5998](https://github.com/primefaces/primereact/issues/5998)
+- DataTable 10.5.3: Drag to select doesn't work on any page past page 1 when paginated [\#6211](https://github.com/primefaces/primereact/issues/6211)
+- Checkbox: Warning: specify either the checked prop, or the defaultChecked prop, but not both [\#6197](https://github.com/primefaces/primereact/issues/6197)
+- Dropdown: missing hover style [\#6196](https://github.com/primefaces/primereact/issues/6196)
+- TabView: Id doubles at root and nav elements [\#6201](https://github.com/primefaces/primereact/issues/6201)
+- RadioButton, ToggleButton: Warning: Invalid DOM property readonly. Did you mean readOnly? [\#6186](https://github.com/primefaces/primereact/issues/6186)
+- RadioButtoCheckBox wrong display [\#6181](https://github.com/primefaces/primereact/issues/6181)
+- Checkbox: prop onClick changes the event type in 10.5.3 [\#6231](https://github.com/primefaces/primereact/issues/6231)
+- TabView: TabPanel doesn't close if the 'closeIcon' prop is used [\#6165](https://github.com/primefaces/primereact/issues/6165)
+- DataTable: Column Filter Typescript fix [\#6233](https://github.com/primefaces/primereact/issues/6233)
+- ListBox: throw undefined error calling preventDefault() when running jest tests. [\#6184](https://github.com/primefaces/primereact/issues/6184)
+
 ## [10.5.3](https://github.com/primefaces/primereact/tree/10.5.3) (2024-03-19)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/10.5.2...10.5.3)

From d8d7efad2718e5a726013efbf5115e52a14d0b6b Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 14:52:59 +0300
Subject: [PATCH 058/194] Code format

---
 .../multistatecheckbox/MultiStateCheckbox.js   |  2 +-
 .../MultiStateCheckboxBase.js                  |  2 +-
 components/lib/tree/TreeBase.js                | 18 ++++++++----------
 components/lib/tree/UITreeNode.js              | 12 +++++-------
 components/lib/treetable/TreeTableRow.js       |  6 ++----
 5 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index 025109f08a..42ad88fca9 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -166,7 +166,7 @@ export const MultiStateCheckbox = React.memo(
             MultiStateCheckboxBase.getOtherProps(props),
             ptm('root')
         );
-        
+
         const checkboxProps = mergeProps(
             {
                 className: classNames(props.className),
diff --git a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
index 7b2049a2ac..a1bcb48f31 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
@@ -6,7 +6,7 @@ const classes = {
         classNames('p-checkbox-icon p-c', {
             [`${icon}`]: true
         }),
-    root: ({ props }) => classNames('p-multistatecheckbox p-checkbox p-component', props.classNames),
+    root: ({ props }) => classNames('p-multistatecheckbox p-checkbox p-component', props.classNames)
 };
 
 const inlineStyles = {
diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js
index 3c988ad7a9..4d5c7f98da 100644
--- a/components/lib/tree/TreeBase.js
+++ b/components/lib/tree/TreeBase.js
@@ -3,11 +3,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props }) =>
-    classNames('p-tree p-component', {
-        'p-tree-selectable': props.selectionMode,
-        'p-tree-loading': props.loading,
-        'p-disabled': props.disabled
-    }),
+        classNames('p-tree p-component', {
+            'p-tree-selectable': props.selectionMode,
+            'p-tree-loading': props.loading,
+            'p-disabled': props.disabled
+        }),
     loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
     loadingIcon: 'p-tree-loading-icon',
     filterContainer: 'p-tree-filter-container',
@@ -17,14 +17,14 @@ const classes = {
     node: ({ isLeaf }) =>
         classNames('p-treenode', {
             'p-treenode-leaf': isLeaf
-    }),
+        }),
     content: ({ nodeProps: props, checked, selected, isCheckboxSelectionMode }) =>
         classNames('p-treenode-content', {
             'p-treenode-selectable': props.selectionMode && props.node.selectable !== false,
             'p-highlight': isCheckboxSelectionMode() ? checked : selected,
             'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
             'p-disabled': props.disabled
-    }),
+        }),
     toggler: 'p-tree-toggler p-link',
     togglerIcon: 'p-tree-toggler-icon',
     nodeCheckbox: ({ partialChecked }) => classNames({ 'p-indeterminate': partialChecked }),
@@ -35,11 +35,9 @@ const classes = {
     emptyMessage: 'p-treenode p-tree-empty-message',
     droppoint: 'p-treenode-droppoint',
     header: 'p-tree-header',
-    footer: 'p-tree-footer',
-  
+    footer: 'p-tree-footer'
 };
 
-
 const styles = `
     .p-tree-container {
         margin: 0;
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index a10119c2e0..4ee5a32b7c 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -671,12 +671,12 @@ export const UITreeNode = React.memo((props) => {
         if (isCheckboxSelectionMode() && props.node.selectable !== false) {
             const checked = isChecked();
             const partialChecked = isPartialChecked();
-            const icon = checked ? props.checkboxIcon || <CheckIcon /> : partialChecked ? props.checkboxIcon || <MinusIcon  /> : null;
+            const icon = checked ? props.checkboxIcon || <CheckIcon /> : partialChecked ? props.checkboxIcon || <MinusIcon /> : null;
             const checkboxIcon = IconUtils.getJSXIcon(icon, {}, props);
             const checkboxProps = mergeProps(
                 {
-                    className: cx('nodeCheckbox', {  partialChecked }),
-                    checked: checked || partialChecked, 
+                    className: cx('nodeCheckbox', { partialChecked }),
+                    checked: checked || partialChecked,
                     icon: checkboxIcon,
                     tabIndex: -1,
                     unstyled: props?.isUnstyled?.(),
@@ -687,9 +687,7 @@ export const UITreeNode = React.memo((props) => {
                 getPTOptions('nodeCheckbox')
             );
 
-            return (
-                <Checkbox {...checkboxProps} />
-            );
+            return <Checkbox {...checkboxProps} />;
         }
 
         return null;
@@ -822,7 +820,7 @@ export const UITreeNode = React.memo((props) => {
             },
             getPTOptions('subgroup')
         );
-        
+
         if (ObjectUtils.isNotEmpty(props.node.children) && expanded) {
             return (
                 <ul {...subgroupProps}>
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index 70291d7e7c..dc0f8e8b52 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -444,7 +444,7 @@ export const TreeTableRow = React.memo((props) => {
     };
 
     const isSelected = () => {
-        if (props.selectionMode === 'single' || ((props.selectionMode === 'multiple' ) && props.selectionKeys)) {
+        if (props.selectionMode === 'single' || (props.selectionMode === 'multiple' && props.selectionKeys)) {
             return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
         }
 
@@ -527,9 +527,7 @@ export const TreeTableRow = React.memo((props) => {
                 getColumnCheckboxPTOptions(column, 'rowCheckbox')
             );
 
-            return (
-               <Checkbox {...rowCheckboxProps} />
-            );
+            return <Checkbox {...rowCheckboxProps} />;
         } else {
             return null;
         }

From 21377906575952f3191b455b3a818fe403af73db Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 14:58:40 +0300
Subject: [PATCH 059/194] Set new version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6b8a170721..40231109f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primereact",
-    "version": "10.5.3",
+    "version": "10.6.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primereact",
-            "version": "10.5.3",
+            "version": "10.6.0",
             "dependencies": {
                 "@docsearch/react": "3.5.2",
                 "chart.js": "4.4.1",
diff --git a/package.json b/package.json
index a5602a3ee8..b171f98c9f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "primereact",
     "private": false,
-    "version": "10.5.3",
+    "version": "10.6.0",
     "scripts": {
         "dev": "next dev",
         "start": "next start",

From 384de4fb20eedc51d793a14b72353c7189b07aeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Fri, 29 Mar 2024 15:37:27 +0300
Subject: [PATCH 060/194] PrimeIcon v7 update and additional changes

---
 components/doc/icons/figmadoc.js | 15 +++++++++++++++
 components/doc/icons/listdoc.js  | 22 ++++++++++++++++++++--
 components/layout/menu.json      |  3 ++-
 package-lock.json                |  8 ++++----
 package.json                     |  2 +-
 pages/icons/index.js             |  6 ++++++
 public/data/icons.json           |  2 +-
 7 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 components/doc/icons/figmadoc.js

diff --git a/components/doc/icons/figmadoc.js b/components/doc/icons/figmadoc.js
new file mode 100644
index 0000000000..7e554d9b7f
--- /dev/null
+++ b/components/doc/icons/figmadoc.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function FigmaDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                  PrimeIcons library is now available on <a href="https://www.figma.com/community/file/1354343849355792252/primeicons" target="_blank" rel="noopener noreferrer">Figma Community</a>. By adding them as a library, you can easily use these
+                  icons in your designs.
+              </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/icons/listdoc.js b/components/doc/icons/listdoc.js
index af1450e8b6..f46258e321 100644
--- a/components/doc/icons/listdoc.js
+++ b/components/doc/icons/listdoc.js
@@ -16,8 +16,26 @@ export function ListDoc(props) {
             setFilteredIcons(icons);
         }
 
-        if (icons) {
-            setFilteredIcons(icons.filter((it) => it.icon.tags[0].indexOf(event.target.value) !== -1));
+        if (event.target.value && icons) {
+            let sanitizedInput = event.target.value.replace(/[^\w\s]/gi, '').replace(/\s/g, '');
+
+            var newFilteredIcons = icons.filter((icon) => {
+                return (
+                    icon.icon.tags.some((tag) =>
+                        tag
+                            .replace(/[^\w\s]/gi, '')
+                            .replace(/\s/g, '')
+                            .includes(sanitizedInput.toLowerCase())
+                    ) ||
+                    icon.properties.name
+                        .replace(/[^\w\s]/gi, '')
+                        .replace(/\s/g, '')
+                        .toLowerCase()
+                        .includes(sanitizedInput.toLowerCase())
+                );
+            })
+
+            setFilteredIcons(newFilteredIcons);
         }
     };
 
diff --git a/components/layout/menu.json b/components/layout/menu.json
index 964538e7a6..88cd2ac1fb 100644
--- a/components/layout/menu.json
+++ b/components/layout/menu.json
@@ -511,7 +511,8 @@
             "children": [
                 {
                     "name": "Prime Icons",
-                    "to": "/icons"
+                    "to": "/icons",
+                    "badge": "UPDATED"
                 },
                 {
                     "name": "Custom Icons",
diff --git a/package-lock.json b/package-lock.json
index 40231109f9..81733d77b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
                 "next": "12.3.4",
                 "path": "^0.12.7",
                 "primeflex": "^3.3.1",
-                "primeicons": "^6.0.1",
+                "primeicons": "^7.0.0",
                 "quill": "1.3.7",
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
@@ -15591,9 +15591,9 @@
             "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ=="
         },
         "node_modules/primeicons": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
-            "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+            "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
         },
         "node_modules/process": {
             "version": "0.11.10",
diff --git a/package.json b/package.json
index b171f98c9f..8b7f8bc31c 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
         "next": "12.3.4",
         "path": "^0.12.7",
         "primeflex": "^3.3.1",
-        "primeicons": "^6.0.1",
+        "primeicons": "^7.0.0",
         "quill": "1.3.7",
         "react": "18.2.0",
         "react-dom": "18.2.0",
diff --git a/pages/icons/index.js b/pages/icons/index.js
index 999f51bb6b..9edaf2f728 100644
--- a/pages/icons/index.js
+++ b/pages/icons/index.js
@@ -7,6 +7,7 @@ import { ImportDoc } from '@/components/doc/icons/importdoc';
 import { ListDoc } from '@/components/doc/icons/listdoc';
 import { SizeDoc } from '@/components/doc/icons/sizedoc';
 import { SpinDoc } from '@/components/doc/icons/spindoc';
+import { FigmaDoc } from '@/components/doc/icons/figmadoc';
 
 const IconsDoc = () => {
     const docs = [
@@ -20,6 +21,11 @@ const IconsDoc = () => {
             label: 'Import',
             component: ImportDoc
         },
+        {
+            id: 'figma',
+            label: 'Figma',
+            component: FigmaDoc
+        },
         {
             id: 'basic',
             label: 'Basic',
diff --git a/public/data/icons.json b/public/data/icons.json
index 06c4a8ab36..6d0ebc5f55 100644
--- a/public/data/icons.json
+++ b/public/data/icons.json
@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M959.977 394.711c0-24.979-9.774-48.87-27.693-66.789l-236.207-236.207c-36.923-36.923-96.655-36.923-133.578 0l-470.781 470.781c-17.919 17.919-27.693 41.81-27.693 66.789s9.774 48.87 27.693 66.789l236.207 236.207c18.462 18.462 42.356 27.693 66.789 27.693 2.173 0 4.887 0 7.060-0.543 1.084 0 1.63 0 2.714 0h433.859c22.263 0 40.725-18.462 40.725-40.725s-18.462-40.725-40.725-40.725h-323.088l416.482-416.482c17.919-17.919 27.693-41.81 27.693-66.789zM149.275 638.521c-3.257-3.257-3.8-7.060-3.8-9.231s0-5.972 3.8-9.231l206.341-206.341 254.669 254.669-206.341 206.341c-4.887 4.887-13.032 4.887-18.462 0l-236.207-236.75zM874.725 404.486l-206.341 206.341-254.669-254.669 206.341-206.341c4.887-4.887 13.032-4.887 18.462 0l236.207 236.75c3.257 3.257 3.8 7.060 3.8 9.231s0 5.972-3.8 9.231z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["eraser"]},"attrs":[{}],"properties":{"order":333,"id":261,"name":"eraser","prevSize":80,"code":59908},"setIdx":0,"setId":1,"iconIdx":0},{"icon":{"paths":["M496 128.019c-247.028 0-447.979 200.95-447.979 447.979s200.95 447.979 447.979 447.979 447.979-200.95 447.979-447.979-200.95-447.979-447.979-447.979zM496 927.979c-193.911 0-351.983-158.073-351.983-351.983s158.073-351.983 351.983-351.983 351.983 158.073 351.983 351.983-158.073 351.983-351.983 351.983zM288.011 48.023c0-26.238 21.759-47.998 47.998-47.998h319.984c26.238 0 47.998 21.759 47.998 47.998s-21.759 47.998-47.998 47.998h-319.984c-26.238 0-47.998-21.759-47.998-47.998zM543.998 384.007v191.991c0 26.238-21.759 47.998-47.998 47.998s-47.998-21.759-47.998-47.998v-191.991c0-26.238 21.759-47.998 47.998-47.998s47.998 21.759 47.998 47.998zM962.538 273.291c-9.6 9.6-21.759 14.080-33.918 14.080s-24.318-4.48-33.918-14.080l-95.995-95.995c-18.559-18.559-18.559-49.277 0-67.837s49.277-18.559 67.837 0l95.995 95.995c18.559 18.559 18.559 49.277 0 67.837z"],"attrs":[{}],"grid":16,"tags":["stopwatch"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":332,"id":260,"name":"stopwatch","prevSize":80,"code":59905},"setIdx":0,"setId":1,"iconIdx":1},{"icon":{"paths":["M626.347 1024c-27.876 0-54.044-13.084-75.663-24.463-13.653-6.827-30.151-15.36-38.684-15.36s-25.6 8.533-38.684 15.36c-27.307 14.223-61.44 31.289-97.849 21.617-37.547-9.671-58.027-42.667-75.093-68.836-7.396-11.947-17.636-27.876-24.463-31.857s-25.031-4.551-40.391-5.689c-30.72-1.707-68.836-3.413-96.143-30.151-27.307-27.876-29.013-65.991-30.72-96.711-0.569-14.791-1.707-33.564-5.689-40.391-3.413-6.257-19.911-16.497-31.289-23.893-26.169-17.067-58.596-38.116-68.836-75.093-9.671-36.409 7.396-70.543 21.617-97.849 6.827-13.653 15.36-30.151 15.36-38.684s-8.533-25.6-15.36-38.684c-14.223-27.307-31.289-61.44-21.617-97.849 9.671-37.547 42.667-58.027 68.836-75.093 11.947-7.396 27.876-17.636 31.857-24.463s4.551-25.031 5.689-40.391c1.707-30.72 3.413-68.836 30.151-96.143 27.876-27.307 65.991-29.013 96.711-30.72 14.791-0.569 33.564-1.707 40.391-5.689 6.257-3.413 16.497-19.911 23.893-31.289 17.067-26.169 38.116-58.596 75.093-68.836 36.409-9.671 70.543 7.396 97.849 21.617 13.653 6.827 30.151 15.36 38.684 15.36s25.6-8.533 38.684-15.36c27.307-13.653 61.44-31.289 97.849-21.617 37.547 9.671 58.027 42.667 75.093 68.836 7.396 11.947 17.636 27.876 24.463 31.857s25.031 4.551 40.391 5.689c30.72 1.707 68.836 3.413 96.143 30.151 27.307 27.876 29.013 65.991 30.72 96.711 0.569 14.791 1.707 33.564 5.689 40.391 3.413 6.257 19.911 16.497 31.289 23.893 26.169 17.067 58.596 38.116 68.836 75.093 9.671 36.409-7.396 70.543-21.617 97.849-6.827 13.653-15.36 30.151-15.36 38.684s8.533 25.6 15.36 38.684c14.223 27.307 31.289 61.44 21.617 97.849-9.671 37.547-42.667 58.027-68.836 75.093-11.947 7.396-27.876 17.636-31.857 24.463s-4.551 25.031-5.689 40.391c-1.707 30.72-3.413 68.836-30.151 96.143-27.876 27.307-65.991 29.013-96.711 30.72-14.791 0.569-33.564 1.707-40.391 5.689-6.257 3.413-16.497 19.911-23.893 31.289-17.067 26.169-38.116 58.596-75.093 68.836-7.396 2.276-14.791 2.844-22.187 2.844zM398.223 85.333s0 0-0.569 0c-5.689 2.276-18.773 21.617-25.031 32.427-13.653 21.049-29.013 44.943-53.476 59.164-25.031 14.223-53.476 15.929-79.076 17.067-12.516 0.569-35.84 1.707-40.96 5.689-3.413 4.551-4.551 27.307-5.12 39.823-1.137 25.6-2.844 54.044-17.067 78.507s-38.116 39.823-59.164 53.476c-10.809 6.827-30.151 19.343-32.427 25.6-0.569 6.257 9.103 25.6 14.791 36.977 11.377 22.756 25.031 48.356 25.031 77.369s-13.084 54.613-25.031 77.369c-5.689 11.377-15.929 30.72-14.791 36.977 2.276 5.689 21.617 18.773 32.427 25.031 21.049 13.653 44.943 29.013 59.164 53.476 14.223 25.031 15.929 53.476 17.067 79.076 0.569 12.516 1.707 35.84 5.689 40.96 4.551 3.413 27.307 4.551 39.823 5.12 25.6 1.137 54.044 2.844 78.507 17.067s39.823 38.116 53.476 59.164c6.827 10.809 19.343 30.151 25.6 32.427 5.689 1.707 25.6-9.103 36.977-14.791 22.756-11.377 48.356-25.031 77.369-25.031s54.613 13.084 77.369 25.031c11.377 5.689 29.583 16.497 36.977 14.791 5.689-2.276 18.773-21.617 25.031-32.427 13.653-21.049 29.013-44.943 53.476-59.164 25.031-14.223 53.476-15.929 79.076-17.067 12.516-0.569 35.84-1.707 40.96-5.689 3.413-4.551 4.551-27.307 5.12-39.823 1.137-25.6 2.844-54.044 17.067-78.507s38.116-39.823 59.164-53.476c10.809-6.827 30.151-19.343 32.427-25.6 0.569-6.257-9.103-25.6-14.791-36.977-11.377-22.756-25.031-48.356-25.031-77.369s13.084-54.613 25.031-77.369c5.689-11.377 15.36-30.72 14.791-36.977-2.276-6.257-22.187-18.773-32.427-25.6-21.049-13.653-44.943-29.013-59.164-53.476-14.223-25.031-15.929-53.476-17.067-79.076-0.569-12.516-1.707-35.84-5.689-40.96-4.551-3.413-27.307-4.551-39.823-5.12-25.6-1.137-54.044-2.844-78.507-17.067s-39.823-38.116-53.476-59.164c-6.827-10.809-19.343-30.151-25.6-32.427-5.689-1.707-25.6 9.103-36.977 14.791-22.756 11.377-48.356 25.031-77.369 25.031s-54.613-13.084-77.369-25.031c-11.377-5.689-29.583-14.791-36.409-14.791zM938.667 397.084s0 0 0 0v0zM426.097 711.68v0c-11.377 0-22.187-4.551-30.151-12.516l-142.791-142.791c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l112.64 112.64 283.876-283.876c16.497-16.497 43.804-16.497 60.303 0s16.497 43.804 0 60.303l-314.027 314.027c-7.964 7.964-18.773 12.516-30.151 12.516z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["verified"]},"attrs":[{}],"properties":{"order":331,"id":259,"name":"verified","prevSize":80,"code":59906},"setIdx":0,"setId":1,"iconIdx":2},{"icon":{"paths":["M799.19 390.096l-121.904 121.904 121.904 121.904c15.924 15.924 15.924 42.282 0 58.207-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081l-121.904-121.904-121.904 121.904c-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081c-15.924-15.924-15.924-42.282 0-58.207l121.904-121.904-121.904-121.904c-15.924-15.924-15.924-42.282 0-58.207s42.282-15.924 58.207 0l121.904 121.904 121.904-121.904c15.924-15.924 42.282-15.924 58.207 0s15.924 42.282 0 58.207zM1023.778 237.441v549.119c0 52.715-42.831 96.096-96.096 96.096h-655.098c-33.497 0-63.697-17.023-81.27-45.028l-180.66-289.385c-13.728-21.965-13.728-50.518 0-73.033l180.66-288.837c17.571-28.005 48.323-45.028 81.27-45.028h655.648c52.715 0 96.096 43.381 96.096 96.096zM941.41 237.441c0-7.687-6.040-13.728-13.728-13.728h-655.098c-4.942 0-9.335 2.197-11.531 6.589l-176.267 281.698 176.267 281.698c2.745 3.844 7.139 6.589 11.531 6.589h655.648c7.687 0 13.728-6.040 13.728-13.728v-549.119z"],"attrs":[{}],"grid":16,"tags":["delete-left"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":330,"id":258,"name":"delete-left","prevSize":80,"code":59907},"setIdx":0,"setId":1,"iconIdx":3},{"icon":{"paths":["M877.707 936.219h-38.619c-22.234-79.578-90.695-277.351-257.457-424.219 166.762-146.867 235.222-344.642 257.457-424.219h38.619c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885h-731.412c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h38.619c22.234 79.578 90.695 277.351 257.457 424.219-166.762 146.867-235.222 344.642-257.457 424.219h-38.619c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h731.412c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885zM276.778 87.781h469.859c-26.331 83.089-93.621 248.679-235.222 367.462-141.601-119.366-208.891-284.373-235.222-367.462zM512 568.758c141.601 119.366 208.891 284.373 235.222 367.462h-470.444c26.331-83.089 93.621-248.681 235.222-367.462z"],"attrs":[{}],"grid":16,"tags":["hourglass"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":329,"id":257,"name":"hourglass","prevSize":80,"code":59902},"setIdx":0,"setId":1,"iconIdx":4},{"icon":{"paths":["M816.58 221.265h-110.756v-41.534c0-53.163-43.749-96.912-96.912-96.912h-512.247c-53.163 0-96.912 43.749-96.912 96.912v498.402c0 53.163 43.749 96.912 96.912 96.912h15.506c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h85.836c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h15.506c53.163 0 96.912-43.749 96.912-96.912v-249.201c0-114.633-93.035-207.668-207.668-207.668zM82.82 678.134v-498.402c0-7.752 6.091-13.845 13.845-13.845h512.247c7.752 0 13.845 6.091 13.845 13.845v439.701s-2.768 3.323-4.43 4.43c-8.307 7.2-16.059 14.952-23.259 23.259-2.216 2.768-4.43 4.984-6.091 7.752-8.307 11.629-16.059 23.259-21.043 36.55h-110.756s0 0 0-0.554c0 0 0 0 0 0-3.877-9.414-9.414-18.829-14.952-27.136-1.661-2.216-3.323-4.43-4.984-7.2-4.43-6.645-9.414-12.184-14.952-18.275-2.216-2.216-3.877-4.43-6.091-6.645-7.2-6.645-14.398-12.737-22.152-18.275-1.107-0.554-1.661-1.661-2.768-2.216-8.307-5.538-17.168-9.968-26.027-14.398-3.323-1.661-6.645-2.768-9.968-3.877-7.2-2.768-13.845-4.984-21.043-6.645-3.323-0.554-6.645-1.661-9.968-2.216-10.522-2.216-21.597-3.323-32.673-3.323s-21.597 1.107-32.673 3.323c-3.323 0.554-6.645 1.661-9.968 2.216-7.2 1.661-14.398 3.877-21.043 6.645-3.323 1.107-6.645 2.216-9.968 3.877-8.861 3.877-17.721 8.861-26.027 14.398-1.107 0.554-1.661 1.107-2.768 2.216-7.752 5.538-15.506 11.629-22.152 18.275-2.216 2.216-4.43 4.43-6.091 6.645-5.538 5.538-10.522 11.629-14.952 18.275-1.661 2.216-3.323 4.43-4.984 7.2-5.538 8.861-10.522 17.721-14.952 27.136 0 0 0 0 0 0s0 0 0 0.554h-27.689c-7.752 0-13.845-6.091-13.845-13.845zM290.487 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 2.216-9.968 6.091-19.382 11.075-27.689 0.554-1.661 1.661-2.768 2.216-4.43 4.984-7.752 11.075-14.952 18.275-21.043 1.661-1.107 2.768-2.216 4.43-3.323 7.2-5.538 15.506-10.522 24.366-13.845 1.107 0 2.768-1.107 4.43-1.107 9.414-3.323 19.936-5.538 30.458-5.538s20.49 2.216 30.458 5.538c1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM733.513 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 1.661-6.645 3.323-13.291 6.091-19.382 0 0 0-0.554 0-1.107 2.768-5.538 5.538-11.075 9.414-16.059 0.554-1.107 1.661-1.661 2.216-2.768 3.323-4.43 6.645-8.307 10.522-12.184 1.107-1.107 2.216-1.661 3.323-2.768 3.877-3.323 8.307-6.645 12.737-9.414 1.107-0.554 2.768-1.661 4.43-2.216 4.984-2.768 10.522-4.984 16.059-6.645 2.216-0.554 4.43-1.661 7.2-2.216 7.2-1.661 14.952-2.768 22.705-2.768 10.522 0 20.49 2.216 30.458 5.538 1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM705.823 470.466v-166.134h110.756c68.669 0 124.601 55.931 124.601 124.601v41.534h-235.356z"],"attrs":[{}],"grid":16,"tags":["truck"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":328,"id":256,"name":"truck","prevSize":80,"code":59904},"setIdx":0,"setId":1,"iconIdx":5},{"icon":{"paths":["M168.104 1023.75v0c-44.45 0-86.559-17.546-118.726-49.128-65.505-65.505-65.505-171.363 0-236.867l322.256-322.256c-29.242-113.462 2.34-235.698 85.389-318.747 83.634-83.634 206.454-116.387 320.502-85.389 15.206 4.094 26.904 15.791 30.997 30.997s0 30.997-11.113 42.11l-143.29 143.29 30.413 111.707 111.707 30.413 143.29-143.29c11.113-11.113 27.488-15.206 42.11-11.113 15.206 4.094 26.904 15.791 30.997 30.997 30.997 114.047-1.169 236.867-85.389 320.502-83.050 83.050-205.285 114.633-318.747 85.389l-322.256 322.256c-31.582 31.582-73.692 49.128-118.142 49.128zM668.742 89.148c-56.146 4.678-109.369 29.242-150.308 70.183-66.674 66.674-88.314 164.345-56.146 254.413 5.849 15.791 1.755 33.922-10.527 45.619l-340.973 340.973c-30.997 30.997-30.997 81.88 0 112.878 15.206 15.206 35.091 23.395 56.732 23.395v0c21.055 0 41.524-8.188 56.146-23.395l340.973-340.973c12.282-12.282 29.828-15.791 45.619-10.527 90.069 31.582 187.739 10.527 254.413-56.146 40.941-40.941 64.919-94.162 70.183-150.308l-95.332 95.332c-11.113 11.113-27.488 15.206-42.695 11.113l-160.252-43.864c-15.206-4.094-26.904-15.791-30.997-30.997l-43.864-160.252c-4.094-15.206 0-31.582 11.113-42.695l95.332-95.332z"],"attrs":[{}],"grid":16,"tags":["wrench"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":325,"id":255,"name":"wrench","prevSize":80,"code":59903},"setIdx":0,"setId":1,"iconIdx":6},{"icon":{"paths":["M495.693 730.292h32.612c77.849 0 140.443-64.699 140.443-144.651v-389.243c0-79.953-63.121-144.651-140.443-144.651h-32.612c-77.849 0-140.443 64.699-140.443 144.651v388.718c0 79.953 63.121 144.651 140.443 144.651zM434.151 196.397c0-36.294 27.877-65.751 61.542-65.751h32.612c34.19 0 61.542 29.456 61.542 65.751v388.718c0 36.294-27.877 65.751-61.542 65.751h-32.612c-34.19 0-61.542-29.456-61.542-65.751v-388.718zM814.452 374.712v222.5c0 147.807-116.773 267.736-263.003 275.101v99.941c0 21.566-17.885 39.45-39.45 39.45s-39.45-17.885-39.45-39.45v-99.941c-146.229-7.364-263.002-127.293-263.002-275.101v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45v222.5c0 108.883 88.896 197.779 198.304 197.779h51.023c109.409 0 198.304-88.896 198.304-197.779v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microphone"]},"attrs":[{}],"properties":{"order":323,"id":254,"name":"microphone","prevSize":80,"code":59898},"setIdx":0,"setId":1,"iconIdx":7},{"icon":{"paths":["M906.87 28.172h-85.757c-64.638 0-117.117 52.479-117.117 117.117v28.799l-607.985 130.557v-32.639c0-26.239-21.76-47.999-47.999-47.999s-47.999 21.76-47.999 47.999v447.99c0 26.239 21.76 47.999 47.999 47.999s47.999-21.76 47.999-47.999v-40.319l607.985 130.557v28.799c0 64.638 52.479 117.117 117.117 117.117h85.757c64.638 0 117.117-52.479 117.117-117.117v-693.744c0-64.638-52.479-117.117-117.117-117.117zM96.011 581.118v-178.556l607.985-130.557v439.669l-607.985-130.557zM927.989 839.033c0 11.52-9.6 21.119-21.119 21.119h-85.757c-11.52 0-21.119-9.6-21.119-21.119v-693.744c0-11.52 9.6-21.119 21.119-21.119h85.757c11.52 0 21.119 9.6 21.119 21.119v693.744zM574.079 872.311c-23.68 74.238-92.158 124.156-170.876 124.156-98.558 0-179.196-79.359-179.196-175.995 0-7.039 0-14.719 1.279-21.76 3.199-26.239 27.52-44.799 53.759-41.598s44.799 26.879 41.598 53.118c0 3.199 0 6.4 0 9.6 0 44.159 37.12 79.998 83.198 79.998 36.479 0 68.478-23.039 79.359-56.958 7.68-25.6 35.2-39.679 60.159-31.36 25.6 7.68 39.040 35.2 31.36 60.159z"],"attrs":[{}],"grid":16,"tags":["megaphone"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":322,"id":253,"name":"megaphone","prevSize":80,"code":59899},"setIdx":0,"setId":1,"iconIdx":8},{"icon":{"paths":["M1023.949 776.232c0 27.083-22.46 49.543-49.543 49.543h-805.246l80.59 80.59c19.156 19.156 19.156 50.864 0 70.022-9.909 9.909-22.46 14.533-35.010 14.533s-25.101-4.625-35.010-14.533l-165.145-165.145c-4.625-4.625-7.927-9.909-10.57-15.854-5.284-11.89-5.284-25.763 0-37.653 2.643-5.945 5.945-11.229 10.57-15.854l165.145-165.145c19.156-19.156 50.864-19.156 70.022 0s19.156 50.864 0 70.022l-80.59 80.59h805.246c27.083 0 49.543 22.46 49.543 49.543zM49.594 297.311h805.246l-80.59 80.59c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l165.145-165.145c4.625-4.625 7.927-9.909 10.57-15.854 5.284-11.89 5.284-25.763 0-37.653-2.643-5.945-5.945-11.229-10.57-15.854l-165.145-165.145c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l80.59 80.59h-805.246c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-right-arrow-left"]},"attrs":[{}],"properties":{"order":321,"id":252,"name":"arrow-right-arrow-left","prevSize":80,"code":59900},"setIdx":0,"setId":1,"iconIdx":9},{"icon":{"paths":["M609.223 618.817c-17.27 69.72-134.322 31.981-172.7 22.386l30.702-123.449c38.378 9.594 159.908 28.143 141.997 101.061zM509.441 348.895l-28.143 111.935c31.981 7.676 129.844 40.297 145.835-23.027 15.991-65.882-85.71-81.233-117.692-88.909zM1008.351 635.449c-68.44 273.76-346.039 440.703-620.44 372.904-273.76-68.44-441.343-346.039-372.904-619.8 68.44-274.4 346.039-440.703 620.44-372.904 273.76 68.44 441.343 346.039 372.904 619.8zM343.778 597.71c-2.559 7.035-9.594 17.27-25.586 13.432-2.559 0-40.937-10.235-40.937-10.235l-28.143 63.963 72.918 17.91c14.072 3.838 26.864 7.035 40.297 10.873l-23.027 92.747 55.648 14.072 23.027-92.106c15.351 4.478 30.062 7.676 44.774 11.513l-23.027 91.466 56.288 14.072 23.027-92.747c95.944 17.91 168.222 10.873 198.285-76.115 24.305-69.72-1.279-110.017-51.81-136.241 36.459-8.316 63.963-32.621 71.639-82.512 10.235-67.801-41.575-104.899-112.574-128.565l23.027-92.747-56.288-14.072-22.386 89.547c-14.711-3.838-30.062-7.035-45.413-10.873l22.386-90.188-55.648-14.072-23.027 92.106c-12.153-2.559-24.305-5.757-35.819-8.316l-77.395-19.829-14.711 60.126s40.937 9.594 40.937 10.235c22.386 5.757 26.224 20.468 26.224 32.621l-63.323 252.653z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bitcoin"]},"attrs":[{}],"properties":{"order":320,"id":251,"name":"bitcoin","prevSize":80,"code":59901},"setIdx":0,"setId":1,"iconIdx":10},{"icon":{"paths":["M290.603 885.606h-83.024c-38.191 0-69.186-30.995-69.186-69.186v-664.188c0-38.191 30.995-69.186 69.186-69.186h207.559v262.908c0 22.693 18.819 41.512 41.512 41.512h265.675c5.535 16.051 20.48 27.674 38.745 27.674 22.693 0 41.512-18.819 41.512-41.512v-27.674c0-5.535-1.107-11.069-3.321-16.051s-4.981-9.409-8.856-13.284l-304.42-304.42c-3.875-3.875-8.302-6.642-13.284-8.856s-10.517-3.321-16.051-3.321h-249.071c-84.13 0-152.209 68.079-152.209 152.209v664.188c0 84.13 68.079 152.209 152.209 152.209h83.024c22.693 0 41.512-18.819 41.512-41.512s-18.819-41.512-41.512-41.512zM498.162 141.715l162.726 162.726h-162.726v-162.726zM933.206 477.13c-21.032-21.032-52.029-33.763-84.13-34.316-33.209-1.66-64.758 11.069-85.791 32.655l-353.68 354.234c-7.196 7.196-11.069 16.051-12.177 26.014l-9.963 123.429c-1.107 12.177 3.321 24.353 12.177 32.655 7.748 7.748 18.265 12.177 29.335 12.177 1.107 0 2.214 0 3.875 0l124.535-11.623c9.409-1.107 18.819-4.981 25.461-12.177l353.68-354.234c44.279-43.726 42.618-122.875-3.321-168.814zM877.858 587.275l-343.164 343.717-60.331 5.535 4.427-58.67 343.164-343.717c5.535-5.535 15.498-7.748 25.461-8.302 11.069 0 21.032 3.875 27.121 9.963 13.284 12.73 14.944 39.851 3.321 51.475z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-edit"]},"attrs":[{}],"properties":{"order":319,"id":250,"name":"file-edit","prevSize":80,"code":59894},"setIdx":0,"setId":1,"iconIdx":11},{"icon":{"paths":["M1021.466 949.618l-177.541-496.402c-12.469-32.659-40.377-52.846-72.441-52.846s-59.379 20.189-73.035 54.035l-176.948 495.215c-8.313 23.158 3.563 48.691 26.72 57.003s48.691-3.563 57.003-26.72l36.814-102.724h258.296l36.814 102.724c6.531 18.408 23.752 29.689 42.158 29.689 4.75 0 10.094-0.594 14.845-2.376 23.158-8.313 35.033-33.846 26.72-57.003zM674.697 787.515l97.38-272.547 97.38 272.547h-194.761zM523.282 265.579c-134.195 211.981-255.327 340.238-402.585 425.743-7.125 4.157-14.845 5.938-21.97 5.938-15.438 0-30.283-7.72-38.595-21.97-12.469-21.376-5.344-48.691 16.032-60.566 124.694-72.441 226.826-176.354 341.425-348.55h-373.489c-24.345 0-44.534-20.189-44.534-44.534s20.189-44.534 44.534-44.534h222.669v-117.569c0-24.345 20.189-44.534 44.534-44.534s44.534 20.189 44.534 44.534v117.569h222.669c24.345 0 44.534 20.189 44.534 44.534s-20.189 44.534-44.534 44.534h-55.816zM525.657 697.26c-7.72 0-15.438-1.781-22.563-5.938-38.595-22.563-76.004-47.502-111.038-73.63-19.595-14.845-23.752-42.752-8.907-62.347s42.752-23.752 62.347-8.907c32.064 24.345 67.097 46.909 102.724 67.691 21.376 12.469 28.502 39.784 16.032 61.16-8.313 14.251-23.158 21.97-38.595 21.97z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["language"]},"attrs":[{}],"properties":{"order":318,"id":249,"name":"language","prevSize":80,"code":59895},"setIdx":0,"setId":1,"iconIdx":12},{"icon":{"paths":["M696.881 725.324c-23.323 0-42.665 19.342-42.665 42.665v85.33c0 39.252-31.856 71.108-71.108 71.108h-426.648c-39.252 0-71.108-31.856-71.108-71.108v-682.637c0-39.252 31.856-71.108 71.108-71.108h184.881v270.211c0 23.323 19.342 42.665 42.665 42.665h270.211v71.108c0 23.323 19.342 42.665 42.665 42.665s42.665-19.342 42.665-42.665v-113.772c0-11.377-4.55-22.186-12.515-30.149l-312.876-312.876c-7.964-7.964-18.773-12.515-30.149-12.515h-227.546c-86.467 0-156.437 69.97-156.437 156.437v682.637c0 86.467 69.97 156.437 156.437 156.437h426.648c86.467 0 156.437-69.97 156.437-156.437v-85.33c0-23.323-19.342-42.665-42.665-42.665zM426.67 159.872l167.246 167.246h-167.246v-167.246zM1020.565 642.27c-2.276 5.12-5.12 9.67-9.102 13.653l-170.659 170.659c-8.533 8.533-19.342 12.515-30.149 12.515s-21.616-3.982-30.149-12.515c-16.497-16.497-16.497-43.802 0-60.3l97.845-97.845h-494.343c-23.323 0-42.665-19.342-42.665-42.665s19.342-42.665 42.665-42.665h494.343l-97.845-97.845c-16.497-16.497-16.497-43.802 0-60.3s43.802-16.497 60.3 0l170.659 170.659c3.982 3.982 6.826 8.533 9.102 13.653 4.55 10.24 4.55 22.186 0 32.425z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-export"]},"attrs":[{}],"properties":{"order":317,"id":248,"name":"file-export","prevSize":80,"code":59896},"setIdx":0,"setId":1,"iconIdx":13},{"icon":{"paths":["M537.031 668.444h-494.364c-23.324 0-42.667-19.343-42.667-42.667s19.343-42.667 42.667-42.667h494.364l-97.849-97.849c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l170.667 170.667c3.983 3.983 6.827 8.533 9.103 13.653 4.551 10.24 4.551 22.187 0 32.427-2.276 5.12-5.12 9.671-9.103 13.653l-170.667 170.667c-8.533 8.533-19.343 12.516-30.151 12.516s-21.617-3.983-30.151-12.516c-16.497-16.497-16.497-43.804 0-60.303l97.849-97.849zM1024 369.777v483.556c0 86.471-69.973 156.444-156.444 156.444h-426.667c-86.471 0-156.444-69.973-156.444-156.444v-56.889c0-23.324 19.343-42.667 42.667-42.667s42.667 19.343 42.667 42.667v56.889c0 39.253 31.857 71.111 71.111 71.111h426.667c39.253 0 71.111-31.857 71.111-71.111v-440.889h-270.223c-23.324 0-42.667-19.343-42.667-42.667v-270.223h-184.889c-39.253 0-71.111 31.857-71.111 71.111v284.444c0 23.324-19.343 42.667-42.667 42.667s-42.667-19.343-42.667-42.667v-284.444c0-86.471 69.973-156.444 156.444-156.444h227.556c11.377 0 22.187 4.551 30.151 12.516l312.889 312.889c7.964 7.964 12.516 18.773 12.516 30.151zM711.111 327.111h167.253l-167.253-167.253v167.253z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-import"]},"attrs":[{}],"properties":{"order":316,"id":247,"name":"file-import","prevSize":80,"code":59897},"setIdx":0,"setId":1,"iconIdx":14},{"icon":{"paths":["M894.076 334.712l-321.811-321.811c-8.191-8.191-19.309-12.873-31.010-12.873h-263.299c-88.936 0-160.905 71.968-160.905 160.905v702.132c0 88.936 71.968 160.905 160.905 160.905h468.087c88.936 0 160.905-71.968 160.905-160.905v-497.344c0-11.702-4.68-22.819-12.873-31.010zM585.138 149.817l172.022 172.022h-172.022v-172.022zM746.044 936.204h-468.087c-40.373 0-73.138-32.766-73.138-73.138v-702.132c0-40.373 32.766-73.138 73.138-73.138h219.416v277.928c0 23.989 19.894 43.883 43.883 43.883h277.928v453.46c0 40.373-32.766 73.138-73.138 73.138zM758.916 554.128l-87.766 292.554c-5.266 17.553-21.65 30.426-40.373 31.010-0.586 0-1.17 0-1.755 0-18.139 0-33.937-11.118-40.958-27.5l-76.065-190.745-76.065 190.745c-7.021 17.553-23.989 28.671-42.713 27.5-18.723-0.586-34.521-13.457-40.373-31.010l-87.766-292.554c-7.021-23.405 6.436-47.979 29.255-54.415 23.405-7.021 47.394 6.436 54.415 29.255l51.49 172.022 70.213-176.118c13.457-33.351 68.458-33.351 81.331 0l70.213 176.118 51.49-172.022c7.021-23.405 31.596-36.276 54.415-29.255 23.405 7.021 36.276 31.596 29.255 54.415z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-word"]},"attrs":[{}],"properties":{"order":311,"id":246,"name":"file-word","prevSize":80,"code":59889},"setIdx":0,"setId":1,"iconIdx":15},{"icon":{"paths":["M950.832 263.329h-81.915c23.405-28.085 38.032-63.192 38.032-102.395 0-88.936-71.968-160.905-160.905-160.905-98.298 0-184.895 52.074-234.044 129.309-49.149-77.234-135.746-129.309-234.044-129.309-88.936 0-160.905 71.968-160.905 160.905 0 39.203 14.628 74.309 38.032 102.395h-81.915c-40.373 0-73.138 32.766-73.138 73.138v146.278c0 35.107 25.16 63.192 58.511 70.213v397.874c0 40.373 32.766 73.138 73.138 73.138h760.643c40.373 0 73.138-32.766 73.138-73.138v-397.874c33.351-7.021 58.511-35.107 58.511-70.213v-146.278c0-40.373-32.766-73.138-73.138-73.138zM936.204 468.117h-380.321v-117.021h380.321v117.021zM746.044 87.796c40.373 0 73.138 32.766 73.138 73.138s-32.766 73.138-73.138 73.138h-184.895c19.894-83.67 95.373-146.278 184.895-146.278zM277.956 87.796c89.522 0 165.001 62.606 184.895 146.278h-184.895c-40.373 0-73.138-32.766-73.138-73.138s32.766-73.138 73.138-73.138zM87.796 351.095h380.321v117.021h-380.321v-117.021zM146.306 555.883h321.811v380.321h-321.811v-380.321zM877.694 936.204h-321.811v-380.321h321.811v380.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["gift"]},"attrs":[{}],"properties":{"order":312,"id":245,"name":"gift","prevSize":80,"code":59890},"setIdx":0,"setId":1,"iconIdx":16},{"icon":{"paths":["M417.791 482.743c0-23.991 19.896-43.886 43.886-43.886h73.143v-73.143c0-23.991 19.896-43.886 43.886-43.886s43.886 19.896 43.886 43.886v73.143h73.143c23.991 0 43.886 19.896 43.886 43.886s-19.896 43.886-43.886 43.886h-73.143v73.143c0 23.991-19.896 43.886-43.886 43.886s-43.886-19.896-43.886-43.886v-73.143h-73.143c-23.991 0-43.886-19.896-43.886-43.886zM468.114 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM848.461 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM1022.836 259.215l-117.029 468.119c-4.681 19.31-22.235 33.354-42.716 33.354h-585.15c-21.065 0-39.205-15.213-43.301-36.279l-110.593-607.385h-80.165c-23.991 0-43.886-19.896-43.886-43.886s19.896-43.886 43.886-43.886h117.029c21.065 0 39.205 15.213 43.301 36.279l25.162 139.266h750.746c13.458 0 26.332 6.436 34.523 16.969s11.118 24.576 8.192 37.45zM923.945 292.569h-678.773l69.048 380.347h514.346l94.794-380.347z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-plus"]},"attrs":[{}],"properties":{"order":313,"id":244,"name":"cart-plus","prevSize":80,"code":59891},"setIdx":0,"setId":1,"iconIdx":17},{"icon":{"paths":["M1023.898 103.121v369.207c0 56.948-46.711 103.659-103.659 103.659h-103.019v-575.886h103.019c57.589 0 103.659 46.071 103.659 103.019zM85.844 79.445l-84.463 479.905c-10.238 58.868 34.553 112.617 94.702 112.617h305.86v223.955c0 70.386 57.589 127.974 127.335 127.974h5.759c25.595 0 48.631-15.357 58.868-39.033l174.685-408.879v-575.886s-588.683 0-588.683 0c-46.711 0-86.383 33.274-94.702 79.345z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-down-fill"]},"attrs":[{}],"properties":{"order":314,"id":243,"name":"thumbs-down-fill","prevSize":80,"code":59892},"setIdx":0,"setId":1,"iconIdx":18},{"icon":{"paths":["M207.428 448.014v575.872h-103.017c-57.587 0-103.657-46.070-103.657-103.017v-369.198c0-56.947 46.71-103.657 103.657-103.657h103.017zM927.907 352.035h-305.852v-223.95c0-70.384-57.587-127.971-127.332-127.971h-5.759c-25.595 0-48.63 15.357-58.866 39.032l-174.681 408.869v575.872s588.668 0 588.668 0c46.71 0 86.381-33.273 94.699-79.343l84.461-479.893c10.238-58.866-34.552-112.614-94.699-112.614z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-up-fill"]},"attrs":[{}],"properties":{"order":315,"id":242,"name":"thumbs-up-fill","prevSize":80,"code":59893},"setIdx":0,"setId":1,"iconIdx":19},{"icon":{"paths":["M1020.467 528.967c-2.341 5.266-5.266 9.946-9.362 14.042l-146.281 146.281c-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873c-16.967-16.967-16.967-45.053 0-62.024l71.384-71.384h-318.304v318.304l71.384-71.384c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-146.281 146.281c-4.096 4.096-8.774 7.021-14.042 9.362s-11.117 3.513-16.967 3.513-11.701-1.17-16.967-3.513c-5.266-2.341-9.946-5.266-14.042-9.362l-146.281-146.281c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l71.384 71.384v-318.304h-318.304l71.384 71.384c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-146.281-146.281c-4.096-4.096-7.021-8.774-9.362-14.042-4.681-10.532-4.681-22.82 0-33.35 2.341-5.266 5.266-9.946 9.362-14.042l146.281-146.281c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-71.384 71.384h318.304v-318.889l-71.384 71.384c-16.967 16.967-45.053 16.967-62.024 0s-16.967-45.053 0-62.024l146.281-146.281c4.096-4.096 8.774-7.021 14.042-9.362 10.532-4.681 22.82-4.681 33.35 0 5.266 2.341 9.946 5.266 14.042 9.362l146.281 146.281c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-71.384-71.384v318.304h318.304l-71.384-71.384c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l146.281 146.281c4.096 4.096 7.021 8.774 9.362 14.042 4.681 10.532 4.681 22.82 0 33.35z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-alt"]},"attrs":[{}],"properties":{"order":310,"id":241,"name":"arrows-alt","prevSize":80,"code":59888},"setIdx":0,"setId":1,"iconIdx":20},{"icon":{"paths":["M695.789 315.083h-367.579c-14.704 0-26.255-11.553-26.255-26.255v-78.767c0-14.704 11.553-26.255 26.255-26.255h367.579c14.704 0 26.255 11.553 26.255 26.255v78.767c0 14.704-11.553 26.255-26.255 26.255zM722.045 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-210.045c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h210.045c14.704 0 26.255-11.553 26.255-26.255zM892.706 905.834v-787.668c0-65.114-53.036-118.15-118.15-118.15h-525.113c-65.114 0-118.15 53.036-118.15 118.15v787.668c0 65.114 53.036 118.15 118.15 118.15h525.113c65.114 0 118.15-53.036 118.15-118.15zM774.556 78.782c21.529 0 39.383 17.854 39.383 39.383v787.668c0 21.529-17.854 39.383-39.383 39.383h-525.113c-21.529 0-39.383-17.854-39.383-39.383v-787.668c0-21.529 17.854-39.383 39.383-39.383h525.113z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["calculator"]},"attrs":[{}],"properties":{"order":308,"id":240,"name":"calculator","prevSize":80,"code":59887},"setIdx":0,"setId":1,"iconIdx":21},{"icon":{"paths":["M117.634 249.75l80.59-80.59v375.869c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-375.869l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0z","M906.366 774.25l-80.59 80.59v-375.869c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v375.869l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M976.388 117.634c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0l-80.59 80.59v-78.608c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v177.695l-679.075 679.075c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l80.59-80.59v78.608c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-177.695l679.075-679.075z"],"attrs":[{},{},{}],"grid":16,"tags":["sort-alt-slash"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":306,"id":239,"name":"sort-alt-slash","prevSize":80,"code":59886},"setIdx":0,"setId":1,"iconIdx":22},{"icon":{"paths":["M1020.451 495.033c-2.348-5.441-5.502-10.097-9.37-14.051l-234.032-234.032c-8.033-8.604-19.443-13.967-32.105-13.967-24.235 0-43.882 19.647-43.882 43.882 0 12.663 5.363 24.072 13.941 32.081l0.026 0.023 159.147 159.147h-724.353l159.147-159.147c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-234.040 234.040c-3.859 3.945-7.014 8.601-9.247 13.748l-0.114 0.295c-2.222 5-3.515 10.833-3.515 16.967s1.293 11.968 3.623 17.242l-0.108-0.273c2.348 5.441 5.502 10.097 9.37 14.051l234.032 234.032c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0c7.929-7.939 12.834-18.902 12.834-31.010s-4.904-23.071-12.834-31.011v0l-159.147-159.147h724.353l-159.147 159.147c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l234.040-234.040c3.859-3.945 7.014-8.601 9.247-13.748l0.114-0.295c2.222-5 3.515-10.833 3.515-16.967s-1.293-11.968-3.623-17.242l0.108 0.273z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-h"]},"attrs":[{}],"properties":{"order":305,"id":238,"name":"arrows-h","prevSize":80,"code":59884},"setIdx":0,"setId":1,"iconIdx":23},{"icon":{"paths":["M528.967 1020.451c5.441-2.348 10.097-5.502 14.051-9.37l234.032-234.032c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-159.147 159.147v-724.353l159.147 159.147c7.815 7.297 18.343 11.777 29.915 11.777 24.235 0 43.882-19.647 43.882-43.882 0-11.574-4.48-22.1-11.802-29.942l0.023 0.026-234.040-234.040c-3.945-3.859-8.601-7.014-13.748-9.247l-0.295-0.114c-5-2.222-10.833-3.515-16.967-3.515s-11.968 1.293-17.242 3.623l0.273-0.108c-5.441 2.348-10.097 5.502-14.051 9.37l-234.032 234.032c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l159.147-159.147v724.353l-159.147-159.147c-7.939-7.929-18.902-12.834-31.010-12.834s-23.071 4.904-31.011 12.834v0c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0l234.040 234.040c3.945 3.859 8.601 7.014 13.748 9.247l0.295 0.114c5 2.222 10.833 3.515 16.967 3.515s11.968-1.293 17.242-3.623l-0.273 0.108z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-v"]},"attrs":[{}],"properties":{"order":304,"id":237,"name":"arrows-v","prevSize":80,"code":59885},"setIdx":0,"setId":1,"iconIdx":24},{"icon":{"paths":["M836.060 936.086h-552.19l116.989-164.955c5.016-7 8.065-15.709 8.189-25.123v-190.138h190.108c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0h-191.863v-190.108c-0.156-2.816-0.245-6.11-0.245-9.427 0-99.824 80.924-180.749 180.749-180.749 1.732 0 3.459 0.025 5.178 0.073l-0.254-0.005c3.537-0.243 7.666-0.381 11.827-0.381 101.439 0 183.673 82.233 183.673 183.673 0 5.695-0.259 11.328-0.766 16.89l0.052-0.716v58.495c0 24.229 19.642 43.871 43.871 43.871s43.871-19.642 43.871-43.871v0-58.495c0.352-5.164 0.553-11.193 0.553-17.269 0-149.252-120.994-270.246-270.246-270.246-4.515 0-9.003 0.111-13.464 0.329l0.628-0.025c-1.804-0.044-3.929-0.069-6.060-0.069-147.637 0-267.321 119.684-267.321 267.321 0 3.728 0.077 7.436 0.228 11.127l-0.018-0.528v190.108h-131.613c-24.229 0-43.871 19.642-43.871 43.871s19.642 43.871 43.871 43.871v0h131.613v175.484l-155.595 223.45c-3.958 6.515-6.3 14.39-6.3 22.813s2.343 16.298 6.411 23.010l-0.111-0.197c7.358 14.007 21.805 23.398 38.447 23.398 0.056 0 0.112 0 0.169 0h633.489c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pound"]},"attrs":[{}],"properties":{"order":303,"id":236,"name":"pound","prevSize":80,"code":59883},"setIdx":0,"setId":1,"iconIdx":25},{"icon":{"paths":["M727.036 469.12l-70.398-16 55.038 78.078v242.556l187.516-156.157v-265.595l-86.398 30.719-85.758 86.398z","M289.285 469.12l-86.398-86.398-85.758-30.719v265.595l187.516 156.157v-242.556l55.038-78.078-70.398 16z","M586.238 476.8h-156.157l-39.040-23.68-62.718 94.078v351.993l46.72 69.759 55.038 55.038h156.157l55.038-55.038 46.72-69.759v-351.993l-62.718-94.078-39.040 23.68z","M711.676 922.231l101.117-101.758v-101.117l-101.117 85.758v117.118z","M202.886 820.473l101.758 101.758v-117.118l-101.758-85.758v101.117z","M453.122 445.442h39.679v-445.431h-86.398l-62.079 147.837-282.234-23.040 47.359 195.836 335.993 124.797h7.68z","M671.997 147.848l-62.079-147.837h-86.398v447.991h52.479l335.993-127.997 47.999-191.996z","M852.474 109.449l-110.078-109.438h-109.438l55.038 124.797 164.476-15.36z","M382.722 0.011h-109.438l-109.438 109.438 164.476 15.36 54.399-124.797z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["prime"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":307,"id":235,"name":"prime","prevSize":80,"code":59882},"setIdx":0,"setId":1,"iconIdx":26},{"icon":{"paths":["M589.605 64.373v-18.004c-0.345-25.576-20.987-46.218-46.53-46.563h-0.033c-300.373 1.794-543.179 245.708-543.179 546.331 0 98.823 26.237 191.517 72.126 271.496l-1.409-2.663c8.24 13.842 23.126 22.972 40.145 22.972 0.074 0 0.148 0 0.221 0h-0.012c8.464-0.017 16.386-2.321 23.186-6.325l-0.215 0.116 18.004-9.313c88.223 122.529 230.468 201.375 391.129 201.375 265.391 0 480.531-215.14 480.531-480.531 0-248.992-189.376-453.753-431.953-478.105l-2.014-0.163zM496.478 95.416v420.93l-365.676 209.844c-24.009-53.406-37.995-115.765-37.995-181.391 0-232.603 175.709-424.166 401.636-449.201l2.036-0.183zM543.042 931.068c-126.56-0.365-238.867-61.070-309.71-154.848l-0.712-0.982 333.392-191.84c14.165-7.849 23.596-22.711 23.596-39.775 0-0.204-0.001-0.407-0.004-0.611v0.031-384.921c192.214 25.131 339.099 187.876 339.099 384.928 0 213.47-172.379 386.677-385.534 388.018h-0.128z"],"attrs":[{}],"grid":16,"tags":["chart-pie"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":301,"id":234,"name":"chart-pie","prevSize":80,"code":59881},"setIdx":0,"setId":1,"iconIdx":27},{"icon":{"paths":["M399.361 614.401c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2c28.276 0 51.199 22.923 51.199 51.2v0c0 28.276-22.923 51.2-51.199 51.2v0zM1023.999 512c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-282.77 229.23-512 512-512v0c282.769 0 512 229.23 512 512v0zM750.721 426.88c-18.359 1.113-34.69 8.976-46.715 21.114l-0.006 0.006c-49.923-33.418-111.167-53.62-177.080-54.397l-0.199-0.001 35.84-161.921 114.56 25.601c-0.003 0.191-0.005 0.416-0.005 0.641 0 27.924 22.636 50.56 50.56 50.56 0.002 0 0.003 0 0.005 0v0c28.355-0.361 51.2-23.43 51.2-51.836 0-0.001 0-0.003 0-0.004v0c0.016-0.492 0.027-1.071 0.027-1.653 0-27.924-22.637-50.56-50.561-50.56-20.408 0-37.99 12.090-45.978 29.498l-0.129 0.315-128-28.16c-0.688-0.138-1.481-0.217-2.292-0.217-5.656 0-10.412 3.862-11.77 9.093l-0.018 0.084-39.679 178.56c-66.101 0.974-127.301 21.143-178.501 55.164l1.221-0.764c-12.464-12.858-29.895-20.838-49.191-20.838-37.821 0-68.48 30.66-68.48 68.48 0 26.584 15.148 49.632 37.286 60.978l0.386 0.18c-0.468 4.795-0.733 10.366-0.733 16.001s0.267 11.205 0.787 16.701l-0.054-0.702c0 108.16 122.239 196.48 272.64 196.48s272.64-88.32 272.64-196.48c0-0.084 0-0.183 0-0.282 0-11.484-1.399-22.639-4.039-33.308l0.2 0.95c20.889-11.994 34.732-34.174 34.732-59.588 0-36.756-28.957-66.749-65.302-68.408l-0.15-0.006zM608.64 666.88c-27.226 17.349-60.409 27.649-96 27.649s-68.773-10.302-96.732-28.086l0.732 0.435c-2.268-2.080-5.305-3.355-8.64-3.355s-6.372 1.275-8.649 3.365l0.009-0.009c-2.426 2.23-3.939 5.418-3.939 8.959s1.514 6.729 3.93 8.952l0.009 0.008c31.918 21.918 71.391 35.004 113.921 35.004s82.002-13.086 114.611-35.451l-0.692 0.447c2.426-2.231 3.939-5.418 3.939-8.959s-1.514-6.729-3.93-8.952l-0.009-0.007c-2.337-2.457-5.63-3.984-9.28-3.984s-6.943 1.527-9.274 3.978l-0.005 0.006zM624.639 512c-28.277 0-51.2 22.923-51.2 51.2s22.923 51.2 51.2 51.2c28.276 0 51.199-22.923 51.199-51.2v0c0-28.277-22.923-51.2-51.199-51.2v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["reddit"]},"attrs":[{}],"properties":{"order":299,"id":233,"name":"reddit","prevSize":80,"code":59880},"setIdx":0,"setId":1,"iconIdx":28},{"icon":{"paths":["M367.461 188.397c-7.939-7.93-18.905-12.836-31.014-12.836s-23.074 4.905-31.015 12.836v0l-292.589 292.589c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0l292.589 292.589c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0l-261.574-261.574 261.574-261.574c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z","M1011.156 480.986l-292.589-292.589c-7.817-7.298-18.345-11.779-29.92-11.779-24.239 0-43.889 19.649-43.889 43.889 0 11.575 4.481 22.104 11.803 29.946l-0.023-0.027 261.574 261.574-261.574 261.574c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0l292.589-292.589c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["code"]},"attrs":[{},{}],"properties":{"order":298,"id":232,"name":"code","prevSize":80,"code":59879},"setIdx":0,"setId":1,"iconIdx":29},{"icon":{"paths":["M936.767 0.034c-27.214 0.367-49.178 22.331-49.545 49.509v160.562l-55.49-55.49c-86.69-87.405-206.835-141.515-339.617-141.515-209.345 0-387.277 134.501-452.092 321.801l-1.011 3.36c-2.53 5.71-4.002 12.369-4.002 19.374 0 21.825 14.301 40.308 34.044 46.591l0.347 0.094c2.483 0.454 5.34 0.712 8.257 0.712s5.775-0.259 8.55-0.756l-0.293 0.043c21.606-0.226 39.922-14.066 46.794-33.339l0.108-0.351c19.528-56.988 50.528-105.653 90.48-145.309l0.022-0.022c68.806-68.546 163.72-110.925 268.534-110.925s199.729 42.378 268.547 110.936l55.478 55.478h-159.205c-27.363 0-49.545 22.182-49.545 49.545s22.182 49.545 49.545 49.545v0h280.095c0.198 0.003 0.432 0.005 0.666 0.005 26.997 0 48.884-21.887 48.884-48.884 0-0.234-0.002-0.468-0.005-0.7v0.036-280.755c0-27.363-22.182-49.545-49.545-49.545v0z","M953.281 622.981c-5.442-2.202-11.755-3.479-18.366-3.479-22.122 0-40.903 14.308-47.591 34.174l-0.104 0.355c-19.528 56.988-50.528 105.653-90.48 145.309l-0.022 0.022c-68.806 68.546-163.72 110.925-268.534 110.925s-199.729-42.378-268.547-110.936l-55.478-55.478h163.169c27.363 0 49.545-22.182 49.545-49.545s-22.182-49.545-49.545-49.545v0h-280.095c-0.198-0.003-0.432-0.005-0.666-0.005-26.997 0-48.884 21.887-48.884 48.884 0 0.234 0.002 0.468 0.005 0.7v-0.036 280.095c0 27.363 22.182 49.545 49.545 49.545s49.545-22.182 49.545-49.545v0-160.526l55.49 55.49c86.69 87.405 206.835 141.515 339.617 141.515 209.345 0 387.277-134.501 452.092-321.801l1.011-3.36c1.72-4.786 2.714-10.307 2.714-16.060 0-21.835-14.317-40.328-34.076-46.602l-0.347-0.094z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sync"]},"attrs":[{},{}],"properties":{"order":297,"id":231,"name":"sync","prevSize":80,"code":59878},"setIdx":0,"setId":1,"iconIdx":30},{"icon":{"paths":["M950.857 292.571h-175.543v-29.257c0-145.425-117.889-263.314-263.314-263.314s-263.314 117.889-263.314 263.314v0 29.257h-175.543c-40.395 0-73.142 32.747-73.142 73.142v0 497.372c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-497.372c0-40.395-32.747-73.142-73.142-73.142v0zM336.457 263.315c0-96.949 78.594-175.543 175.543-175.543s175.543 78.594 175.543 175.543v0 29.257h-351.086zM936.228 863.086c0 40.395-32.747 73.142-73.142 73.142v0h-702.171c-40.395 0-73.142-32.747-73.142-73.142v0-482.743h160.914v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h351.086v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h160.914z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shopping-bag"]},"attrs":[{}],"properties":{"order":296,"id":230,"name":"shopping-bag","prevSize":80,"code":59877},"setIdx":0,"setId":1,"iconIdx":31},{"icon":{"paths":["M1023.969 301.19v-180.695c0-33.265-26.967-60.232-60.232-60.232v0h-903.474c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0h903.474c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0zM963.737 903.505h-903.474v-180.695h903.474zM963.737 602.347h-903.474v-180.695h903.474zM963.737 301.19h-903.474v-180.695h903.474z","M210.842 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["server"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":295,"id":229,"name":"server","prevSize":80,"code":59876},"setIdx":0,"setId":1,"iconIdx":32},{"icon":{"paths":["M926.005 99.103c-121.161-57.959-262.777-93.948-412.236-99.026l-1.769-0.048c-151.228 5.125-292.843 41.116-420.425 101.823l6.42-2.75c-32.977 15.76-55.351 48.848-55.351 87.164 0 0.296 0.001 0.59 0.004 0.885v-0.045 649.789c-0.003 0.249-0.004 0.545-0.004 0.839 0 38.315 22.376 71.404 54.773 86.914l0.58 0.25c121.161 57.959 262.777 93.948 412.236 99.026l1.769 0.048c151.228-5.125 292.843-41.116 420.425-101.823l-6.42 2.75c32.977-15.76 55.351-48.848 55.351-87.164 0-0.296-0.001-0.59-0.004-0.885v0.045-649.789c0.003-0.249 0.004-0.545 0.004-0.839 0-38.315-22.376-71.404-54.773-86.914l-0.58-0.25zM899.438 541.888c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-213.644c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618zM132.864 174.375c110.92-53.263 240.582-86.42 377.448-91.277l1.688-0.048c138.75 5.006 268.584 38.151 385.604 93.859l-5.915-2.535c4.63 2.445 7.734 7.224 7.748 12.728v48.156c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-49.813c0.619-4.997 3.823-9.121 8.213-11.035l0.090-0.035zM891.136 849.625c-110.92 53.263-240.582 86.42-377.448 91.277l-1.688 0.048c-138.75-5.006-268.584-38.151-385.604-93.859l5.915 2.535c-4.63-2.445-7.734-7.224-7.748-12.728v-204.238c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618v204.235c0 0.014 0 0.031 0 0.048 0 5.64-3.374 10.492-8.214 12.647l-0.088 0.035z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["database"]},"attrs":[{}],"properties":{"order":294,"id":228,"name":"database","prevSize":80,"code":59875},"setIdx":0,"setId":1,"iconIdx":33},{"icon":{"paths":["M984.598 262.573h-157.533l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-45.159 180.113h-338.696l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-47.26 180.113h-179.062c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-85.593 341.321h-176.962c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h338.696l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h181.163c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0h-157.533l85.593-341.321h176.962c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0zM722.044 341.339l-85.593 341.321h-334.495l85.593-341.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["hashtag"]},"attrs":[{}],"properties":{"order":293,"id":227,"name":"hashtag","prevSize":80,"code":59874},"setIdx":0,"setId":1,"iconIdx":34},{"icon":{"paths":["M731.351 0.181h-438.702c-88.839 0-160.857 72.018-160.857 160.857v0 818.91c-0.001 0.096-0.001 0.21-0.001 0.324 0 24.229 19.642 43.87 43.87 43.87 9.418 0 18.143-2.968 25.291-8.020l-0.137 0.092 311.186-217.011 311.186 217.011c6.914 4.763 15.47 7.606 24.689 7.606 0.163 0 0.325-0.001 0.488-0.003h-0.025c7.45-0.092 14.477-1.807 20.773-4.808l-0.3 0.129c13.96-7.76 23.279-22.374 23.398-39.173v-818.927c0-88.839-72.018-160.857-160.857-160.857v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bookmark-fill"]},"attrs":[{}],"properties":{"order":290,"id":226,"name":"bookmark-fill","prevSize":80,"code":59871},"setIdx":0,"setId":1,"iconIdx":35},{"icon":{"paths":["M1004.095 24.725c-7.747-14.706-22.885-24.586-40.34-24.695h-903.493c-17.471 0.11-32.608 9.989-40.236 24.445l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.173 0 10.136 3.43 19.471 9.191 26.908l-0.075-0.1 322.241 440.294v466.797c0.335 24.813 20.361 44.839 45.141 45.174h240.96c24.813-0.335 44.839-20.361 45.174-45.141v-466.83l322.241-440.294c5.688-7.337 9.117-16.671 9.117-26.808 0-7.369-1.813-14.314-5.016-20.414l0.116 0.241z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["filter-fill"]},"attrs":[{}],"properties":{"order":289,"id":225,"name":"filter-fill","prevSize":80,"code":59872},"setIdx":0,"setId":1,"iconIdx":36},{"icon":{"paths":["M940.27 142.985v0c-52.342-52.898-124.95-85.655-205.208-85.655-0.25 0-0.502 0-0.752 0.001h0.039c-0.212 0-0.462-0.001-0.714-0.001-80.258 0-152.867 32.757-205.183 85.63l-0.025 0.025-16.427 17.013-16.427-16.427c-52.551-52.546-125.148-85.046-205.334-85.046s-152.783 32.5-205.336 85.047v0c-51.85 52.868-83.852 125.364-83.852 205.334s32.002 152.468 83.898 205.382l-0.045-0.047 397.176 398.35c7.96 7.95 18.953 12.869 31.093 12.869s23.133-4.917 31.094-12.869v0l397.176-398.35c51.673-52.835 83.555-125.21 83.555-205.032 0-80.411-32.354-153.263-84.754-206.251l0.026 0.026z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["heart-fill"]},"attrs":[{}],"properties":{"order":288,"id":224,"name":"heart-fill","prevSize":80,"code":59873},"setIdx":0,"setId":1,"iconIdx":37},{"icon":{"paths":["M944.92 71.496c-6.851-4.781-15.351-7.639-24.52-7.639-5.664 0-11.074 1.091-16.029 3.074l0.291-0.103c-63.404 28.272-136.947 48.827-213.986 57.993l-3.642 0.353c-50.961-13.852-95.595-33.813-136.214-59.541l2.021 1.195c-50.241-31.546-108.991-55.111-171.832-67.168l-3.203-0.511c-75.265-7.001-254.385 51.927-291.724 64.179-17.436 6.017-29.741 22.283-29.756 41.423v874.010c0 24.167 19.592 43.759 43.759 43.759s43.759-19.592 43.759-43.759v0-341.902c65.742-24.141 142.134-41.68 221.425-49.3l3.786-0.294c53.070 13.251 99.74 33.289 142.139 59.564l-2.111-1.218c47.311 29.399 102.324 52.182 160.994 65.266l3.539 0.663h13.419c91.412-12.072 174.279-35.196 251.871-68.295l-6.238 2.366c16.429-6.638 27.841-22.387 28.006-40.821v-497.12c0.056-0.823 0.088-1.785 0.088-2.753 0-13.438-6.14-25.443-15.767-33.361l-0.075-0.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag-fill"]},"attrs":[{}],"properties":{"order":287,"id":223,"name":"flag-fill","prevSize":80,"code":59870},"setIdx":0,"setId":1,"iconIdx":38},{"icon":{"paths":["M512 1023.989c-282.763 0-511.989-229.226-511.989-511.989s229.226-511.989 511.989-511.989c282.763 0 511.989 229.226 511.989 511.989v0c0 282.763-229.226 511.989-511.989 511.989v0zM512 85.343c-235.636 0-426.657 191.021-426.657 426.657s191.021 426.657 426.657 426.657c235.636 0 426.657-191.021 426.657-426.657v0c0-235.636-191.021-426.657-426.657-426.657v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle"]},"attrs":[{}],"properties":{"order":286,"id":222,"name":"circle","prevSize":80,"code":59868},"setIdx":0,"setId":1,"iconIdx":39},{"icon":{"paths":["M1023.989 512c0 282.763-229.226 511.989-511.989 511.989s-511.989-229.226-511.989-511.989c0-282.763 229.226-511.989 511.989-511.989s511.989 229.226 511.989 511.989z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle-fill"]},"attrs":[{}],"properties":{"order":285,"id":221,"name":"circle-fill","prevSize":80,"code":59869},"setIdx":0,"setId":1,"iconIdx":40},{"icon":{"paths":["M462.875 1024.834c-1.947 0.372-4.188 0.585-6.478 0.585s-4.531-0.213-6.702-0.62l0.224 0.035c-18.586-5.739-31.857-22.766-31.857-42.893 0-0.292 0.003-0.585 0.009-0.876l-0.001 0.044v-5.938l48.584-342.789h-234.284c-0.011 0-0.024 0-0.038 0-16.55 0-30.926-9.309-38.177-22.979l-0.114-0.234c-3.963-6.646-6.305-14.655-6.305-23.213s2.342-16.567 6.421-23.424l-0.116 0.211 107.965-188.4 221.328-351.967c7.563-12.608 21.158-20.914 36.694-20.914 4.633 0 9.094 0.739 13.272 2.105l-0.301-0.085c18.586 5.739 31.857 22.766 31.857 42.893 0 0.292-0.003 0.585-0.009 0.876l0.001-0.044v5.938l-48.584 342.789h234.824c0.011 0 0.024 0 0.038 0 16.55 0 30.926 9.309 38.177 22.979l0.114 0.234c3.963 6.646 6.305 14.655 6.305 23.213s-2.342 16.567-6.421 23.424l0.116-0.211-107.965 188.4-221.328 351.967c-7.762 11.483-20.733 18.931-35.445 18.931-0.634 0-1.265-0.014-1.893-0.042l0.090 0.003zM434.265 959.516v0zM292.291 549.248h215.931c24.812 0.302 44.809 20.488 44.809 45.342 0 0.191-0.001 0.382-0.004 0.572v-0.029 5.938l-31.849 223.488 134.957-215.931 77.735-133.876h-215.931c-24.812-0.302-44.809-20.488-44.809-45.342 0-0.191 0.001-0.382 0.004-0.572v0.029-5.938l31.849-223.488-134.957 215.931zM589.735 63.945v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bolt"]},"attrs":[{}],"properties":{"order":284,"id":220,"name":"bolt","prevSize":80,"code":59867},"setIdx":0,"setId":1,"iconIdx":41},{"icon":{"paths":["M876.353 155.475c-91.36-90.984-217.374-147.233-356.525-147.233s-265.163 56.249-356.542 147.25l-72.854 72.854v-175.251c0-24.945-20.222-45.168-45.168-45.168s-45.168 20.222-45.168 45.168v0 285.461c0 0.001 0 0.003 0 0.004 0 25.067 20.15 45.426 45.135 45.766h286.096c24.945 0 45.168-20.222 45.168-45.168s-20.222-45.168-45.168-45.168v0h-180.671l76.485-74.678c74.952-74.805 178.417-121.062 292.688-121.062s217.736 46.257 292.695 121.070l-0.007-0.007c372.786 402.897-180.671 958.161-585.375 585.375-8.171-8.161-19.456-13.21-31.918-13.21s-23.747 5.048-31.92 13.21v0c-8.309 8.103-13.464 19.409-13.464 31.918s5.155 23.815 13.454 31.91l0.010 0.008c91.243 91.243 217.293 147.678 356.525 147.678 278.462 0 504.201-225.739 504.201-504.201 0-139.231-56.434-265.282-147.678-356.525v0z","M512 256.049c-24.81 0.335-44.833 20.358-45.168 45.135v210.815c0.011 12.468 5.073 23.753 13.248 31.918v0l152.367 148.753c8.084 8.182 19.304 13.25 31.708 13.25 0.073 0 0.148 0 0.222 0h-0.011c21.988-3.292 38.658-22.048 38.658-44.696 0-10.97-3.91-21.026-10.413-28.851l0.059 0.073-137.31-137.31v-193.921c-0.294-24.201-19.326-43.864-43.245-45.162l-0.116-0.006z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["history"]},"attrs":[{},{}],"properties":{"order":283,"id":219,"name":"history","prevSize":80,"code":59866},"setIdx":0,"setId":1,"iconIdx":42},{"icon":{"paths":["M1022.811 776.474s0-4.096 0-6.436v-516.077c-0.023-7.052-1.751-13.696-4.793-19.546l0.112 0.237c-4.397-9.329-11.736-16.668-20.801-20.952l-0.263-0.112-468.096-209.474c-5.326-2.478-11.563-3.924-18.139-3.924s-12.811 1.445-18.411 4.037l0.272-0.112-468.096 209.474c-14.982 7.661-25.187 22.762-25.744 40.299l-0.001 0.074v516.077c0.941 17.495 11.005 32.44 25.487 40.246l0.258 0.128 468.096 209.474c5.306 2.591 11.546 4.105 18.139 4.105s12.832-1.514 18.389-4.214l-0.251 0.11 468.096-209.474c13.538-6.306 23.285-18.763 25.711-33.677l0.034-0.259zM86.616 321.251l380.328 170.856v420.117l-380.328-170.27zM554.714 492.105l380.328-170.856v420.702l-380.328 170.27zM512 91.883l361.019 162.079-361.019 161.493-361.019-161.493z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["box"]},"attrs":[{}],"properties":{"order":282,"id":218,"name":"box","prevSize":80,"code":59865},"setIdx":0,"setId":1,"iconIdx":43},{"icon":{"paths":["M512 0.027c-282.755 0-511.973 229.218-511.973 511.973v0c-0.022 1.75-0.034 3.816-0.034 5.886 0 279.524 226.599 506.123 506.123 506.123 2.069 0 4.135-0.012 6.199-0.037l-0.313 0.003c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0c-1.399 0.016-3.053 0.026-4.708 0.026-231.698 0-419.526-187.828-419.526-419.526 0-1.655 0.010-3.308 0.029-4.959l-0.003 0.251c0.333-234.15 190.058-423.874 424.174-424.206h0.032c281.439 0 424.206 142.768 424.206 424.206v80.745c0.187 2.116 0.292 4.578 0.292 7.064 0 47.18-38.247 85.426-85.426 85.426s-85.426-38.247-85.426-85.426c0-2.486 0.106-4.948 0.314-7.381l-0.022 0.317v-292.556c0-24.236-19.647-43.883-43.883-43.883s-43.883 19.647-43.883 43.883v0 19.894c-44.051-38.526-102.099-62.022-165.637-62.022-0.188 0-0.377 0-0.565 0h0.029c-140.246 0-253.938 113.692-253.938 253.938s113.692 253.938 253.938 253.938v0c75.633-0.27 143.364-33.87 189.31-86.869l0.266-0.313c30.329 52.256 86.021 86.836 149.789 86.836 95.329 0 172.609-77.279 172.609-172.609 0-0.084 0-0.169 0-0.252v0.014-80.745c0-330.003-181.969-511.973-511.973-511.973zM512 678.171c-91.774 0-166.171-74.397-166.171-166.171s74.397-166.171 166.171-166.171c91.774 0 166.171 74.397 166.171 166.171v0c-0.332 91.641-74.532 165.841-166.14 166.171h-0.032z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["at"]},"attrs":[{}],"properties":{"order":281,"id":217,"name":"at","prevSize":80,"code":59864},"setIdx":0,"setId":1,"iconIdx":44},{"icon":{"paths":["M273.927 128.663c-27.857 0-50.44 22.582-50.44 50.44s22.582 50.44 50.44 50.44v0h449.244l-579.714 579.714c-9.89 9.234-16.053 22.349-16.053 36.904 0 27.857 22.582 50.44 50.44 50.44 14.555 0 27.668-6.164 36.874-16.025l0.028-0.030 579.714-579.714v449.244c0 27.857 22.582 50.44 50.44 50.44s50.44-22.582 50.44-50.44v0-570.97c-0.038-7.053-1.518-13.753-4.16-19.829l0.126 0.327c-7.47-17.225-23.668-29.376-42.86-30.924l-0.182-0.011z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-right"]},"attrs":[{}],"properties":{"order":309,"id":216,"name":"arrow-up-right","prevSize":80,"code":59860},"setIdx":0,"setId":1,"iconIdx":45},{"icon":{"paths":["M128.665 750.071c0 27.856 22.582 50.438 50.438 50.438s50.438-22.582 50.438-50.438v0-449.241l579.71 579.71c9.233 9.89 22.348 16.053 36.903 16.053 27.856 0 50.438-22.582 50.438-50.438 0-14.555-6.164-27.668-16.025-36.874l-0.030-0.028-579.71-579.71h449.241c27.856 0 50.438-22.582 50.438-50.438s-22.582-50.438-50.438-50.438v0h-570.968c-7.053 0.038-13.753 1.518-19.829 4.16l0.327-0.126c-18.183 7.953-30.702 25.689-30.935 46.373v0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-left"]},"attrs":[{}],"properties":{"order":278,"id":215,"name":"arrow-up-left","prevSize":80,"code":59861},"setIdx":0,"setId":1,"iconIdx":46},{"icon":{"paths":["M749.048 893.688c27.738 0 50.223-22.484 50.223-50.223s-22.484-50.223-50.223-50.223v0h-447.31l577.218-577.218c9.846-9.194 15.985-22.253 15.985-36.744 0-27.738-22.484-50.223-50.223-50.223-14.491 0-27.549 6.138-36.714 15.954l-0.028 0.030-577.218 577.218v-447.31c0-27.738-22.484-50.223-50.223-50.223s-50.223 22.484-50.223 50.223v0 571.861c0.038 7.024 1.513 13.694 4.144 19.745l-0.126-0.325c7.919 18.102 25.578 30.57 46.174 30.801h0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-left"]},"attrs":[{}],"properties":{"order":279,"id":214,"name":"arrow-down-left","prevSize":80,"code":59862},"setIdx":0,"setId":1,"iconIdx":47},{"icon":{"paths":["M896.598 273.145c0-27.949-22.657-50.606-50.606-50.606s-50.606 22.657-50.606 50.606v0 450.722l-581.62-581.62c-9.013-8.416-21.152-13.58-34.498-13.58-27.949 0-50.606 22.657-50.606 50.606 0 13.348 5.166 25.486 13.61 34.529l-0.028-0.030 581.62 581.62h-450.722c-27.949 0-50.606 22.657-50.606 50.606s22.657 50.606 50.606 50.606v0h576.221c7.076-0.039 13.797-1.525 19.894-4.175l-0.328 0.126c15.905-8.356 26.772-24.403 27.661-43.066l0.006-0.114z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-right"]},"attrs":[{}],"properties":{"order":280,"id":213,"name":"arrow-down-right","prevSize":80,"code":59863},"setIdx":0,"setId":1,"iconIdx":48},{"icon":{"paths":["M512 0.011c-282.764 0-511.989 229.225-511.989 511.989s229.225 511.989 511.989 511.989c282.764 0 511.989-229.225 511.989-511.989v0c0-282.764-229.225-511.989-511.989-511.989v0zM763.515 350.723l-83.838 396.152c-6.4 28.159-23.040 34.559-46.72 21.76l-127.997-94.719-63.999 59.519c-5.961 7.732-15.19 12.694-25.582 12.799h-0.016l8.959-127.997 236.796-214.395c10.879-8.959 0-14.080-15.36-5.119l-290.555 182.396-127.997-39.679c-27.52-8.32-28.159-27.52 5.76-40.319l493.43-191.996c24.319-7.039 44.8 7.039 37.12 41.599z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["telegram"]},"attrs":[{}],"properties":{"order":276,"id":212,"name":"telegram","prevSize":80,"code":59859},"setIdx":0,"setId":1,"iconIdx":49},{"icon":{"paths":["M512 1023.991c-282.764 0-511.991-229.227-511.991-511.991s229.227-511.991 511.991-511.991c282.764 0 511.991 229.227 511.991 511.991v0c0 282.764-229.227 511.991-511.991 511.991v0zM512 85.341c-235.637 0-426.659 191.022-426.659 426.659s191.022 426.659 426.659 426.659c235.637 0 426.659-191.022 426.659-426.659v0c0-235.637-191.022-426.659-426.659-426.659v0z","M369.78 284.448h284.439c47.127 0 85.332 38.205 85.332 85.332v284.439c0 47.127-38.205 85.332-85.332 85.332h-284.439c-47.127 0-85.332-38.205-85.332-85.332v-284.439c0-47.127 38.205-85.332 85.332-85.332z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["stop-circle"]},"attrs":[{},{}],"properties":{"order":275,"id":211,"name":"stop-circle","prevSize":80,"code":59858},"setIdx":0,"setId":1,"iconIdx":50},{"icon":{"paths":["M842.308 1023.979h-660.618c-100.333 0-181.669-81.336-181.669-181.669v0-660.618c0-100.333 81.336-181.669 181.669-181.669v0h660.618c100.333 0 181.669 81.336 181.669 181.669v0 660.618c0 100.333-81.336 181.669-181.669 181.669v0zM181.692 99.114c-45.606 0-82.577 36.971-82.577 82.577v0 660.618c0 45.606 36.971 82.577 82.577 82.577v0h660.618c45.606 0 82.577-36.971 82.577-82.577v0-660.618c0-45.606-36.971-82.577-82.577-82.577v0z"],"attrs":[{}],"grid":16,"tags":["stop"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":274,"id":210,"name":"stop","prevSize":80,"code":59857},"setIdx":0,"setId":1,"iconIdx":51},{"icon":{"paths":["M870.378 148.502c-91.041-91.707-217.17-148.474-356.557-148.474-0.64 0-1.281 0.001-1.92 0.003h0.099c-280.418 0.282-507.634 227.671-507.634 508.129 0 93.024 24.997 180.211 68.642 255.208l-1.302-2.422-71.676 263.024 268.784-70.395c69.896 39.602 153.381 63.238 242.321 63.995l0.223 0.001c0.006 0 0.012 0 0.019 0 281.177 0 509.412-226.669 511.947-507.248l0.001-0.241c-0.978-141.618-59.303-269.426-152.883-361.512l-0.067-0.066zM512 929.894c-0.081 0-0.178 0-0.274 0-79.234 0-153.358-21.884-216.656-59.938l1.903 1.060-15.359-9.599-159.35 42.237 42.237-155.511-10.24-16c-39.739-63.209-63.313-140.066-63.313-222.43 0-233.27 189.104-422.374 422.374-422.374 115.76 0 220.644 46.569 296.938 121.995l-0.040-0.039c77.623 75.954 126.276 181.243 127.989 297.901l0.003 0.321c-2.173 233.734-192.155 422.374-426.196 422.374-0.006 0-0.012 0-0.018 0h0.001zM743.026 613.754c-12.799-6.4-74.875-37.118-86.395-40.958s-20.478-6.4-28.798 6.4c-13.451 18.342-26.668 34.402-40.702 49.701l0.384-0.424c-7.039 8.959-14.719 9.599-27.519 0-73.887-29.731-133.426-82.24-171.269-148.708l-0.882-1.681c-13.439-22.398 12.799-21.119 37.118-69.116 1.722-3.252 2.733-7.107 2.733-11.2s-1.011-7.948-2.796-11.332l0.064 0.132c0-6.4-28.798-69.116-39.038-94.074s-20.478-21.119-28.798-21.759h-24.958c-13.577 0.214-25.68 6.352-33.865 15.937l-0.052 0.063c-26.196 25.492-42.447 61.088-42.447 100.48 0 2.698 0.076 5.38 0.226 8.041l-0.016-0.369c4.318 50.122 23.15 95.162 52.219 131.69l-0.382-0.498c54.892 81.39 128.004 146.508 213.743 190.496l3.204 1.492c35.584 21.122 78.444 33.605 124.218 33.605 9.899 0 19.661-0.583 29.254-1.719l-1.162 0.112c36.419-7.408 66.636-29.449 84.793-59.581l0.322-0.576c5.793-12.526 9.172-27.184 9.172-42.632 0-6.192-0.543-12.256-1.582-18.147l0.091 0.624c-5.76-6.4-14.080-9.599-26.878-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["whatsapp"]},"attrs":[{}],"properties":{"order":273,"id":209,"name":"whatsapp","prevSize":80,"code":59856},"setIdx":0,"setId":1,"iconIdx":52},{"icon":{"paths":["M365.722 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M877.694 936.204h-29.255v-892.294c-0.325-24.104-19.779-43.558-43.852-43.883h-585.142c-24.104 0.325-43.558 19.779-43.883 43.852v892.325h-29.255c-24.236 0-43.883 19.647-43.883 43.883s19.647 43.883 43.883 43.883v0h731.387c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0zM760.671 936.204h-307.183v-131.65c0-16.157-13.098-29.255-29.255-29.255v0h-58.511c-16.157 0-29.255 13.098-29.255 29.255v0 131.65h-73.138v-848.41h497.344z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["building"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":272,"id":208,"name":"building","prevSize":80,"code":59855},"setIdx":0,"setId":1,"iconIdx":53},{"icon":{"paths":["M561.547 0.023v462.433h462.433v-462.433zM924.887 363.362h-264.247v-264.247h264.247z","M0.023 462.454h462.433v-462.433h-462.433zM99.116 99.116h264.247v264.247h-264.247z","M0.023 1023.98h462.433v-462.433h-462.433zM99.116 660.64h264.247v264.247h-264.247z","M561.547 561.547h115.609v115.609h-115.609v-115.609z","M792.764 561.547h115.609v115.609h-115.609v-115.609z","M677.156 677.156h115.609v115.609h-115.609v-115.609z","M908.371 677.156h115.609v115.609h-115.609v-115.609z","M561.547 792.764h115.609v115.609h-115.609v-115.609z","M792.764 792.764h115.609v115.609h-115.609v-115.609z","M677.156 908.371h115.609v115.609h-115.609v-115.609z","M908.371 908.371h115.609v115.609h-115.609v-115.609z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["qrcode"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":271,"id":207,"name":"qrcode","prevSize":80,"code":59854},"setIdx":0,"setId":1,"iconIdx":54},{"icon":{"paths":["M966.767 407.505l-107.415-291.887c-13.941-40.405-51.44-68.998-95.682-69.469h-502.102c-43.76 0.101-81.048 27.7-95.509 66.429l-0.231 0.706-107.415 291.887c-34.342 16.711-57.732 51.084-58.377 90.984l-0.001 0.085v262.699c-0.012 0.59-0.019 1.285-0.019 1.983 0 35.143 17.95 66.093 45.181 84.184l0.372 0.233s0 3.503 0 3.503v116.754c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-102.161h583.775v102.161c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-116.754s0 0 0-3.503c26.927-18.415 44.367-48.984 44.367-83.626 0-0.155 0-0.308-0.001-0.462v0.023-262.699c-0.415-39.752-23.34-74.055-56.62-90.799l-0.59-0.27zM935.826 761.273c0 8.060-6.535 14.595-14.595 14.595v0h-817.284c-8.060 0-14.595-6.535-14.595-14.595v0-262.699c0-8.060 6.535-14.595 14.595-14.595v0h817.284c8.060 0 14.595 6.535 14.595 14.595v0zM248.14 143.055c2.145-5.454 7.332-9.259 13.417-9.341h502.055c6.095 0.082 11.281 3.887 13.392 9.241l0.034 0.099 81.728 224.169h-692.357z","M366.646 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z","M833.667 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["car"]},"attrs":[{},{},{}],"properties":{"order":270,"id":206,"name":"car","prevSize":80,"code":59853},"setIdx":0,"setId":1,"iconIdx":55},{"icon":{"paths":["M512 249.365c-145.049 0-262.635 117.585-262.635 262.635s117.585 262.635 262.635 262.635c145.049 0 262.635-117.585 262.635-262.635v0c0-0.191 0.002-0.416 0.002-0.641 0-144.695-117.299-261.995-261.995-261.995-0.225 0-0.45 0-0.676 0.002h0.035zM512 683.033c-94.459 0-171.033-76.575-171.033-171.033s76.575-171.033 171.033-171.033c94.459 0 171.033 76.575 171.033 171.033v0c0 94.459-76.575 171.033-171.033 171.033v0zM847.020 238.475c0 35.378-28.68 64.058-64.058 64.058s-64.058-28.68-64.058-64.058c0-35.378 28.68-64.058 64.058-64.058v0c35.378 0 64.058 28.68 64.058 64.058v0zM1020.615 302.532c0.053-2.1 0.083-4.576 0.083-7.056 0-80.466-31.5-153.574-82.841-207.667l0.125 0.132c-54.19-52.344-128.080-84.599-209.504-84.599-1.79 0-3.575 0.015-5.357 0.047l0.267-0.003c-83.275-3.843-339.503-3.843-422.778 0-1.952-0.045-4.253-0.071-6.559-0.071-80.622 0-153.889 31.489-208.175 82.838l0.141-0.134c-51.217 53.961-82.717 127.069-82.717 207.535 0 2.482 0.030 4.956 0.090 7.423l-0.008-0.366c-3.843 83.275-3.843 339.503 0 422.778-0.053 2.1-0.083 4.576-0.083 7.056 0 80.466 31.5 153.574 82.841 207.667l-0.125-0.132c54.143 51.217 127.412 82.705 208.032 82.705 2.306 0 4.608-0.026 6.902-0.077l-0.342 0.006c84.556 5.124 338.223 5.124 422.778 0 2.1 0.053 4.576 0.083 7.056 0.083 80.466 0 153.574-31.5 207.667-82.841l-0.132 0.125c51.217-53.961 82.717-127.069 82.717-207.535 0-2.482-0.030-4.956-0.090-7.423l0.008 0.366c3.843-83.275 3.843-339.503 0-422.778zM911.718 814.991c-17.965 44.669-52.697 79.402-96.206 96.954l-1.162 0.414c-68.692 14.541-147.62 22.867-228.491 22.867-25.987 0-51.772-0.86-77.33-2.552l3.471 0.185c-22.061 1.512-47.813 2.374-73.767 2.374-80.681 0-159.416-8.328-235.394-24.172l7.451 1.3c-44.669-17.965-79.402-52.697-96.954-96.206l-0.414-1.162c-26.904-67.901-21.139-228.044-21.139-302.351s-5.765-235.091 21.139-302.351c17.48-45.144 52.371-80.244 96.218-97.607l1.149-0.401c68.527-14.544 147.262-22.873 227.943-22.873 25.954 0 51.706 0.862 77.231 2.558l-3.464-0.185c22.086-1.509 47.872-2.368 73.859-2.368 80.871 0 159.799 8.326 235.971 24.167l-7.48-1.3c44.669 17.965 79.402 52.697 96.954 96.206l0.414 1.162c26.904 67.901 20.498 228.044 20.498 302.351s6.406 235.091-20.498 302.351z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["instagram"]},"attrs":[{}],"properties":{"order":268,"id":205,"name":"instagram","prevSize":80,"code":59852},"setIdx":0,"setId":1,"iconIdx":56},{"icon":{"paths":["M942.030 0.060h-854.301c-1.171-0.058-2.544-0.091-3.924-0.091-44.98 0-81.687 35.426-83.74 79.897l-0.007 0.184v856.22c1.381 47.853 39.817 86.288 87.54 87.666l0.129 0.003h854.301c45.688-2.098 81.934-39.649 81.934-85.666 0-0.705-0.009-1.408-0.025-2.109l0.001 0.103v-856.22c0.007-0.4 0.012-0.873 0.012-1.345 0-43.471-35.24-78.711-78.711-78.711-1.129 0-2.253 0.024-3.37 0.070l0.159-0.006zM320.022 853.72h-149.102v-456.266h149.102zM248.991 328.342v0c-0.784 0.028-1.705 0.046-2.629 0.046-41.704 0-75.512-33.808-75.512-75.512 0-1.141 0.025-2.277 0.075-3.406l-0.006 0.16c-0.046-0.985-0.072-2.14-0.072-3.301 0-41.704 33.808-75.512 75.512-75.512 1.375 0 2.743 0.037 4.101 0.109l-0.189-0.007c0.784-0.028 1.705-0.046 2.629-0.046 41.704 0 75.512 33.808 75.512 75.512 0 1.141-0.025 2.277-0.075 3.406l0.006-0.16c0.046 0.985 0.072 2.14 0.072 3.301 0 41.704-33.808 75.512-75.512 75.512-1.375 0-2.743-0.037-4.101-0.109l0.189 0.007zM853.72 853.72h-149.743v-249.571c0-59.513-21.118-100.469-74.231-100.469-34.5 0.309-63.758 22.412-74.697 53.194l-0.174 0.559c-3.36 9.138-5.302 19.69-5.302 30.697 0 2.034 0.066 4.051 0.196 6.052l-0.013-0.271v259.81h-147.182v-456.266h147.182v63.993c25.685-46.508 74.423-77.484 130.396-77.484 1.402 0 2.8 0.019 4.194 0.058l-0.205-0.004c96.629 0 169.581 63.993 169.581 200.297z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["linkedin"]},"attrs":[{}],"properties":{"order":266,"id":204,"name":"linkedin","prevSize":80,"code":59851},"setIdx":0,"setId":1,"iconIdx":57},{"icon":{"paths":["M998.721 25.279c-15.31-15.206-36.405-24.601-59.695-24.601-9.365 0-18.373 1.518-26.795 4.325l0.597-0.173-854.831 285.138c-34.333 11.124-58.722 42.818-58.722 80.21 0 32.269 18.165 60.295 44.829 74.41l0.459 0.221 354.67 175.29 175.29 355.84c14.186 27.601 42.466 46.16 75.080 46.16 0.106 0 0.207 0 0.309 0h5.827c34.71-2.632 63.306-26.111 73.46-57.839l0.162-0.591 289.228-852.494c2.939-8.121 4.642-17.492 4.642-27.261 0-22.937-9.373-43.685-24.499-58.622l-0.010-0.010zM94.226 370.599l746.151-248.912-414.27 414.27zM653.984 929.774l-165.94-331.884 414.27-414.27z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["send"]},"attrs":[{}],"properties":{"order":263,"id":203,"name":"send","prevSize":80,"code":59850},"setIdx":0,"setId":1,"iconIdx":58},{"icon":{"paths":["M215.050 647.037c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517c0-59.379 48.138-107.517 107.517-107.517v0h107.517zM269.445 647.037c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0zM376.963 215.050c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517c59.379 0 107.517 48.138 107.517 107.517v0 107.517zM376.963 269.445c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517h-269.434c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517v0zM808.95 376.963c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517c0 59.379-48.138 107.517-107.517 107.517v0h-107.517v-107.517zM754.555 376.963c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0-269.434c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434zM647.037 808.95c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517c-59.379 0-107.517-48.138-107.517-107.517v0-107.517zM647.037 754.555c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517h269.434c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["slack"]},"attrs":[{}],"properties":{"order":262,"id":202,"name":"slack","prevSize":80,"code":59849},"setIdx":0,"setId":1,"iconIdx":59},{"icon":{"paths":["M517.309 1022.789c-22.691-0.029-45.007-1.526-66.885-4.41l2.595 0.278c-233.58-31.279-416.401-214.099-447.387-445.014l-0.291-2.662c-2.859-20.354-4.49-43.869-4.49-67.761 0-246.048 172.971-451.698 403.948-501.981l3.392-0.62c4.828-1.146 10.369-1.803 16.065-1.803 24.13 0 45.508 11.78 58.7 29.904l0.144 0.209c8.716 12.084 13.937 27.19 13.937 43.519 0 14.447-4.091 27.937-11.173 39.378l0.187-0.321c-26.726 45.102-42.523 99.41-42.523 157.408 0 16.683 1.308 33.056 3.823 49.030l-0.228-1.77c21.13 133.311 125.031 237.216 256.587 258.114l1.758 0.228c14.358 2.386 30.902 3.749 47.766 3.749 57.921 0 112.086-16.086 158.27-44.036l-1.366 0.768c10.914-6.566 24.086-10.453 38.167-10.453 16.715 0 32.146 5.473 44.609 14.724l-0.202-0.143c18.334 13.090 30.142 34.293 30.142 58.257 0 5.696-0.669 11.235-1.926 16.546l0.097-0.484c-49.878 235.319-255.888 409.342-502.54 409.342-0.413 0-0.822 0-1.235-0.001h0.064zM394.034 99.12c-178.936 53.807-307.056 217.078-307.056 410.275 0 236.171 191.454 427.623 427.623 427.623 193.197 0 356.468-128.116 409.491-304.027l0.784-3.028c-50.869 25.361-110.807 40.205-174.212 40.205-197.518 0-361.392-144.047-392.301-332.818l-0.31-2.3c-2.962-18.244-4.655-39.278-4.655-60.703 0-63.794 15.005-124.084 41.678-177.535l-1.042 2.307z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["moon"]},"attrs":[{}],"properties":{"order":261,"id":201,"name":"moon","prevSize":80,"code":59847},"setIdx":0,"setId":1,"iconIdx":60},{"icon":{"paths":["M512 806.395c-162.589 0-294.395-131.804-294.395-294.395s131.804-294.395 294.395-294.395c162.589 0 294.395 131.804 294.395 294.395v0c-0.29 162.471-131.922 294.103-294.366 294.395h-0.028zM512 294.404c-120.176 0-217.596 97.422-217.596 217.596s97.422 217.596 217.596 217.596c120.176 0 217.596-97.422 217.596-217.596v0c-0.29-120.058-97.538-217.306-217.567-217.596h-0.028z","M512 153.605c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M512 1023.99c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M985.591 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M115.206 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M230.404 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043-55.808-51.2c-7.14-7.14-11.557-17.006-11.557-27.903 0-21.794 17.667-39.461 39.461-39.461 10.897 0 20.763 4.417 27.903 11.557v0l51.2 55.808c6.068 6.763 9.778 15.747 9.778 25.599s-3.711 18.837-9.81 25.635l0.031-0.035c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M847.867 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003-52.736-55.808c-2.366-4.842-3.748-10.533-3.748-16.548 0-21.206 17.191-38.399 38.399-38.399 6.016 0 11.709 1.383 16.778 3.85l-0.227-0.099 55.808 51.2c6.939 6.946 11.231 16.541 11.231 27.135s-4.291 20.189-11.231 27.136v0c-6.701 7.568-16.317 12.423-27.072 12.798l-0.065 0.001z","M793.596 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043c-6.068-6.763-9.778-15.747-9.778-25.599s3.711-18.837 9.81-25.635l-0.031 0.035 51.2-55.808c7.14-7.14 17.006-11.557 27.903-11.557 21.794 0 39.461 17.667 39.461 39.461 0 10.897-4.417 20.763-11.557 27.903v0l-55.808 51.2c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M176.133 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003c-6.939-6.946-11.231-16.541-11.231-27.135s4.291-20.189 11.231-27.136v0l55.808-52.736c4.842-2.366 10.533-3.748 16.548-3.748 21.206 0 38.399 17.191 38.399 38.399 0 6.016-1.383 11.709-3.85 16.778l0.099-0.227-51.2 55.808c-6.876 6.978-16.43 11.301-26.992 11.301-0.591 0-1.178-0.014-1.761-0.042l0.082 0.003z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sun"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":260,"id":200,"name":"sun","prevSize":80,"code":59848},"setIdx":0,"setId":1,"iconIdx":61},{"icon":{"paths":["M1002.843 264.979c-11.885-44.735-46.258-79.32-89.974-91.303l-0.899-0.211c-108.991-13.585-235.136-21.338-363.093-21.338-12.967 0-25.913 0.079-38.842 0.238l1.964-0.020c-10.965-0.138-23.912-0.217-36.878-0.217-127.957 0-254.101 7.753-377.993 22.812l14.9-1.475c-44.618 12.192-78.989 46.777-90.67 90.619l-0.202 0.895c-13.45 71.849-21.144 154.515-21.144 238.976 0 2.83 0.010 5.654 0.025 8.48l-0.001-0.435c-0.015 2.515-0.025 5.487-0.025 8.463 0 84.76 7.694 167.728 22.419 248.235l-1.273-8.397c12.473 43.944 46.687 77.735 89.978 89.387l0.896 0.205c108.991 13.585 235.136 21.338 363.093 21.338 12.967 0 25.913-0.079 38.842-0.238l-1.964 0.020c10.965 0.138 23.912 0.217 36.878 0.217 127.957 0 254.101-7.753 377.993-22.812l-14.9 1.475c44.184-11.858 78.4-45.649 90.654-88.691l0.222-0.902c13.451-72.109 21.145-155.075 21.145-239.836 0-2.976-0.010-5.952-0.030-8.921l0.002 0.458c0.014-2.39 0.024-5.216 0.024-8.045 0-84.461-7.694-167.123-22.415-247.326l1.272 8.351zM407.049 664.948v-304.617l268.139 151.669-268.139 152.31z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["youtube"]},"attrs":[{}],"properties":{"order":245,"id":199,"name":"youtube","prevSize":80,"code":59845},"setIdx":0,"setId":1,"iconIdx":62},{"icon":{"paths":["M921.584 0.020h-819.169c-56.554 0-102.397 45.843-102.397 102.397v0 819.169c0 56.554 45.843 102.397 102.397 102.397h819.169c56.554 0 102.397-45.843 102.397-102.397v0-819.169c0-56.554-45.843-102.397-102.397-102.397v0zM861.428 339.846q-5.119 108.157-150.396 296.31c-100.477 127.996-186.234 195.834-255.991 195.834-43.518 0-79.358-39.678-109.437-119.677-58.239-213.112-83.198-337.908-127.996-337.908-22.288 9.156-41.514 20.78-58.626 34.868l0.387-0.309-34.559-44.799c85.118-74.878 166.394-158.075 217.592-162.554s90.237 33.919 105.597 118.396c47.358 300.15 68.477 345.588 154.236 209.272 23.167-31.534 40.499-68.894 49.548-109.38l0.37-1.973c8.32-76.157-58.878-71.038-104.956-51.198q53.118-179.195 206.712-174.714 113.917 3.84 107.517 147.835z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["vimeo"]},"attrs":[{}],"properties":{"order":246,"id":198,"name":"vimeo","prevSize":80,"code":59846},"setIdx":0,"setId":1,"iconIdx":63},{"icon":{"paths":["M945.168 71.244c-6.854-4.784-15.36-7.644-24.533-7.644-5.667 0-11.082 1.091-16.037 3.075l0.291-0.101c-63.362 27.754-136.884 48.272-213.777 57.97l-3.973 0.411c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525c-107.474 9.724-206.538 32.466-299.99 66.82l8.098-2.606c-17.445 6.019-29.758 22.294-29.774 41.446v874.511c0 24.18 19.602 43.782 43.782 43.782s43.782-19.602 43.782-43.782v0-341.516c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662h13.426c91.375-11.776 174.319-34.938 251.841-68.29l-6.068 2.323c16.532-6.508 28.021-22.337 28.021-40.848 0-0.004 0-0.013 0-0.017v0.001-496.801c0.058-0.822 0.086-1.787 0.086-2.754 0-13.445-6.144-25.457-15.776-33.379l-0.076-0.061zM876.865 575.050c-55.28 23.59-119.414 40.863-186.43 48.723l-3.3 0.316c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525h-11.676c-81.373 7.491-156.277 24.016-227.356 48.724l6.685-2.021v-408.651c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662c72.593-2.928 140.796-18.315 203.651-44.065l-3.998 1.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag"]},"attrs":[{}],"properties":{"order":247,"id":197,"name":"flag","prevSize":80,"code":59844},"setIdx":0,"setId":1,"iconIdx":64},{"icon":{"paths":["M921.328 234.242h-14.62v-131.569c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032c-2.11-0.402-4.538-0.635-7.018-0.635s-4.909 0.229-7.26 0.672l0.242-0.037-695.856 233.902h-15.789l-9.939 3.508h-8.187l-9.357 5.263-7.018 9.939-8.187 7.018-6.432 5.85-7.018 8.771c-1.843 1.659-3.402 3.587-4.62 5.733l-0.060 0.112c-1.923 2.94-3.872 6.386-5.601 9.962l-0.245 0.564-3.508 6.432c-1.391 3.423-2.79 7.711-3.925 12.107l-0.165 0.758c0.126 0.965 0.196 2.083 0.196 3.216s-0.070 2.252-0.21 3.346l0.014-0.13c-0.288 2.979-0.451 6.443-0.451 9.939s0.164 6.961 0.485 10.379l-0.033-0.436v584.754c0.266 54.991 43.614 99.77 98.010 102.322l0.229 0.010h818.656c56.383-0.331 102.001-45.949 102.333-102.301v-584.786c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032zM809.056 88.637c5.781 2.176 9.84 7.618 9.939 14.021v131.582h-446.167zM935.946 921.328c0 8.075-6.545 14.62-14.62 14.62v0h-818.656c-8.075 0-14.62-6.545-14.62-14.62v0-584.754c0-8.075 6.545-14.62 14.62-14.62v0h818.656c8.075 0 14.62 6.545 14.62 14.62v0z","M848.233 628.95c0 40.368-32.724 73.092-73.092 73.092s-73.092-32.724-73.092-73.092c0-40.368 32.724-73.092 73.092-73.092s73.092 32.724 73.092 73.092z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["wallet"]},"attrs":[{},{}],"properties":{"order":248,"id":196,"name":"wallet","prevSize":80,"code":59843},"setIdx":0,"setId":1,"iconIdx":65},{"icon":{"paths":["M974.245 49.171c-15.932-10.721-35.555-17.111-56.669-17.111-14.627 0-28.534 3.067-41.12 8.59l0.658-0.257-208.887 89.524-277.931-117.023c-10.185-4.441-22.051-7.024-34.522-7.024s-24.338 2.583-35.094 7.244l0.571-0.221-255.112 107.663c-39.245 17.382-66.129 55.99-66.129 100.873 0 0.535 0.003 1.071 0.012 1.601l-0.001-0.081v658.259c-0.001 0.193-0.001 0.422-0.001 0.65 0 38.606 19.576 72.638 49.339 92.718l0.396 0.252c15.932 10.721 35.555 17.111 56.669 17.111 14.627 0 28.534-3.067 41.12-8.59l-0.658 0.257 208.887-89.524 277.931 117.023c9.959 4.44 21.578 7.024 33.803 7.024 0.254 0 0.506-0.001 0.759-0.002h-0.037c12.47-0.016 24.335-2.597 35.099-7.244l-0.579 0.222 255.112-109.419c39.245-17.382 66.129-55.99 66.129-100.873 0-0.535-0.003-1.071-0.012-1.601l0.001 0.081v-656.503c0.001-0.193 0.001-0.422 0.001-0.65 0-38.606-19.576-72.638-49.339-92.718l-0.396-0.252zM399.657 107.683l224.685 95.96v709.749l-224.685-95.96zM112.365 902.859c-2.099 1.232-4.621 1.96-7.312 1.96s-5.216-0.728-7.384-1.996l0.067 0.036c-6.069-4.287-9.983-11.275-9.983-19.174 0-0.459 0.014-0.915 0.041-1.366l-0.002 0.063v-659.428c-0.001-0.106-0.002-0.225-0.002-0.349 0-9.66 5.999-17.916 14.475-21.246l0.156-0.052 209.473-90.694v706.823zM936.211 801.048c0.016 0.329 0.027 0.713 0.027 1.097 0 8.996-5.204 16.772-12.765 20.489l-0.133 0.060-211.228 90.694v-706.823l199.525-85.427c2.099-1.232 4.621-1.96 7.312-1.96s5.216 0.728 7.384 1.996l-0.067-0.036c6.069 4.287 9.983 11.275 9.983 19.174 0 0.459-0.014 0.915-0.041 1.366l0.002-0.063z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["map"]},"attrs":[{}],"properties":{"order":249,"id":195,"name":"map","prevSize":80,"code":59842},"setIdx":0,"setId":1,"iconIdx":66},{"icon":{"paths":["M232.89 877.709c-0.229 0.001-0.5 0.001-0.772 0.001-64.296 0-122.536-25.926-164.839-67.892l0.014 0.014c-41.67-44.195-67.28-103.927-67.28-169.644 0-70.104 29.144-133.401 75.978-178.432l0.081-0.077 220.011-221.767c46.236-47.686 110.48-77.679 181.734-78.989l0.242-0.003c64.887 0.446 123.436 27.23 165.557 70.178l0.036 0.036c42.26 44.485 68.256 104.777 68.256 171.139 0 70.733-29.531 134.567-76.936 179.85l-0.095 0.091-73.728 73.728c-8.035 8.605-19.444 13.968-32.108 13.968-24.236 0-43.886-19.648-43.886-43.886 0-12.665 5.363-24.073 13.943-32.084l0.025-0.023 71.384-76.068c31.073-29.214 50.426-70.586 50.426-116.481 0-41.8-16.055-79.851-42.334-108.318l0.099 0.109c-28.323-24.799-65.659-39.923-106.527-39.923-45.364 0-86.377 18.637-115.797 48.671l-0.027 0.027-218.256 221.181c-30.617 29.25-49.65 70.402-49.65 115.998 0 41.161 15.51 78.698 41.005 107.085l-0.133-0.148c26.409 26.109 62.734 42.236 102.824 42.236 5.002 0 9.944-0.251 14.816-0.741l-0.615 0.049c1.28-0.135 2.767-0.212 4.272-0.212 22.546 0 41.068 17.231 43.113 39.245l0.012 0.171c0.136 1.297 0.214 2.802 0.214 4.324 0 22.665-17.181 41.315-39.226 43.641l-0.191 0.015z","M545.938 863.081c-64.887-0.446-123.436-27.23-165.557-70.178l-0.036-0.036c-42.26-44.485-68.256-104.777-68.256-171.139 0-70.733 29.531-134.567 76.936-179.85l0.095-0.091 73.728-73.728c8.035-8.605 19.444-13.968 32.108-13.968 24.236 0 43.886 19.648 43.886 43.886 0 12.665-5.363 24.073-13.943 32.084l-0.025 0.023-71.384 76.068c-31.073 29.214-50.426 70.586-50.426 116.481 0 41.8 16.055 79.851 42.334 108.318l-0.099-0.109c28.323 24.799 65.659 39.923 106.527 39.923 45.364 0 86.377-18.637 115.797-48.671l0.027-0.027 220.596-221.181c29.874-29.148 48.402-69.807 48.402-114.793 0-41.733-15.944-79.74-42.074-108.264l0.109 0.122c-26.409-26.109-62.734-42.236-102.824-42.236-5.002 0-9.944 0.251-14.816 0.741l0.615-0.049c-1.28 0.135-2.767 0.212-4.272 0.212-22.546 0-41.068-17.231-43.113-39.245l-0.012-0.171c-0.136-1.297-0.214-2.802-0.214-4.324 0-22.665 17.181-41.315 39.226-43.641l0.191-0.015c7.239-0.795 15.632-1.247 24.131-1.247 63.452 0 121.008 25.25 163.166 66.25l-0.054-0.053c41.67 44.195 67.28 103.927 67.28 169.644 0 70.104-29.144 133.401-75.978 178.432l-0.081 0.077-220.011 221.767c-46.236 47.686-110.48 77.679-181.734 78.989l-0.242 0.003z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["link"]},"attrs":[{},{}],"properties":{"order":250,"id":194,"name":"link","prevSize":80,"code":59841},"setIdx":0,"setId":1,"iconIdx":67},{"icon":{"paths":["M921.589 117.040h-819.178c-56.419 0.331-102.067 45.977-102.398 102.366v585.16c0.331 56.419 45.977 102.067 102.366 102.398h819.209c56.419-0.331 102.067-45.977 102.398-102.366v-585.16c-0.331-56.419-45.977-102.067-102.366-102.398h-0.033zM102.411 204.808h819.178c8.080 0 14.628 6.551 14.628 14.628v0 131.653h-848.434v-131.653c0-8.080 6.551-14.628 14.628-14.628v0zM921.589 819.192h-819.178c-8.080 0-14.628-6.551-14.628-14.628v0-365.705h848.434v365.705c0 8.080-6.551 14.628-14.628 14.628v0z","M336.461 570.514h-117.025c-32.315 0-58.514 26.197-58.514 58.514s26.197 58.514 58.514 58.514v0h117.025c32.315 0 58.514-26.197 58.514-58.514s-26.197-58.514-58.514-58.514v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["credit-card"]},"attrs":[{},{}],"properties":{"order":251,"id":193,"name":"credit-card","prevSize":80,"code":59839},"setIdx":0,"setId":1,"iconIdx":68},{"icon":{"paths":["M867.007 182.851c-66.261-30.706-136.831-53.332-211.172-66.261-9.158 16.161-19.933 38.248-26.935 56.025-78.651-11.852-156.763-11.852-233.798 0-7.541-17.777-18.316-39.864-27.474-56.025-74.341 12.929-144.911 35.555-211.172 66.261-133.599 201.475-169.692 398.104-151.915 591.499 88.886 66.261 174.541 106.125 259.118 132.522 21.010-28.551 39.326-59.257 55.487-91.042-30.706-11.313-59.796-25.858-87.27-42.558 7.541-5.387 14.545-11.313 21.549-16.7 168.615 78.651 351.236 78.651 517.696 0 7.004 5.925 14.006 11.313 21.549 16.7-27.474 16.7-57.103 30.706-87.27 42.558 16.161 31.783 34.478 62.489 55.487 91.042 84.577-26.397 170.769-66.261 259.118-132.522 21.010-224.64-36.094-419.113-151.915-591.499zM341.769 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508zM681.692 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508z"],"attrs":[{}],"grid":16,"tags":["discord"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":252,"id":192,"name":"discord","prevSize":80,"code":59840},"setIdx":0,"setId":1,"iconIdx":69},{"icon":{"paths":["M71.252 1019.529c-0.094 0-0.205 0-0.308 0-18.338 0-34.928-7.49-46.876-19.583l-0.004-0.004c-12.065-12.080-19.533-28.766-19.533-47.194s7.46-35.107 19.533-47.195v0l881.496-881.496c12.224-13.091 29.586-21.252 48.86-21.252 36.88 0 66.781 29.901 66.781 66.781 0 19.267-8.161 36.636-21.215 48.818l-0.036 0.034-881.496 881.496c-11.952 12.097-28.542 19.587-46.879 19.587-0.11 0-0.221 0-0.324 0h0.016z","M200.36 400.703c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM200.36 133.579c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z","M823.64 1023.979c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM823.64 756.859c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["percentage"]},"attrs":[{},{},{}],"properties":{"order":253,"id":191,"name":"percentage","prevSize":80,"code":59838},"setIdx":0,"setId":1,"iconIdx":70},{"icon":{"paths":["M634.635 1025.058h-8.795c-278.481-6.291-501.825-233.529-501.825-512.936 0-143.581 58.979-273.384 154.031-366.506l0.087-0.085c90.386-89.279 214.664-144.424 351.826-144.424 4.737 0 9.461 0.066 14.166 0.197l-0.694-0.015c137.202 2.016 261.047 57.579 351.895 146.67l-0.082-0.081c7.946 7.955 12.862 18.943 12.862 31.077s-4.914 23.121-12.862 31.078v0c-7.955 7.946-18.943 12.862-31.077 12.862s-23.121-4.914-31.078-12.862v0c-76.784-75.59-182.227-122.264-298.57-122.264-235.104 0-425.69 190.589-425.69 425.69s190.589 425.69 425.69 425.69c110.943 0 211.975-42.441 287.744-111.973l-0.312 0.283 12.901-12.313c8.295-7.915 19.557-12.787 31.955-12.787s23.661 4.872 31.975 12.806l-0.018-0.018c8.518 7.555 13.858 18.529 13.858 30.751 0 10.778-4.154 20.587-10.95 27.911l0.023-0.026-2.931 2.931-17.003 16.418c-90.306 81.848-210.707 131.947-342.808 131.947-1.515 0-3.029-0.007-4.542-0.019l0.232 0.001z","M869.176 468.024h-820.891c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h820.891c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z","M781.223 643.928h-732.939c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h732.939c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["euro"]},"attrs":[{},{},{}],"properties":{"order":233,"id":190,"name":"euro","prevSize":80,"code":59837},"setIdx":0,"setId":1,"iconIdx":71},{"icon":{"paths":["M921.533 0.085h-716.682c-1.243-0.037-2.704-0.062-4.171-0.062-76.892 0-139.525 61.042-142.084 137.312l-0.005 0.236v725.456c3.196 89.572 76.578 160.974 166.638 160.974 1.887 0 3.764-0.032 5.636-0.094l-0.273 0.005h690.939c24.1-0.324 43.553-19.777 43.877-43.845v-936.102c-0.324-24.1-19.777-43.553-43.845-43.877h-0.032zM877.652 936.158h-647.059c-1.635 0.122-3.546 0.19-5.469 0.19-41.629 0-75.733-32.206-78.764-73.058l-0.015-0.26c3.043-41.116 37.15-73.322 78.779-73.322 1.923 0 3.834 0.068 5.723 0.205l-0.254-0.015h647.059zM877.652 702.141h-647.059c-30.908 0.035-59.934 8.052-85.138 22.102l0.893-0.458v-586.214c2.714-28.081 26.19-49.857 54.753-49.857 1.322 0 2.628 0.047 3.925 0.14l-0.175-0.011h672.802z","M321.859 321.859h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z","M321.859 526.626h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["book"]},"attrs":[{},{},{}],"properties":{"order":232,"id":189,"name":"book","prevSize":80,"code":59834},"setIdx":0,"setId":1,"iconIdx":72},{"icon":{"paths":["M512 1023.233c-5.884-0.076-11.5-1.139-16.713-3.034l0.353 0.112c-294.424-132.986-495.622-424.049-495.622-762.108 0-25.218 1.12-50.181 3.311-74.828l-0.228 3.185c1.091-20.259 15.977-36.738 35.376-40.276l0.266-0.038c170.071-26.272 323.191-75.689 464.402-145.534l-9.257 4.14c5.319-2.475 11.548-3.917 18.114-3.917s12.794 1.442 18.385 4.030l-0.271-0.112c131.953 65.702 285.069 115.119 446.231 140.248l8.916 1.146c19.665 3.576 34.547 20.055 35.634 40.204l0.003 0.11c1.964 21.462 3.084 46.42 3.084 71.642 0 338.056-201.194 629.119-490.377 759.984l-5.245 2.124c-4.86 1.783-10.476 2.845-16.326 2.921h-0.034zM88.991 226.293c-0.817 12.916-1.282 28.011-1.282 43.216 0 292.016 171.793 543.905 419.826 660.115l4.464 1.881c252.498-118.092 424.293-369.981 424.293-661.997 0-15.204-0.465-30.297-1.384-45.268l0.1 2.056c-158.673-27.438-300.659-73.974-432.589-137.992l9.58 4.192c-122.352 59.822-264.337 106.359-413.369 132.403l-9.639 1.394z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shield"]},"attrs":[{}],"properties":{"order":231,"id":188,"name":"shield","prevSize":80,"code":59833},"setIdx":0,"setId":1,"iconIdx":73},{"icon":{"paths":["M330.174 602.273c-7.682 42.896-39.055 245.207-48.017 302.191 0 4.482 0 5.762-7.042 5.762h-167.743c-0.080 0.001-0.175 0.001-0.271 0.001-15.204 0-27.532-12.324-27.532-27.532 0-1.356 0.097-2.688 0.287-3.989l-0.017 0.147 131.888-839.984c3.692-21.668 21.877-38.101 44.080-39.052l0.096-0.002c342.523 0 371.334-8.323 459.046 26.251 135.089 52.499 147.892 179.266 99.235 316.915s-163.261 201.671-315.635 203.593c-97.314 0-156.215-15.364-169.663 55.059zM883.334 277.035c-3.841-3.2-5.121-3.841-6.402 0-5.355 29.455-12.228 55.051-20.948 79.774l1.103-3.586c-89.632 256.095-338.682 234.965-460.326 234.965-0.779-0.096-1.678-0.148-2.591-0.148-11.979 0-21.761 9.396-22.379 21.221l-0.002 0.053c-50.578 320.115-64.022 384.138-64.022 384.138-0.348 1.539-0.545 3.309-0.545 5.121 0 13.404 10.837 24.274 24.228 24.326h143.414c19.695-0.387 35.904-14.834 39.022-33.697l0.032-0.236c0-12.164 0 14.084 32.653-206.154 10.243-49.297 32.013-44.176 64.022-44.176 159.417 0 284.262-64.022 320.115-256.095 6.318-18.661 9.965-40.158 9.965-62.502 0-57.89-24.469-110.067-63.632-146.751l-0.111-0.101z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["paypal"]},"attrs":[{}],"properties":{"order":229,"id":186,"name":"paypal","prevSize":80,"code":59835},"setIdx":0,"setId":1,"iconIdx":74},{"icon":{"paths":["M590.061 298.931c-114.531 3.839-397.983 35.193-397.983 268.094 0 250.818 326.32 261.056 433.175 99.176 33.603 38.347 68.51 73.249 105.572 105.755l1.281 1.101 133.727-127.968s-76.142-58.226-76.142-120.93v-335.917c0-57.586-57.586-188.114-264.895-188.114s-319.921 127.968-319.921 238.663l174.038 17.277c14.203-60.869 64.928-106.62 127.331-113.199l0.637-0.053c95.977 0 83.181 67.824 83.181 158.042zM590.061 497.283c0 182.995-198.352 155.482-198.352 39.029s119.010-127.968 198.352-131.807zM909.983 870.953c-103.709 94.959-242.457 153.142-394.795 153.142-5.62 0-11.222-0.080-16.805-0.238l0.821 0.018c-195.949-7.842-370.074-95.152-492.135-230.369l-0.545-0.613c-15.997-17.277 0-25.596 12.797-18.556 172.759 101.736 443.413 268.735 876.588 69.103 19.837-8.319 33.91 4.48 15.357 27.515zM1004.041 876.072c-11.535 27.968-28.737 51.536-50.314 70.185l-0.235 0.197c-12.797 10.238-22.395 6.399-15.357-8.319s46.068-106.215 30.074-127.968-87.020-9.598-113.251-7.038-30.714 4.48-32.634 0 51.186-35.829 88.3-40.309 96.617 0 108.772 13.437c1.186 7.461 1.861 16.066 1.861 24.83 0 26.848-6.362 52.211-17.654 74.664l0.435-0.957z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["amazon"]},"attrs":[{}],"properties":{"order":240,"id":185,"name":"amazon","prevSize":80,"code":59836},"setIdx":0,"setId":1,"iconIdx":75},{"icon":{"paths":["M886.693 1024.275h-13.467c-160.026-17.856-304.577-71.747-429.374-153.346l3.746 2.3c-119.858-77.12-218.914-175.988-293.94-291.862l-2.302-3.793c-79.488-121.374-133.409-266.357-150.654-422.398l-0.396-4.402c-0.449-4.129-0.705-8.915-0.705-13.764 0-33.499 12.23-64.138 32.468-87.698l-0.148 0.178c22.748-27.565 55.792-45.921 93.167-49.141l0.507-0.035h152.22c68.811 0.070 125.838 50.433 136.308 116.306l0.101 0.786c6.186 45.698 17.046 86.978 32.301 126.063l-1.274-3.701c5.445 14.293 8.602 30.826 8.602 48.093 0 38.102-15.36 72.621-40.225 97.697l-35.702 35.702c57.148 89.292 131.053 162.822 217.85 217.845l2.869 1.699 35.713-35.126c25.068-24.854 59.584-40.214 97.686-40.214 17.267 0 33.797 3.154 49.045 8.917l-0.956-0.318c35.315 13.822 76.581 24.675 119.402 30.688l2.96 0.339c66.678 10.304 117.132 67.286 117.132 136.053 0 1.155-0.014 2.306-0.044 3.455l0.002-0.171v140.51c0 0 0 0.001 0 0.001 0 76.101-61.525 137.836-137.551 138.165h-0.032zM277.818 87.541h-139.923c-14.387 0.979-27.011 7.794-35.649 18.070l-0.063 0.079c-7.402 8.481-11.91 19.649-11.91 31.87 0 1.557 0.075 3.102 0.218 4.622l-0.015-0.194c15.36 145.534 63.692 277.249 137.347 391.045l-2.107-3.473c70.038 108.811 159.916 198.686 265.265 266.637l3.46 2.091c110.418 72.299 242.202 121.557 384.020 137.782l4.14 0.385c0.876 0.051 1.901 0.082 2.931 0.082 14.116 0 26.923-5.614 36.306-14.733l-0.013 0.013c8.993-9.216 14.563-21.807 14.638-35.698v-139.938c0.005-0.32 0.012-0.7 0.012-1.075 0-25.332-18.708-46.298-43.066-49.826l-0.272-0.033c-53.039-7.261-100.842-19.551-146.288-36.646l4.608 1.52c-5.299-2.044-11.429-3.227-17.839-3.227-13.78 0-26.284 5.472-35.452 14.364l0.014-0.013-58.546 58.546c-8.012 7.814-18.974 12.637-31.061 12.637-7.941 0-15.396-2.080-21.853-5.726l0.223 0.115c-125.62-71.885-227.060-173.136-297.132-294.748l-2.038-3.837c-3.709-6.254-5.9-13.781-5.9-21.824 0-12.079 4.944-23.005 12.918-30.863l58.55-58.55c8.886-8.986 14.38-21.346 14.38-34.991 0-6.364-1.195-12.447-3.371-18.038l0.116 0.338c-15.651-40.876-27.948-88.685-34.741-138.244l-0.385-3.437c-3.034-25.502-24.528-45.088-50.597-45.088-0.323 0-0.646 0.002-0.971 0.011l0.048-0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["phone"]},"attrs":[{}],"properties":{"order":227,"id":184,"name":"phone","prevSize":80,"code":59832},"setIdx":0,"setId":1,"iconIdx":76},{"icon":{"paths":["M1004.108 24.712c-7.747-14.706-22.886-24.587-40.341-24.696h-421.65c-24.95 0-45.175 20.226-45.175 45.175s20.226 45.175 45.175 45.175v0h331.285l-111.431 154.198c-5.421 7.322-8.676 16.532-8.676 26.503 0 24.752 20.065 44.816 44.816 44.816 14.78 0 27.892-7.156 36.054-18.191l0.086-0.121 165.641-225.875c5.688-7.337 9.117-16.671 9.117-26.809 0-7.369-1.813-14.314-5.016-20.415l0.116 0.241z","M310.219 13.266s0 0-3.011 0c-3.291-2.852-7.063-5.273-11.155-7.112l-0.289-0.116c-3.885-1.54-8.385-2.612-13.079-3l-0.172-0.011h-222.261c-17.471 0.11-32.609 9.989-40.237 24.446l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.174 0 10.136 3.43 19.472 9.191 26.909l-0.075-0.1 322.25 437.295v466.81c0.335 24.814 20.362 44.84 45.142 45.175h240.967c24.814-0.335 44.84-20.362 45.175-45.142v-466.843l3.614-5.421 220.455 218.045c8.085 8.184 19.307 13.251 31.713 13.251 0.073 0 0.148 0 0.222 0h-0.011c0.137 0.001 0.299 0.003 0.462 0.003 12.327 0 23.47-5.072 31.455-13.244l0.008-0.008c8.162-8.172 13.212-19.46 13.212-31.923s-5.048-23.751-13.212-31.925v0zM596.326 470.439c-5.634 7.174-9.035 16.335-9.035 26.291 0 0.075 0 0.15 0 0.224v-0.011 436.692h-150.584v-436.692c0-0.064 0-0.138 0-0.212 0-9.955-3.401-19.117-9.105-26.384l0.071 0.093-277.075-380.073h109.624l355.98 352.366z"],"attrs":[{},{}],"grid":16,"tags":["filter-slash"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":226,"id":183,"name":"filter-slash","prevSize":80,"code":59831},"setIdx":0,"setId":1,"iconIdx":77},{"icon":{"paths":["M1023.989 515.199c-3.553-280.043-231.4-505.695-511.951-505.695-282.764 0-511.989 229.225-511.989 511.989 0 254.507 185.702 465.641 428.999 505.297l2.953 0.397v-362.872h-127.997v-149.116h127.997v-113.278c-0.721-6.073-1.134-13.108-1.134-20.239 0-100.028 81.088-181.117 181.117-181.117 4.227 0 8.421 0.145 12.576 0.43l-0.561-0.031c40.895 0.576 80.479 4.278 119.075 10.879l-4.516-0.639v127.997h-63.999c-2.79-0.372-6.015-0.583-9.289-0.583-41 0-74.238 33.238-74.238 74.238 0 2.458 0.12 4.89 0.352 7.287l-0.024-0.304v96.638h142.077l-23.040 149.116h-118.397v358.392c246.274-40.033 432-251.177 432-505.702 0-1.084-0.003-2.169-0.010-3.253l0.001 0.166z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["facebook"]},"attrs":[{}],"properties":{"order":223,"id":182,"name":"facebook","prevSize":80,"code":59828},"setIdx":0,"setId":1,"iconIdx":78},{"icon":{"paths":["M342.537 824.066c0 4.477-4.477 7.674-10.871 7.674s-11.511 0-11.511-7.674 5.115-7.674 10.871-7.674 11.511 3.197 11.511 7.674zM278.59 814.474c0 4.477 0 9.592 8.952 10.871 1.214 0.597 2.642 0.946 4.152 0.946 3.78 0 7.050-2.187 8.614-5.366l0.025-0.057c0-4.477 0-8.952-8.952-10.871s-11.511 0-12.789 4.477zM369.395 811.277c-5.755 0-9.592 5.115-8.952 10.232s5.755 7.034 12.151 5.755 9.592-5.755 8.952-10.232-5.755-6.395-12.151-5.755zM505.605 0.416c-1.401-0.013-3.056-0.022-4.712-0.022-276.536 0-500.713 224.177-500.713 500.713 0 5.405 0.085 10.79 0.256 16.152l-0.019-0.784c-0.043 2.548-0.069 5.556-0.069 8.569 0 228.113 144.076 422.574 346.195 497.35l3.671 1.189c26.218 4.477 35.81-12.151 35.81-25.58s0-85.69 0-127.896c0 0-144.523 31.974-175.218-63.949 0 0-23.021-63.949-56.913-77.378 0 0-47.321-33.253 3.197-32.614 34.33 4.756 63.049 25.238 79.017 53.815l0.277 0.541c18.278 35.272 54.506 58.959 96.268 58.959 20.145 0 39.003-5.513 55.146-15.109l-0.498 0.274c2.59-27.799 14.547-52.403 32.64-71.009l-0.027 0.027c-115.106-13.429-231.491-30.055-231.491-234.050-0.145-2.57-0.228-5.577-0.228-8.605 0-45.473 18.687-86.583 48.8-116.067l0.028-0.028c-6.646-19.325-10.482-41.593-10.482-64.756 0-28.316 5.734-55.295 16.103-79.836l-0.505 1.347c43.484-14.069 142.605 56.913 142.605 56.913 38.806-11.37 83.386-17.912 129.495-17.912s90.69 6.541 132.864 18.747l-3.369-0.835s99.119-70.982 142.605-56.913c10.054 23.11 15.902 50.029 15.902 78.316 0 23.246-3.951 45.569-11.215 66.335l0.429-1.407c32.709 30.551 53.097 73.938 53.097 122.086 0 0.919-0.007 1.836-0.022 2.75l0.001-0.138c0 204.633-121.502 220.621-236.608 234.050 20.129 22.501 32.432 52.369 32.432 85.111 0 3.805-0.166 7.572-0.492 11.293l0.034-0.483c0 71.622 0 159.871 0 177.137-0.001 0.076-0.001 0.166-0.001 0.258 0 14.833 12.025 26.858 26.858 26.858 3.209 0 6.287-0.564 9.141-1.596l-0.187 0.058c204.623-75.025 347.995-268.129 347.995-494.721 0-3.906-0.042-7.803-0.127-11.688l0.010 0.579c0.012-1.343 0.019-2.929 0.019-4.517 0-282.54-229.044-511.584-511.584-511.584-2.256 0-4.508 0.015-6.757 0.043l0.342-0.003zM201.213 730.062s0 7.034 0 10.871c1.389 1.394 3.312 2.257 5.436 2.257s4.047-0.863 5.436-2.257v0s0-7.034 0-11.511-8.314-1.918-10.871 0.64zM178.831 712.796s0 6.395 4.477 8.314c1.064 1.308 2.674 2.137 4.477 2.137s3.413-0.829 4.468-2.127l0.009-0.010s0-6.395-4.477-8.314-7.674-1.918-8.952 0zM242.778 788.256s0 8.952 0 13.429 10.871 5.115 13.429 0 0-8.952 0-13.429-8.314-3.197-10.871 0zM219.118 756.92s0 7.674 0 12.789 8.952 7.034 12.151 5.115c1.56-1.787 2.512-4.14 2.512-6.715s-0.952-4.928-2.522-6.727l0.010 0.012c-3.197-5.115-8.314-7.034-12.151-4.477z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["github"]},"attrs":[{}],"properties":{"order":222,"id":181,"name":"github","prevSize":80,"code":59829},"setIdx":0,"setId":1,"iconIdx":79},{"icon":{"paths":["M916.838 305.187c0 8.789 0 18.096 0 26.886 0.007 1.078 0.011 2.355 0.011 3.631 0 325.813-264.124 589.936-589.936 589.936-1.276 0-2.552-0.004-3.827-0.012l0.196 0.001c-0.51 0.001-1.114 0.002-1.717 0.002-118.435 0-228.719-34.901-321.128-94.979l2.284 1.392c17.062 0 33.091 0 51.704 0 0.002 0 0.005 0 0.007 0 97.98 0 188.092-33.688 259.382-90.114l-0.874 0.667c-91.316-0.843-168.422-60.74-195.032-143.307l-0.407-1.464c11.773 1.974 25.336 3.103 39.164 3.103 0.228 0 0.456 0 0.683-0.001h-0.035c19.516-0.144 38.393-2.587 56.462-7.070l-1.657 0.348c-95.075-19.916-165.451-103.058-165.451-202.636 0-0.015 0-0.030 0-0.046v0.002c27.158 15.264 59.356 24.854 93.652 26.353l0.448 0.016c-57.044-38.132-94.103-102.278-94.103-175.078 0-0.433 0.001-0.865 0.004-1.298v0.067c0.070-38.098 10.43-73.76 28.447-104.376l-0.527 0.968c103.206 126.555 255.913 209.348 428.158 218.642l1.498 0.064c-3.124-14.226-4.998-30.628-5.17-47.438l-0.001-0.128c-0.065-1.95-0.103-4.241-0.103-6.541 0-114.221 92.594-206.813 206.813-206.813 61.722 0 117.127 27.038 155.021 69.915l0.191 0.222c49.972-10.236 94.309-28.167 134.131-52.719l-1.769 1.015c-16.162 49.068-48.731 89.016-91.083 114.259l-0.949 0.523c44.586-4.928 85.337-16.248 123.076-33.095l-2.607 1.040c-28.94 41.915-63.161 77.617-102.256 107.223l-1.151 0.837z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["twitter"]},"attrs":[{}],"properties":{"order":221,"id":180,"name":"twitter","prevSize":80,"code":59830},"setIdx":0,"setId":1,"iconIdx":80},{"icon":{"paths":["M795.402 3.99c-18.498-7.266-39.637-3.303-54.171 10.57l-443.93 443.93v-408.918c0-27.085-22.461-49.546-49.546-49.546s-49.546 22.461-49.546 49.546v924.854c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-408.918l443.93 443.93c9.248 9.248 22.461 14.534 35.012 14.534 6.607 0 12.552-1.321 19.157-3.964 18.498-7.927 30.389-25.764 30.389-45.582v-924.854c0-19.818-11.891-38.316-30.389-45.582zM726.699 854.857l-342.857-342.857 342.857-342.857v685.713z"],"attrs":[{}],"tags":["step-backward-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":211,"id":0,"name":"step-backward-alt","prevSize":80,"code":59820},"setIdx":0,"setId":1,"iconIdx":81},{"icon":{"paths":["M776.245 0.027c-27.085 0-49.546 22.461-49.546 49.546v408.918l-443.93-443.93c-13.873-13.873-35.673-18.498-54.171-10.57s-30.389 25.764-30.389 45.582v924.854c0 19.818 11.891 38.316 30.389 45.582 5.945 2.643 12.552 3.964 19.157 3.964 13.212 0 25.764-5.284 35.012-14.534l443.93-443.93v408.918c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-924.854c0-27.085-22.461-49.546-49.546-49.546zM297.301 854.857v-685.713l342.857 342.857-342.857 342.857z"],"attrs":[{}],"tags":["step-forward-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":210,"id":1,"name":"step-forward-alt","prevSize":80,"code":59821},"setIdx":0,"setId":1,"iconIdx":82},{"icon":{"paths":["M1009.943 479.818l-437.090-409.59c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v366.875l-425.388-399.058c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v819.178c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l425.388-399.058v366.875c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l437.090-409.59c8.777-8.191 14.043-19.895 14.043-32.182s-5.266-23.99-14.043-32.182zM87.783 820.362v-616.725l328.842 308.362-328.842 308.362zM586.896 820.362v-616.725l328.842 308.362-328.842 308.362z"],"attrs":[{}],"tags":["forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":259,"id":2,"name":"forward","prevSize":80,"code":59822},"setIdx":0,"setId":1,"iconIdx":83},{"icon":{"paths":["M997.655 62.036c-15.798-7.022-34.522-3.511-47.395 8.191l-425.388 399.058v-366.875c0-17.554-10.532-33.352-26.331-40.374s-34.522-3.511-47.395 8.191l-437.090 409.59c-8.777 8.191-14.043 19.895-14.043 32.182s5.266 23.99 14.043 32.182l437.090 409.59c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-366.875l425.388 399.058c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-819.178c0-17.554-10.532-33.352-26.331-40.374zM437.104 820.362l-328.842-308.362 328.842-308.362v616.725zM936.217 820.362l-328.842-308.362 328.842-308.362v616.725z"],"attrs":[{}],"tags":["backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":254,"id":3,"name":"backward","prevSize":80,"code":59823},"setIdx":0,"setId":1,"iconIdx":84},{"icon":{"paths":["M997.071 62.036c-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-17.554-10.532-33.938-26.916-40.374-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-23.99-19.895-43.885-43.885-43.885s-43.885 19.895-43.885 43.885v819.178c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-819.178c0-17.554-10.532-33.938-26.916-40.374zM468.115 815.681l-303.681-303.681 303.681-303.681v607.362zM936.217 815.681l-303.681-303.681 303.681-303.681v607.362z"],"attrs":[{}],"tags":["fast-backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":207,"id":4,"name":"fast-backward","prevSize":80,"code":59824},"setIdx":0,"setId":1,"iconIdx":85},{"icon":{"paths":["M980.102 58.526c-23.99 0-43.885 19.895-43.885 43.885v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v819.178c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-819.178c0-23.99-19.895-43.885-43.885-43.885zM87.783 815.681v-607.362l303.681 303.681-303.681 303.681zM555.885 815.681v-607.362l303.681 303.681-303.681 303.681z"],"attrs":[{}],"tags":["fast-forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":206,"id":5,"name":"fast-forward","prevSize":80,"code":59825},"setIdx":0,"setId":1,"iconIdx":86},{"icon":{"paths":["M313.813 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z","M710.187 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["pause"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":205,"id":6,"name":"pause","prevSize":80,"code":59826},"setIdx":0,"setId":1,"iconIdx":87},{"icon":{"paths":["M280.358 1024.923c-6.942-0.037-13.534-1.495-19.514-4.095l0.321 0.124c-18.014-7.505-30.445-24.968-30.445-45.335 0-0.116 0-0.233 0.002-0.349v0.019-926.568c1.044-26.589 22.852-47.75 49.602-47.75 12.752 0 24.381 4.809 33.173 12.712l-0.045-0.040 463.285 463.285c8.969 8.98 14.517 21.381 14.517 35.077s-5.547 26.097-14.517 35.078v0l-463.285 463.285c-8.576 8.44-20.14 13.868-32.964 14.555l-0.127 0.006zM329.996 168.508v686.985l343.492-343.492z"],"attrs":[{}],"tags":["play"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":204,"id":7,"name":"play","prevSize":80,"code":59827},"setIdx":0,"setId":1,"iconIdx":88},{"icon":{"paths":["M736.143 262.827l-277.617 113.777c-38.623 15.541-68.655 45.573-83.837 83.191l-0.359 1.004-113.777 277.617c-0.848 2.097-1.341 4.529-1.341 7.076 0 8.091 4.968 15.023 12.020 17.908l0.129 0.047c2.113 0.807 4.557 1.275 7.111 1.275s4.997-0.467 7.252-1.321l-0.141 0.047 277.617-113.777c38.623-15.541 68.655-45.573 83.837-83.191l0.359-1.004 113.777-277.617c0.848-2.097 1.341-4.529 1.341-7.076 0-8.091-4.968-15.023-12.020-17.908l-0.129-0.047c-2.113-0.807-4.557-1.275-7.111-1.275s-4.997 0.467-7.252 1.321l0.141-0.047zM512 568.889c-31.419 0-56.889-25.471-56.889-56.889s25.471-56.889 56.889-56.889c31.419 0 56.889 25.471 56.889 56.889v0c0 31.419-25.471 56.889-56.889 56.889v0z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{}],"tags":["compass"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":203,"id":8,"name":"compass","prevSize":80,"code":59819},"setIdx":0,"setId":1,"iconIdx":89},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-585.157c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v585.157c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM102.412 204.809c-8.079 0-14.629 6.55-14.629 14.629v0 585.126c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-585.126c0-8.079-6.55-14.629-14.629-14.629v0z","M336.462 497.371c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0zM336.462 351.091c-16.158 0-29.256 13.098-29.256 29.256s13.098 29.256 29.256 29.256c16.158 0 29.256-13.098 29.256-29.256v0c0-16.158-13.098-29.256-29.256-29.256v0z","M512 731.422c-24.105-0.325-43.559-19.78-43.884-43.853v-0.032c0-39.788-9.947-73.14-131.653-73.14s-131.653 33.352-131.653 73.14c0 24.237-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0c0-160.909 165.005-160.909 219.422-160.909s219.422 0 219.422 160.909c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032z","M804.562 438.86h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M746.051 614.397h-117.025c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h117.025c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{},{}],"tags":["id-card"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":202,"id":9,"name":"id-card","prevSize":80,"code":59818},"setIdx":0,"setId":1,"iconIdx":90},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-146.313c0.325-24.105 19.78-43.559 43.853-43.884h0.032c56.552 0 102.397-45.844 102.397-102.397s-45.844-102.397-102.397-102.397v0c-24.105-0.325-43.559-19.78-43.884-43.853v-146.313c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v146.313c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032c-56.552 0-102.397 45.844-102.397 102.397s45.844 102.397 102.397 102.397v0c24.105 0.325 43.559 19.78 43.884 43.853v146.313c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM87.785 696.9v107.664c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-107.664c-84.233-20.753-145.724-95.646-145.724-184.9s61.489-164.147 144.417-184.627l1.306-0.273v-107.664c0-8.079-6.55-14.629-14.629-14.629v0h-819.175c-8.079 0-14.629 6.55-14.629 14.629v0 107.664c84.233 20.753 145.724 95.646 145.724 184.9s-61.489 164.147-144.417 184.627l-1.306 0.273z"],"attrs":[{}],"tags":["ticket"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":201,"id":10,"name":"ticket","prevSize":80,"code":59817},"setIdx":0,"setId":1,"iconIdx":91},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file-o","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":200,"id":11,"name":"file-o","prevSize":80,"code":59816},"setIdx":0,"setId":1,"iconIdx":92},{"icon":{"paths":["M680.456 749.159c-0.386 0.011-0.839 0.017-1.294 0.017-27.363 0-49.546-22.183-49.546-49.546 0-13.679 5.543-26.064 14.506-35.029v0l258.959-256.978-258.959-256.978c-8.952-8.963-14.491-21.342-14.491-35.012s5.537-26.049 14.491-35.013v0c8.963-8.952 21.342-14.491 35.012-14.491s26.049 5.537 35.013 14.491v0l294.632 291.991c8.952 8.963 14.491 21.342 14.491 35.012s-5.537 26.049-14.491 35.013v0l-294.632 291.991c-8.452 8.957-20.405 14.534-33.659 14.534-0.011 0-0.023 0-0.034 0h0.002z","M49.571 957.913c-27.215-0.367-49.179-22.331-49.546-49.51v-500.779c0.367-27.215 22.331-49.179 49.51-49.546h924.892c27.363 0 49.546 22.183 49.546 49.546s-22.183 49.546-49.546 49.546v0h-875.31v451.197c-0.367 27.215-22.331 49.179-49.51 49.546h-0.036z"],"attrs":[{},{}],"tags":["reply"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":199,"id":12,"name":"reply","prevSize":80,"code":59815},"setIdx":0,"setId":1,"iconIdx":93},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M441.707 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-121.77-121.77c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l121.767-122.873c7.51-7.501 17.881-12.141 29.334-12.141s21.825 4.639 29.335 12.141v0c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0l-94.092 92.985 94.092 92.985c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M705.718 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-110.726h-345.927c-22.926 0-41.511-18.585-41.511-41.511s18.585-41.511 41.511-41.511v0h387.438c22.801 0.307 41.204 18.71 41.511 41.481v154.451c-1.483 21.852-19.449 39.046-41.487 39.297h-0.025z"],"attrs":[{},{},{}],"tags":["directions-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":195,"id":13,"name":"directions-alt","prevSize":80,"code":59813},"setIdx":0,"setId":1,"iconIdx":94},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M582.293 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-0.004-0.004c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l94.092-92.985-94.092-92.985c-8.139-7.599-13.212-18.392-13.212-30.371 0-22.926 18.585-41.511 41.511-41.511 11.979 0 22.771 5.073 30.347 13.188l0.022 0.025 121.767 122.319c7.668 7.537 12.42 18.020 12.42 29.612s-4.752 22.075-12.413 29.605l-0.006 0.005-121.767 121.767c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M318.282 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-154.451c0.307-22.801 18.71-41.204 41.481-41.511h387.468c22.926 0 41.511 18.585 41.511 41.511s-18.585 41.511-41.511 41.511v0h-345.927v110.696c0.021 0.497 0.032 1.078 0.032 1.663 0 23.049-18.537 41.768-41.516 42.061h-0.027z"],"attrs":[{},{},{}],"tags":["directions"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":196,"id":14,"name":"directions","prevSize":80,"code":59814},"setIdx":0,"setId":1,"iconIdx":95},{"icon":{"paths":["M992.966 368.647c-25.16-29.841-61.437-46.809-100.641-46.809h-235.803v-160.907c0-88.937-71.969-160.907-165.589-160.907-40.959 0-77.821 24.575-94.203 62.607l-148.619 346.974h-109.417c-76.65 0-138.673 62.023-138.673 138.673v337.613c0 76.066 62.607 138.087 138.673 138.087h676.396c63.778 0 118.194-45.639 129.31-108.832l77.235-438.838c6.436-38.618-4.096-77.821-29.255-107.662zM138.696 936.209c-28.086 0-50.905-22.82-50.905-50.32v-337.613c0-28.086 22.82-50.905 50.905-50.905h94.203v438.838h-94.203zM858.39 899.933c-3.511 21.064-21.65 36.277-43.298 36.277h-493.839v-473.945l156.226-365.699c2.341-5.266 7.607-9.362 18.723-9.362 40.373 0 72.555 32.766 72.555 73.139v248.674h323.57c13.457 0 25.16 5.266 33.352 15.213s11.702 22.82 9.362 36.277l-77.235 438.838z"],"attrs":[{}],"tags":["thumbs-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":191,"id":15,"name":"thumbs-up","prevSize":80,"code":59811},"setIdx":0,"setId":1,"iconIdx":96},{"icon":{"paths":["M885.271 0.068h-676.92c-63.773 0-118.184 45.635-129.299 108.822l-76.643 438.799c-6.435 38.614 4.096 77.814 28.669 107.652 25.158 29.838 61.432 46.805 100.632 46.805h235.782v160.892c0 88.929 71.963 160.892 165.574 160.892 40.955 0 77.814-24.573 94.195-62.602l148.606-346.943h109.992c76.643 0 138.66-62.017 138.66-138.66v-337.583c0-76.059-62.017-138.075-138.66-138.075zM702.731 561.731l-156.212 365.666c-2.341 5.266-7.606 9.361-18.722 9.361-40.369 0-72.549-32.763-72.549-73.133v-248.652h-323.541c-13.456 0-25.158-5.266-33.349-15.211-8.776-9.946-11.701-22.818-9.361-36.274l76.643-438.799c3.51-21.062 21.648-36.274 43.294-36.274h493.795v473.317zM936.172 475.726c0 28.083-22.818 50.901-50.901 50.901h-94.195v-438.799h94.195c28.083 0 50.901 22.818 50.901 50.315v337.583z"],"attrs":[{}],"tags":["thumbs-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":258,"id":16,"name":"thumbs-down","prevSize":80,"code":59812},"setIdx":0,"setId":1,"iconIdx":97},{"icon":{"paths":["M272.871 1023.949c-0.183 0.003-0.398 0.003-0.613 0.003-13.694 0-26.089-5.555-35.058-14.536v0l-165.145-167.127c-8.952-8.963-14.49-21.341-14.49-35.010s5.536-26.047 14.49-35.012v0c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l132.101 132.101 132.115-132.115c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l-0.014-0.014c8.952 8.963 14.49 21.341 14.49 35.010s-5.536 26.047-14.49 35.012v0l-165.145 165.145c-9.003 10.201-22.109 16.602-36.709 16.602-1.030 0-2.051-0.033-3.065-0.094l0.139 0.006z","M272.871 1023.949c-0.002 0-0.003 0-0.005 0-27.495 0-49.827-22.103-50.2-49.508v-924.845c0.373-27.441 22.705-49.543 50.2-49.543 0.002 0 0.003 0 0.005 0v0c27.077 0.373 48.882 22.409 48.882 49.539 0 0.002 0 0.003 0 0.005v0 924.81c0 0.002 0 0.003 0 0.005 0 27.13-21.807 49.167-48.848 49.539h-0.036z","M850.216 990.919c-27.077-0.373-48.882-22.409-48.882-49.539 0-0.002 0-0.003 0-0.005v0-268.195l-25.763 14.533c-6.952 3.915-15.262 6.222-24.111 6.222-27.515 0-49.821-22.305-49.821-49.821 0-18.667 10.266-34.936 25.459-43.468l0.251-0.13 43.598-23.781c12.816-9.446 28.919-15.117 46.348-15.117 12.457 0 24.238 2.898 34.704 8.055l-0.461-0.206c29.13 13.962 48.887 43.216 48.887 77.083 0 0.303-0.002 0.608-0.005 0.91v-0.046 293.958c-0.373 27.441-22.705 49.543-50.2 49.543-0.002 0-0.003 0-0.005 0v0z","M817.187 330.341c-81.802-0.375-147.969-66.775-147.969-148.629 0-82.086 66.545-148.63 148.63-148.63s148.629 66.543 148.63 148.629v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.722-66.249 147.969-147.969 147.969-0.464 0-0.929-0.002-1.393-0.006h0.071zM817.187 132.168c-27.362 0-49.543 22.182-49.543 49.543s22.182 49.543 49.543 49.543v0c27.362 0 49.543-22.182 49.543-49.543s-22.182-49.543-49.543-49.543v0z","M783.498 462.457h-32.369c-27.362 0-49.543-22.182-49.543-49.543s22.182-49.543 49.543-49.543v0h32.369c43.854-0.949 79.426-35.145 82.556-78.334l0.015-0.274c0-19.156 0-42.278 0-70.022v-33.028c0-0.002 0-0.003 0-0.005 0-27.13 21.807-49.167 48.848-49.539h0.036c0.002 0 0.003 0 0.005 0 27.495 0 49.827 22.103 50.2 49.508v33.064c0 29.726 0 54.168 0 75.306-6.052 95.91-84.883 171.519-181.572 172.411h-0.088z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":255,"id":17,"name":"sort-numeric-down-alt","prevSize":80,"code":59798},"setIdx":0,"setId":1,"iconIdx":98},{"icon":{"paths":["M438.010 264.266c-14.187-0.375-26.837-6.658-35.632-16.47l-0.042-0.046-132.124-132.124-132.124 132.124c-8.829 7.573-20.392 12.184-33.031 12.184s-24.204-4.609-33.099-12.241l0.068 0.057c-7.83-8.725-12.617-20.319-12.617-33.031s4.787-24.306 12.658-33.077l-0.040 0.046 165.156-165.156c9.138-8.838 21.605-14.283 35.344-14.283s26.204 5.445 35.358 14.297l165.142 165.142c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.632 7.819-20.139 12.603-32.763 12.603-0.791 0-1.578-0.019-2.36-0.056l0.11 0.005z","M272.855 1023.983c-0.002 0-0.003 0-0.005 0-27.497 0-49.83-22.104-50.203-49.511v-924.907c0.373-27.443 22.706-49.547 50.203-49.547 0.002 0 0.003 0 0.005 0v0c27.079 0.373 48.886 22.411 48.886 49.542 0 0.002 0 0.003 0 0.005v0 924.872c0 0.002 0 0.003 0 0.005 0 27.131-21.808 49.17-48.852 49.542h-0.036z","M850.238 990.951c-27.079-0.373-48.886-22.411-48.886-49.542 0-0.002 0-0.003 0-0.005v0-268.213l-25.764 14.534c-6.952 3.916-15.263 6.223-24.112 6.223-27.517 0-49.824-22.307-49.824-49.824 0-18.668 10.267-34.938 25.461-43.471l0.251-0.13 43.601-23.782c12.817-9.446 28.921-15.118 46.351-15.118 12.458 0 24.239 2.898 34.706 8.056l-0.461-0.206c29.132 13.963 48.89 43.219 48.89 77.089 0 0.303-0.002 0.608-0.005 0.91v-0.046 293.978c-0.373 27.443-22.706 49.547-50.203 49.547-0.002 0-0.003 0-0.005 0v0z","M817.208 330.329c-81.808-0.375-147.979-66.78-147.979-148.639 0-82.091 66.549-148.64 148.64-148.64s148.639 66.547 148.64 148.639v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.727-66.253 147.979-147.979 147.979-0.465 0-0.929-0.002-1.394-0.006h0.071zM817.208 132.142c-27.364 0-49.547 22.183-49.547 49.547s22.183 49.547 49.547 49.547v0c27.364 0 49.547-22.183 49.547-49.547s-22.183-49.547-49.547-49.547v0z","M783.516 462.453h-32.371c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h32.371c43.857-0.949 79.431-35.147 82.562-78.34l0.015-0.274c0-19.158 0-42.28 0-70.027v-33.031c0-0.002 0-0.003 0-0.005 0-27.131 21.808-49.17 48.852-49.542h0.036c0.002 0 0.003 0 0.005 0 27.497 0 49.83 22.104 50.203 49.511v33.066c0 29.728 0 54.172 0 75.311-6.052 95.916-84.889 171.531-181.584 172.423h-0.088z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":182,"id":18,"name":"sort-numeric-up-alt","prevSize":80,"code":59799},"setIdx":0,"setId":1,"iconIdx":99},{"icon":{"paths":["M394.416 774.25l-80.59 80.59v-805.246c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v805.246l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 12.552-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M971.763 924.862l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416s54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416zM761.038 807.94l31.708-88.517 31.708 88.517h-63.416z","M632.886 415.556c12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517z"],"attrs":[{},{},{}],"tags":["sort-alpha-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":183,"id":19,"name":"sort-alpha-down-alt","prevSize":80,"code":59800},"setIdx":0,"setId":1,"iconIdx":100},{"icon":{"paths":["M299.293 14.584c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0l80.59-80.59v805.246c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-805.246l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145z","M971.763 924.862l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416s54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416zM761.038 807.94l31.708-88.517 31.708 88.517h-63.416z","M632.886 415.556c12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517z"],"attrs":[{},{},{}],"tags":["sort-alpha-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":184,"id":20,"name":"sort-alpha-up-alt","prevSize":80,"code":59801},"setIdx":0,"setId":1,"iconIdx":101},{"icon":{"paths":["M272.871 1023.949c-0.183 0.003-0.398 0.003-0.613 0.003-13.694 0-26.089-5.555-35.058-14.536v0l-165.145-167.127c-8.952-8.963-14.49-21.341-14.49-35.010s5.536-26.047 14.49-35.012v0c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l132.101 132.101 132.115-132.115c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l-0.014-0.014c8.952 8.963 14.49 21.341 14.49 35.010s-5.536 26.047-14.49 35.012v0l-165.145 165.145c-9.003 10.201-22.109 16.602-36.709 16.602-1.030 0-2.051-0.033-3.065-0.094l0.139 0.006z","M272.871 1023.949c-0.002 0-0.003 0-0.005 0-27.495 0-49.827-22.103-50.2-49.508v-924.845c0.373-27.441 22.705-49.543 50.2-49.543 0.002 0 0.003 0 0.005 0v0c27.077 0.373 48.882 22.409 48.882 49.539 0 0.002 0 0.003 0 0.005v0 924.81c0 0.002 0 0.003 0 0.005 0 27.13-21.807 49.167-48.848 49.539h-0.036z","M850.216 462.457c-27.077-0.373-48.882-22.409-48.882-49.539 0-0.002 0-0.003 0-0.005v0-268.195l-25.101 14.533c-6.952 3.915-15.262 6.222-24.111 6.222-27.515 0-49.821-22.305-49.821-49.821 0-18.667 10.266-34.936 25.459-43.468l0.251-0.13 42.937-22.46c12.816-9.446 28.919-15.117 46.348-15.117 12.457 0 24.238 2.898 34.704 8.055l-0.461-0.206c29.13 13.962 48.887 43.216 48.887 77.083 0 0.303-0.002 0.608-0.005 0.91v-0.046 292.636c-0.373 27.441-22.705 49.543-50.2 49.543-0.002 0-0.003 0-0.005 0v0z","M817.187 858.804c-81.802-0.375-147.969-66.775-147.969-148.629 0-82.086 66.545-148.63 148.63-148.63s148.629 66.543 148.63 148.629v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.722-66.249 147.969-147.969 147.969-0.464 0-0.929-0.002-1.393-0.006h0.071zM817.187 660.63c-27.362 0-49.543 22.182-49.543 49.543s22.182 49.543 49.543 49.543v0c27.362 0 49.543-22.182 49.543-49.543s-22.182-49.543-49.543-49.543v0z","M783.498 990.919h-32.369c-27.362 0-49.543-22.182-49.543-49.543s22.182-49.543 49.543-49.543v0h32.369c43.854-0.949 79.426-35.145 82.556-78.334l0.015-0.274c0-19.156 0-42.278 0-70.022v-33.028c0-0.002 0-0.003 0-0.005 0-27.13 21.807-49.167 48.848-49.539h0.036c0.002 0 0.003 0 0.005 0 27.495 0 49.827 22.103 50.2 49.508v33.064c0 29.726 0 54.168 0 75.306-6.373 95.766-85.015 171.188-181.539 172.409l-0.121 0.002z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":185,"id":21,"name":"sort-numeric-down","prevSize":80,"code":59802},"setIdx":0,"setId":1,"iconIdx":102},{"icon":{"paths":["M429.424 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M264.27 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M842.306 462.454c-27.085 0-49.546-22.461-49.546-49.546v-268.209l-25.764 13.873c-24.443 13.212-54.171 4.625-67.382-19.157s-4.625-54.171 19.157-67.382l42.939-23.782c23.782-17.175 54.171-19.818 80.594-7.927 29.728 13.873 48.885 44.262 48.885 78.612v293.973c0 27.085-22.461 49.546-49.546 49.546z","M809.275 858.821c-81.916 0-148.638-66.721-148.638-148.638s66.721-148.638 148.638-148.638 148.638 66.721 148.638 148.638-66.721 148.638-148.638 148.638zM809.275 660.638c-27.085 0-49.546 22.461-49.546 49.546s22.461 49.546 49.546 49.546 49.546-22.461 49.546-49.546-22.461-49.546-49.546-49.546z","M774.923 990.943h-31.709c-27.085 0-49.546-22.461-49.546-49.546s22.461-49.546 49.546-49.546h31.709c42.939 0 80.594-35.673 82.576-78.612 0.661-19.157 0.661-42.28 0.661-70.025v-33.030c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v33.030c0 29.728 0 54.171-1.321 75.31-4.625 95.128-86.54 172.42-181.668 172.42z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":186,"id":22,"name":"sort-numeric-up","prevSize":80,"code":59803},"setIdx":0,"setId":1,"iconIdx":103},{"icon":{"paths":["M394.416 774.25l-80.59 80.59v-805.246c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v805.246l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M644.115 459.814c25.763 9.248 54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416zM824.453 279.476h-63.416l31.708-88.517 31.708 88.517z","M952.607 608.444c-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517 12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178z"],"attrs":[{},{},{}],"tags":["sort-alpha-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":187,"id":23,"name":"sort-alpha-down","prevSize":80,"code":59804},"setIdx":0,"setId":1,"iconIdx":104},{"icon":{"paths":["M299.293 14.584c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0l80.59-80.59v805.246c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-805.246l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145z","M644.115 459.814c25.763 9.248 54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416zM824.453 279.476h-63.416l31.708-88.517 31.708 88.517z","M952.607 608.444c-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517 12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178z"],"attrs":[{},{},{}],"tags":["sort-alpha-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":188,"id":24,"name":"sort-alpha-up","prevSize":80,"code":59805},"setIdx":0,"setId":1,"iconIdx":105},{"icon":{"paths":["M412.908 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M247.755 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M776.245 1023.975c-12.552 0-25.103-4.625-35.012-14.534l-165.154-165.154c-19.157-19.157-19.157-50.867 0-70.025s50.867-19.157 70.025 0l130.14 130.14 130.14-130.14c19.157-19.157 50.867-19.157 70.025 0s19.157 50.867 0 70.025l-165.154 165.154c-9.909 9.909-22.461 14.534-35.012 14.534z","M776.245 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z"],"attrs":[{},{},{},{}],"tags":["sort-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":189,"id":25,"name":"sort-alt","prevSize":80,"code":59806},"setIdx":0,"setId":1,"iconIdx":106},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":190,"id":26,"name":"sort-amount-up","prevSize":80,"code":59807},"setIdx":0,"setId":1,"iconIdx":107},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":180,"id":27,"name":"sort-amount-down","prevSize":80,"code":59808},"setIdx":0,"setId":1,"iconIdx":108},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":179,"id":28,"name":"sort-amount-down-alt","prevSize":80,"code":59809},"setIdx":0,"setId":1,"iconIdx":109},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":178,"id":29,"name":"sort-amount-up-alt","prevSize":80,"code":59810},"setIdx":0,"setId":1,"iconIdx":110},{"icon":{"paths":["M516.624 0.063s-4.624 0-7.266 0c-250.354 0-468.339 184.297-507.973 432.008-5.284 33.028 3.963 67.377 26.423 93.139 21.799 25.762 52.844 40.295 85.874 40.295h3.963c114.938 0 201.471 28.405 256.958 83.892 56.148 56.148 83.892 144.002 83.231 260.922 0 33.028 14.533 64.075 39.634 85.874 21.137 18.496 48.222 28.405 75.304 27.744 5.945 0 11.89 0 17.835-1.321 250.354-40.295 435.971-261.583 432.669-515.239-3.963-275.455-231.196-503.349-507.312-507.312zM575.414 924.852c-3.963 0-9.247-0.661-13.211-3.963-1.982-1.982-5.284-5.284-5.284-9.908 0.661-144.663-36.991-256.299-112.295-331.603-74.643-74.643-184.958-112.956-326.978-112.956h-3.963c-5.284 0-8.588-3.302-10.57-5.284-1.321-1.982-5.284-6.606-3.963-13.211 32.368-199.489 208.077-348.777 410.209-348.777 1.982 0 3.963 0 5.945 0v0c218.647 3.302 406.246 190.242 409.548 409.548 2.643 204.775-147.306 383.786-348.777 416.154zM375.925 315.152c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM575.414 231.921c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM642.13 315.152c0-36.331 29.725-66.716 66.716-66.716s66.716 29.725 66.716 66.716-29.725 66.716-66.716 66.716-66.716-29.725-66.716-66.716zM858.134 514.643c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM774.903 714.132c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716z"],"attrs":[{}],"tags":["palette"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":257,"id":30,"name":"palette","prevSize":80,"code":59797},"setIdx":0,"setId":1,"iconIdx":111},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["undo"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":256,"id":31,"name":"undo","prevSize":80,"code":59796},"setIdx":0,"setId":1,"iconIdx":112},{"icon":{"paths":["M921.582 789.931h-819.163c-56.418-0.33-102.065-45.976-102.396-102.364v-585.149c0.33-56.418 45.976-102.065 102.364-102.396h819.194c56.418 0.33 102.065 45.976 102.396 102.364v585.149c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 87.791c-8.079 0-14.628 6.55-14.628 14.628v0 585.117c0 8.079 6.55 14.628 14.628 14.628v0h819.163c8.079 0 14.628-6.55 14.628-14.628v0-585.117c0-8.079-6.55-14.628-14.628-14.628v0z","M687.535 1023.977h-175.535c-24.105-0.325-43.559-19.779-43.884-43.852v-234.079c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 190.163h131.651c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M512 1023.977h-175.535c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.535c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["desktop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":175,"id":32,"name":"desktop","prevSize":80,"code":59795},"setIdx":0,"setId":1,"iconIdx":113},{"icon":{"paths":["M809.27 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M809.27 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M908.36 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M214.73 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M214.73 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M313.82 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M512 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M512 693.665c-27.214-0.367-49.178-22.331-49.545-49.509v-594.576c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 594.541c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M611.090 693.665h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-v"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":174,"id":33,"name":"sliders-v","prevSize":80,"code":59793},"setIdx":0,"setId":1,"iconIdx":114},{"icon":{"paths":["M974.421 264.275h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 264.275h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 363.365c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 858.815h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 858.815h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 957.906c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 561.545h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 561.545h-594.541c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h594.541c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 660.635c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-h"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":173,"id":34,"name":"sliders-h","prevSize":80,"code":59794},"setIdx":0,"setId":1,"iconIdx":115},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M438.902 628.957c-24.091-0.325-43.534-19.768-43.859-43.827v-292.424c0-24.222 19.636-43.859 43.859-43.859s43.859 19.636 43.859 43.859v0 292.393c-0.325 24.091-19.768 43.534-43.827 43.859h-0.032z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{},{}],"tags":["search-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":172,"id":35,"name":"search-plus","prevSize":80,"code":59791},"setIdx":0,"setId":1,"iconIdx":116},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c-0.332 243.061-197.282 440.011-440.311 440.344h-0.033zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{}],"tags":["search-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":171,"id":36,"name":"search-minus","prevSize":80,"code":59792},"setIdx":0,"setId":1,"iconIdx":117},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M656.524 506.734c-7.496-5.775-17.020-9.255-27.356-9.255-13.907 0-26.344 6.301-34.608 16.205l-0.059 0.071-82.501 103.566-82.501-105.321c-8.353-9.812-20.716-15.996-34.521-15.996-24.992 0-45.251 20.259-45.251 45.251 0 11.185 4.058 21.422 10.782 29.32l-0.053-0.064 93.034 117.023-93.034 117.023c-5.992 7.47-9.615 17.061-9.615 27.5 0 24.376 19.76 44.136 44.136 44.136 13.937 0 26.366-6.461 34.454-16.55l0.067-0.086 82.501-101.81 82.501 105.321c8.276 9.979 20.653 16.31 34.509 16.384h0.012c1.085 0.096 2.348 0.149 3.622 0.149 24.236 0 43.884-19.648 43.884-43.884 0-12.183-4.964-23.206-12.981-31.157l-0.003-0.003-93.034-117.023 95.374-117.023c5.757-7.489 9.225-16.998 9.225-27.316 0-14.937-7.268-28.175-18.461-36.373l-0.126-0.088z"],"attrs":[{},{}],"tags":["file-excel"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":170,"id":37,"name":"file-excel","prevSize":80,"code":59790},"setIdx":0,"setId":1,"iconIdx":118},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M599.182 678.758c-35.612-22.599-62.527-56.14-76.26-95.834l-0.389-1.295c8.513-24.598 13.428-52.947 13.428-82.444 0-12.194-0.841-24.192-2.466-35.938l0.154 1.359c-3.892-22.255-23.068-38.954-46.145-38.954-18.984 0-35.328 11.301-42.673 27.543l-0.119 0.295c-1.82 12.259-2.859 26.407-2.859 40.798 0 35.745 6.41 69.992 18.145 101.654l-0.657-2.026c-26.663 62.22-51.535 112.192-78.718 160.691l4.409-8.561c-41.543 23.405-98.3 58.512-107.076 98.885-7.021 32.766 54.416 117.023 159.151-65.534 38.752-15.060 86.483-29.549 135.472-40.728l7.296-1.4c33.675 19.598 73.544 32.44 116.101 35.636l0.922 0.056c0.37 0.010 0.806 0.016 1.244 0.016 26.499 0 47.98-21.481 47.98-47.98 0-12.689-4.926-24.228-12.97-32.809l0.025 0.026c-24.575-25.16-97.714-18.139-133.992-13.457zM319.497 854.293c16.89-28.581 38.169-52.658 63.208-72.128l0.569-0.426c-39.787 63.193-63.778 74.31-63.778 73.139zM490.35 455.829c15.213 0 14.043 67.289 3.511 85.427-4.439-14.87-6.994-31.954-6.994-49.637 0-12.459 1.269-24.62 3.683-36.365l-0.199 1.16zM439.445 741.365c17.504-31.081 34.829-68.095 49.5-106.424l1.99-5.919c15.998 29.397 37.215 53.976 62.634 73.317l0.558 0.407c-44.504 11.253-82.688 24.668-119.265 41.035l4.582-1.832zM714.451 730.833s-10.532 12.873-77.821-16.384c73.139-4.68 85.427 12.287 77.821 16.968z"],"attrs":[{},{}],"tags":["file-pdf"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":169,"id":38,"name":"file-pdf","prevSize":80,"code":59789},"setIdx":0,"setId":1,"iconIdx":119},{"icon":{"paths":["M863.086 1024h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h518.437c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-518.437c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-451.145c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 451.145c0 88.87-72.044 160.914-160.914 160.914v0z","M424.229 702.172c-11.709-0.922-21.992-6.372-29.216-14.581l-0.041-0.048-175.543-175.543c-2.703-5.532-4.284-12.038-4.284-18.913 0-24.237 19.648-43.886 43.886-43.886 6.875 0 13.381 1.581 19.174 4.4l-0.261-0.114 144.531 144.531 499.127-495.616c5.532-2.703 12.038-4.284 18.913-4.284 24.237 0 43.886 19.648 43.886 43.886 0 6.875-1.581 13.381-4.4 19.174l0.114-0.261-526.629 526.629c-7.264 8.256-17.547 13.707-29.107 14.619l-0.151 0.010z"],"attrs":[{},{}],"tags":["check-square"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":168,"id":39,"name":"check-square","prevSize":80,"code":59788},"setIdx":0,"setId":1,"iconIdx":120},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M636.121 682.666c-0.064 0-0.141 0-0.217 0-12.783 0-24.345-5.222-32.671-13.649l-153.295-153.295-153.29 153.29c-8.289 7.74-19.456 12.492-31.731 12.492-25.706 0-46.545-20.839-46.545-46.545 0-12.276 4.752-23.441 12.518-31.759l-0.025 0.028 186.182-186.182c8.42-8.41 20.049-13.613 32.892-13.613s24.471 5.201 32.893 13.613v0l153.29 153.29 215.35-215.35c8.289-7.74 19.456-12.492 31.731-12.492 25.706 0 46.545 20.839 46.545 46.545 0 12.276-4.752 23.441-12.518 31.759l0.025-0.028-248.243 248.243c-8.33 8.432-19.892 13.654-32.675 13.654-0.076 0-0.153 0-0.228 0h0.012z","M915.393 626.192c-25.567-0.345-46.201-20.979-46.545-46.512v-176.285h-170.666c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h217.212c25.567 0.345 46.201 20.979 46.545 46.512v222.831c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["chart-line"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":167,"id":40,"name":"chart-line","prevSize":80,"code":59787},"setIdx":0,"setId":1,"iconIdx":121},{"icon":{"paths":["M431.778 504.757c-115.379 0-208.912-93.532-208.912-208.912s93.532-208.912 208.912-208.912c115.379 0 208.912 93.532 208.912 208.912v0c-0.316 115.251-93.66 208.596-208.881 208.912h-0.030zM431.778 170.499c-69.227 0-125.347 56.12-125.347 125.347s56.12 125.347 125.347 125.347c69.227 0 125.347-56.12 125.347-125.347v0c0-69.227-56.12-125.347-125.347-125.347v0z","M41.809 894.726c-23.076 0-41.782-18.707-41.782-41.782v0c0-264.622 302.504-264.622 431.751-264.622 40.111 0 75.766 0 108.076 3.9 21.638 1.734 38.542 19.721 38.542 41.657 0 1.025-0.037 2.041-0.11 3.046l0.008-0.134c-2.011 21.692-20.122 38.543-42.169 38.543-1.041 0-2.072-0.038-3.093-0.111l0.137 0.008c-30.083 0-63.509-3.343-101.391-3.343-288.576 0-348.186 72.423-348.186 181.057 0.003 0.167 0.004 0.364 0.004 0.561 0 22.767-18.457 41.225-41.225 41.225-0.197 0-0.394-0.001-0.59-0.004h0.030z","M549.326 937.066c-11.533-0.010-21.972-4.693-29.526-12.255v0c-7.671-7.32-12.439-17.622-12.439-29.037 0-1.349 0.067-2.683 0.197-3.998l-0.013 0.166 8.914-106.963c0.738-10.242 5.062-19.352 11.708-26.194l-0.009 0.010 307.518-307.518c20.408-18.948 47.843-30.576 77.993-30.576s57.585 11.627 78.066 30.642l-0.072-0.067c19.978 20.131 32.325 47.862 32.325 78.475 0 0.614-0.005 1.227-0.014 1.838l0.001-0.093c0.008 0.488 0.013 1.065 0.013 1.643 0 28.208-11.272 53.784-29.557 72.47l-307.499 307.499c-6.609 6.771-15.516 11.272-25.457 12.242l-0.17 0.013-108.076 10.028zM657.402 885.256v0zM598.35 806.705l-3.343 42.34 43.454-3.9 296.932-296.932c3.138-3.741 5.043-8.607 5.043-13.917 0-0.396-0.010-0.789-0.031-1.178l0.003 0.055c-0.022-8.097-2.969-15.5-7.838-21.216l0.038 0.046c-5.22-3.914-11.806-6.267-18.942-6.267s-13.722 2.354-19.024 6.327l0.082-0.059z"],"attrs":[{},{},{}],"tags":["user-edit"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":166,"id":41,"name":"user-edit","prevSize":80,"code":59786},"setIdx":0,"setId":1,"iconIdx":122},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 568.889c-23.436-0.316-42.351-19.231-42.667-42.636v-199.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 199.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 739.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["exclamation-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":165,"id":42,"name":"exclamation-circle","prevSize":80,"code":59785},"setIdx":0,"setId":1,"iconIdx":123},{"icon":{"paths":["M897.818 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M126.182 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M229.321 342.011v407.465c0 37.624 30.5 68.122 68.122 68.122v0h43.293v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0 0-144.522h103.139v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-144.522h43.293c37.624 0 68.122-30.5 68.122-68.122v0-407.465z","M787.039 257.334c-19.494-64.041-60.923-116.427-115.35-149.595l-1.159-0.657-9.55-5.73-10.187-5.093 11.46-19.737 33.743-63.667c0.321-0.883 0.507-1.901 0.507-2.963 0-2.96-1.443-5.584-3.665-7.206l-0.025-0.018h-4.457c-3.404 0.157-6.379 1.864-8.255 4.426l-0.021 0.030-34.38 59.21-10.823 19.737-10.187-4.457-10.823-3.82c-30.354-10.882-65.375-17.173-101.867-17.173s-71.511 6.291-104.038 17.846l2.171-0.673-10.187 3.82-10.823 4.457-10.823-19.737-34.38-63.667c-1.592-2.804-4.559-4.665-7.958-4.665-5.038 0-9.122 4.084-9.122 9.122 0 1.637 0.431 3.174 1.186 4.502l-0.024-0.045 33.743 63.667 11.46 19.737-10.187 5.093-9.55 5.73c-55.806 33.938-97.174 86.897-115.417 149.695l-0.455 1.831c-4.717 15.122-7.703 32.57-8.27 50.627l-0.007 0.307h565.357c-0.686-18.4-3.432-35.851-8.017-52.541l0.378 1.609zM384.668 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0zM639.332 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0z"],"attrs":[{},{},{},{}],"tags":["android"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":164,"id":43,"name":"android","prevSize":80,"code":59781},"setIdx":0,"setId":1,"iconIdx":124},{"icon":{"paths":["M1008.591 433.288l-5.759-22.397h-476.114v202.221h284.773c-32.683 123.892-143.735 213.758-275.775 213.758-1.138 0-2.275-0.006-3.409-0.019l0.172 0.001c-86.669-0.738-165.327-34.432-224.185-89.141l0.207 0.19c-58.421-57.606-94.785-137.451-95.35-225.791v-0.106c1.039-88.017 36.49-167.558 93.495-225.963l-0.064 0.066c57.221-54.292 134.738-87.683 220.053-87.683 0.93 0 1.86 0.004 2.788 0.012l-0.142-0.001c73.95 0.586 141.235 28.652 192.25 74.471l-0.268-0.238 140.787-144.626c-88.734-79.432-206.552-127.99-335.711-127.99-0.54 0-1.080 0.001-1.62 0.003h0.084c-0.919-0.006-2.007-0.009-3.094-0.009-142.761 0-272.106 57.428-366.198 150.443l0.049-0.049c-90.236 93.627-145.825 221.183-145.825 361.724 0 137.597 53.284 262.749 140.344 355.947l-0.279-0.301c96.859 96.51 230.481 156.177 378.041 156.177 2.082 0 4.162-0.012 6.238-0.036l-0.316 0.003c1.053 0.009 2.296 0.013 3.543 0.013 134.433 0 255.872-55.642 342.541-145.151l0.123-0.127c82.61-90.584 133.206-211.608 133.206-344.45 0-3.543-0.036-7.076-0.108-10.602l0.009 0.526c0.105-4.284 0.163-9.328 0.163-14.387 0-26.957-1.687-53.521-4.962-79.591l0.318 3.106z"],"attrs":[{}],"tags":["google"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":163,"id":44,"name":"google","prevSize":80,"code":59782},"setIdx":0,"setId":1,"iconIdx":125},{"icon":{"paths":["M800.988 541.411c-0.025-1.227-0.040-2.673-0.040-4.124 0-81.14 45.665-151.616 112.697-187.127l1.149-0.554c-43.688-60.224-112.883-99.642-191.399-102.285l-0.408-0.010c-81.199-6.394-169.43 47.312-202.037 47.312s-113.166-44.755-174.544-44.755c-127.87 0-262.775 101.657-262.775 304.332 0.671 66.632 12.562 130.276 33.869 189.424l-1.262-4.011c28.131 81.837 133.625 287.070 243.594 283.874 57.542 0 98.461-40.919 173.266-40.919s109.97 40.919 174.544 40.919c110.608 0 206.511-188.61 234.004-272.365-83.223-34.69-140.659-115.384-140.659-209.49 0-0.076 0-0.154 0-0.231v0.012zM673.117 166.109c33.682-37.846 54.259-88 54.259-142.959 0-7.972-0.433-15.844-1.277-23.592l0.085 0.959c-61.9 6.974-115.875 36.341-154.514 79.679l-0.211 0.24c-37.077 39.007-59.884 91.883-59.884 150.086 0 4.782 0.154 9.526 0.457 14.231l-0.033-0.641c1.605 0.048 3.493 0.075 5.387 0.075 63.128 0 119.134-30.497 154.087-77.563l0.366-0.514z"],"attrs":[{}],"tags":["apple"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":162,"id":45,"name":"apple","prevSize":80,"code":59783},"setIdx":0,"setId":1,"iconIdx":126},{"icon":{"paths":["M0.001 0.001h480v480h-480zM543.999 0.001h480v480h-480zM0.001 543.999h480v480h-480zM543.999 543.999h480v480h-480z"],"attrs":[{}],"tags":["microsoft"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":161,"id":46,"name":"microsoft","prevSize":80,"code":59784},"setIdx":0,"setId":1,"iconIdx":127},{"icon":{"paths":["M512 966.541c-12.142-0.011-23.132-4.94-31.084-12.902v0l-397.063-398.237c-51.836-52.853-83.828-125.328-83.828-205.276s31.993-152.425 83.874-205.324l-0.045 0.047c52.537-52.531 125.112-85.022 205.276-85.022s152.739 32.491 205.277 85.023v0l17.595 15.249 16.423-16.423c52.328-52.883 124.914-85.631 205.15-85.631 0.25 0 0.502 0 0.752 0.001h-0.038c0.384-0.001 0.839-0.003 1.294-0.003 79.947 0 152.3 32.511 204.559 85.034l0.012 0.012c51.836 52.853 83.828 125.328 83.828 205.276s-31.993 152.425-83.874 205.324l0.045-0.047-397.063 398.237c-7.714 8.616-18.706 14.16-30.998 14.66l-0.087 0.003zM289.714 145.434c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l0.010-0.010c-36.735 36.902-59.445 87.793-59.445 143.987s22.71 107.086 59.452 143.994l-0.007-0.007 365.979 368.325 365.392-367.151c36.877-36.837 59.687-87.747 59.687-143.987s-22.81-107.15-59.686-143.985l-0.001-0.001c-36.111-36.238-86.066-58.659-141.257-58.659-0.65 0-1.3 0.003-1.949 0.010l0.099-0.001c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l-47.497 47.497c-8.080 7.677-19.030 12.4-31.084 12.4s-23.006-4.723-31.104-12.418l0.019 0.018-47.507-47.507c-36.581-36.947-87.314-59.823-143.391-59.823-0.107 0-0.213 0-0.32 0h0.016z"],"attrs":[{}],"tags":["heart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":160,"id":47,"name":"heart","prevSize":80,"code":59780},"setIdx":0,"setId":1,"iconIdx":128},{"icon":{"paths":["M746.047 0.023h-468.093c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h468.125c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM760.674 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-468.093c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h468.093c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["mobile"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":159,"id":48,"name":"mobile","prevSize":80,"code":59778},"setIdx":0,"setId":1,"iconIdx":129},{"icon":{"paths":["M863.070 0.023h-702.14c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h702.172c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM877.699 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-702.14c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h702.14c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["tablet"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":220,"id":49,"name":"tablet","prevSize":80,"code":59779},"setIdx":0,"setId":1,"iconIdx":130},{"icon":{"paths":["M687.134 672.539c-0.215 0-0.469 0.001-0.724 0.001-92.498 0-176.242-37.479-236.875-98.078l0.001 0.001c-61.305-61.014-99.243-145.459-99.243-238.766 0-186.032 150.809-336.841 336.841-336.841s336.841 150.809 336.841 336.841c0 186.032-150.808 336.84-336.84 336.841v0zM687.134 88.761c-136.764 0.345-247.499 111.293-247.499 248.106 0 68.362 27.648 130.267 72.373 175.141l-0.007-0.007c44.929 45.079 107.076 72.972 175.74 72.972 137.026 0 248.106-111.081 248.106-248.106s-111.081-248.106-248.106-248.106c-0.213 0-0.427 0-0.639 0.001h0.033z","M74.166 993.618c-11.682-0.919-21.941-6.357-29.147-14.547l-0.041-0.048c-6.919-7.71-11.15-17.955-11.15-29.188s4.231-21.479 11.185-29.23l-0.036 0.041 377.122-377.705c7.941-7.869 18.873-12.731 30.94-12.731 24.281 0 43.963 19.683 43.963 43.963 0 12.213-4.98 23.263-13.020 31.229l-0.003 0.003-380.624 373.619c-7.248 8.237-17.507 13.675-29.039 14.585l-0.151 0.010z","M278.488 1022.806c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-7.28-7.798-11.75-18.301-11.75-29.848 0-24.181 19.603-43.783 43.783-43.783 11.548 0 22.050 4.47 29.874 11.775l-0.026-0.023 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z","M395.245 906.051c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-8.584-8.015-13.935-19.399-13.935-32.033 0-24.181 19.603-43.783 43.783-43.783 12.634 0 24.018 5.351 32.008 13.909l0.023 0.026 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{},{},{}],"tags":["key"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":219,"id":50,"name":"key","prevSize":80,"code":59777},"setIdx":0,"setId":1,"iconIdx":131},{"icon":{"paths":["M468.112 906.989c0 48.569-39.207 87.775-87.775 87.775s-87.775-39.207-87.775-87.775 39.207-87.775 87.775-87.775 87.775 39.207 87.775 87.775zM760.696 819.214c-48.569 0-87.775 39.207-87.775 87.775s39.207 87.775 87.775 87.775 87.775-39.207 87.775-87.775-39.207-87.775-87.775-87.775zM1022.852 259.207l-117.033 468.135c-4.681 19.311-22.236 33.355-42.718 33.355h-585.169c-21.066 0-39.207-15.214-43.302-36.28l-110.597-607.405h-80.168c-23.991 0-43.888-19.896-43.888-43.888s19.896-43.888 43.888-43.888h117.033c21.066 0 39.207 15.214 43.302 36.28l25.163 139.271h750.771c13.458 0 26.333 6.436 34.525 16.969s11.119 24.577 8.192 37.451zM923.958 292.562h-678.795l69.050 380.359h514.363l95.383-380.359z"],"attrs":[{}],"tags":["shopping-cart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":156,"id":51,"name":"shopping-cart","prevSize":80,"code":59776},"setIdx":0,"setId":1,"iconIdx":132},{"icon":{"paths":["M46.723 830.79c-0.231 0.004-0.504 0.007-0.777 0.007-24.867 0-45.027-20.159-45.027-45.027 0-5.382 0.944-10.545 2.676-15.329l-0.098 0.314 75.044-247.348c-14.665-39.037-23.418-84.145-24.012-131.219l-0.003-0.259c0-0.259-0.001-0.566-0.001-0.874 0-54.129 11.264-105.629 31.575-152.281l-0.955 2.464c60.427-141.25 198.214-238.423 358.696-238.423 106.632 0 203.244 42.901 273.517 112.384l-0.037-0.035c34.184 34.714 62.103 75.715 81.849 121.093l1 2.581c19.107 44.313 30.22 95.904 30.22 150.090s-11.112 105.775-31.182 152.616l0.962-2.526c-20.746 47.959-48.666 88.96-82.9 123.725l0.051-0.051c-70.377 70.256-167.536 113.703-274.844 113.703-48.549 0-95.021-8.893-137.875-25.139l2.675 0.889-247.348 76.845c-3.958 1.137-8.504 1.794-13.204 1.801h-0.004zM442.359 91.749c-0.253-0.001-0.554-0.001-0.856-0.001-41.547 0-81.081 8.613-116.916 24.15l1.904-0.734c-71.28 30.615-127.108 85.859-157.736 154.781l-0.758 1.912c-14.788 34.299-23.39 74.229-23.39 116.169s8.602 81.87 24.134 118.125l-0.744-1.956c1.7 4.555 2.682 9.817 2.682 15.309s-0.984 10.754-2.783 15.621l0.101-0.312-55.232 180.107 180.107-55.232c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101c34.014 14.517 73.588 22.957 115.132 22.957 122.867 0 228.493-73.819 274.946-179.525l0.754-1.926c13.056-32.416 20.631-70.004 20.631-109.36 0-163.117-130.105-295.846-292.2-300.074l-0.391-0.008z","M977.277 1022.304c-1.984 0.28-4.275 0.439-6.603 0.439s-4.621-0.16-6.864-0.469l0.26 0.030-247.348-75.044c-40.428 15.733-87.225 24.849-136.153 24.849-158.064 0-293.904-95.147-353.373-231.291l-0.967-2.482c-2.862-5.665-4.539-12.349-4.539-19.423 0-18.267 11.175-33.923 27.063-40.506l0.291-0.107c5.517-2.599 11.984-4.116 18.806-4.116 18.319 0 34.084 10.94 41.115 26.643l0.114 0.286c15.121 35.516 35.349 65.946 60.152 91.977l-0.117-0.122c54.202 53.624 128.774 86.753 211.084 86.753 41.688 0 81.392-8.499 117.473-23.857l-1.963 0.743c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101 180.107 55.232-55.232-180.107c-1.7-4.555-2.682-9.817-2.682-15.309s0.984-10.754 2.783-15.621l-0.101 0.312c14.803-33.932 23.415-73.467 23.415-115.014 0-0.301 0-0.602-0.001-0.902v0.046c0.001-0.319 0.001-0.697 0.001-1.075 0-81.912-33.275-156.053-87.045-209.642l-0.008-0.008c-12.456-15.658-25.63-29.595-39.895-42.336l-0.328-0.288c-13.187-8.012-21.861-22.298-21.861-38.61 0-24.867 20.159-45.027 45.027-45.027 10.297 0 19.786 3.456 27.372 9.273l-0.107-0.079c22.529 14.653 42.156 30.276 60.175 47.561l-0.139-0.132c34.393 34.592 62.347 75.63 81.881 121.138l0.968 2.536c19.357 44.266 30.62 95.849 30.62 150.064 0 0.431-0.001 0.863-0.003 1.293v-0.066c-0.136 48.508-8.929 94.919-24.912 137.831l0.898-2.751 75.044 247.348c1.634 4.472 2.578 9.633 2.578 15.015 0 24.867-20.159 45.027-45.027 45.027-0.273 0-0.546-0.003-0.818-0.007h0.041z"],"attrs":[{},{}],"tags":["comments"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":155,"id":52,"name":"comments","prevSize":80,"code":59774},"setIdx":0,"setId":1,"iconIdx":133},{"icon":{"paths":["M89.22 977.058c-0.217 0.004-0.473 0.007-0.729 0.007-23.349 0-42.278-18.929-42.278-42.278 0-5.053 0.887-9.901 2.513-14.393l-0.093 0.294 90.193-295.946c-18.558-46.704-29.318-100.819-29.318-157.447 0-0.732 0.001-1.463 0.006-2.195v0.113c0-0.201 0-0.439 0-0.677 0-62.834 12.85-122.668 36.068-177.015l-1.118 2.942c23.991-55.124 56.28-102.224 95.856-142.080l-0.026 0.026c39.776-39.941 87.133-72.3 139.735-94.736l2.882-1.092c51.475-22.443 111.446-35.5 174.466-35.5s122.993 13.057 177.355 36.615l-2.889-1.115c161.557 70.486 272.594 228.494 273.398 412.529v0.103c-0.378 123.676-50.484 235.576-131.361 316.819l0.016-0.016c-39.83 39.549-86.93 71.841-139.11 94.681l-2.944 1.149c-51.439 22.133-111.317 35.003-174.201 35.003-57.536 0-112.557-10.776-163.152-30.417l3.076 1.050-295.946 90.193c-3.604 1.586-7.788 2.774-12.162 3.355l-0.239 0.026zM557.097 103.314c-149.484 0.668-277.735 90.884-333.925 219.741l-0.917 2.358c-17.678 41.648-27.953 90.087-27.953 140.927s10.274 99.278 28.861 143.354l-0.909-2.427c1.596 4.277 2.518 9.218 2.518 14.374s-0.923 10.098-2.613 14.668l0.095-0.293-69.336 235.065 233.938-71.027c4.277-1.596 9.218-2.518 14.374-2.518s10.098 0.923 14.668 2.613l-0.293-0.095c41.635 17.765 90.074 28.091 140.927 28.091s99.291-10.328 143.335-28.999l-2.408 0.907c131.638-56.462 222.168-184.951 222.168-334.586 0-51.2-10.598-99.924-29.723-144.098l0.907 2.35c-56.972-130.557-184.848-220.199-333.686-220.41h-0.028z"],"attrs":[{}],"tags":["comment"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":154,"id":53,"name":"comment","prevSize":80,"code":59775},"setIdx":0,"setId":1,"iconIdx":134},{"icon":{"paths":["M921.588 175.553h-219.422v-73.14c-4.292-57.542-52.035-102.602-110.299-102.602-2.366 0-4.715 0.074-7.043 0.221l0.318-0.016h-146.282c-2.010-0.13-4.36-0.204-6.725-0.204-58.266 0-106.007 45.060-110.277 102.234l-0.022 0.368v73.14h-219.422c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM409.603 102.412c0-4.681 11.118-14.629 29.256-14.629h146.282c18.139 0 29.256 9.947 29.256 14.629v73.14h-204.793zM102.412 263.322h819.175c8.079 0 14.629 6.55 14.629 14.629v0 190.166h-848.432v-190.166c0-8.079 6.55-14.629 14.629-14.629v0zM321.834 555.884h380.331v87.769h-380.331zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-307.191h146.282v131.653c0.325 24.105 19.78 43.559 43.853 43.884h468.131c24.105-0.325 43.559-19.78 43.884-43.853v-131.685h146.282v307.191c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["briefcase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":153,"id":54,"name":"briefcase","prevSize":80,"code":59773},"setIdx":0,"setId":1,"iconIdx":135},{"icon":{"paths":["M983.875 747.107c-4.979 0-116.724-19.915-116.724-345.747 0-230.128-133.873-373.406-355.151-373.406s-355.151 143.278-355.151 373.406c0 331.917-115.617 345.747-115.065 345.747-22.914 0-41.49 18.576-41.49 41.49s18.576 41.49 41.49 41.49v0h267.193c19.311 95.868 102.854 167.053 203.023 167.053s183.711-71.186 202.798-165.727l0.223-1.325h267.746c22.914 0 41.49-18.576 41.49-41.49s-18.576-41.49-41.49-41.49v0zM512 913.065c-53.673-0.105-99.33-34.318-116.453-82.114l-0.271-0.865h233.448c-17.395 48.661-63.050 82.874-116.711 82.979h-0.013zM166.807 747.107c39.83-60.299 73.022-165.958 73.022-345.747s99.575-290.427 272.172-290.427 272.172 105.66 272.172 290.427 33.192 285.448 73.022 345.747z"],"attrs":[{}],"tags":["bell"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":218,"id":55,"name":"bell","prevSize":80,"code":59772},"setIdx":0,"setId":1,"iconIdx":136},{"icon":{"paths":["M333.040 1023.149c-0.395 0.001-0.861 0.003-1.328 0.003-89.93 0-171.755-34.697-232.82-91.434l0.214 0.196c-60.481-56.047-98.213-135.906-98.213-224.578s37.732-168.531 98.016-224.397l0.197-0.181 442.138-417.574c43.713-40.007 102.187-64.52 166.387-64.52s122.673 24.512 166.573 64.688l-0.186-0.169c46.303 43.075 75.506 103.992 76.611 171.742l0.003 0.2c0.003 0.343 0.003 0.748 0.003 1.154 0 58.355-24.702 110.942-64.219 147.873l-0.117 0.107-442.723 418.16c-25.698 23.896-60.263 38.561-98.253 38.561s-72.555-14.665-98.342-38.643l0.089 0.082c-25.889-23.908-42.047-58.024-42.047-95.913s16.158-72.005 41.958-95.834l0.088-0.081 409.387-385.408c7.935-7.925 18.894-12.829 30.996-12.829s23.061 4.902 30.997 12.829v0c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-409.387 385.408c-8.981 7.868-14.621 19.359-14.621 32.167s5.64 24.299 14.572 32.124l0.049 0.042c10.156 8.727 23.465 14.040 38.014 14.040s27.858-5.313 38.092-14.105l-0.078 0.066 442.723-416.989c21.667-21.246 35.097-50.823 35.097-83.538 0-0.444-0.003-0.888-0.007-1.331v0.067c-1.049-42.681-19.73-80.802-49.009-107.504l-0.118-0.107c-27.771-25.797-65.112-41.627-106.148-41.627s-78.377 15.83-106.245 41.716l0.097-0.090-440.383 416.989c-43.561 40.015-70.766 97.247-70.766 160.83s27.203 120.815 70.608 160.688l0.158 0.143c45.833 42.805 107.572 69.087 175.451 69.087s129.619-26.282 175.601-69.225l-0.149 0.137 438.043-414.651c7.869-8.069 18.849-13.075 30.996-13.075s23.127 5.006 30.988 13.066l0.008 0.010c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-441.552 416.405c-60.773 56.558-142.541 91.272-232.414 91.272-1.768 0-3.534-0.014-5.296-0.040l0.267 0.003z"],"attrs":[{}],"tags":["paperclip"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":151,"id":56,"name":"paperclip","prevSize":80,"code":59771},"setIdx":0,"setId":1,"iconIdx":137},{"icon":{"paths":["M833.7 643.604c-62.907 0.233-118.56 31.082-152.865 78.411l-0.38 0.551-309.417-152.076c5.76-17.446 9.17-37.537 9.358-58.398v-0.093c-0.189-20.954-3.597-41.044-9.755-59.892l0.396 1.402 309.417-152.076c34.79 46.82 89.928 76.825 152.074 76.825 104.34 0 188.925-84.585 188.925-188.925s-84.585-188.925-188.925-188.925c-104.34 0-188.925 84.585-188.925 188.925 0 0.34 0.001 0.68 0.003 1.020v-0.052c0.152 10.439 1.209 20.53 3.098 30.325l-0.173-1.080-319.945 160.849c-34.095-36.053-82.261-58.491-135.669-58.491-0.217 0-0.432 0-0.647 0.001h0.033c-104.986 0-190.096 85.108-190.096 190.096s85.108 190.096 190.096 190.096v0c0.182 0 0.399 0.001 0.614 0.001 53.408 0 101.575-22.439 135.587-58.404l0.082-0.088 319.945 160.849c-1.751 8.911-2.81 19.209-2.924 29.734l-0.001 0.096c0 104.986 85.108 190.096 190.096 190.096s190.096-85.108 190.096-190.096c0-104.986-85.108-190.096-190.096-190.096v0zM833.7 87.942c56.531 0 102.359 45.827 102.359 102.359s-45.827 102.359-102.359 102.359c-56.531 0-102.359-45.827-102.359-102.359v0c0.33-56.398 45.96-102.029 102.328-102.359h0.032zM190.3 614.359c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032zM833.7 936.058c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032z"],"attrs":[{}],"tags":["share-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":150,"id":57,"name":"share-alt","prevSize":80,"code":59770},"setIdx":0,"setId":1,"iconIdx":138},{"icon":{"paths":["M921.588 58.527h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v702.182c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-702.182c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM102.412 146.296h819.175c8.079 0 14.629 6.55 14.629 14.629v0 90.11l-424.215 211.815-424.215-211.815v-90.11c0-8.079 6.55-14.629 14.629-14.629v0zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-514.325l404.322 202.454c5.795 2.962 12.643 4.698 19.895 4.698s14.098-1.736 20.147-4.815l-0.252 0.117 404.322-202.454v514.325c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["envelope"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":217,"id":58,"name":"envelope","prevSize":80,"code":59769},"setIdx":0,"setId":1,"iconIdx":139},{"icon":{"paths":["M710.11 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.124 19.673-11.546 36.649-28.101 44.774l-0.296 0.132c-5.939 2.921-12.928 4.629-20.316 4.629-0.288 0-0.574-0.003-0.859-0.008h0.043zM99.27 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z","M915.484 735.204c-11.19-0.147-21.49-3.841-29.859-10.006l0.142 0.101c-12.083-9.132-19.811-23.475-19.811-39.622 0-11.206 3.721-21.543 9.995-29.84l-0.090 0.124c30.292-39.484 48.545-89.591 48.545-143.96s-18.251-104.477-48.961-144.528l0.418 0.566c-6.185-8.174-9.906-18.511-9.906-29.717 0-27.353 22.174-49.528 49.528-49.528 16.148 0 30.49 7.728 39.532 19.687l0.090 0.124c42.965 55.728 68.862 126.535 68.862 203.393s-25.897 147.666-69.442 204.176l0.58-0.783c-9.257 11.932-23.523 19.596-39.586 19.811h-0.036z"],"attrs":[{},{}],"tags":["volume-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":148,"id":59,"name":"volume-down","prevSize":80,"code":59766},"setIdx":0,"setId":1,"iconIdx":140},{"icon":{"paths":["M565.883 929.593c-9.559-0.164-18.337-3.376-25.438-8.703l0.112 0.081-258.099-206.91h-255.405c-22.198-0.299-40.113-18.215-40.412-40.383v-323.327c0.299-22.198 18.215-40.113 40.383-40.412h255.434l258.099-206.91c6.865-5.557 15.703-8.921 25.326-8.921 22.319 0 40.412 18.093 40.412 40.412 0 0.105 0 0.21-0.001 0.316v-0.016 754.361c-0.101 16.052-9.421 29.904-22.929 36.534l-0.241 0.107c-4.846 2.383-10.549 3.777-16.577 3.777-0.235 0-0.469-0.003-0.701-0.006h0.035zM67.466 633.237h229.002c9.573 0.042 18.381 3.277 25.424 8.695l-0.099-0.073 203.677 161.649v-584.629l-203.677 161.649c-6.785 5.918-15.568 9.703-25.217 10.233l-0.107 0.005h-229.002z","M860.084 839.070c-10.094-0.015-19.331-3.681-26.461-9.747l0.058 0.048c-8.624-7.36-14.057-18.239-14.057-30.387 0-10.3 3.905-19.687 10.315-26.762l-0.030 0.034c61.742-68.722 99.501-160.079 99.501-260.255s-37.758-191.532-99.818-260.614l0.318 0.36c-6.378-7.12-10.277-16.575-10.277-26.941 0-22.34 18.111-40.451 40.451-40.451 11.975 0 22.734 5.203 30.141 13.472l0.034 0.038c74.659 82.7 120.339 192.814 120.339 313.599s-45.68 230.898-120.705 314.010l0.366-0.412c-7.167 8.586-17.874 14.010-29.847 14.010-0.115 0-0.23 0-0.345-0.001h0.018z","M733.459 694.124c-9.131-0.12-17.535-3.134-24.364-8.165l0.116 0.082c-9.859-7.451-16.165-19.154-16.165-32.33 0-9.143 3.036-17.578 8.156-24.348l-0.073 0.101c24.717-32.217 39.61-73.102 39.61-117.464s-14.892-85.248-39.95-117.928l0.341 0.462c-5.046-6.669-8.082-15.104-8.082-24.247 0-22.319 18.093-40.412 40.412-40.412 13.176 0 24.879 6.306 32.257 16.064l0.073 0.101c35.058 45.471 56.188 103.247 56.188 165.959s-21.131 120.489-56.662 166.598l0.474-0.639c-7.553 9.736-19.193 15.989-32.301 16.165h-0.029z"],"attrs":[{},{},{}],"tags":["volume-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":147,"id":60,"name":"volume-up","prevSize":80,"code":59767},"setIdx":0,"setId":1,"iconIdx":141},{"icon":{"paths":["M842.183 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.153 19.495-11.255 36.364-27.452 44.771l-0.283 0.133c-6.264 2.921-13.598 4.625-21.331 4.625-0.163 0-0.323 0-0.486-0.002h0.025zM231.344 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z"],"attrs":[{}],"tags":["volume-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":146,"id":61,"name":"volume-off","prevSize":80,"code":59768},"setIdx":0,"setId":1,"iconIdx":142},{"icon":{"paths":["M974.421 561.545h-924.841c-27.344-0.025-49.502-22.198-49.502-49.545 0-13.671 5.537-26.048 14.49-35.013v0l462.421-462.421c8.963-8.952 21.342-14.49 35.011-14.49s26.048 5.537 35.013 14.49v0l462.421 462.421c8.952 8.963 14.49 21.342 14.49 35.011 0 27.347-22.157 49.52-49.499 49.545h-0.003zM169.148 462.455h685.704l-342.852-342.852z","M908.36 1023.966h-792.721c-63.696-0.373-115.233-51.908-115.606-115.57v-132.155c0.373-63.696 51.908-115.233 115.57-115.606h792.757c63.696 0.373 115.233 51.908 115.606 115.57v132.155c-0.373 63.696-51.908 115.233-115.57 115.606h-0.036zM115.64 759.725c-9.121 0-16.516 7.395-16.516 16.516v0 132.12c0 9.121 7.395 16.516 16.516 16.516v0h792.721c9.121 0 16.516-7.395 16.516-16.516v0-132.12c0-9.121-7.395-16.516-16.516-16.516v0z"],"attrs":[{},{}],"tags":["eject"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":145,"id":62,"name":"eject","prevSize":80,"code":59765},"setIdx":0,"setId":1,"iconIdx":143},{"icon":{"paths":["M921.588 117.040h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM936.215 219.438v97.715h-12.288c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-7.607c-7.377-1.502-13.839-3.52-20.003-6.11l0.694 0.259h-7.022c-8.645-4.243-16.008-9.735-22.196-16.341l-0.038-0.041c-16.923-16.712-27.426-39.89-27.5-65.521v-0.014c0.016-8.559 1.299-16.812 3.668-24.592l-0.158 0.601h98.887c0.004 0 0.008 0 0.012 0 7.873 0 14.294 6.219 14.615 14.014l0.001 0.029zM102.412 204.809h98.887c2.212 7.178 3.494 15.431 3.511 23.981v0.010c-0.074 25.645-10.578 48.823-27.491 65.525l-0.010 0.010c-6.348 6.456-13.68 11.92-21.756 16.155l-0.479 0.229h-7.607c-5.25 2.652-11.34 4.689-17.749 5.795l-0.389 0.056h-8.191c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-12.288v-97.131c0-8.079 6.55-14.629 14.629-14.629v0zM87.785 804.562v-97.715h12.288c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h7.607c7.229 1.166 13.718 3.206 19.76 6.041l-0.451-0.191h7.022c8.556 4.464 15.886 9.927 22.223 16.372l0.012 0.012c16.923 16.712 27.426 39.89 27.5 65.521v0.014c-0.016 8.559-1.299 16.812-3.668 24.592l0.158-0.601h-98.887c-0.004 0-0.008 0-0.012 0-7.873 0-14.294-6.219-14.615-14.014l-0.001-0.029zM290.823 819.191c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549c0.004-0.481 0.007-1.050 0.007-1.62 0-49.382-20.391-94-53.213-125.896l-0.041-0.040c-8.427-8.529-17.825-16.067-28.024-22.443l-0.647-0.377-9.947-6.436c-5.625-3.003-12.567-6.153-19.707-8.903l-1.358-0.459-11.702-4.681c-8.77-2.704-19.269-4.96-30.044-6.336l-0.968-0.101c-2.719-0.288-5.875-0.451-9.069-0.451s-6.35 0.165-9.458 0.484l0.389-0.033h-29.256v-210.060h49.736c9.036-1.557 16.909-3.588 24.522-6.182l-1.116 0.331 12.873-4.096c9.915-3.42 18.418-7.374 26.429-12.074l-0.683 0.37 9.362-5.266c11.406-7.555 21.355-15.646 30.453-24.6l-0.026 0.025c32.863-31.937 53.254-76.555 53.254-125.937 0-0.569-0.003-1.138-0.008-1.707v0.086c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549h442.355c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549c-0.004 0.481-0.007 1.050-0.007 1.62 0 49.382 20.391 94 53.213 125.896l0.041 0.040c8.973 9.14 18.943 17.251 29.747 24.168l0.679 0.407 9.362 5.266c7.327 4.329 15.83 8.282 24.727 11.392l1.018 0.31 12.873 4.096c6.721 2.133 14.826 3.972 23.141 5.166l0.85 0.1h49.151v208.304h-29.256c-2.719-0.277-5.876-0.435-9.069-0.435s-6.351 0.158-9.463 0.466l0.394-0.032c-11.742 1.477-22.241 3.733-32.391 6.794l1.38-0.358-11.702 4.681c-9.096 3.533-16.61 7.072-23.848 11.051l1.029-0.518-9.947 6.436c-10.846 6.753-20.244 14.291-28.657 22.805l-0.015 0.015c-32.863 31.937-53.254 76.555-53.254 125.937 0 0.569 0.003 1.138 0.008 1.707v-0.086c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549zM921.588 819.191h-98.887c-2.212-7.178-3.494-15.431-3.511-23.981v-0.010c0.074-25.645 10.578-48.823 27.491-65.525l0.010-0.010c6.226-6.647 13.589-12.14 21.793-16.186l0.443-0.197h7.022c5.388-2.223 11.845-4.236 18.507-5.704l0.802-0.148h7.607c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h12.288v97.131c0 8.079-6.55 14.629-14.629 14.629v0z","M512 307.207c-113.105 0-204.793 91.69-204.793 204.793s91.69 204.793 204.793 204.793c113.105 0 204.793-91.69 204.793-204.793v0c0-113.105-91.69-204.793-204.793-204.793v0zM512 629.025c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0z"],"attrs":[{},{}],"tags":["money-bill"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":144,"id":63,"name":"money-bill","prevSize":80,"code":59764},"setIdx":0,"setId":1,"iconIdx":144},{"icon":{"paths":["M871.768 55.371h-553.491c-84.063 0-152.209 68.147-152.209 152.209v0 13.838h-13.838c-84.063 0-152.209 68.147-152.209 152.209v0 442.792c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-13.838h13.838c84.063 0 152.209-68.147 152.209-152.209v0-442.792c0-84.063-68.147-152.209-152.209-152.209v0zM249.092 207.58c0-38.21 30.976-69.186 69.186-69.186v0h553.491c38.21 0 69.186 30.976 69.186 69.186v0 343.163l-125.642-105.716c-7.15-6.241-16.567-10.047-26.872-10.047-12.495 0-23.684 5.595-31.196 14.418l-0.048 0.058-59.223 69.74-221.396-214.755c-6.965-8.265-17.229-13.559-28.735-13.836l-0.047-0.001c-11.963 0.464-22.566 5.925-29.844 14.338l-0.044 0.052-168.814 200.917zM318.279 719.559c-38.21 0-69.186-30.976-69.186-69.186v0-16.605l203.131-239.108 191.508 187.633-116.233 137.265zM774.908 816.42c0 38.21-30.976 69.186-69.186 69.186v0h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-442.792c0-38.21 30.976-69.186 69.186-69.186v0h13.838v345.932c0 84.063 68.147 152.209 152.209 152.209v0h456.629zM871.768 719.559h-235.233l157.191-184.866 145.567 123.429c-3.487 34.553-32.362 61.315-67.514 61.437h-0.013z"],"attrs":[{}],"tags":["images"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":143,"id":64,"name":"images","prevSize":80,"code":59763},"setIdx":0,"setId":1,"iconIdx":145},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM160.914 146.285h702.171c40.395 0 73.142 32.747 73.142 73.142v0 479.232l-159.158-159.158c-7.493-7.993-18.119-12.974-29.908-12.974-1.007 0-2.005 0.036-2.992 0.108l0.133-0.008c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-75.483 90.697-269.166-269.166c-7.488-7.945-18.081-12.89-29.83-12.89-0.416 0-0.831 0.007-1.244 0.018l0.060-0.001c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-216.503 258.048v-405.504c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-42.716l251.612-301.934 241.079 241.079-147.456 175.543h-272.091c-0.003 0-0.005 0-0.010 0-39.984 0-72.475-32.083-73.133-71.911l-0.001-0.062zM863.086 877.715h-315.977l201.874-242.249 184.32 184.32c-6.765 33.136-35.591 57.744-70.197 57.929h-0.021z"],"attrs":[{}],"tags":["image"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":142,"id":65,"name":"image","prevSize":80,"code":59762},"setIdx":0,"setId":1,"iconIdx":146},{"icon":{"paths":["M863.075 1023.984h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.762 0.162 3.81 0.255 5.881 0.255 34.275 0 62.615-25.405 67.22-58.41l0.041-0.357v-729.651c-4.645-33.363-32.986-58.768-67.261-58.768-2.069 0-4.118 0.093-6.141 0.274l0.261-0.019h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.958-0.089 4.255-0.14 6.565-0.14 83.099 0 150.872 65.615 154.335 147.863l0.011 0.313v726.14c-3.472 82.56-71.246 148.176-154.344 148.176-2.309 0-4.606-0.051-6.89-0.151l0.325 0.011z","M453.487 789.935c-0.060 0-0.133 0-0.204 0-12.052 0-22.953-4.923-30.803-12.869l-0.004-0.004c-7.929-7.939-12.835-18.903-12.835-31.011s4.904-23.072 12.835-31.013v0l203.038-203.038-203.038-203.038c-7.297-7.816-11.777-18.344-11.777-29.917 0-24.237 19.648-43.884 43.884-43.884 11.575 0 22.101 4.48 29.943 11.802l-0.026-0.023 234.051 234.051c7.929 7.939 12.835 18.903 12.835 31.011s-4.904 23.072-12.835 31.013v0l-234.051 234.051c-7.854 7.95-18.755 12.873-30.807 12.873-0.071 0-0.144 0-0.215 0h0.011z","M687.538 555.884h-643.638c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h643.638c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["sign-in"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":141,"id":66,"name":"sign-in","prevSize":80,"code":59760},"setIdx":0,"setId":1,"iconIdx":147},{"icon":{"paths":["M336.515 1023.832h-175.485c-1.958 0.089-4.254 0.14-6.563 0.14-83.075 0-150.827-65.596-154.289-147.819l-0.011-0.313v-727.679c3.471-82.536 71.225-148.132 154.298-148.132 2.309 0 4.605 0.051 6.888 0.151l-0.325-0.011h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0h-175.485c-1.762-0.162-3.809-0.255-5.879-0.255-34.265 0-62.596 25.397-67.2 58.393l-0.041 0.356v729.434c4.644 33.353 32.976 58.751 67.241 58.751 2.069 0 4.117-0.093 6.139-0.274l-0.26 0.019h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z","M745.981 789.852c-0.060 0-0.133 0-0.204 0-12.048 0-22.946-4.922-30.794-12.865l-0.004-0.004c-7.927-7.937-12.831-18.898-12.831-31.002s4.903-23.065 12.831-31.003v0l202.978-202.978-202.978-202.978c-8.602-8.031-13.963-19.438-13.963-32.097 0-24.229 19.642-43.871 43.871-43.871 12.66 0 24.066 5.362 32.073 13.937l0.023 0.026 233.981 233.981c7.927 7.937 12.831 18.898 12.831 31.002s-4.903 23.065-12.831 31.003v0l-233.981 233.981c-7.852 7.948-18.75 12.869-30.798 12.869-0.071 0-0.144 0-0.215 0h0.011z","M979.961 555.871h-643.446c-24.229 0-43.871-19.642-43.871-43.871s19.642-43.871 43.871-43.871v0h643.446c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z"],"attrs":[{},{},{}],"tags":["sign-out"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":140,"id":67,"name":"sign-out","prevSize":80,"code":59761},"setIdx":0,"setId":1,"iconIdx":148},{"icon":{"paths":["M823.892 558.055c-0.046 0-0.1 0-0.154 0-10.973 0-20.961-4.21-28.44-11.103l0.029 0.026c-74.352-66.801-173.194-107.653-281.576-107.653s-207.224 40.851-281.966 107.996l0.389-0.344c-7.699 6.911-17.932 11.137-29.152 11.137-12.958 0-24.6-5.638-32.606-14.593l-0.037-0.042c-6.617-7.695-10.645-17.782-10.645-28.809 0-13.081 5.67-24.84 14.685-32.949l0.041-0.036c89.475-80.776 208.611-130.198 339.291-130.198s249.814 49.422 339.736 130.594l-0.445-0.396c9.056 8.146 14.726 19.904 14.726 32.986 0 11.028-4.029 21.114-10.694 28.868l0.049-0.059c-8.339 8.889-20.122 14.46-33.209 14.575h-0.020z","M978.379 395.406c-11.486-0.060-21.927-4.48-29.763-11.688l0.031 0.029c-113.494-108.335-267.577-175.003-437.231-175.003s-323.736 66.669-437.478 175.238l0.247-0.234c-8.074 9.555-20.065 15.58-33.462 15.58-24.147 0-43.723-19.576-43.723-43.723 0-14.862 7.414-27.991 18.746-35.891l0.142-0.094c128.857-122.252 303.412-197.437 495.528-197.437s366.671 75.186 495.847 197.738l-0.318-0.301c8.63 8.010 14.013 19.416 14.013 32.079 0 23.746-18.928 43.070-42.521 43.707l-0.059 0.001z","M359.26 724.203c-14.255 0-26.917-6.822-34.899-17.38l-0.079-0.109c-5.603-7.207-8.984-16.384-8.984-26.351 0-14.271 6.93-26.924 17.608-34.778l0.12-0.083c49.111-37.883 111.521-60.719 179.265-60.719s130.154 22.836 179.953 61.23l-0.689-0.51c10.667 8.061 17.489 20.723 17.489 34.978 0 9.892-3.285 19.018-8.824 26.343l0.079-0.109c-8.18 10.541-20.853 17.261-35.095 17.261-9.821 0-18.895-3.195-26.241-8.603l0.123 0.086c-34.771-26.697-78.905-42.783-126.797-42.783s-92.026 16.086-127.294 43.149l0.497-0.366c-7.262 5.353-16.355 8.615-26.202 8.745h-0.031z","M512 905.508c-24.147 0-43.723-19.576-43.723-43.723s19.576-43.723 43.723-43.723v0 0c24.147 0 43.723 19.576 43.723 43.723s-19.576 43.723-43.723 43.723v0z"],"attrs":[{},{},{},{}],"tags":["wifi"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":139,"id":68,"name":"wifi","prevSize":80,"code":59759},"setIdx":0,"setId":1,"iconIdx":149},{"icon":{"paths":["M590.766 393.851h-157.532c-50.632-0.297-91.598-41.261-91.894-91.866v-157.56c0.297-50.632 41.261-91.598 91.866-91.894h157.56c50.632 0.297 91.598 41.261 91.894 91.866v157.56c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM433.234 131.298c-7.25 0-13.128 5.878-13.128 13.128v0 157.532c0 7.25 5.878 13.128 13.128 13.128v0h157.532c7.25 0 13.128-5.878 13.128-13.128v0-157.532c0-7.25-5.878-13.128-13.128-13.128v0z","M196.936 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM91.915 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M564.511 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM459.489 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M932.085 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM827.064 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M879.575 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-105.049c0-7.25-5.878-13.128-13.128-13.128v0h-630.129c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 21.751-17.633 39.383-39.383 39.383s-39.383-17.633-39.383-39.383v0-105.021c0.297-50.632 41.261-91.598 91.866-91.894h630.157c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z","M512 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-315.093c0-21.751 17.633-39.383 39.383-39.383s39.383 17.633 39.383 39.383v0 315.064c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z"],"attrs":[{},{},{},{},{},{}],"tags":["sitemap"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":138,"id":69,"name":"sitemap","prevSize":80,"code":59758},"setIdx":0,"setId":1,"iconIdx":150},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M263.757 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M480.97 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M698.182 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M915.393 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{},{},{}],"tags":["chart-bar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":137,"id":70,"name":"chart-bar","prevSize":80,"code":59757},"setIdx":0,"setId":1,"iconIdx":151},{"icon":{"paths":["M863.086 936.228h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-351.086c0-88.87 72.044-160.914 160.914-160.914v0h35.109l69.047-102.4c29.412-43.303 78.425-71.379 133.997-71.387h225.866c55.573 0.008 104.587 28.085 133.636 70.825l0.361 0.562 69.047 102.4h35.109c88.87 0 160.914 72.044 160.914 160.914v0 351.086c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 351.086c-40.395 0-73.142 32.747-73.142 73.142v0 351.086c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-351.086c0-40.395-32.747-73.142-73.142-73.142v0h-58.515c-15.035-0.029-28.294-7.614-36.181-19.159l-0.097-0.151-80.75-123.466c-12.764-19.278-34.075-32.011-58.402-32.765l-0.111-0.003h-229.961c-24.44 0.758-45.751 13.489-58.346 32.499l-0.167 0.269-84.846 123.466c-7.986 11.696-21.243 19.281-36.274 19.31h-0.004z","M512 760.685c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 468.114c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["camera"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":136,"id":71,"name":"camera","prevSize":80,"code":59756},"setIdx":0,"setId":1,"iconIdx":152},{"icon":{"paths":["M512 1023.977c-24.105-0.325-43.559-19.779-43.884-43.852v-936.219c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 936.187c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M599.768 906.954h-380.325c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h380.325c3.954 0.373 8.548 0.587 13.193 0.587 76.308 0 139.186-57.511 147.651-131.554l0.063-0.684c-8.529-74.727-71.406-132.238-147.714-132.238-4.645 0-9.24 0.213-13.775 0.629l0.583-0.044h-175.535c-4.502 0.309-9.759 0.484-15.056 0.484-124.284 0-225.944-96.875-233.585-219.234l-0.033-0.671c7.676-123.029 109.334-219.903 233.619-219.903 5.298 0 10.553 0.176 15.762 0.522l-0.706-0.037h321.815c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0h-321.815c-3.954-0.373-8.548-0.587-13.193-0.587-76.308 0-139.186 57.511-147.651 131.554l-0.063 0.684c8.529 74.727 71.406 132.238 147.714 132.238 4.645 0 9.24-0.213 13.775-0.629l-0.583 0.044h175.535c4.502-0.309 9.759-0.484 15.056-0.484 124.284 0 225.944 96.875 233.585 219.234l0.033 0.671c-7.676 123.029-109.334 219.903-233.619 219.903-5.298 0-10.553-0.176-15.762-0.522l0.706 0.037z"],"attrs":[{},{}],"tags":["dollar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":135,"id":72,"name":"dollar","prevSize":80,"code":59755},"setIdx":0,"setId":1,"iconIdx":153},{"icon":{"paths":["M746.049 0.019c-153.498 0-277.933 124.435-277.933 277.933v0 131.652h-307.189c-88.867 0-160.908 72.041-160.908 160.908v0 292.56c0 88.867 72.041 160.908 160.908 160.908v0h409.585c88.867 0 160.908-72.041 160.908-160.908v0-292.56c0-88.867-72.041-160.908-160.908-160.908v0h-14.628v-131.652c0-105.024 85.139-190.165 190.165-190.165s190.165 85.139 190.165 190.165v0c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0c0-153.498-124.435-277.933-277.933-277.933v0zM643.652 570.513v292.56c0 40.394-32.746 73.14-73.14 73.14v0h-409.585c-40.394 0-73.14-32.746-73.14-73.14v0-292.56c0-40.394 32.746-73.14 73.14-73.14v0h409.585c40.394 0 73.14 32.746 73.14 73.14v0z"],"attrs":[{}],"tags":["lock-open"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":134,"id":73,"name":"lock-open","prevSize":80,"code":59754},"setIdx":0,"setId":1,"iconIdx":154},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM936.228 219.429v248.685h-380.342v-321.829h307.2c40.395 0 73.142 32.747 73.142 73.142v0zM160.914 146.285h307.2v321.829h-380.342v-248.685c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-248.685h380.342v321.829h-307.2c-40.395 0-73.142-32.747-73.142-73.142v0zM863.086 877.715h-307.2v-321.829h380.342v248.685c0 40.395-32.747 73.142-73.142 73.142v0z"],"attrs":[{}],"tags":["table"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":133,"id":74,"name":"table","prevSize":80,"code":59753},"setIdx":0,"setId":1,"iconIdx":155},{"icon":{"paths":["M512 1022.599c-0.113 0.001-0.245 0.001-0.378 0.001-8.356 0-16.084-2.691-22.364-7.254l0.11 0.076c-16.56-10.488-405.166-271.583-405.166-588.982 0-236.266 191.533-427.799 427.799-427.799s427.799 191.533 427.799 427.799v0c0 317.399-386.399 578.495-405.166 588.982-6.17 4.487-13.897 7.178-22.254 7.178-0.133 0-0.265-0.001-0.397-0.003h0.021zM512 84.201c-0.329-0.001-0.718-0.001-1.107-0.001-189.346 0-342.951 153.026-343.891 342.151v0.089c0 232.392 264.407 444.91 344.999 503.975 80.591-59.063 344.999-271.583 344.999-503.975-0.939-189.216-154.544-342.241-343.891-342.241-0.389 0-0.779 0.001-1.168 0.003h0.061z","M512 553.4c-83.836 0-151.799-67.963-151.799-151.799s67.963-151.799 151.799-151.799c83.836 0 151.799 67.963 151.799 151.799v0c0 83.836-67.963 151.799-151.799 151.799v0zM512 332.6c-38.107 0-68.999 30.892-68.999 68.999s30.892 68.999 68.999 68.999c38.107 0 68.999-30.892 68.999-68.999v0c0-38.107-30.892-68.999-68.999-68.999v0z"],"attrs":[{},{}],"tags":["map-marker"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":132,"id":75,"name":"map-marker","prevSize":80,"code":59752},"setIdx":0,"setId":1,"iconIdx":156},{"icon":{"paths":["M967.082 560.759h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 268.207h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 853.311h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M56.918 284.46c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c5.935-5.857 13.086-10.5 21.038-13.514l0.416-0.139c7.303-3.084 15.795-4.877 24.704-4.877s17.401 1.792 25.134 5.036l-0.428-0.16c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c11.461 12.002 18.595 28.224 18.853 46.107v0.050c0 0.111 0.002 0.244 0.002 0.376 0 17.859-7.201 34.037-18.859 45.786l0.005-0.005c-6.208 5.511-13.262 10.282-20.899 14.055l-0.555 0.248c-7.082 2.883-15.3 4.556-23.909 4.556-0.28 0-0.559-0.002-0.84-0.005h0.043z","M56.918 577.012c-8.949-0.111-17.424-2.014-25.124-5.363l0.419 0.163c-8.262-3.501-15.357-8.097-21.513-13.706l0.059 0.053c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c6.096-5.555 13.192-10.151 20.966-13.467l0.488-0.186c8.019-3.808 17.424-6.032 27.348-6.032 3.658 0 7.245 0.302 10.739 0.882l-0.379-0.052 11.702 3.901 11.702 5.851c3.642 2.58 6.822 5.141 9.837 7.878l-0.085-0.076c11.672 12.226 18.854 28.826 18.854 47.102 0 0.125 0 0.251-0.002 0.376v-0.020c0 35.905-29.107 65.012-65.012 65.012v0z","M56.918 869.564c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-5.555-6.096-10.151-13.192-13.467-20.966l-0.186-0.488c-3.296-7.27-5.216-15.763-5.216-24.704s1.92-17.436 5.371-25.089l-0.155 0.385c3.501-8.262 8.097-15.357 13.706-21.513l-0.053 0.059c11.733-11.582 27.863-18.736 45.663-18.736 9.098 0 17.76 1.87 25.624 5.245l-0.424-0.162c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c5.555 6.096 10.151 13.192 13.467 20.966l0.186 0.488c3.296 7.27 5.216 15.763 5.216 24.704s-1.92 17.436-5.371 25.089l0.155-0.385c-3.501 8.262-8.097 15.357-13.706 21.513l0.053-0.059c-11.746 11.653-27.923 18.854-45.783 18.854-0.133 0-0.264 0-0.396-0.002h0.020z"],"attrs":[{},{},{},{},{},{}],"tags":["list"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":131,"id":76,"name":"list","prevSize":80,"code":59751},"setIdx":0,"setId":1,"iconIdx":157},{"icon":{"paths":["M1020.3 494.452c-7.019-15.208-167.289-377.277-508.3-377.277-0.14 0-0.306 0-0.472 0-34.241 0-67.586 3.836-99.63 11.102l3.004-0.573c-18.045 5.713-30.896 22.309-30.896 41.908 0 24.228 19.641 43.869 43.869 43.869 2.026 0 4.020-0.137 5.972-0.403l-0.228 0.025c23.536-5.148 50.592-8.127 78.334-8.188h0.045c244.499 0 384.881 239.819 419.391 307.086-23.064 44.686-47.534 82.99-75.058 118.824l1.357-1.84c-5.75 7.348-9.221 16.722-9.221 26.907 0 24.18 19.562 43.79 43.724 43.869h0.007c13.993-0.045 26.437-6.635 34.437-16.866l0.073-0.096c34.924-43.997 66.128-93.737 91.55-146.775l2.039-4.721c2.455-5.422 3.887-11.757 3.887-18.425s-1.431-13.003-4.002-18.713l0.117 0.288z","M192.045 130.044c-7.813-7.295-18.337-11.773-29.907-11.773-24.228 0-43.869 19.641-43.869 43.869 0 11.571 4.479 22.094 11.798 29.933l-0.023-0.026 53.813 53.813c-74.699 68.875-135.393 151.659-178.181 244.402l-1.975 4.776c-2.203 5.093-3.485 11.025-3.485 17.256s1.282 12.161 3.596 17.545l-0.111-0.289c7.019 15.208 167.289 377.277 508.3 377.277 0.681 0.004 1.487 0.005 2.294 0.005 94.711 0 182.793-28.386 256.201-77.116l-1.714 1.069 63.172 63.172c7.936 7.927 18.897 12.83 31.001 12.83s23.064-4.902 31.002-12.83v0c7.927-7.936 12.83-18.897 12.83-31.001s-4.902-23.064-12.83-31.002v0zM416.073 480.999l129.268 129.853c-9.942 3.409-21.397 5.378-33.312 5.378-28.107 0-53.656-10.952-72.612-28.824l0.052 0.049c-18.724-18.468-30.323-44.118-30.323-72.478 0-13.277 2.543-25.962 7.167-37.592l-0.241 0.688zM512 819.086c-245.083 0-384.881-240.404-419.391-307.086 39.962-79.399 91.284-146.975 152.768-203.701l0.481-0.439 104.701 104.701c-17.797 28.341-28.353 62.795-28.353 99.714 0 104.667 84.849 189.516 189.516 189.516 36.919 0 71.373-10.557 100.508-28.817l-0.792 0.463 94.173 94.173c-54.756 32.362-120.666 51.482-191.042 51.482-0.903 0-1.805-0.003-2.708-0.010l0.138 0.001z"],"attrs":[{},{}],"tags":["eye-slash"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":130,"id":77,"name":"eye-slash","prevSize":80,"code":59749},"setIdx":0,"setId":1,"iconIdx":158},{"icon":{"paths":["M512 906.971c-341.139 0-501.467-362.204-508.489-377.417-2.22-5.185-3.511-11.22-3.511-17.554s1.291-12.369 3.623-17.853l-0.112 0.299c7.022-15.213 167.351-377.417 508.489-377.417s501.467 362.204 508.489 377.417c2.22 5.185 3.511 11.22 3.511 17.554s-1.291 12.369-3.623 17.853l0.112-0.299c-7.022 15.213-167.351 377.417-508.489 377.417zM92.453 512c34.523 67.292 175.543 307.2 419.547 307.2s385.024-239.908 419.547-307.2c-34.523-67.292-175.543-307.2-419.547-307.2s-385.024 239.908-419.547 307.2z","M512 702.172c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 409.6c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["eye"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":129,"id":78,"name":"eye","prevSize":80,"code":59750},"setIdx":0,"setId":1,"iconIdx":159},{"icon":{"paths":["M82.761 872.006h-83.078v-609.242c-0.010-0.662-0.017-1.442-0.017-2.225 0-82.317 66.265-149.157 148.363-150.085l0.088-0.001h133.48c0.27-0.006 0.588-0.010 0.906-0.010 12.364 0 23.485 5.331 31.186 13.821l0.031 0.035 147.88 178.895h271.943c0.175-0.001 0.383-0.001 0.591-0.001 82.895 0 150.096 67.2 150.096 150.096 0 1.168-0.013 2.335-0.040 3.497l0.003-0.173v27.692h-83.078v-27.692c0.013-0.495 0.021-1.077 0.021-1.662 0-37.318-30.252-67.57-67.57-67.57-0.008 0-0.014 0-0.022 0h-291.881c-12.686-0.029-24.015-5.815-31.514-14.885l-0.056-0.069-147.88-178.895h-114.094c-36.362 1.219-65.376 30.988-65.376 67.535 0 0.597 0.008 1.192 0.023 1.785l-0.001-0.088z","M795.574 913.546h-754.353c-14.913-0.126-27.961-7.987-35.343-19.762l-0.103-0.177c-3.401-5.891-5.407-12.958-5.407-20.493s2.007-14.601 5.513-20.694l-0.106 0.201 187.203-360.006c7.347-13.219 21.185-22.042 37.092-22.155h752.707c14.913 0.126 27.961 7.987 35.343 19.762l0.103 0.177c3.401 5.891 5.407 12.958 5.407 20.493s-2.007 14.601-5.513 20.694l0.106-0.201-187.203 360.006c-7.071 12.759-20.17 21.423-35.35 22.151l-0.097 0.004zM109.346 830.467h661.305l144.002-276.928h-661.305z"],"attrs":[{},{}],"tags":["folder-open"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":128,"id":79,"name":"folder-open","prevSize":80,"code":59748},"setIdx":0,"setId":1,"iconIdx":160},{"icon":{"paths":["M853.323 961.925h-682.645c-94.253 0-170.661-76.408-170.661-170.661v0-558.528c0-94.253 76.408-170.661 170.661-170.661v0h155.147c0.039 0 0.084 0 0.131 0 13.934 0 26.476 5.965 35.211 15.48l0.032 0.035 171.903 201.070h320.223c0 0 0 0 0.001 0 94.253 0 170.661 76.408 170.661 170.661 0 0.218 0 0.436-0.001 0.655v-0.033 341.323c0 94.253-76.408 170.661-170.661 170.661v0zM170.677 155.163c-42.842 0-77.573 34.731-77.573 77.573v0 558.528c0 42.842 34.731 77.573 77.573 77.573v0h682.645c42.842 0 77.573-34.731 77.573-77.573v0-341.323c0-42.842-34.731-77.573-77.573-77.573v0h-341.323c-14.071-0.131-26.67-6.321-35.33-16.085l-0.044-0.049-171.903-201.070z"],"attrs":[{}],"tags":["folder"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":126,"id":80,"name":"folder","prevSize":80,"code":59747},"setIdx":0,"setId":1,"iconIdx":161},{"icon":{"paths":["M570.515 906.971h-409.6c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h409.6c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 204.8c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h409.6c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M980.114 789.943c-8.437-0.136-16.291-2.51-23.030-6.553l0.21 0.117-292.571-175.543c-12.706-7.831-21.051-21.663-21.065-37.447v-117.029c0.014-15.785 8.359-29.619 20.876-37.34l0.189-0.108 292.571-175.543c6.348-3.861 14.026-6.145 22.235-6.145s15.887 2.285 22.428 6.254l-0.192-0.108c13.334 7.666 22.183 21.811 22.235 38.027v468.122c-0.053 16.223-8.901 30.368-22.022 37.921l-0.213 0.112c-5.841 3.327-12.834 5.288-20.285 5.288-0.48 0-0.959-0.008-1.435-0.025l0.069 0.001zM731.429 545.939l204.8 122.88v-313.636l-204.8 122.88z"],"attrs":[{},{}],"tags":["video"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":125,"id":81,"name":"video","prevSize":80,"code":59746},"setIdx":0,"setId":1,"iconIdx":162},{"icon":{"paths":["M862.966 979.954h-701.931c-88.84 0-160.859-72.019-160.859-160.859v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.014 0.522-0.021 1.138-0.021 1.755 0 40.382 32.736 73.117 73.117 73.117 0.007 0 0.015 0 0.022 0h701.93c40.382 0 73.117-32.736 73.117-73.117v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.991 88.083-72.627 159.104-160.849 159.104-0.004 0-0.007 0-0.011 0h0.001z","M512 702.107c-0.038 0-0.085 0-0.13 0-110.716 0-202.222-82.245-216.757-188.973l-0.126-1.134h-250.94c-0.097 0.001-0.211 0.001-0.326 0.001-24.229 0-43.871-19.642-43.871-43.871 0-8.677 2.52-16.767 6.867-23.575l-0.106 0.177 218.184-350.966c17.362-29.96 49.275-49.789 85.818-49.789 1.293 0 2.582 0.025 3.862 0.074l-0.185-0.005h395.422c40.382 0.115 75.22 23.729 91.572 57.882l0.265 0.613 215.844 347.456c2.498 5.344 3.955 11.604 3.955 18.204 0 23.357-18.253 42.45-41.273 43.795l-0.119 0.005h-250.94c-14.66 107.862-106.167 190.107-216.883 190.107-0.047 0-0.092 0-0.138 0h0.007zM123.014 426.013h213.504c24.229 0 43.871 19.642 43.871 43.871v0 12.869c0 72.687 58.925 131.612 131.612 131.612s131.612-58.925 131.612-131.612v0-12.869c0-24.229 19.642-43.871 43.871-43.871v0h213.504l-175.483-284.282c-4.679-8.189-9.36-11.698-15.208-11.698h-396.006c-5.783 0.148-10.777 3.381-13.412 8.109l-0.041 0.081z"],"attrs":[{},{}],"tags":["inbox"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":124,"id":82,"name":"inbox","prevSize":80,"code":59745},"setIdx":0,"setId":1,"iconIdx":163},{"icon":{"paths":["M804.555 409.605h-14.628v-131.65c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM321.839 277.955c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0 131.65h-380.321zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["lock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":123,"id":83,"name":"lock","prevSize":80,"code":59743},"setIdx":0,"setId":1,"iconIdx":164},{"icon":{"paths":["M804.555 409.605h-482.716v-131.65c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0c0 24.236 19.647 43.883 43.883 43.883s43.883-19.647 43.883-43.883v0c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["unlock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":122,"id":84,"name":"unlock","prevSize":80,"code":59744},"setIdx":0,"setId":1,"iconIdx":165},{"icon":{"paths":["M988.652 422.661l-315.315-315.315c-7.357-7.357-17.342-11.562-27.852-11.562h-606.456c-21.546 0-39.414 17.868-39.414 39.414v414.113c0 10.51 4.204 20.495 11.562 27.852l315.315 314.789c23.123 23.123 53.604 35.735 86.186 35.735v0c32.582 0 63.589-12.613 86.186-35.735l11.562-11.562c2.103 4.204 4.204 8.409 7.883 11.562 23.649 23.649 55.18 35.735 86.186 35.735s62.537-12.087 86.712-35.735l296.922-296.922c47.297-47.297 47.297-124.549 0-172.373zM443.681 836.249c-8.409 8.409-18.919 12.613-30.481 12.613s-22.598-4.73-30.481-12.613l-304.279-303.228v-358.409h358.409l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961l-296.922 296.922zM932.946 539.328l-296.922 296.922c-16.816 16.816-44.67 16.816-61.486 0-3.679-3.679-7.357-5.78-12.087-7.883l233.333-233.333c47.297-47.823 47.297-125.075 0-172.373l-248.048-248.048h80.931l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961zM314.928 328.067c0 36.261-29.429 65.69-65.69 65.69s-65.69-29.429-65.69-65.69 29.429-65.69 65.69-65.69 65.69 29.429 65.69 65.69z"],"attrs":[{}],"tags":["tags"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":121,"id":85,"name":"tags","prevSize":80,"code":59741},"setIdx":0,"setId":1,"iconIdx":166},{"icon":{"paths":["M532.53 1023.985c-37.212 0-74.423-14.115-102.654-42.345l-415.747-415.105c-8.982-8.982-14.115-21.172-14.115-34.004v-484.396c0-26.304 21.814-48.119 48.119-48.119h483.756c12.831 0 25.022 5.132 34.004 14.115l415.747 415.747c55.818 56.46 55.818 148.206 0 204.666 0 0 0 0 0 0l-347.098 347.098c-28.229 28.229-65.442 42.345-102.654 42.345zM96.253 512.642l401.632 400.991c19.248 18.605 50.044 18.605 68.649 0l347.098-347.098c18.605-18.605 18.605-49.402 0-68.649l-401.632-401.632h-415.747v415.747zM947.637 600.539v0zM287.446 367.643c-44.269 0-80.198-35.928-80.198-80.198s35.928-80.198 80.198-80.198 80.198 35.928 80.198 80.198-35.928 80.198-80.198 80.198z"],"attrs":[{}],"tags":["tag"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":120,"id":86,"name":"tag","prevSize":80,"code":59742},"setIdx":0,"setId":1,"iconIdx":167},{"icon":{"paths":["M512 1024.445c-282.822-0.256-511.994-229.587-511.994-512.445 0-141.396 57.267-269.417 149.871-362.133l-0.005 0.005c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c7.716 7.725 12.49 18.395 12.49 30.177s-4.772 22.451-12.49 30.178v0c-83.727 78.173-135.917 189.204-135.917 312.426 0 235.846 191.191 427.037 427.037 427.037 123.22 0 234.253-52.189 312.196-135.668l0.23-0.248c77.442-77.134 125.361-183.857 125.361-301.773s-47.919-224.639-125.347-301.759l-0.015-0.015c-7.716-7.725-12.49-18.395-12.49-30.177s4.772-22.451 12.49-30.178v0c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c92.6 92.711 149.866 220.732 149.866 362.128 0 282.858-229.172 512.187-511.97 512.445h-0.024z","M512 554.704c-23.456-0.316-42.387-19.247-42.704-42.673v-455.537c0-23.584 19.119-42.704 42.704-42.704s42.704 19.119 42.704 42.704v0 455.506c-0.316 23.456-19.247 42.387-42.673 42.704h-0.031z"],"attrs":[{},{}],"tags":["power-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":119,"id":87,"name":"power-off","prevSize":80,"code":59740},"setIdx":0,"setId":1,"iconIdx":168},{"icon":{"paths":["M804.571 1024h-585.143c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h438.857c12.114 0.011 23.078 4.929 31.012 12.872v0l263.314 265.070c7.945 7.935 12.863 18.898 12.874 31.011v554.133c0 88.87-72.044 160.914-160.914 160.914v0zM219.429 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h585.143c40.395 0 73.142-32.747 73.142-73.142v0-537.747l-237.568-237.568z","M789.943 980.114h-87.771v-365.715h-380.342v365.715h-87.771v-380.342c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0z","M539.501 321.828h-230.547c-41.436-0.331-74.901-33.998-74.901-75.481 0-0.207 0.001-0.413 0.003-0.619v0.032-201.874h87.771v190.172h204.8v-190.172h87.771v201.874c0.001 0.174 0.003 0.381 0.003 0.587 0 41.483-33.464 75.152-74.869 75.481h-0.032z"],"attrs":[{},{},{}],"tags":["save"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":118,"id":88,"name":"save","prevSize":80,"code":59739},"setIdx":0,"setId":1,"iconIdx":169},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM512 938.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0z","M381.156 267.377c-33.393 33.448-54.044 79.627-54.044 130.628 0 0.076 0 0.152 0 0.228v-0.012c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0c-0.001-0.156-0.001-0.341-0.001-0.525 0-27.345 11.088-52.101 29.015-70.016v0c18.327-17.443 43.181-28.173 70.543-28.173s52.216 10.731 70.585 28.213l-0.043-0.040c18.449 18.085 29.885 43.264 29.885 71.115 0 54.983-44.572 99.556-99.556 99.556-0.307 0-0.613-0.001-0.919-0.004h0.047c-23.436 0.316-42.351 19.231-42.667 42.636v56.92c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-19.343c34.751-8.129 64.687-25.311 88.169-48.916l0.008-0.008c33.387-33.532 54.025-79.777 54.025-130.844s-20.64-97.313-54.032-130.851l0.007 0.007c-34.036-32.508-80.253-52.515-131.144-52.515-50.6 0-96.58 19.779-130.632 52.028l0.087-0.081z","M583.111 753.777c0 39.273-31.837 71.111-71.111 71.111s-71.111-31.837-71.111-71.111c0-39.273 31.837-71.111 71.111-71.111s71.111 31.837 71.111 71.111z"],"attrs":[{},{},{}],"tags":["question-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":117,"id":89,"name":"question-circle","prevSize":80,"code":59737},"setIdx":0,"setId":1,"iconIdx":170},{"icon":{"paths":["M750.032 98.514c-60.88-61-145.050-98.738-238.034-98.738-185.726 0-336.287 150.56-336.287 336.287 0 0.17 0 0.34 0 0.511v-0.026c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0c0-0.174 0-0.378 0-0.584 0-137.598 111.546-249.145 249.145-249.145s249.145 111.546 249.145 249.145c0 137.598-111.546 249.145-249.145 249.145-0.206 0-0.411 0-0.617-0.001h0.032c-24.093 0.325-43.539 19.77-43.864 43.832v117c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0-76.031c165.808-22.845 292.141-163.614 292.141-333.889 0-92.678-37.425-176.615-97.988-237.522l0.016 0.016z","M585.105 950.635c0 40.375-32.73 73.105-73.105 73.105s-73.105-32.73-73.105-73.105c0-40.375 32.73-73.105 73.105-73.105s73.105 32.73 73.105 73.105z"],"attrs":[{},{}],"tags":["question"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":116,"id":90,"name":"question","prevSize":80,"code":59738},"setIdx":0,"setId":1,"iconIdx":171},{"icon":{"paths":["M907.406 301.957l-290.385-290.385c-7.121-7.13-16.959-11.543-27.829-11.553h-129.703c-79.752 0-144.404 64.652-144.404 144.404v0 65.638h-65.638c-79.752 0-144.404 64.652-144.404 144.404v0 525.108c0 79.752 64.652 144.404 144.404 144.404v0h367.575c79.752 0 144.404-64.652 144.404-144.404v0-65.638h13.128c79.752 0 144.404-64.652 144.404-144.404v0-341.319c-0.443-10.296-4.774-19.502-11.552-26.254l-0.001-0.001zM630.149 134.448l154.382 154.382h-154.382zM682.66 879.575c0 36.251-29.387 65.638-65.638 65.638v0h-367.575c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h65.638v380.702c0 79.752 64.652 144.404 144.404 144.404v0h223.17zM774.553 735.17h-315.064c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h91.894v249.426c0.292 21.632 17.751 39.091 39.355 39.383h249.455v301.936c0 36.251-29.387 65.638-65.638 65.638v0z"],"attrs":[{}],"tags":["copy"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":115,"id":91,"name":"copy","prevSize":80,"code":59735},"setIdx":0,"setId":1,"iconIdx":172},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":114,"id":92,"name":"file","prevSize":80,"code":59736},"setIdx":0,"setId":1,"iconIdx":173},{"icon":{"paths":["M629.028 789.943h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h468.114c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M863.086 1024h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-117.028h87.771v117.028c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0h-117.028v-87.771h117.028c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0z"],"attrs":[{},{}],"tags":["clone"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":111,"id":93,"name":"clone","prevSize":80,"code":59733},"setIdx":0,"setId":1,"iconIdx":174},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M619.381 626.023c-7.448-7.637-17.839-12.375-29.336-12.375s-21.888 4.738-29.328 12.366l-0.008 0.009-48.71 48.71-48.71-48.71c-7.393-6.903-17.353-11.141-28.301-11.141-22.927 0-41.514 18.586-41.514 41.514 0 10.949 4.238 20.907 11.165 28.325l-0.022-0.025 48.71 48.71-48.71 48.71c-7.637 7.448-12.375 17.839-12.375 29.336s4.738 21.888 12.366 29.328l0.009 0.008c7.171 7.515 17.264 12.187 28.45 12.187 0.311 0 0.623-0.004 0.933-0.010l-0.047 0.001c0.057 0 0.126 0 0.193 0 11.401 0 21.713-4.657 29.139-12.174l48.714-48.714 48.71 48.71c7.43 7.52 17.742 12.178 29.142 12.178 0.067 0 0.136 0 0.204 0h-0.010c0.263 0.006 0.575 0.010 0.886 0.010 11.185 0 21.278-4.673 28.435-12.173l0.014-0.016c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008-48.71-48.71 48.71-48.71c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008z"],"attrs":[{},{}],"tags":["calendar-times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":110,"id":94,"name":"calendar-times","prevSize":80,"code":59730},"setIdx":0,"setId":1,"iconIdx":175},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 694.659h-221.406c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h221.406c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":109,"id":95,"name":"calendar-minus","prevSize":80,"code":59731},"setIdx":0,"setId":1,"iconIdx":176},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 691.892h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":108,"id":96,"name":"calendar-plus","prevSize":80,"code":59732},"setIdx":0,"setId":1,"iconIdx":177},{"icon":{"paths":["M614.393 512c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 102.431c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 921.569c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z"],"attrs":[{},{},{}],"tags":["ellipsis-v"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":107,"id":97,"name":"ellipsis-v","prevSize":80,"code":59728},"setIdx":0,"setId":1,"iconIdx":178},{"icon":{"paths":["M614.379 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M1023.886 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M204.868 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z"],"attrs":[{},{},{}],"tags":["ellipsis-h"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":106,"id":98,"name":"ellipsis-h","prevSize":80,"code":59729},"setIdx":0,"setId":1,"iconIdx":179},{"icon":{"paths":["M848.457 1024c-9.363-0.189-18.033-2.998-25.352-7.723l0.191 0.115-311.296-217.088-311.296 217.088c-6.501 4.018-14.382 6.4-22.821 6.4s-16.32-2.381-23.010-6.509l0.189 0.108c-13.4-7.013-22.574-20.486-23.401-36.171l-0.004-0.107v-819.2c0-88.87 72.044-160.914 160.914-160.914v0h438.857c88.87 0 160.914 72.044 160.914 160.914v0 819.2c0 0.048 0 0.104 0 0.159 0 16.646-9.393 31.099-23.169 38.347l-0.237 0.114c-5.911 3.304-12.965 5.254-20.477 5.266h-0.004zM512 702.172c0.137-0.001 0.3-0.003 0.464-0.003 9.223 0 17.782 2.846 24.846 7.706l-0.148-0.096 267.411 186.075v-734.939c0-40.395-32.747-73.142-73.142-73.142v0h-438.857c-40.395 0-73.142 32.747-73.142 73.142v0 734.939l267.411-186.075c6.916-4.764 15.475-7.609 24.698-7.609 0.163 0 0.325 0.001 0.488 0.003h-0.025z"],"attrs":[{}],"tags":["bookmark"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":105,"id":99,"name":"bookmark","prevSize":80,"code":59726},"setIdx":0,"setId":1,"iconIdx":180},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM936.391 469.333h-157.013c-21.309-143.377-80.98-269.999-168.128-372.54l0.875 1.056c174.421 43.539 304.877 189.937 324.104 369.605l0.163 1.879zM330.524 554.667h362.951c-28.064 140.685-92.065 263.297-182.001 361.829l0.527-0.585c-89.411-97.947-153.411-220.56-180.673-356.452l-0.803-4.792zM330.524 469.333c28.064-140.685 92.065-263.297 182.001-361.829l-0.527 0.585c89.411 97.947 153.411 220.56 180.673 356.452l0.803 4.792zM411.876 97.849c-86.273 101.485-145.944 228.107-166.755 367.427l-0.499 4.057h-157.013c19.389-181.548 149.845-327.945 321.319-370.86l2.948-0.625zM87.609 552.96h157.013c21.309 143.377 80.98 269.999 168.128 372.54l-0.875-1.056c-173.937-43.335-304.18-188.936-324.092-367.845l-0.175-1.933zM612.124 924.444c86.273-101.485 145.944-228.107 166.755-367.427l0.499-4.057h157.013c-18.688 182.253-149.359 329.449-321.317 372.565l-2.949 0.627z"],"attrs":[{}],"tags":["globe"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":104,"id":100,"name":"globe","prevSize":80,"code":59727},"setIdx":0,"setId":1,"iconIdx":181},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["replay"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":102,"id":101,"name":"replay","prevSize":80,"code":59725},"setIdx":0,"setId":1,"iconIdx":182},{"icon":{"paths":["M632.463 1023.971h-240.928c-24.813-0.335-44.839-20.361-45.174-45.141v-466.83l-322.241-440.294c-5.688-7.337-9.117-16.671-9.117-26.808 0-7.369 1.813-14.314 5.016-20.414l-0.116 0.241c7.747-14.706 22.885-24.586 40.34-24.695h903.493c17.471 0.11 32.608 9.989 40.236 24.445l0.12 0.25c3.089 5.86 4.901 12.805 4.901 20.173 0 10.136-3.43 19.471-9.191 26.908l0.075-0.1-322.241 440.294v466.797c-0.335 24.813-20.361 44.839-45.141 45.174h-0.032zM436.711 933.623h150.58v-436.68c0-0.064 0-0.138 0-0.212 0-9.955 3.401-19.116 9.105-26.383l-0.071 0.093 277.067-380.063h-722.782l278.271 380.063c5.634 7.174 9.035 16.335 9.035 26.29 0 0.075 0 0.15 0 0.224v-0.011z"],"attrs":[{}],"tags":["filter"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":101,"id":102,"name":"filter","prevSize":80,"code":59724},"setIdx":0,"setId":1,"iconIdx":183},{"icon":{"paths":["M863.086 789.943h-117.028c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886v0h117.028c40.395 0 73.142-32.747 73.142-73.142v0-234.058c0-40.395-32.747-73.142-73.142-73.142v0h-702.171c-40.395 0-73.142 32.747-73.142 73.142v0 234.058c0 40.395 32.747 73.142 73.142 73.142v0h117.028c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-117.028c-88.87 0-160.914-72.044-160.914-160.914v0-234.058c0-88.87 72.044-160.914 160.914-160.914v0h702.171c88.87 0 160.914 72.044 160.914 160.914v0 234.058c0 88.87-72.044 160.914-160.914 160.914v0z","M746.058 321.828c-24.106-0.325-43.561-19.78-43.886-43.854v-190.203h-380.342v190.172c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v0-204.8c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 204.8c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z","M716.8 1024h-409.6c-40.395 0-73.142-32.747-73.142-73.142v0-409.6c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 409.6c0 40.395-32.747 73.142-73.142 73.142v0zM321.828 936.228h380.342v-380.342h-380.342z"],"attrs":[{},{},{}],"tags":["print"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":99,"id":103,"name":"print","prevSize":80,"code":59723},"setIdx":0,"setId":1,"iconIdx":184},{"icon":{"paths":["M980.093 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":98,"id":104,"name":"align-right","prevSize":80,"code":59718},"setIdx":0,"setId":1,"iconIdx":185},{"icon":{"paths":["M624.033 453.952h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 221.761h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 686.143h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M624.033 918.335h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z"],"attrs":[{},{},{},{}],"tags":["align-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":97,"id":105,"name":"align-left","prevSize":80,"code":59719},"setIdx":0,"setId":1,"iconIdx":186},{"icon":{"paths":["M804.558 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M804.558 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-center"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":96,"id":106,"name":"align-center","prevSize":80,"code":59720},"setIdx":0,"setId":1,"iconIdx":187},{"icon":{"paths":["M980.093 438.861h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-justify"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":95,"id":107,"name":"align-justify","prevSize":80,"code":59721},"setIdx":0,"setId":1,"iconIdx":188},{"icon":{"paths":["M512 683.439c-94.683 0-171.439-76.755-171.439-171.439s76.755-171.439 171.439-171.439c94.683 0 171.439 76.755 171.439 171.439v0c0 94.683-76.755 171.439-171.439 171.439v0zM512 428.329c-46.211 0-83.671 37.462-83.671 83.671s37.462 83.671 83.671 83.671c46.211 0 83.671-37.462 83.671-83.671v0c0-46.211-37.462-83.671-83.671-83.671v0z","M515.511 1023.977c-71.489-0.329-129.316-58.359-129.316-129.895 0-0.411 0.001-0.823 0.005-1.234v0.063c-0.496-11.009-7.26-20.325-16.788-24.505l-0.181-0.070c-3.653-1.718-7.933-2.721-12.448-2.721-7.858 0-15.007 3.038-20.337 8.003l0.018-0.016c-23.441 23.268-55.642 37.739-91.222 38.032h-0.056c-0.252 0.001-0.55 0.003-0.848 0.003-35.579 0-67.876-14.051-91.644-36.906l0.043 0.041c-23.515-23.508-38.058-55.987-38.058-91.864s14.545-68.356 38.058-91.864v0c5.876-5.37 9.547-13.066 9.547-21.622 0-3.145-0.496-6.173-1.414-9.011l0.058 0.207c-5.723-9.782-16.134-16.274-28.071-16.384h-0.015c-71.692-0.291-129.966-57.335-132.231-128.518l-0.005-0.208c0.332-71.488 58.36-129.312 129.895-129.312 0.206 0 0.413 0 0.618 0.001h-0.032c11.009-0.496 20.325-7.26 24.505-16.788l0.070-0.181c1.718-3.653 2.721-7.933 2.721-12.448 0-7.858-3.038-15.007-8.003-20.337l0.016 0.018c-23.268-23.441-37.739-55.642-38.032-91.222v-0.056c-0.012-0.671-0.019-1.462-0.019-2.255 0-35.137 14.077-66.986 36.901-90.213l-0.018 0.019c23.508-23.515 55.987-38.058 91.864-38.058s68.356 14.545 91.864 38.058v0c6.075 5.789 14.317 9.35 23.391 9.35 3.125 0 6.153-0.422 9.028-1.214l-0.239 0.056c10.177-5.653 17.174-15.957 18.131-27.962l0.008-0.123c0-0.019 0-0.041 0-0.063 0-71.915 57.154-130.481 128.518-132.752l0.208-0.005c71.237 0.66 128.732 58.56 128.732 129.89 0 0.413-0.001 0.826-0.005 1.238v-0.063c0.477 11.185 6.924 20.76 16.218 25.665l0.166 0.080c2.998 1.135 6.465 1.792 10.084 1.792 7.909 0 15.084-3.138 20.35-8.236l-0.008 0.007c23.441-23.268 55.642-37.739 91.222-38.032h0.056c1.163-0.038 2.53-0.062 3.903-0.062 34.624 0 65.95 14.12 88.535 36.914l0.010 0.010c23.515 23.508 38.058 55.987 38.058 91.864s-14.545 68.356-38.058 91.864v0c-4.99 5.871-8.027 13.54-8.027 21.916 0 3.667 0.581 7.197 1.657 10.505l-0.067-0.24c5.653 10.177 15.957 17.174 27.962 18.131l0.123 0.008c71.192 0.937 128.814 57.74 131.062 128.518l0.005 0.208c-0.66 71.237-58.56 128.732-129.89 128.732-0.413 0-0.826-0.001-1.238-0.005h0.063c-11.185 0.477-20.76 6.924-25.665 16.218l-0.080 0.166c-1.135 2.998-1.792 6.465-1.792 10.084 0 7.909 3.138 15.084 8.236 20.35l-0.007-0.008c23.268 23.441 37.739 55.642 38.032 91.222v0.056c0.012 0.671 0.019 1.462 0.019 2.255 0 35.137-14.077 66.986-36.901 90.213l0.018-0.019c-23.508 23.515-55.987 38.058-91.864 38.058s-68.356-14.545-91.864-38.058v0c-5.258-5.092-12.433-8.23-20.341-8.23-3.62 0-7.086 0.657-10.287 1.86l0.202-0.066c-9.782 5.723-16.274 16.134-16.384 28.071v0.015c-0.937 71.192-57.74 128.814-128.518 131.062l-0.208 0.005zM356.944 777.643c0.372-0.004 0.812-0.007 1.252-0.007 15.867 0 30.927 3.45 44.471 9.643l-0.669-0.274c41.82 17.762 70.846 58.017 71.967 105.181l0.003 0.14c-0.003 0.185-0.004 0.402-0.004 0.62 0 23.297 18.4 42.297 41.461 43.26l0.088 0.003c23.005-1.873 40.964-21.005 40.964-44.331 0-0.254-0.003-0.509-0.007-0.761v0.038c0.3-47.575 28.116-88.582 68.322-107.933l0.723-0.313c13.278-5.676 28.727-8.976 44.947-8.976 32.246 0 61.445 13.042 82.611 34.139l-0.003-0.003c7.488 7.488 17.831 12.119 29.255 12.119 22.85 0 41.374-18.524 41.374-41.374 0-11.425-4.631-21.769-12.119-29.255v0c-20.848-21.12-33.725-50.154-33.725-82.193 0-16.378 3.364-31.971 9.44-46.123l-0.291 0.761c18.745-40.97 59.339-68.943 106.478-69.044h0.014c0.185 0.003 0.403 0.004 0.621 0.004 22.975 0 41.712-18.138 42.674-40.875l0.003-0.088c-1.57-22.953-20.575-40.976-43.788-40.976-0.446 0-0.889 0.007-1.332 0.019l0.064-0.001c-47.872-1.343-88.773-29.867-107.929-70.632l-0.317-0.752c-5.566-13.342-8.8-28.841-8.8-45.097 0-32.536 12.954-62.046 33.987-83.655l-0.026 0.027c7.488-7.488 12.119-17.831 12.119-29.255 0-22.85-18.524-41.374-41.374-41.374-11.425 0-21.769 4.631-29.255 12.119v0c-20.824 19.383-48.841 31.278-79.638 31.278-63.284 0-114.836-50.233-116.956-113.001l-0.005-0.195c0.003-0.185 0.004-0.403 0.004-0.621 0-22.975-18.138-41.712-40.875-42.674l-0.088-0.003c-22.953 1.57-40.976 20.575-40.976 43.788 0 0.446 0.007 0.889 0.019 1.332l-0.001-0.064c-1.343 47.872-29.867 88.773-70.632 107.929l-0.752 0.317c-13.342 5.566-28.841 8.8-45.097 8.8-32.536 0-62.046-12.954-83.655-33.987l0.027 0.026c-7.488-7.488-17.831-12.119-29.255-12.119-22.85 0-41.374 18.524-41.374 41.374 0 11.425 4.631 21.769 12.119 29.255v0c20.603 21.075 33.316 49.942 33.316 81.777 0 16.537-3.43 32.274-9.617 46.535l0.292-0.757c-17.762 41.82-58.017 70.846-105.181 71.967l-0.14 0.003c-0.185-0.003-0.402-0.004-0.62-0.004-23.297 0-42.297 18.4-43.26 41.461l-0.003 0.088c1.873 23.005 21.005 40.964 44.331 40.964 0.254 0 0.509-0.003 0.761-0.007h-0.038c47.575 0.3 88.582 28.116 107.933 68.322l0.313 0.723c5.676 13.278 8.976 28.727 8.976 44.947 0 32.246-13.042 61.445-34.139 82.611l0.003-0.003c-7.488 7.488-12.119 17.831-12.119 29.255 0 22.85 18.524 41.374 41.374 41.374 11.425 0 21.769-4.631 29.255-12.119v0c21.423-20.481 50.464-33.15 82.462-33.352h0.040zM825.038 639.555v0z"],"attrs":[{},{}],"tags":["cog"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":94,"id":108,"name":"cog","prevSize":80,"code":59722},"setIdx":0,"setId":1,"iconIdx":189},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 177.736 8.28 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-206.991 0-206.991-213.062-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M512 908.319c-0.057 0-0.125 0-0.193 0-11.369 0-21.653-4.644-29.058-12.14l-156.213-156.213c-6.884-7.373-11.11-17.304-11.11-28.222 0-22.863 18.535-41.398 41.398-41.398 10.919 0 20.849 4.226 28.246 11.134l-0.025-0.022 126.954 126.954 126.954-126.954c7.373-6.884 17.304-11.11 28.222-11.11 22.863 0 41.398 18.535 41.398 41.398 0 10.919-4.226 20.849-11.134 28.246l0.022-0.025-156.209 158.416c-7.128 6.219-16.515 10.011-26.787 10.011-0.868 0-1.73-0.027-2.585-0.080l0.116 0.006z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-download"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":93,"id":109,"name":"cloud-download","prevSize":80,"code":59715},"setIdx":0,"setId":1,"iconIdx":190},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 189.879 41.951 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-137.994 0-206.991-124.194-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M668.209 713.47c-11.406-0.137-21.709-4.745-29.262-12.15l-126.947-126.947-126.954 126.954c-7.373 6.884-17.304 11.11-28.222 11.11-22.863 0-41.398-18.535-41.398-41.398 0-10.919 4.226-20.849 11.134-28.246l-0.022 0.025 156.209-156.209c7.427-7.616 17.79-12.341 29.254-12.341s21.827 4.725 29.246 12.331l0.008 0.009 156.209 156.209c7.48 7.489 12.108 17.832 12.108 29.254s-4.626 21.765-12.108 29.256v0c-7.6 7.307-17.868 11.888-29.205 12.143l-0.049 0.001z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":92,"id":110,"name":"cloud-upload","prevSize":80,"code":59716},"setIdx":0,"setId":1,"iconIdx":191},{"icon":{"paths":["M761.085 885.627h-387.465c-206.337-0.017-373.598-167.289-373.598-373.627 0-206.348 167.278-373.627 373.627-373.627 152.926 0 284.392 91.876 342.215 223.439l0.939 2.397c13.246-2.68 28.531-4.285 44.166-4.428l0.115-0.001c141.466 8.944 253.978 121.457 262.882 262.11l0.042 0.813c0 145.209-117.715 262.923-262.923 262.923v0zM373.619 221.401c-160.494 0-290.599 130.105-290.599 290.599s130.105 290.599 290.599 290.599v0h387.465c99.226-0.314 179.581-80.668 179.895-179.864v-0.030c-8.504-95.738-84.157-171.391-179.139-179.84l-0.755-0.054c-19.989 0.459-38.949 4.276-56.529 10.907l1.178-0.389c-4.752 1.958-10.27 3.095-16.052 3.095s-11.3-1.136-16.34-3.199l0.288 0.104c-9.801-5.017-17.16-13.636-20.404-24.069l-0.077-0.287c-36.721-121.012-147.288-207.574-278.073-207.574-0.511 0-1.022 0.001-1.533 0.004h0.079z"],"attrs":[{}],"tags":["cloud"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":91,"id":111,"name":"cloud","prevSize":80,"code":59717},"setIdx":0,"setId":1,"iconIdx":192},{"icon":{"paths":["M45.313 1022.421c-0.136 0.001-0.296 0.003-0.456 0.003-11.964 0-22.806-4.803-30.702-12.588l0.006 0.006c-8.248-8.149-13.356-19.461-13.356-31.966 0-1.401 0.065-2.787 0.19-4.155l-0.013 0.176 18.572-230.049c0.852-11.108 5.734-20.935 13.169-28.147l662.6-662.6c34.079-31.973 80.059-51.615 130.628-51.615 2.096 0 4.186 0.034 6.267 0.101l-0.303-0.008c52.335 0.418 99.758 21.108 134.873 54.592l-0.079-0.074c34.783 35.688 56.235 84.513 56.235 138.348 0 50.427-18.822 96.457-49.825 131.448l0.181-0.208-663.188 665.585c-7.185 7.16-16.72 11.966-27.348 13.161l-0.211 0.020-233.044 20.968zM105.22 767.211l-12.581 164.15 164.15-14.978 653.004-654.202c15.132-17.82 24.333-41.087 24.333-66.503 0-56.908-46.133-103.043-103.043-103.043-0.341 0-0.681 0.001-1.021 0.006h0.052c-1.828-0.124-3.962-0.194-6.112-0.194-25.163 0-48.075 9.635-65.249 25.419l0.069-0.063zM727.071 84.852v0z"],"attrs":[{}],"tags":["pencil"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":90,"id":112,"name":"pencil","prevSize":80,"code":59714},"setIdx":0,"setId":1,"iconIdx":193},{"icon":{"paths":["M617.025 525.129c-108.758 0-196.923-88.165-196.923-196.923s88.165-196.923 196.923-196.923c108.758 0 196.923 88.165 196.923 196.923v0c0 108.758-88.165 196.923-196.923 196.923v0zM617.025 210.052c-65.254 0-118.154 52.9-118.154 118.154s52.9 118.154 118.154 118.154c65.254 0 118.154-52.9 118.154-118.154v0c0-65.254-52.9-118.154-118.154-118.154v0z","M984.615 892.718c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-102.4-55.664-170.667-328.206-170.667s-328.206 68.267-328.206 170.667c0 21.751-17.633 39.385-39.385 39.385s-39.385-17.633-39.385-39.385v0c0-249.436 285.145-249.436 406.975-249.436s406.975 0 406.975 249.436c-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z","M318.753 567.664h-16.804c-80.61-8.022-143.044-75.489-143.044-157.538 0-87.412 70.862-158.273 158.273-158.273 5.362 0 10.663 0.267 15.888 0.788l-0.66-0.053c21.012 0.932 37.694 18.192 37.694 39.348 0 21.751-17.633 39.385-39.385 39.385-2.183 0-4.326-0.177-6.414-0.519l0.228 0.031c-2.281-0.241-4.928-0.378-7.607-0.378-18.98 0-36.35 6.897-49.738 18.321l0.107-0.089c-15.663 12.706-26.198 31.205-28.33 52.186l-0.027 0.326c-0.273 2.455-0.43 5.301-0.43 8.183 0 40.775 31.191 74.267 71.015 77.915l0.306 0.022c2.052 0.186 4.437 0.293 6.848 0.293 15.535 0 30.039-4.409 42.331-12.043l-0.342 0.198c5.898-3.695 13.065-5.886 20.742-5.886 21.812 0 39.494 17.682 39.494 39.494 0 14.133-7.424 26.533-18.586 33.511l-0.166 0.097c-23.058 14.912-51.098 24.022-81.222 24.678l-0.174 0.002z","M39.385 853.333c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-141.785 37.809-236.308 223.179-236.308 21.751 0 39.385 17.633 39.385 39.385s-17.633 39.385-39.385 39.385v0c-123.406 0-144.41 39.385-144.41 157.538-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z"],"attrs":[{},{},{},{}],"tags":["users"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":88,"id":113,"name":"users","prevSize":80,"code":59713},"setIdx":0,"setId":1,"iconIdx":194},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M682.667 554.667h-170.667c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 241.777h128c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["clock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":87,"id":114,"name":"clock","prevSize":80,"code":59712},"setIdx":0,"setId":1,"iconIdx":195},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{}],"tags":["user-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":83,"id":115,"name":"user-minus","prevSize":80,"code":59710},"setIdx":0,"setId":1,"iconIdx":196},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M927.518 660.4c-24.454-0.33-44.19-20.066-44.52-44.488v-207.79c0-24.587 19.932-44.52 44.52-44.52s44.52 19.932 44.52 44.52v0 207.758c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{},{}],"tags":["user-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":86,"id":116,"name":"user-plus","prevSize":80,"code":59711},"setIdx":0,"setId":1,"iconIdx":197},{"icon":{"paths":["M979.856 319.009h-935.714c-24.224 0-43.862-19.638-43.862-43.862s19.638-43.862 43.862-43.862h935.714c24.224 0 43.862 19.638 43.862 43.862s-19.638 43.862-43.862 43.862v0z","M771.66 1023.718h-519.321c-2.865 0.208-6.208 0.328-9.577 0.328-74.752 0-135.856-58.437-140.12-132.119l-0.018-0.377v-613.477c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 613.477c0 23.977 27.486 44.447 58.483 44.447h519.321c32.75 0 58.483-20.468 58.483-44.447v-613.477c0-26.162 21.208-47.37 47.37-47.37s47.37 21.208 47.37 47.37v0 613.477c-4.282 74.060-65.385 132.496-140.136 132.496-3.37 0-6.712-0.119-10.022-0.352l0.445 0.025zM778.678 263.452c-0.175 0.003-0.382 0.004-0.589 0.004-23.9 0-43.276-19.376-43.276-43.276 0-0.207 0.001-0.414 0.004-0.62v0.032-87.138c0-23.977-28.071-44.447-58.483-44.447h-326.915c-32.166 0-58.483 20.468-58.483 44.447v87.138c0 24.224-19.638 43.862-43.862 43.862s-43.862-19.638-43.862-43.862v0-87.138c4.697-74.022 65.883-132.278 140.675-132.278 1.945 0 3.88 0.040 5.806 0.118l-0.276-0.008h325.161c2.174-0.119 4.719-0.188 7.28-0.188 74.82 0 136.023 58.3 140.66 131.951l0.021 0.407v87.138c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M407.901 804.41c-24.092-0.325-43.537-19.769-43.862-43.83v-264.955c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M616.099 804.41c-24.224 0-43.862-19.638-43.862-43.862v0-264.924c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0 0.001 0 0.003 0 0.004 0 24.342-19.568 44.112-43.83 44.443h-0.032z"],"attrs":[{},{},{},{}],"tags":["trash"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":81,"id":117,"name":"trash","prevSize":80,"code":59709},"setIdx":0,"setId":1,"iconIdx":198},{"icon":{"paths":["M863.070 0.023h-702.14c-88.866 0-160.907 72.041-160.907 160.907v0 351.070c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0-351.070c0-40.394 32.746-73.139 73.139-73.139v0h702.14c40.394 0 73.139 32.746 73.139 73.139v0 702.14c0 40.394-32.746 73.139-73.139 73.139v0h-351.070c-24.236 0-43.884 19.648-43.884 43.884s19.648 43.884 43.884 43.884v0h351.070c88.866 0 160.907-72.041 160.907-160.907v0-702.14c0-88.866-72.041-160.907-160.907-160.907v0z","M465.775 581.628c5.003 2.189 10.831 3.478 16.956 3.511h234.059c24.236 0 43.884-19.648 43.884-43.884s-19.648-43.884-43.884-43.884v0h-128.141l188.408-188.408c7.297-7.815 11.777-18.343 11.777-29.916 0-24.236-19.648-43.884-43.884-43.884-11.574 0-22.101 4.48-29.942 11.802l0.026-0.023-188.408 188.408v-128.141c0-24.236-19.648-43.884-43.884-43.884s-43.884 19.648-43.884 43.884v0 234.047c0.033 6.137 1.322 11.965 3.62 17.252l-0.11-0.284c4.316 10.739 12.665 19.089 23.125 23.305l0.28 0.099z","M277.953 643.651h-175.535c-56.418 0.33-102.065 45.976-102.396 102.364v175.567c0.33 56.418 45.976 102.065 102.364 102.396h175.567c56.418-0.33 102.065-45.976 102.396-102.364v-175.567c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM292.581 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-175.535c-8.079 0-14.628-6.55-14.628-14.628v0-175.535c0-8.079 6.55-14.628 14.628-14.628v0h175.535c8.079 0 14.628 6.55 14.628 14.628v0z"],"attrs":[{},{},{}],"tags":["window-minimize"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":80,"id":118,"name":"window-minimize","prevSize":80,"code":59706},"setIdx":0,"setId":1,"iconIdx":199},{"icon":{"paths":["M863.070 1023.977h-351.070c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h351.070c40.394 0 73.139-32.746 73.139-73.139v0-702.14c0-40.394-32.746-73.139-73.139-73.139v0h-702.14c-40.394 0-73.139 32.746-73.139 73.139v0 351.070c0 24.236-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0-351.070c0-88.866 72.041-160.907 160.907-160.907v0h702.14c88.866 0 160.907 72.041 160.907 160.907v0 702.14c0 88.866-72.041 160.907-160.907 160.907v0z","M746.047 555.884c-24.105-0.325-43.559-19.779-43.884-43.852v-190.195h-190.163c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h234.047c24.105 0.325 43.559 19.779 43.884 43.852v234.079c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M482.745 585.139c-11.709-0.922-21.991-6.371-29.214-14.58l-0.041-0.048c-6.935-7.728-11.175-17.996-11.175-29.255s4.24-21.528 11.211-29.297l-0.036 0.041 263.303-263.303c7.815-7.297 18.343-11.777 29.916-11.777 24.236 0 43.884 19.648 43.884 43.884 0 11.574-4.48 22.101-11.802 29.942l0.023-0.026-266.813 259.792c-7.264 8.256-17.547 13.707-29.106 14.619l-0.151 0.010z","M277.953 1023.977h-175.535c-56.418-0.33-102.065-45.976-102.396-102.364v-175.567c0.33-56.418 45.976-102.065 102.364-102.396h175.567c56.418 0.33 102.065 45.976 102.396 102.364v175.567c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 731.419c-8.079 0-14.628 6.55-14.628 14.628v0 175.535c0 8.079 6.55 14.628 14.628 14.628v0h175.535c8.079 0 14.628-6.55 14.628-14.628v0-175.535c0-8.079-6.55-14.628-14.628-14.628v0z"],"attrs":[{},{},{},{}],"tags":["window-maximize"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":79,"id":119,"name":"window-maximize","prevSize":80,"code":59707},"setIdx":0,"setId":1,"iconIdx":200},{"icon":{"paths":["M862.106 1022.571h-700.213c-88.622 0-160.465-71.843-160.465-160.465v0-700.213c0-88.622 71.843-160.465 160.465-160.465v0h350.106c24.17 0 43.763 19.594 43.763 43.763s-19.594 43.763-43.763 43.763v0h-350.106c-40.283 0-72.938 32.656-72.938 72.938v0 700.213c0 40.283 32.656 72.938 72.938 72.938v0h700.213c40.283 0 72.938-32.656 72.938-72.938v0-350.106c0-24.17 19.594-43.763 43.763-43.763s43.763 19.594 43.763 43.763v0 350.106c0 88.622-71.843 160.465-160.465 160.465v0z","M978.808 322.359c-24.038-0.324-43.439-19.725-43.763-43.732v-189.673h-189.641c-24.17 0-43.763-19.594-43.763-43.763s19.594-43.763 43.763-43.763v0h233.405c24.038 0.324 43.439 19.725 43.763 43.732v233.436c-0.324 24.038-19.725 43.439-43.732 43.763h-0.031z","M599.527 468.237c-11.677-0.919-21.931-6.354-29.134-14.54l-0.041-0.048c-6.916-7.706-11.145-17.947-11.145-29.175s4.229-21.469 11.18-29.216l-0.036 0.041 379.281-379.281c8.011-8.58 19.39-13.929 32.018-13.929 24.17 0 43.763 19.594 43.763 43.763 0 12.628-5.349 24.007-13.903 31.994l-0.026 0.023-382.782 375.78c-7.244 8.233-17.498 13.669-29.026 14.579l-0.15 0.010z"],"attrs":[{},{},{}],"tags":["external-link"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":78,"id":120,"name":"external-link","prevSize":80,"code":59708},"setIdx":0,"setId":1,"iconIdx":201},{"icon":{"paths":["M512 1023.452c-234.044 0-423.774-189.73-423.774-423.774s189.73-423.774 423.774-423.774v0h146.13c24.211 0 43.839 19.627 43.839 43.839s-19.627 43.839-43.839 43.839v0h-146.13c-185.621 0-336.097 150.475-336.097 336.097s150.475 336.097 336.097 336.097c185.621 0 336.097-150.475 336.097-336.097v0c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c-0.333 233.911-189.864 423.443-423.743 423.774h-0.032z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-0.004-0.004c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l144.376-144.376-144.376-144.376c-8.595-8.025-13.953-19.423-13.953-32.074 0-24.211 19.627-43.839 43.839-43.839 12.65 0 24.048 5.358 32.049 13.927l0.023 0.026 175.355 175.355c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0l-175.355 175.355c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["refresh"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":77,"id":121,"name":"refresh","prevSize":80,"code":59704},"setIdx":0,"setId":1,"iconIdx":202},{"icon":{"paths":["M512 528.516c-136.816 0-247.725-110.91-247.725-247.725s110.91-247.725 247.725-247.725c136.816 0 247.725 110.91 247.725 247.725v0c0 136.816-110.91 247.725-247.725 247.725v0zM512 132.155c-82.088 0-148.635 66.547-148.635 148.635s66.547 148.635 148.635 148.635c82.088 0 148.635-66.547 148.635-148.635v0c0-82.088-66.547-148.635-148.635-148.635v0z","M974.421 990.935c-27.214-0.367-49.178-22.331-49.545-49.509v-0.036c0-128.817-70.024-214.696-412.876-214.696s-412.876 85.879-412.876 214.696c0 27.363-22.182 49.545-49.545 49.545s-49.545-22.182-49.545-49.545v0c0-313.786 358.706-313.786 511.966-313.786s511.966 0 511.966 313.786c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{}],"tags":["user"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":76,"id":122,"name":"user","prevSize":80,"code":59705},"setIdx":0,"setId":1,"iconIdx":203},{"icon":{"paths":["M980.247 964.701h-936.496c-16.088-0.051-30.159-8.633-37.933-21.458l-0.111-0.198c-3.59-6.323-5.705-13.888-5.705-21.949s2.115-15.627 5.823-22.173l-0.117 0.224 468.247-819.433c8.296-12.379 22.232-20.419 38.044-20.419s29.748 8.039 37.942 20.254l0.104 0.165 468.247 819.433c3.59 6.323 5.705 13.888 5.705 21.949s-2.115 15.627-5.823 22.173l0.117-0.224c-7.885 13.022-21.958 21.606-38.038 21.657h-0.007zM119.257 876.905h785.486l-392.743-687.154z","M512 642.78c-24.113-0.325-43.573-19.786-43.898-43.866v-204.89c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 204.858c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z","M512 818.373c-24.113-0.325-43.573-19.786-43.898-43.866v-29.297c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 29.265c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z"],"attrs":[{},{},{}],"tags":["exclamation-triangle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":75,"id":123,"name":"exclamation-triangle","prevSize":80,"code":59682},"setIdx":0,"setId":1,"iconIdx":204},{"icon":{"paths":["M788.745 110.712h-69.186v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-249.071v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-69.186c-84.063 0-152.209 68.147-152.209 152.209v0 608.839c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-608.839c0-84.063-68.147-152.209-152.209-152.209v0zM235.255 193.735h69.186v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h249.071v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h69.186c38.21 0 69.186 30.976 69.186 69.186v0 152.209h-691.862v-152.209c0-38.21 30.976-69.186 69.186-69.186v0zM788.745 940.947h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-373.606h691.862v373.606c0 38.21-30.976 69.186-69.186 69.186v0z"],"attrs":[{}],"tags":["calendar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":74,"id":124,"name":"calendar","prevSize":80,"code":59687},"setIdx":0,"setId":1,"iconIdx":205},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M625.777 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":73,"id":125,"name":"chevron-circle-left","prevSize":80,"code":59688},"setIdx":0,"setId":1,"iconIdx":206},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":70,"id":126,"name":"chevron-circle-down","prevSize":80,"code":59689},"setIdx":0,"setId":1,"iconIdx":207},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M398.223 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":69,"id":127,"name":"chevron-circle-right","prevSize":80,"code":59690},"setIdx":0,"setId":1,"iconIdx":208},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":68,"id":128,"name":"chevron-circle-up","prevSize":80,"code":59691},"setIdx":0,"setId":1,"iconIdx":209},{"icon":{"paths":["M512 902.549c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-260.364c-5.628-8.568-8.981-19.073-8.981-30.354 0-30.81 24.977-55.792 55.792-55.792 10.145 0 19.649 2.705 27.846 7.433l-0.269-0.143 223.173 223.173 223.173-223.173c7.925-4.589 17.434-7.289 27.577-7.289 30.81 0 55.792 24.977 55.792 55.792 0 11.285-3.353 21.785-9.108 30.566l0.128-0.209-258.132 258.132c-9.737 10.997-23.705 18.053-39.331 18.593l-0.092 0.004z","M512 493.405c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-262.596c-3.437-7.037-5.446-15.305-5.446-24.041 0-30.81 24.977-55.792 55.792-55.792 8.741 0 17.009 2.009 24.377 5.597l-0.329-0.145 223.173 223.173 223.173-223.173c7.037-3.437 15.305-5.446 24.041-5.446 30.81 0 55.792 24.977 55.792 55.792 0 8.741-2.009 17.009-5.597 24.377l0.145-0.329-260.364 260.364c-9.233 10.493-22.31 17.429-37.002 18.583l-0.192 0.012z"],"attrs":[{},{}],"tags":["angle-double-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":67,"id":129,"name":"angle-double-down","prevSize":80,"code":59692},"setIdx":0,"setId":1,"iconIdx":210},{"icon":{"paths":["M436.578 832.544c-0.073 0-0.172 0-0.262 0-15.535 0-29.584-6.348-39.707-16.591l-0.004-0.004-261.716-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l261.716-261.716c8.688-5.708 19.333-9.102 30.778-9.102 31.242 0 56.568 25.327 56.568 56.568 0 10.286-2.746 19.925-7.538 28.233l0.144-0.272-226.267 226.267 226.267 226.267c10.22 10.237 16.542 24.365 16.542 39.973s-6.32 29.742-16.542 39.973v0c-9.854 8.923-22.994 14.389-37.408 14.389-0.902 0-1.8-0.024-2.694-0.065l0.124 0.004z","M851.399 832.544c-15.091-1.188-28.351-8.214-37.656-18.795l-0.055-0.065-263.977-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l263.977-259.453c7.129-3.487 15.515-5.521 24.379-5.521 31.242 0 56.568 25.327 56.568 56.568 0 8.864-2.038 17.25-5.669 24.715l0.144-0.336-226.267 226.267 226.267 226.267c8.942 9.959 14.408 23.201 14.408 37.714s-5.466 27.749-14.45 37.763l0.045-0.055c-9.366 10.641-22.619 17.666-37.517 18.843l-0.193 0.014z"],"attrs":[{},{}],"tags":["angle-double-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":66,"id":130,"name":"angle-double-left","prevSize":80,"code":59693},"setIdx":0,"setId":1,"iconIdx":211},{"icon":{"paths":["M587.102 831.182c-0.073 0-0.171 0-0.259 0-15.47 0-29.463-6.321-39.534-16.519l-0.004-0.004c-10.173-10.194-16.472-24.266-16.472-39.803s6.29-29.611 16.472-39.809v0l225.304-225.304-225.304-225.304c-3.536-7.161-5.605-15.588-5.605-24.492 0-31.111 25.217-56.325 56.325-56.325 10.665 0 20.638 2.967 29.14 8.115l-0.251-0.143 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.83 11.106-23.933 18.225-39.711 18.775l-0.094 0.004z","M174.042 831.182c-15.029-1.181-28.228-8.178-37.495-18.716l-0.053-0.063c-8.9-9.92-14.342-23.099-14.342-37.554s5.442-27.63 14.391-37.603l-0.045 0.053 225.304-225.304-225.304-225.304c-3.467-7.105-5.497-15.45-5.497-24.276 0-31.111 25.217-56.325 56.325-56.325 8.82 0 17.176 2.028 24.609 5.644l-0.339-0.145 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.32 10.596-22.521 17.598-37.357 18.765l-0.192 0.014z"],"attrs":[{},{}],"tags":["angle-double-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":65,"id":131,"name":"angle-double-right","prevSize":80,"code":59694},"setIdx":0,"setId":1,"iconIdx":212},{"icon":{"paths":["M768.744 493.657c-0.079 0-0.163 0-0.259 0-15.11 0-28.77-6.175-38.616-16.135l-220.071-220.071-220.067 220.067c-6.991 3.451-15.223 5.479-23.923 5.479-30.385 0-55.016-24.631-55.016-55.016 0-10.412 2.899-20.155 7.927-28.458l-0.139 0.247 254.542-254.542c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l256.744 256.744c9.943 9.955 16.087 23.695 16.087 38.874s-6.151 28.926-16.087 38.877v0c-9.583 8.683-22.363 13.999-36.378 13.999-0.883 0-1.752-0.019-2.623-0.067l0.127 0.007z","M768.744 897.118c-14.683-1.159-27.57-7.987-36.629-18.283l-0.055-0.060-220.067-220.067-220.067 220.067c-6.935 3.391-15.091 5.371-23.707 5.371-30.385 0-55.016-24.631-55.016-55.016 0-8.623 1.987-16.772 5.515-24.038l-0.139 0.331 256.744-256.744c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l252.342 256.744c8.695 9.691 14.011 22.565 14.011 36.678s-5.316 26.99-14.059 36.726l0.043-0.055c-9.104 10.351-22.001 17.184-36.486 18.331l-0.187 0.012z"],"attrs":[{},{}],"tags":["angle-double-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":64,"id":132,"name":"angle-double-up","prevSize":80,"code":59695},"setIdx":0,"setId":1,"iconIdx":213},{"icon":{"paths":["M512 724.21c-0.086 0-0.192 0-0.293 0-17.487 0-33.3-7.139-44.687-18.671l-0.006-0.006-294.549-297.097c-6.421-9.779-10.246-21.757-10.246-34.639 0-35.163 28.506-63.662 63.662-63.662 11.573 0 22.424 3.091 31.773 8.485l-0.306-0.164 254.656 254.656 254.656-254.656c9.044-5.23 19.894-8.318 31.469-8.318 35.163 0 63.662 28.506 63.662 63.662 0 12.88-3.82 24.863-10.395 34.879l0.149-0.244-297.097 297.097c-10.874 11.029-25.782 18.050-42.325 18.671l-0.112 0.002z"],"attrs":[{}],"tags":["angle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":224,"id":133,"name":"angle-down","prevSize":80,"code":59696},"setIdx":0,"setId":1,"iconIdx":214},{"icon":{"paths":["M645.785 836.904c-0.077 0-0.174 0-0.264 0-15.744 0-29.987-6.434-40.247-16.814l-267.57-267.57c-10.36-10.374-16.768-24.697-16.768-40.517s6.404-30.147 16.768-40.517v0l267.566-265.27c8.804-5.784 19.594-9.224 31.197-9.224 31.667 0 57.335 25.671 57.335 57.335 0 10.424-2.782 20.194-7.64 28.617l0.144-0.274-229.343 229.343 229.343 229.343c10.36 10.374 16.768 24.697 16.768 40.517s-6.404 30.147-16.768 40.517v0c-9.987 9.044-23.307 14.584-37.917 14.584-0.914 0-1.824-0.023-2.732-0.064l0.124 0.004z"],"attrs":[{}],"tags":["angle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":62,"id":134,"name":"angle-left","prevSize":80,"code":59697},"setIdx":0,"setId":1,"iconIdx":215},{"icon":{"paths":["M377.809 837.894c-16.204-0.566-30.605-7.836-40.589-19.11l-0.054-0.059c-10.396-10.404-16.822-24.776-16.822-40.643s6.424-30.235 16.822-40.645v0l230.044-230.044-230.044-230.044c-2.746-6.474-4.334-14.004-4.334-21.905 0-31.765 25.748-57.513 57.513-57.513 10.324 0 20.016 2.723 28.392 7.484l-0.286-0.149 268.384 268.384c10.396 10.406 16.822 24.773 16.822 40.643s-6.424 30.236-16.822 40.645v0l-268.384 263.783c-10.036 11.334-24.433 18.607-40.543 19.164l-0.096 0.006z"],"attrs":[{}],"tags":["angle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":61,"id":135,"name":"angle-right","prevSize":80,"code":59698},"setIdx":0,"setId":1,"iconIdx":216},{"icon":{"paths":["M804.999 721.286c-0.087 0-0.194 0-0.29 0-17.244 0-32.838-7.040-44.069-18.415l-251.149-251.149-251.143 251.143c-7.978 3.94-17.369 6.249-27.304 6.249-34.676 0-62.787-28.109-62.787-62.787 0-11.887 3.305-23 9.042-32.478l-0.157 0.277 292.999-292.999c11.357-11.344 27.043-18.363 44.37-18.363s33.008 7.014 44.37 18.363v0l292.999 292.999c11.344 11.357 18.363 27.043 18.363 44.37s-7.014 33.008-18.363 44.37v0c-11.24 11.41-26.866 18.481-44.134 18.481-0.966 0-1.925-0.024-2.88-0.070l0.133 0.002z"],"attrs":[{}],"tags":["angle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":60,"id":136,"name":"angle-up","prevSize":80,"code":59699},"setIdx":0,"setId":1,"iconIdx":217},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M746.058 321.828c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-203.048-203.048-203.044 203.044c-7.816 7.297-18.344 11.778-29.918 11.778-24.237 0-43.886-19.648-43.886-43.886 0-11.575 4.48-22.102 11.803-29.944l-0.023 0.026 234.058-234.058c7.939-7.93 18.904-12.835 31.012-12.835s23.073 4.904 31.013 12.835v0l234.058 234.058c7.93 7.939 12.835 18.904 12.835 31.012s-4.904 23.073-12.835 31.013v0c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":59,"id":137,"name":"upload","prevSize":80,"code":59700},"setIdx":0,"setId":1,"iconIdx":218},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M512 731.429c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-234.062-234.062c-7.297-7.816-11.778-18.344-11.778-29.918 0-24.237 19.648-43.886 43.886-43.886 11.575 0 22.102 4.48 29.944 11.803l-0.026-0.023 203.044 203.044 203.044-203.044c7.816-7.297 18.344-11.778 29.918-11.778 24.237 0 43.886 19.648 43.886 43.886 0 11.575-4.48 22.102-11.803 29.944l0.023-0.026-234.058 234.058c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["download"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":113,"id":138,"name":"download","prevSize":80,"code":59734},"setIdx":0,"setId":1,"iconIdx":219},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM85.333 512c0-0.111 0-0.24 0-0.369 0-102.621 36.521-196.712 97.276-269.985l-0.565 0.701 599.609 599.609c-72.916 60.16-167.308 96.645-270.223 96.645-235.327 0-426.097-190.771-426.097-426.097 0-0.177 0-0.353 0-0.531v0.028zM841.956 781.653l-599.609-599.609c72.855-59.977 167.108-96.344 269.855-96.344 235.327 0 426.097 190.771 426.097 426.097 0 102.747-36.367 197-96.931 270.591l0.587-0.735z"],"attrs":[{}],"tags":["ban"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":58,"id":139,"name":"ban","prevSize":80,"code":59701},"setIdx":0,"setId":1,"iconIdx":220},{"icon":{"paths":["M1021.85 393.483c-4.841-15.030-17.644-26.152-33.316-28.484l-0.227-0.028-303.002-44.165-135.848-274.491c-7.746-12.831-21.614-21.279-37.457-21.279s-29.71 8.447-37.346 21.083l-0.11 0.195-135.848 274.491-303.002 44.165c-15.899 2.36-28.701 13.481-33.462 28.219l-0.081 0.292c-1.397 4-2.204 8.612-2.204 13.413 0 11.571 4.687 22.048 12.267 29.634v0l220.265 213.556-51.991 301.885c-0.38 2.136-0.597 4.594-0.597 7.102 0 14.016 6.787 26.448 17.254 34.186l0.115 0.081c6.76 4.866 15.204 7.783 24.332 7.783 7.263 0 14.096-1.847 20.052-5.097l-0.219 0.11 270.579-142.557 271.137 142.557c5.647 3.156 12.387 5.020 19.564 5.031h0.004c9.211-0.109 17.721-3.021 24.742-7.922l-0.143 0.094c10.582-7.821 17.369-20.251 17.369-34.267 0-2.509-0.218-4.967-0.634-7.356l0.037 0.254-52.551-301.885 219.705-213.556c7.83-7.626 12.687-18.27 12.687-30.050 0-4.646-0.756-9.117-2.151-13.294l0.085 0.296z"],"attrs":[{}],"tags":["star-fill"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":57,"id":140,"name":"star-fill","prevSize":80,"code":59702},"setIdx":0,"setId":1,"iconIdx":221},{"icon":{"paths":["M802.661 1001.092c-7.178-0.012-13.918-1.875-19.772-5.137l0.207 0.106-271.096-142.535-271.096 142.535c-5.737 3.14-12.567 4.986-19.829 4.986-9.126 0-17.571-2.916-24.452-7.867l0.124 0.085c-10.58-7.82-17.366-20.248-17.366-34.262 0-2.509 0.217-4.966 0.634-7.355l-0.037 0.254 52.543-301.84-220.232-213.524c-7.577-7.585-12.265-18.059-12.265-29.629 0-4.8 0.807-9.412 2.291-13.706l-0.089 0.295c4.841-15.028 17.641-26.148 33.311-28.48l0.227-0.028 302.957-44.158 135.828-274.45c7.745-12.829 21.611-21.276 37.451-21.276s29.706 8.446 37.341 21.080l0.11 0.195 135.828 274.45 302.957 44.158c15.896 2.359 28.697 13.479 33.457 28.215l0.081 0.292c1.397 4 2.204 8.611 2.204 13.411 0 11.569-4.686 22.045-12.265 29.63v0l-220.232 213.524 51.984 301.84c0.38 2.135 0.597 4.593 0.597 7.101 0 14.014-6.786 26.444-17.251 34.181l-0.115 0.081c-6.725 4.703-15.021 7.598-23.979 7.824l-0.056 0.001zM512 764.651c7.119 0.088 13.834 1.727 19.85 4.594l-0.287-0.123 215.201 111.792-40.805-239.795c-0.368-2.129-0.579-4.58-0.579-7.081 0-11.813 4.698-22.528 12.328-30.38l-0.010 0.010 174.396-167.689-240.912-35.774c-13.783-2.252-25.168-10.868-31.19-22.677l-0.111-0.241-107.88-217.995-107.88 218.555c-6.135 12.049-17.52 20.666-31.056 22.884l-0.246 0.033-240.912 35.215 174.396 167.689c7.619 7.842 12.317 18.557 12.317 30.37 0 2.501-0.211 4.952-0.614 7.338l0.035-0.257-40.805 241.472 215.201-111.792c5.628-3.296 12.279-5.497 19.381-6.135l0.183-0.013z"],"attrs":[{}],"tags":["star"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":56,"id":141,"name":"star","prevSize":80,"code":59703},"setIdx":0,"setId":1,"iconIdx":222},{"icon":{"paths":["M679.213 992.738c-0.086 0-0.19 0-0.292 0-17.22 0-32.796-7.035-44.013-18.388l-418.039-418.039c-11.33-11.344-18.339-27.010-18.339-44.311s7.007-32.967 18.339-44.313v0l418.033-418.033c11.167-10.427 26.211-16.828 42.747-16.828 34.631 0 62.705 28.074 62.705 62.705 0 16.538-6.402 31.58-16.864 42.785l0.034-0.037-373.722 373.722 373.722 373.722c11.33 11.344 18.339 27.010 18.339 44.311s-7.007 32.967-18.339 44.313v0c-11.222 11.36-26.798 18.394-44.019 18.394-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":16,"id":142,"name":"chevron-left","prevSize":80,"code":59648},"setIdx":0,"setId":1,"iconIdx":223},{"icon":{"paths":["M344.779 992.761c-0.086 0-0.19 0-0.292 0-17.221 0-32.798-7.035-44.016-18.389l-0.006-0.006c-11.331-11.345-18.34-27.011-18.34-44.313s7.008-32.969 18.34-44.315v0l373.739-373.739-373.739-373.739c-10.427-11.167-16.829-26.212-16.829-42.749 0-34.632 28.075-62.708 62.708-62.708 16.539 0 31.582 6.402 42.787 16.865l-0.037-0.034 418.053 418.053c11.331 11.345 18.34 27.011 18.34 44.313s-7.008 32.969-18.34 44.315v0l-418.053 418.053c-11.223 11.36-26.8 18.395-44.021 18.395-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":17,"id":143,"name":"chevron-right","prevSize":80,"code":59649},"setIdx":0,"setId":1,"iconIdx":224},{"icon":{"paths":["M512 774.266c-0.084 0-0.183 0-0.282 0-16.621 0-31.655-6.79-42.481-17.748l-403.49-403.49c-6.608-9.557-10.557-21.395-10.557-34.153 0-33.426 27.098-60.522 60.522-60.522 13.37 0 25.728 4.335 35.742 11.677l-0.17-0.119 360.715 358.295 360.715-358.295c9.294-6.106 20.686-9.741 32.927-9.741 33.426 0 60.522 27.098 60.522 60.522 0 11.002-2.935 21.318-8.065 30.207l0.155-0.294-403.485 403.485c-10.561 11.928-25.717 19.583-42.668 20.171l-0.102 0.002z"],"attrs":[{}],"tags":["chevron-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":18,"id":144,"name":"chevron-down","prevSize":80,"code":59650},"setIdx":0,"setId":1,"iconIdx":225},{"icon":{"paths":["M912.529 772.345c-0.083 0-0.182 0-0.279 0-16.5 0-31.424-6.74-42.17-17.619l-358.079-358.079-358.074 355.671c-9.226 6.061-20.534 9.669-32.685 9.669-33.181 0-60.080-26.899-60.080-60.080 0-10.921 2.914-21.161 8.005-29.985l-0.154 0.291 400.529-400.529c10.869-10.856 25.879-17.571 42.456-17.571s31.587 6.714 42.457 17.571v0l400.529 400.529c10.856 10.869 17.571 25.879 17.571 42.456s-6.714 31.587-17.571 42.457v0c-10.467 9.481-24.421 15.283-39.728 15.283-0.96 0-1.913-0.022-2.862-0.068l0.134 0.005z"],"attrs":[{}],"tags":["chevron-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":19,"id":145,"name":"chevron-up","prevSize":80,"code":59651},"setIdx":0,"setId":1,"iconIdx":226},{"icon":{"paths":["M777.445 959.937c-0.065 0-0.144 0-0.22 0-11.19 0-21.502-3.743-29.759-10.044l0.119 0.088-530.888-398.166c-12.143-9.177-19.908-23.59-19.908-39.817s7.765-30.639 19.784-39.726l0.124-0.091 530.888-398.166c8.229-6.251 18.645-10.014 29.941-10.014 8.203 0 15.94 1.984 22.762 5.498l-0.278-0.131c16.203 8.535 27.088 25.214 27.208 44.445v796.35c-0.121 19.249-11.006 35.927-26.932 44.329l-0.275 0.133c-6.602 3.186-14.334 5.125-22.5 5.309l-0.063 0.002zM329.508 512l398.166 298.625v-597.249z"],"attrs":[{}],"tags":["caret-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":20,"id":146,"name":"caret-left","prevSize":80,"code":59652},"setIdx":0,"setId":1,"iconIdx":227},{"icon":{"paths":["M246.514 960.008c-8.001-0.105-15.52-2.052-22.189-5.441l0.287 0.133c-16.574-8.253-27.783-25.040-27.876-44.458v-796.469c0.092-19.426 11.302-36.213 27.587-44.339l0.287-0.132c6.449-3.33 14.077-5.284 22.158-5.284 11.175 0 21.478 3.731 29.729 10.017l-0.119-0.089 530.972 398.228c12.145 9.177 19.912 23.594 19.912 39.823s-7.766 30.645-19.789 39.733l-0.124 0.091-530.972 398.228c-8.14 6.214-18.456 9.957-29.645 9.957-0.077 0-0.156 0-0.232 0h0.012zM296.292 213.328v597.343l398.228-298.672z"],"attrs":[{}],"tags":["caret-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":21,"id":147,"name":"caret-right","prevSize":80,"code":59653},"setIdx":0,"setId":1,"iconIdx":228},{"icon":{"paths":["M512 808.242c-0.092 0-0.203 0.002-0.311 0.002-15.157 0-28.607-7.307-37.020-18.589l-0.088-0.122-374.2-498.935c-5.874-7.735-9.411-17.522-9.411-28.14 0-7.708 1.865-14.982 5.168-21.391l-0.124 0.263c8.022-15.226 23.696-25.457 41.77-25.57h748.419c18.091 0.116 33.765 10.344 41.662 25.311l0.125 0.259c3.18 6.151 5.044 13.42 5.044 21.131 0 10.614-3.536 20.406-9.494 28.255l0.085-0.116-374.2 498.935c-8.503 11.404-21.951 18.712-37.108 18.712-0.109 0-0.218 0-0.329-0.002h0.017zM231.349 309.307l280.651 374.2 280.651-374.2z"],"attrs":[{}],"tags":["caret-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":22,"id":148,"name":"caret-down","prevSize":80,"code":59654},"setIdx":0,"setId":1,"iconIdx":229},{"icon":{"paths":["M886.087 808.153h-748.175c-18.084-0.115-33.754-10.339-41.649-25.303l-0.125-0.259c-3.18-6.148-5.042-13.416-5.042-21.125 0-10.612 3.535-20.4 9.492-28.247l-0.085 0.116 374.087-498.782c8.871-10.966 22.328-17.919 37.409-17.919s28.537 6.953 37.338 17.828l0.069 0.090 374.087 498.782c5.874 7.732 9.407 17.518 9.407 28.131 0 7.706-1.864 14.977-5.165 21.386l0.123-0.262c-8.019 15.222-23.689 25.45-41.757 25.562h-0.016zM231.436 714.631h561.131l-280.564-374.087z"],"attrs":[{}],"tags":["caret-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":23,"id":149,"name":"caret-up","prevSize":80,"code":59655},"setIdx":0,"setId":1,"iconIdx":230},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["search"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":24,"id":150,"name":"search","prevSize":80,"code":59656},"setIdx":0,"setId":1,"iconIdx":231},{"icon":{"paths":["M367.973 877.709c-12.364-0.429-23.354-5.979-30.973-14.583l-0.039-0.045-292.569-292.569c-12.118-7.943-20.011-21.462-20.011-36.822 0-24.237 19.649-43.886 43.886-43.886 16.258 0 30.454 8.843 38.038 21.983l0.112 0.213 261.556 259.802 612.637-610.884c6.739-4.429 14.999-7.063 23.874-7.063 24.237 0 43.886 19.649 43.886 43.886 0 7.977-2.129 15.457-5.848 21.903l0.112-0.213-643.651 643.651c-7.658 8.649-18.646 14.2-30.94 14.626l-0.073 0.001z"],"attrs":[{}],"tags":["check"],"grid":16,"isMulticolor":false,"isMulticolor2":false,"width":1088},"attrs":[{}],"properties":{"order":25,"id":151,"name":"check","prevSize":80,"code":59657},"setIdx":0,"setId":1,"iconIdx":232},{"icon":{"paths":["M426.842 696.51c-11.361-0.894-21.337-6.182-28.346-14.147l-0.040-0.047-170.317-170.317c-2.623-5.368-4.157-11.68-4.157-18.35 0-23.516 19.064-42.579 42.579-42.579 6.67 0 12.983 1.534 18.603 4.269l-0.253-0.11 140.228 140.228 484.268-480.861c5.368-2.623 11.68-4.157 18.35-4.157 23.516 0 42.579 19.064 42.579 42.579 0 6.67-1.534 12.983-4.269 18.603l0.11-0.253-510.95 510.95c-7.048 8.010-17.025 13.299-28.241 14.184l-0.146 0.009z","M512 1022.95c-191.476-0.317-358.217-105.908-445.47-261.972l-1.328-2.587c-31.938-55.832-53.595-121.525-60.581-191.54l-0.166-2.053c-1.75-15.87-2.746-34.274-2.746-52.91 0-191.528 105.381-358.444 261.324-445.927l2.575-1.327c55.832-31.938 121.525-53.595 191.54-60.581l2.053-0.166c16.139-1.838 34.846-2.885 53.796-2.885 52.724 0 103.554 8.111 151.308 23.156l-3.563-0.969c19.66 4.032 34.236 21.19 34.236 41.754 0 23.516-19.064 42.579-42.579 42.579-5.793 0-11.317-1.158-16.352-3.253l0.282 0.104c-37.278-11.625-80.141-18.322-124.567-18.322-16.116 0-32.026 0.881-47.685 2.599l1.933-0.172c-60.018 6.3-114.675 24.271-163.354 51.622l2.121-1.095c-49.065 27.393-90.495 62.305-124.293 103.695l-0.607 0.765c-59.499 72.093-95.584 165.431-95.584 267.195 0 16.071 0.899 31.933 2.652 47.536l-0.174-1.916c6.3 60.018 24.271 114.675 51.622 163.354l-1.095-2.121c27.393 49.065 62.305 90.495 103.695 124.293l0.765 0.607c72.093 59.499 165.431 95.584 267.195 95.584 16.071 0 31.933-0.899 47.536-2.652l-1.916 0.174c60.018-6.3 114.675-24.271 163.354-51.622l-2.121 1.095c49.065-27.393 90.495-62.305 124.293-103.695l0.607-0.765c59.499-72.093 95.584-165.431 95.584-267.195 0-16.071-0.899-31.933-2.652-47.536l0.174 1.916c-0.129-1.276-0.204-2.758-0.204-4.258 0-24.725 20.044-44.769 44.769-44.769 23.226 0 42.321 17.686 44.551 40.326l0.015 0.185c1.73 15.781 2.716 34.082 2.716 52.613 0 191.743-105.619 358.82-261.851 446.222l-2.584 1.328c-56.511 33.262-123.144 55.912-194.296 63.403l-2.137 0.182c-17.6 0-35.767 0-52.798 0z"],"attrs":[{},{}],"tags":["check-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":26,"id":152,"name":"check-circle","prevSize":80,"code":59658},"setIdx":0,"setId":1,"iconIdx":233},{"icon":{"paths":["M586.932 512l312.455-312.455c10.394-9.708 16.875-23.488 16.875-38.79 0-29.283-23.737-53.020-53.020-53.020-15.299 0-29.084 6.481-38.759 16.841l-0.027 0.029-312.455 312.455-312.455-312.455c-9.444-8.816-22.161-14.228-36.145-14.228-29.283 0-53.020 23.737-53.020 53.020 0 13.985 5.412 26.701 14.261 36.174l-0.027-0.029 312.455 312.455-312.455 312.455c-9.582 9.589-15.504 22.839-15.504 37.468s5.926 27.874 15.504 37.469v0c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0l312.455-312.455 312.455 312.455c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0c9.582-9.589 15.504-22.839 15.504-37.468s-5.926-27.874-15.504-37.469v0z"],"attrs":[{}],"tags":["times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":265,"id":153,"name":"times","prevSize":80,"code":59659},"setIdx":0,"setId":1,"iconIdx":234},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M341.333 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l341.333-341.333c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-341.333 341.333c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M682.667 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-341.337-341.337c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 341.333 341.333c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{},{}],"tags":["times-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":28,"id":154,"name":"times-circle","prevSize":80,"code":59660},"setIdx":0,"setId":1,"iconIdx":235},{"icon":{"paths":["M559.485 464.515v-395.695c0-26.223-21.257-47.485-47.485-47.485s-47.485 21.257-47.485 47.485v0 395.695h-395.695c-26.223 0-47.485 21.257-47.485 47.485s21.257 47.485 47.485 47.485v0h395.695v395.695c0.352 26.082 21.403 47.133 47.447 47.485h0.033c26.223 0 47.485-21.257 47.485-47.485v0-395.695h395.695c26.223 0 47.485-21.257 47.485-47.485v0c-0.352-26.082-21.403-47.133-47.447-47.485h-0.033z"],"attrs":[{}],"tags":["plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":35,"id":155,"name":"plus","prevSize":80,"code":59661},"setIdx":0,"setId":1,"iconIdx":236},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["plus-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":36,"id":156,"name":"plus-circle","prevSize":80,"code":59662},"setIdx":0,"setId":1,"iconIdx":237},{"icon":{"paths":["M967.085 568.886h-910.171c-31.417 0-56.886-25.469-56.886-56.886s25.469-56.886 56.886-56.886v0h910.171c31.417 0 56.886 25.469 56.886 56.886s-25.469 56.886-56.886 56.886v0z"],"attrs":[{}],"tags":["minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":41,"id":157,"name":"minus","prevSize":80,"code":59663},"setIdx":0,"setId":1,"iconIdx":238},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["minus-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":42,"id":158,"name":"minus-circle","prevSize":80,"code":59664},"setIdx":0,"setId":1,"iconIdx":239},{"icon":{"paths":["M1024 512c0 282.769-229.231 512-512 512s-512-229.231-512-512c0-282.769 229.231-512 512-512s512 229.231 512 512z"],"attrs":[{}],"tags":["circle-on","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":47,"id":159,"name":"circle-on","prevSize":80,"code":59665},"setIdx":0,"setId":1,"iconIdx":240},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{}],"tags":["circle-off","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":48,"id":160,"name":"circle-off","prevSize":80,"code":59666},"setIdx":0,"setId":1,"iconIdx":241},{"icon":{"paths":["M512 761.297c-0.059 0-0.133 0-0.206 0-12.080 0-23.010-4.935-30.879-12.901l-410.613-410.613c-7.95-7.958-12.867-18.951-12.867-31.089 0-24.283 19.676-43.971 43.952-43.993h821.216c23.565 0.924 42.321 20.252 42.321 43.961 0 11.301-4.262 21.608-11.268 29.401l0.035-0.040-410.607 410.607c-7.678 8.671-18.694 14.235-31.015 14.662l-0.074 0.003zM207.563 350.691l304.437 304.437 304.437-304.437z"],"attrs":[{}],"tags":["sort-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":51,"id":161,"name":"sort-down","prevSize":80,"code":59667},"setIdx":0,"setId":1,"iconIdx":242},{"icon":{"paths":["M921.888 760.859h-819.773c-0.088 0-0.19 0.002-0.294 0.002-18.019 0-33.47-11-40.004-26.651l-0.105-0.287c-1.856-4.68-2.932-10.103-2.932-15.777 0-11.845 4.689-22.595 12.313-30.495l409.875-409.875c7.945-7.935 18.917-12.844 31.034-12.844s23.089 4.908 31.035 12.844v0l409.888 409.888c7.91 7.94 12.801 18.896 12.801 30.993 0 6.145-1.262 11.997-3.542 17.308l0.108-0.285c-7.032 14.993-22.001 25.192-39.352 25.192-0.369 0-0.739-0.004-1.106-0.013l0.055 0.002zM208.099 673.027h607.804l-303.901-303.901z"],"attrs":[{}],"tags":["sort-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":52,"id":162,"name":"sort-up","prevSize":80,"code":59668},"setIdx":0,"setId":1,"iconIdx":243},{"icon":{"paths":["M841.149 443.428h-658.298c-0.083 0-0.179 0.001-0.275 0.001-16.883 0-31.357-10.305-37.478-24.968l-0.099-0.269c-2.034-4.708-3.217-10.189-3.217-15.949 0-11.333 4.583-21.597 11.994-29.037l329.147-329.147c7.443-7.433 17.723-12.033 29.075-12.033s21.632 4.598 29.076 12.033v0l329.149 329.149c7.411 7.439 11.993 17.704 11.993 29.036 0 5.757-1.183 11.24-3.319 16.216l0.101-0.267c-6.22 14.932-20.695 25.236-37.577 25.236-0.097 0-0.193 0-0.29-0.001h0.015zM282.145 361.141h459.712l-229.855-229.855z","M512 992.009c-0.056 0-0.125 0-0.191 0-11.299 0-21.519-4.615-28.879-12.065l-329.153-329.153c-7.411-7.439-11.993-17.704-11.993-29.036 0-5.757 1.183-11.24 3.319-16.216l-0.101 0.267c6.22-14.932 20.695-25.236 37.577-25.236 0.097 0 0.193 0 0.29 0.001h658.283c0.083 0 0.179-0.001 0.275-0.001 16.883 0 31.357 10.305 37.478 24.968l0.099 0.269c2.034 4.708 3.217 10.189 3.217 15.949 0 11.333-4.583 21.597-11.994 29.037l-329.147 329.147c-7.363 7.453-17.584 12.068-28.883 12.068-0.067 0-0.135 0-0.202 0h0.010zM282.145 662.859l229.855 229.855 229.855-229.855z"],"attrs":[{},{}],"tags":["sort"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":54,"id":163,"name":"sort","prevSize":80,"code":59669},"setIdx":0,"setId":1,"iconIdx":244},{"icon":{"paths":["M776.253 1023.989c-13.652-0.164-25.983-5.679-35.022-14.542l-462.434-462.434c-8.953-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l462.442-462.442c8.959-8.925 21.319-14.443 34.966-14.443 6.933 0 13.536 1.424 19.529 3.996l-0.322-0.122c17.981 7.491 30.389 24.922 30.389 45.252 0 0.116 0 0.233-0.002 0.348v-0.019 924.882c0 0.099 0.002 0.215 0.002 0.331 0 20.33-12.41 37.761-30.067 45.132l-0.324 0.119c-5.648 2.471-12.229 3.927-19.143 3.964h-0.014zM383.839 512l342.867 342.867v-685.734z","M247.747 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.511 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":29,"id":164,"name":"step-backward","prevSize":80,"code":59670},"setIdx":0,"setId":1,"iconIdx":245},{"icon":{"paths":["M247.747 1023.989c-6.929-0.037-13.509-1.493-19.478-4.087l0.321 0.124c-17.981-7.491-30.389-24.922-30.389-45.252 0-0.116 0-0.231 0.002-0.348v0.019-924.882c0-0.099-0.002-0.215-0.002-0.331 0-20.33 12.41-37.761 30.067-45.132l0.324-0.119c5.67-2.449 12.271-3.874 19.206-3.874 13.649 0 26.007 5.518 34.967 14.444l462.441 462.441c8.953 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-462.442 462.442c-9.030 8.855-21.362 14.37-34.982 14.533h-0.031zM297.295 169.133v685.734l342.867-342.867z","M776.253 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.513 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":30,"id":165,"name":"step-forward","prevSize":80,"code":59671},"setIdx":0,"setId":1,"iconIdx":246},{"icon":{"paths":["M325.818 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M325.818 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["th-large"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":34,"id":166,"name":"th-large","prevSize":80,"code":59672},"setIdx":0,"setId":1,"iconIdx":247},{"icon":{"paths":["M512 1023.983c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 361.361 361.361 361.361-361.361c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":37,"id":167,"name":"arrow-down","prevSize":80,"code":59673},"setIdx":0,"setId":1,"iconIdx":248},{"icon":{"paths":["M445.937 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l396.374-396.374c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-361.361 361.361 361.361 361.361c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":40,"id":168,"name":"arrow-left","prevSize":80,"code":59674},"setIdx":0,"setId":1,"iconIdx":249},{"icon":{"paths":["M578.063 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-0.005-0.005c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l361.361-361.361-361.361-361.361c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":43,"id":169,"name":"arrow-right","prevSize":80,"code":59675},"setIdx":0,"setId":1,"iconIdx":250},{"icon":{"paths":["M908.374 495.484c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-361.366-361.366-361.361 361.361c-8.824 8.239-20.711 13.297-33.777 13.297-27.364 0-49.547-22.183-49.547-49.547 0-13.068 5.058-24.953 13.325-33.806l-0.026 0.029 396.374-396.374c8.963-8.952 21.342-14.491 35.013-14.491s26.049 5.537 35.014 14.491v0l396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":216,"id":170,"name":"arrow-up","prevSize":80,"code":59676},"setIdx":0,"setId":1,"iconIdx":251},{"icon":{"paths":["M974.438 561.547h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 264.265h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 858.829h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{},{}],"tags":["bars"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":215,"id":171,"name":"bars","prevSize":80,"code":59677},"setIdx":0,"setId":1,"iconIdx":252},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":50,"id":172,"name":"arrow-circle-down","prevSize":80,"code":59678},"setIdx":0,"setId":1,"iconIdx":253},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":53,"id":173,"name":"arrow-circle-left","prevSize":80,"code":59679},"setIdx":0,"setId":1,"iconIdx":254},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":55,"id":174,"name":"arrow-circle-right","prevSize":80,"code":59680},"setIdx":0,"setId":1,"iconIdx":255},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":31,"id":175,"name":"arrow-circle-up","prevSize":80,"code":59681},"setIdx":0,"setId":1,"iconIdx":256},{"icon":{"paths":["M512 1023.999c-36.682-0.495-66.288-30.1-66.783-66.735v-623.353c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 623.305c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z","M512 178.087c-36.682-0.495-66.288-30.1-66.783-66.735v-44.569c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 44.521c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z"],"attrs":[{},{}],"tags":["info"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":33,"id":176,"name":"info","prevSize":80,"code":59683},"setIdx":0,"setId":1,"iconIdx":257},{"icon":{"paths":["M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 284.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 355.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{},{}],"tags":["info-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":38,"id":177,"name":"info-circle","prevSize":80,"code":59684},"setIdx":0,"setId":1,"iconIdx":258},{"icon":{"paths":["M980.714 497.352c-0.058 0-0.126 0-0.195 0-9.879 0-18.984-3.304-26.275-8.867l0.106 0.077-442.349-331.615-442.349 331.615c-7.252 5.487-16.423 8.788-26.365 8.788-24.268 0-43.942-19.674-43.942-43.942 0-14.326 6.856-27.052 17.467-35.074l0.11-0.080 468.714-351.536c7.252-5.487 16.423-8.788 26.365-8.788s19.113 3.301 26.475 8.868l-0.11-0.080 468.714 351.536c9.942 8.121 16.239 20.379 16.239 34.109 0 9.129-2.783 17.608-7.548 24.634l0.099-0.154c-7.474 11.934-20.322 19.902-35.068 20.503l-0.085 0.003z","M863.536 966.067h-703.071c-24.136-0.325-43.617-19.805-43.942-43.91v-556.629c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 512.656h615.187v-512.656c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 556.598c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z","M629.178 966.067c-24.136-0.325-43.617-19.805-43.942-43.91v-366.215h-146.474v366.183c0 24.268-19.674 43.942-43.942 43.942s-43.942-19.674-43.942-43.942v0-410.125c0.325-24.136 19.805-43.617 43.91-43.942h234.389c24.136 0.325 43.617 19.805 43.942 43.91v410.157c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z"],"attrs":[{},{},{}],"tags":["home"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":214,"id":178,"name":"home","prevSize":80,"code":59685},"setIdx":0,"setId":1,"iconIdx":259},{"icon":{"paths":["M512 1023.985c-282.573-0.249-511.548-229.377-511.548-511.985 0-282.761 229.224-511.985 511.985-511.985 136.039 0 259.684 53.057 351.374 139.607l-0.248-0.232c7.709 7.718 12.478 18.378 12.478 30.15s-4.768 22.431-12.478 30.151v0c-7.654 7.849-18.334 12.718-30.15 12.718s-22.495-4.869-30.142-12.709l-0.008-0.009c-76.159-71.371-178.876-115.207-291.832-115.207-235.949 0-427.224 191.274-427.224 427.224s191.274 427.224 427.224 427.224c235.845 0 427.056-191.106 427.224-426.913v-0.016c0-23.563 19.102-42.665 42.665-42.665s42.665 19.102 42.665 42.665v0c0 282.761-229.224 511.985-511.985 511.985v0z"],"attrs":[{}],"tags":["spinner"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":44,"id":179,"name":"spinner","prevSize":80,"code":59686},"setIdx":0,"setId":1,"iconIdx":260}],"height":1024,"metadata":{"name":"primeicons","url":"https://github.com/primefaces/primeicons","designer":"","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"pi-","metadata":{"fontFamily":"primeicons","majorVersion":1,"minorVersion":0,"copyright":"PrimeTek Informatics","designer":"","description":"Icon Library for Prime UI Libraries","fontURL":"https://github.com/primefaces/primeicons","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"includeMetadata":true},"imagePref":{"prefix":"pi-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","height":32,"columns":16,"margin":16,"name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"PrimeIcons":"NTQ3YTNmNDcyNzcwZTk0M2UzYzcxODljOTAyZTYyODEjMSMxNjYyOTc4NjMyIyMjNTU3N2Y2ZGJiZTc3"},"showGrid":true}}
\ No newline at end of file
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M93.091 232.729c0-42.56 35.015-77.575 77.575-77.575h133.744l172.25 200.958c8.842 10.317 21.752 16.254 35.34 16.254h341.336c42.555 0 77.575 35.016 77.575 77.576v341.333c0 42.562-35.021 77.575-77.575 77.575h-682.669c-42.56 0-77.575-35.013-77.575-77.575v-558.545zM170.666 62.063c-93.972 0-170.666 76.694-170.666 170.666v558.545c0 93.974 76.694 170.664 170.666 170.664h682.669c93.974 0 170.664-76.69 170.664-170.664v-341.333c0-93.973-76.69-170.666-170.664-170.666h-319.928l-172.25-200.959c-8.843-10.316-21.752-16.254-35.34-16.254h-155.152zM512 434.426c25.706 0 46.545 20.839 46.545 46.545v77.576h77.576c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.546-46.545 46.546h-77.576v77.575c0 25.708-20.839 46.547-46.545 46.547s-46.545-20.838-46.545-46.547v-77.575h-77.576c-25.706 0-46.545-20.839-46.545-46.546s20.839-46.545 46.545-46.545h77.576v-77.576c0-25.706 20.839-46.545 46.545-46.545z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["folder-plus","add","new","create","container"]},"attrs":[{}],"properties":{"order":357,"id":315,"name":"folder-plus","prevSize":24,"code":59909},"setIdx":0,"setId":1,"iconIdx":0},{"icon":{"paths":["M312.166 186.266l82.248-82.248 82.249 82.248c19.516 19.516 51.158 19.516 70.673 0l82.249-82.248 82.248 82.248c19.516 19.516 51.156 19.516 70.671 0l38.159-38.154v727.773l-38.159-38.151c-19.515-19.515-51.155-19.515-70.671 0l-82.248 82.249-82.249-82.249c-19.516-19.515-51.158-19.515-70.673 0l-82.249 82.249-82.248-82.249c-19.516-19.515-51.158-19.515-70.674 0l-38.154 38.151v-727.773l38.154 38.154c19.517 19.516 51.158 19.516 70.674 0zM429.751 14.637c-19.515-19.516-51.157-19.516-70.674 0l-82.248 82.249-76.369-76.37c-31.481-31.482-85.31-9.185-85.31 35.337v912.295c0 44.522 53.829 66.816 85.31 35.335l76.369-76.368 82.248 82.249c19.516 19.515 51.158 19.515 70.674 0l82.248-82.249 82.249 82.249c19.515 19.515 51.157 19.515 70.673 0l82.248-82.249 76.368 76.368c31.481 31.481 85.314 9.187 85.314-35.335v-912.295c0-44.522-53.833-66.819-85.314-35.337l-76.368 76.37-82.248-82.249c-19.515-19.516-51.157-19.516-70.673 0l-82.249 82.249-82.248-82.249zM394.414 291.53c-24.352 0-44.094 19.742-44.094 44.095s19.742 44.094 44.094 44.094h235.171c24.352 0 44.094-19.742 44.094-44.094s-19.742-44.095-44.094-44.095h-235.171zM350.32 512.002c0-24.352 19.742-44.094 44.094-44.094h235.171c24.352 0 44.094 19.742 44.094 44.094s-19.742 44.095-44.094 44.095h-235.171c-24.352 0-44.094-19.742-44.094-44.095zM394.414 644.285c-24.352 0-44.094 19.742-44.094 44.095s19.742 44.094 44.094 44.094h235.171c24.352 0 44.094-19.742 44.094-44.094s-19.742-44.095-44.094-44.095h-235.171z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["receipt","bill","invoice","proof-of-purchase","payment"]},"attrs":[{}],"properties":{"order":358,"id":314,"name":"receipt","prevSize":24,"code":59910},"setIdx":0,"setId":1,"iconIdx":1},{"icon":{"paths":["M561.548 49.548c0-27.365-22.183-49.548-49.548-49.548s-49.548 22.184-49.548 49.548v376.632l-326.173-188.316c-23.699-13.683-54.002-5.563-67.685 18.136s-5.563 54.002 18.136 67.684l326.172 188.316-326.172 188.316c-23.699 13.682-31.819 43.986-18.136 67.684s43.986 31.817 67.685 18.139l326.173-188.32v376.634c0 27.363 22.183 49.547 49.548 49.547s49.548-22.184 49.548-49.547v-376.632l326.173 188.319c23.698 13.678 54.001 5.559 67.686-18.139 13.678-23.698 5.559-54.002-18.139-67.684l-326.173-188.316 326.173-188.316c23.698-13.682 31.817-43.986 18.139-67.684-13.685-23.698-43.988-31.819-67.686-18.136l-326.173 188.315v-376.631z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["asterisk","star","note","reference","highlight"]},"attrs":[{}],"properties":{"order":359,"id":313,"name":"asterisk","prevSize":24,"code":59911},"setIdx":0,"setId":1,"iconIdx":2},{"icon":{"paths":["M85.334 512c0-235.641 191.025-426.666 426.666-426.666 235.644 0 426.664 191.025 426.664 426.666 0 235.644-191.020 426.664-426.664 426.664-235.641 0-426.666-191.020-426.666-426.664zM512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM355.555 426.666c39.273 0 71.111-31.838 71.111-71.111s-31.838-71.111-71.111-71.111c-39.273 0-71.111 31.838-71.111 71.111s31.838 71.111 71.111 71.111zM739.555 355.555c0 39.273-31.837 71.111-71.11 71.111s-71.111-31.838-71.111-71.111c0-39.273 31.838-71.111 71.111-71.111s71.11 31.838 71.11 71.111zM324.179 610.191l-0.208-0.48-0.007-0.017c-8.836-21.718-33.566-32.252-55.365-23.532-21.878 8.752-32.52 33.583-23.769 55.461l39.615-15.846c-39.615 15.846-39.607 15.866-39.598 15.887l0.018 0.045 0.041 0.1 0.097 0.239 0.263 0.636c0.206 0.492 0.475 1.119 0.806 1.872 0.663 1.507 1.581 3.521 2.771 5.972 2.378 4.895 5.858 11.567 10.571 19.422 9.39 15.65 23.894 36.362 44.639 57.107 42.019 42.016 109.295 83.605 207.947 83.605s165.928-41.589 207.948-83.605c20.748-20.746 35.252-41.457 44.636-57.107 4.718-7.855 8.192-14.527 10.569-19.422 1.192-2.451 2.114-4.465 2.772-5.972 0.336-0.753 0.6-1.38 0.812-1.872l0.263-0.636 0.095-0.239 0.037-0.1 0.022-0.045c0.007-0.021 0.015-0.042-39.6-15.887l39.614 15.846c8.755-21.878-1.887-46.71-23.764-55.461-21.804-8.719-46.533 1.814-55.369 23.533l-0.214 0.496c-0.254 0.577-0.724 1.618-1.423 3.057-1.4 2.883-3.698 7.322-6.985 12.8-6.61 11.017-16.995 25.86-31.805 40.671-29.092 29.091-75.594 58.614-147.608 58.614s-118.516-29.523-147.608-58.614c-14.81-14.811-25.196-29.654-31.805-40.671-3.287-5.478-5.585-9.917-6.985-12.8-0.699-1.439-1.169-2.48-1.423-3.057z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["face-smile","happy","joy","pleased","positive"]},"attrs":[{}],"properties":{"order":361,"id":311,"name":"face-smile","prevSize":24,"code":59912},"setIdx":0,"setId":1,"iconIdx":3},{"icon":{"paths":["M1024 512c0 282.836-229.164 512-512 512-52.852 0-103.639-8.053-151.535-22.916 20.852-34.063 52.026-89.805 63.587-134.195 6.194-23.947 31.794-121.805 31.794-121.805 16.723 31.795 65.445 58.836 117.264 58.836 154.426 0 265.7-142.037 265.7-318.553 0-169.084-138.113-295.639-315.661-295.639-220.903 0-338.374 148.232-338.374 309.884 0 75.148 40.052 168.671 103.845 198.4 9.703 4.542 14.864 2.478 17.135-6.813 1.652-7.020 10.323-41.909 14.245-58.013 1.239-5.161 0.62-9.703-3.509-14.658-20.852-25.806-37.781-72.877-37.781-116.852 0-112.929 85.471-222.142 231.226-222.142 125.73 0 213.884 85.678 213.884 208.31 0 138.529-69.987 234.529-161.032 234.529-50.168 0-87.949-41.497-75.768-92.491 14.452-60.903 42.323-126.555 42.323-170.529 0-39.226-21.059-72.052-64.826-72.052-51.407 0-92.697 53.058-92.697 124.284 0 45.42 15.277 75.974 15.277 75.974s-50.58 214.297-59.871 254.35c-10.323 44.178-6.194 106.525-1.858 146.995-190.348-74.533-325.368-259.926-325.368-476.906 0-282.839 229.161-512 512-512 282.836 0 512 229.161 512 512z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pinterest","social","media","image","sharing","hobby"]},"attrs":[{}],"properties":{"order":362,"id":310,"name":"pinterest","prevSize":24,"code":59913},"setIdx":0,"setId":1,"iconIdx":4},{"icon":{"paths":["M160.914 87.771c-40.395 0-73.143 32.748-73.143 73.143v175.543c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v-175.543c0-88.87 72.044-160.914 160.914-160.914h175.543c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886h-175.543zM643.657 43.886c0-24.237 19.648-43.886 43.886-43.886h175.543c88.869 0 160.914 72.044 160.914 160.914v175.543c0 24.237-19.646 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v-175.543c0-40.395-32.746-73.143-73.143-73.143h-175.543c-24.237 0-43.886-19.648-43.886-43.886zM43.886 643.657c24.237 0 43.886 19.648 43.886 43.886v175.543c0 40.397 32.748 73.143 73.143 73.143h175.543c24.237 0 43.886 19.646 43.886 43.886s-19.648 43.886-43.886 43.886h-175.543c-88.87 0-160.914-72.046-160.914-160.914v-175.543c0-24.237 19.648-43.886 43.886-43.886zM980.114 643.657c24.24 0 43.886 19.648 43.886 43.886v175.543c0 88.869-72.046 160.914-160.914 160.914h-175.543c-24.237 0-43.886-19.646-43.886-43.886s19.648-43.886 43.886-43.886h175.543c40.397 0 73.143-32.746 73.143-73.143v-175.543c0-24.237 19.646-43.886 43.886-43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["expand","enlarge","grow","increase","extend"]},"attrs":[{}],"properties":{"order":363,"id":309,"name":"expand","prevSize":24,"code":59914},"setIdx":0,"setId":1,"iconIdx":5},{"icon":{"paths":["M857.644 98.33c6.107-6.117 17.218-10.869 31.532-10.548s26.5 5.661 33.499 12.672c7.534 7.543 12.961 19.896 13.509 33.631 0.549 13.674-3.825 24.167-9.787 30.152l-0.007 0.012-438.252 438.818-74.479 6.772 5.862-72.821 438.122-438.688zM984.788 38.445c-25.578-25.626-60.679-37.668-93.645-38.409-32.973-0.741-69.135 9.762-95.612 36.278v0.006l-449.509 450.089c-7.358 7.368-11.856 17.111-12.692 27.49l-11.336 140.842c-1.039 12.903 3.673 25.606 12.873 34.711s21.952 13.685 34.843 12.513l142.215-12.931c10.233-0.93 19.816-5.423 27.077-12.693l449.538-450.118c26.617-26.691 36.659-62.768 35.343-95.651-1.317-32.83-14.043-67.034-39.095-92.128zM149.942 87.804c-82.566 0-149.938 67.372-149.938 149.938v636.323c0 82.564 67.372 149.936 149.938 149.936h636.322c82.564 0 149.936-67.372 149.936-149.936v-318.163c0-24.237-19.646-43.884-43.886-43.884-24.232 0-43.878 19.648-43.878 43.884v318.163c0 34.092-28.080 62.164-62.171 62.164h-636.322c-34.093 0-62.169-28.072-62.169-62.164v-636.323c0-34.093 28.077-62.169 62.169-62.169h318.16c24.237 0 43.884-19.648 43.884-43.884s-19.648-43.884-43.884-43.884h-318.16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pen-to-square","write","edit","note","document"]},"attrs":[{}],"properties":{"order":364,"id":308,"name":"pen-to-square","prevSize":24,"code":59915},"setIdx":0,"setId":1,"iconIdx":6},{"icon":{"paths":["M383.383 66.188c19.99 1.421 37.156 14.743 43.493 33.755l226.431 679.292 144.696-289.398c8.397-16.786 25.549-27.39 44.317-27.39h132.133c27.363 0 49.547 22.183 49.547 49.548s-22.184 49.548-49.547 49.548h-101.508l-184.499 369.001c-8.962 17.927-27.84 28.687-47.83 27.268-19.99-1.426-37.156-14.746-43.494-33.755l-226.431-679.296-144.698 289.393c-8.393 16.786-25.55 27.39-44.317 27.39h-132.129c-27.365 0-49.548-22.183-49.548-49.548s22.184-49.548 49.548-49.548h101.506l184.499-368.995c8.962-17.924 27.84-28.685 47.83-27.265z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["wave-pulse","frequency","rhythm","beat","vibration","rate"]},"attrs":[{}],"properties":{"order":365,"id":307,"name":"wave-pulse","prevSize":24,"code":59916},"setIdx":0,"setId":1,"iconIdx":7},{"icon":{"paths":["M394.977 0c24.237 0 43.886 19.648 43.886 43.886v212.205l285.775-107.020c22.699-8.5 47.992 3.010 56.491 25.708s-3.013 47.989-25.71 56.49l-316.556 118.548v37.933l285.775-107.020c22.699-8.5 47.992 3.010 56.491 25.708s-3.013 47.989-25.71 56.49l-316.556 118.548v452.467c211.7-22.17 380.344-202.759 380.344-421.939 0-24.237 19.646-43.886 43.886-43.886 24.232 0 43.886 19.648 43.886 43.886 0 282.931-232.060 512-512.001 512-24.237 0-43.886-19.646-43.886-43.886v-465.772l-174.781 65.454c-22.698 8.5-47.989-3.010-56.489-25.708s3.009-47.989 25.707-56.49l205.563-76.981v-37.933l-174.781 65.454c-22.698 8.5-47.989-3.010-56.489-25.708s3.009-47.989 25.707-56.49l205.563-76.981v-245.075c0-24.237 19.648-43.886 43.886-43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["turkish-lira","money","currency","turkey","cash"]},"attrs":[{}],"properties":{"order":366,"id":306,"name":"turkish-lira","prevSize":24,"code":59917},"setIdx":0,"setId":1,"iconIdx":8},{"icon":{"paths":["M512 161.684c44.648 0 80.842-36.195 80.842-80.843s-36.194-80.842-80.842-80.842c-44.648 0-80.842 36.194-80.842 80.842s36.194 80.843 80.842 80.843zM161.684 512c0 44.648-36.195 80.842-80.843 80.842s-80.842-36.194-80.842-80.842c0-44.648 36.194-80.842 80.842-80.842s80.843 36.194 80.843 80.842zM1024 512c0 44.648-36.191 80.842-80.845 80.842-44.646 0-80.837-36.194-80.837-80.842s36.191-80.842 80.837-80.842c44.654 0 80.845 36.194 80.845 80.842zM592.842 943.155c0 44.654-36.195 80.845-80.843 80.845s-80.842-36.191-80.842-80.845c0-44.646 36.194-80.837 80.842-80.837s80.843 36.191 80.843 80.837zM149.971 264.301c31.571 31.571 82.757 31.571 114.328 0s31.571-82.757 0-114.328c-31.571-31.571-82.757-31.571-114.328 0s-31.571 82.757 0 114.328zM874.028 874.028c-31.568 31.568-82.754 31.568-114.33 0-31.568-31.576-31.568-82.761 0-114.33 31.576-31.572 82.761-31.572 114.33 0 31.568 31.568 31.568 82.754 0 114.33zM149.971 874.028c31.571 31.568 82.757 31.568 114.328 0 31.571-31.576 31.571-82.761 0-114.33-31.571-31.572-82.757-31.572-114.328 0-31.571 31.568-31.571 82.754 0 114.33z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["spinner-dotted","loading","processing","buffering"]},"attrs":[{}],"properties":{"order":367,"id":305,"name":"spinner-dotted","prevSize":24,"code":59918},"setIdx":0,"setId":1,"iconIdx":9},{"icon":{"paths":["M405.716 365.683l106.284-170.053 106.284 170.053c15.364 24.584 48.35 30.986 71.796 13.934l228.244-165.994-87.669 460.255c-1.324 6.935-7.387 11.952-14.446 11.952h-608.418c-7.060 0-13.123-5.018-14.444-11.952l-87.668-460.255 228.242 165.994c23.445 17.051 56.431 10.65 71.796-13.934zM554.392 97.005c-19.58-31.328-65.205-31.328-84.784 0l-116.966 187.145-273.186-198.68c-36.638-26.646-86.988 5.28-78.511 49.783l105.739 555.132c9.247 48.541 51.689 83.664 101.105 83.664h608.418c49.415 0 91.86-35.123 101.105-83.664l105.743-555.132c8.477-44.503-41.874-76.43-78.512-49.783l-273.187 198.68-116.966-187.145zM159.122 862.267c-24.361 0-44.11 19.749-44.11 44.112s19.749 44.112 44.11 44.112h705.756c24.364 0 44.112-19.749 44.112-44.112s-19.749-44.112-44.112-44.112h-705.756z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["crown","royalty","king","queen","leader"]},"attrs":[{}],"properties":{"order":368,"id":304,"name":"crown","prevSize":24,"code":59919},"setIdx":0,"setId":1,"iconIdx":10},{"icon":{"paths":["M512 85.334c-235.641 0-426.666 191.025-426.666 426.666 0 235.644 191.025 426.664 426.666 426.664 235.644 0 426.664-191.020 426.664-426.664 0-235.641-191.020-426.666-426.664-426.666zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512c0 282.77-229.23 512-512 512s-512-229.23-512-512zM398.222 298.666c23.564 0 42.667 19.103 42.667 42.667v341.333c0 23.564-19.103 42.667-42.667 42.667s-42.666-19.103-42.666-42.667v-341.333c0-23.564 19.103-42.667 42.666-42.667zM668.445 341.334c0-23.564-19.103-42.667-42.666-42.667s-42.667 19.103-42.667 42.667v341.333c0 23.564 19.103 42.667 42.667 42.667s42.666-19.103 42.666-42.667v-341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pause-circle","halt","wait","stop","break"]},"attrs":[{}],"properties":{"order":369,"id":303,"name":"pause-circle","prevSize":24,"code":59920},"setIdx":0,"setId":1,"iconIdx":11},{"icon":{"paths":["M466.206 14.266c28.828-14.414 62.76-14.414 91.588 0l409.601 204.797c34.692 17.346 56.605 52.803 56.605 91.589v666.010c0 24.24-19.646 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-666.010c0-5.541-3.131-10.606-8.090-13.084l-409.597-204.797c-4.118-2.060-8.966-2.060-13.084 0l-409.6 204.797c-4.956 2.477-8.087 7.543-8.087 13.084v666.010c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-666.010c0-38.786 21.914-74.244 56.606-91.589l409.6-204.797zM175.543 508.545c0-56.554 45.846-102.4 102.4-102.4h468.114c56.554 0 102.4 45.846 102.4 102.4v409.602c0 56.554-45.846 102.4-102.4 102.4h-468.114c-56.554 0-102.4-45.846-102.4-102.4v-409.602zM277.943 493.917c-8.079 0-14.629 6.549-14.629 14.629v73.143h497.371v-73.143c0-8.079-6.546-14.629-14.629-14.629h-468.114zM760.686 669.46h-497.371v87.774h497.371v-87.774zM760.686 845.005h-497.371v73.143c0 8.075 6.549 14.629 14.629 14.629h468.114c8.082 0 14.629-6.554 14.629-14.629v-73.143z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["warehouse","storage","inventory","goods","distribution"]},"attrs":[{}],"properties":{"order":370,"id":302,"name":"warehouse","prevSize":24,"code":59921},"setIdx":0,"setId":1,"iconIdx":12},{"icon":{"paths":["M102.4 0c-56.554 0-102.4 45.846-102.4 102.4v351.086c0 56.554 45.846 102.4 102.4 102.4h234.057c56.554 0 102.4-45.846 102.4-102.4v-351.086c0-56.554-45.846-102.4-102.4-102.4h-234.057zM87.771 102.4c0-8.079 6.549-14.629 14.629-14.629h234.057c8.079 0 14.629 6.549 14.629 14.629v351.086c0 8.079-6.549 14.629-14.629 14.629h-234.057c-8.079 0-14.629-6.549-14.629-14.629v-351.086zM102.4 702.171c-56.554 0-102.4 45.846-102.4 102.4v117.029c0 56.554 45.846 102.4 102.4 102.4h234.057c56.554 0 102.4-45.846 102.4-102.4v-117.029c0-56.554-45.846-102.4-102.4-102.4h-234.057zM87.771 804.571c0-8.082 6.549-14.629 14.629-14.629h234.057c8.079 0 14.629 6.546 14.629 14.629v117.029c0 8.082-6.549 14.629-14.629 14.629h-234.057c-8.079 0-14.629-6.546-14.629-14.629v-117.029zM585.143 570.514c0-56.554 45.846-102.4 102.4-102.4h234.057c56.554 0 102.4 45.846 102.4 102.4v351.086c0 56.554-45.846 102.4-102.4 102.4h-234.057c-56.554 0-102.4-45.846-102.4-102.4v-351.086zM687.543 555.886c-8.079 0-14.629 6.549-14.629 14.629v351.086c0 8.082 6.549 14.629 14.629 14.629h234.057c8.082 0 14.629-6.546 14.629-14.629v-351.086c0-8.079-6.546-14.629-14.629-14.629h-234.057zM687.543 0c-56.554 0-102.4 45.846-102.4 102.4v117.029c0 56.554 45.846 102.4 102.4 102.4h234.057c56.554 0 102.4-45.846 102.4-102.4v-117.029c0-56.554-45.846-102.4-102.4-102.4h-234.057zM672.914 102.4c0-8.079 6.549-14.629 14.629-14.629h234.057c8.082 0 14.629 6.549 14.629 14.629v117.029c0 8.079-6.546 14.629-14.629 14.629h-234.057c-8.079 0-14.629-6.549-14.629-14.629v-117.029z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["objects-column","items","elements","organization","grid","layout"]},"attrs":[{}],"properties":{"order":371,"id":301,"name":"objects-column","prevSize":24,"code":59922},"setIdx":0,"setId":1,"iconIdx":13},{"icon":{"paths":["M466.54 87.771c-31.446 0-56.939 25.492-56.939 56.939v85.746h204.8v-85.746c0-31.446-25.492-56.939-56.94-56.939h-90.922zM695.398 100.825h50.659c88.869 0 160.914 72.044 160.914 160.914v601.347c0 88.869-72.046 160.914-160.914 160.914h-468.114c-88.871 0-160.914-72.046-160.914-160.914v-601.347c0-88.87 72.044-160.914 160.914-160.914h50.659c18.586-58.466 73.314-100.825 137.936-100.825h90.922c64.622 0 119.352 42.358 137.936 100.825zM702.172 188.596v79.895c0 27.469-22.268 49.737-49.737 49.737h-280.869c-27.47 0-49.737-22.268-49.737-49.737v-79.895h-43.886c-40.396 0-73.143 32.748-73.143 73.143v601.347c0 40.397 32.747 73.143 73.143 73.143h468.114c40.397 0 73.143-32.746 73.143-73.143v-601.347c0-40.395-32.746-73.143-73.143-73.143h-43.885z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["clipboard","paste","copy","cut","notes"]},"attrs":[{}],"properties":{"order":372,"id":300,"name":"clipboard","prevSize":24,"code":59923},"setIdx":0,"setId":1,"iconIdx":14},{"icon":{"paths":["M85.334 512c0-235.641 191.025-426.666 426.666-426.666 235.644 0 426.664 191.025 426.664 426.666 0 235.644-191.020 426.664-426.664 426.664-235.641 0-426.666-191.020-426.666-426.664zM512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM398.222 715.992c0 50.684 61.278 76.065 97.115 40.225l203.992-203.99c22.216-22.216 22.216-58.236 0-80.453l-203.992-203.992c-35.838-35.838-97.115-10.456-97.115 40.227v407.983z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["play-circle","start","go","action","play"]},"attrs":[{}],"properties":{"order":373,"id":299,"name":"play-circle","prevSize":24,"code":59924},"setIdx":0,"setId":1,"iconIdx":15},{"icon":{"paths":["M511.999 78.769c-152.261 0-275.692 123.432-275.692 275.692s123.431 275.692 275.692 275.692c152.261 0 275.691-123.431 275.691-275.692s-123.43-275.692-275.691-275.692zM157.538 354.461c0-195.763 158.698-354.461 354.461-354.461s354.458 158.698 354.458 354.461c0 182.452-137.845 332.707-315.074 352.298v107.189h118.154c21.751 0 39.385 17.635 39.385 39.387s-17.633 39.38-39.385 39.38h-118.154v91.897c0 21.753-17.633 39.387-39.385 39.387s-39.385-17.635-39.385-39.387v-91.897h-118.154c-21.752 0-39.385-17.627-39.385-39.38s17.633-39.387 39.385-39.387h118.154v-107.189c-177.229-19.591-315.077-169.846-315.077-352.298z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["venus","female","women","gender"]},"attrs":[{}],"properties":{"order":374,"id":298,"name":"venus","prevSize":24,"code":59925},"setIdx":0,"setId":1,"iconIdx":16},{"icon":{"paths":["M43.886 29.259c-24.237 0-43.886 19.648-43.886 43.885s19.648 43.886 43.886 43.886h80.402l110.477 607.622c3.794 20.864 21.968 36.034 43.178 36.034h585.143c20.136 0 37.691-13.707 42.576-33.241l117.029-468.114c3.277-13.11 0.329-26.999-7.987-37.651s-21.072-16.878-34.589-16.878h-750.657l-25.365-139.507c-3.794-20.867-21.968-36.035-43.178-36.035h-117.029zM314.568 672.916l-69.153-380.343h678.489l-95.086 380.343h-514.25zM461.678 438.859c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h234.057c24.237 0 43.885-19.648 43.885-43.886s-19.648-43.886-43.885-43.886h-234.057zM380.343 819.2c-48.475 0-87.771 39.3-87.771 87.771 0 48.479 39.297 87.771 87.771 87.771s87.771-39.292 87.771-87.771c0-48.472-39.297-87.771-87.771-87.771zM672.914 906.971c0-48.472 39.296-87.771 87.771-87.771 48.472 0 87.771 39.3 87.771 87.771 0 48.479-39.3 87.771-87.771 87.771-48.475 0-87.771-39.292-87.771-87.771z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-minus","remove","purchase"]},"attrs":[{}],"properties":{"order":387,"id":297,"name":"cart-minus","prevSize":24,"code":59926},"setIdx":0,"setId":1,"iconIdx":17},{"icon":{"paths":["M277.944 0c-88.603 0-160.914 72.311-160.914 160.914v702.171c0 88.605 72.311 160.914 160.914 160.914h468.114c88.605 0 160.914-72.309 160.914-160.914v-497.371c0-11.639-4.623-22.802-12.851-31.032l-321.831-321.829c-8.23-8.23-19.392-12.854-31.032-12.854h-263.314zM204.801 160.914c0-40.128 33.014-73.143 73.143-73.143h219.429v277.943c0 24.237 19.648 43.886 43.886 43.886h277.942v453.486c0 40.126-33.017 73.143-73.143 73.143h-468.114c-40.128 0-73.143-33.017-73.143-73.143v-702.171zM757.138 321.829h-171.995v-171.993l171.995 171.993zM702.172 687.543c0 24.237-19.648 43.886-43.886 43.886h-102.4v102.4c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-102.4h-102.4c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886h102.4v-102.4c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v102.4h102.4c24.237 0 43.886 19.648 43.886 43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-plus","add","document","new","create"]},"attrs":[{}],"properties":{"order":386,"id":296,"name":"file-plus","prevSize":24,"code":59927},"setIdx":0,"setId":1,"iconIdx":18},{"icon":{"paths":["M277.943 0c24.237 0 43.886 19.648 43.886 43.886v73.143h146.286v-73.143c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v73.143h146.286v-73.143c0-24.237 19.648-43.886 43.886-43.886 24.24 0 43.886 19.648 43.886 43.886v73.143h14.629c56.554 0 102.4 45.846 102.4 102.4v14.629h73.143c24.24 0 43.886 19.648 43.886 43.886s-19.646 43.886-43.886 43.886h-73.143v146.286h73.143c24.24 0 43.886 19.648 43.886 43.886s-19.646 43.886-43.886 43.886h-73.143v146.286h73.143c24.24 0 43.886 19.648 43.886 43.886 0 24.24-19.646 43.886-43.886 43.886h-73.143v14.629c0 56.554-45.846 102.4-102.4 102.4h-14.629v73.143c0 24.24-19.646 43.886-43.886 43.886-24.237 0-43.886-19.646-43.886-43.886v-73.143h-146.286v73.143c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-73.143h-146.286v73.143c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-73.143h-14.629c-56.554 0-102.4-45.846-102.4-102.4v-14.629h-73.143c-24.237 0-43.886-19.646-43.886-43.886 0-24.237 19.648-43.886 43.886-43.886h73.143v-146.286h-73.143c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886h73.143v-146.286h-73.143c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886h73.143v-14.629c0-56.554 45.846-102.4 102.4-102.4h14.629v-73.143c0-24.237 19.648-43.886 43.886-43.886zM219.429 204.8c-8.079 0-14.629 6.549-14.629 14.629v585.143c0 8.082 6.549 14.629 14.629 14.629h585.143c8.082 0 14.629-6.546 14.629-14.629v-585.143c0-8.079-6.546-14.629-14.629-14.629h-585.143z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microchip","technology","circuit","processor","component"]},"attrs":[{}],"properties":{"order":385,"id":295,"name":"microchip","prevSize":24,"code":59928},"setIdx":0,"setId":1,"iconIdx":19},{"icon":{"paths":["M493.181 201.216h74.753v219.136h-74.753zM698.623 201.216h74.753v219.136h-74.753zM250.623 0l-186.623 182.784v658.432h223.739v182.784l187.146-182.784h148.985l336.131-329.216v-512zM885.248 475.648l-148.985 145.92h-149.51l-130.688 128v-128h-168.327v-548.352h597.509v402.432z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["twitch","live","streaming","video","game","broadcast"]},"attrs":[{}],"properties":{"order":384,"id":294,"name":"twitch","prevSize":24,"code":59929},"setIdx":0,"setId":1,"iconIdx":20},{"icon":{"paths":["M518.376 136.724c-3.965-2.203-8.786-2.203-12.751 0l-447.107 248.392c-19.014 10.563-42.991 3.713-53.554-15.301s-3.713-42.991 15.301-53.554l447.107-248.393c27.755-15.419 61.502-15.419 89.257 0l447.103 248.393c19.017 10.563 25.871 34.54 15.301 53.554-10.562 19.013-34.538 25.864-53.548 15.301l-447.11-248.392zM367.592 350.689c0-21.751 17.633-39.385 39.384-39.385h210.049c21.751 0 39.384 17.633 39.384 39.385s-17.633 39.384-39.384 39.384h-210.049c-21.751 0-39.384-17.633-39.384-39.384zM196.928 468.841c21.751 0 39.385 17.633 39.385 39.384v262.562c0 21.753-17.633 39.38-39.385 39.38s-39.384-17.627-39.384-39.38v-262.562c0-21.751 17.633-39.384 39.384-39.384zM406.976 468.841c21.751 0 39.384 17.633 39.384 39.384v262.562c0 21.753-17.633 39.38-39.384 39.38s-39.385-17.627-39.385-39.38v-262.562c0-21.751 17.633-39.384 39.385-39.384zM617.024 468.841c21.751 0 39.385 17.633 39.385 39.384v262.562c0 21.753-17.633 39.38-39.385 39.38s-39.384-17.627-39.384-39.38v-262.562c0-21.751 17.633-39.384 39.384-39.384zM827.070 468.841c21.753 0 39.387 17.633 39.387 39.384v262.562c0 21.753-17.635 39.38-39.387 39.38-21.745 0-39.38-17.627-39.38-39.38v-262.562c0-21.751 17.635-39.384 39.38-39.384zM105.032 928.322c0-21.753 17.633-39.387 39.384-39.387h735.171c21.753 0 39.38 17.635 39.38 39.387s-17.627 39.38-39.38 39.38h-735.171c-21.751 0-39.384-17.627-39.384-39.38z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["building-columns","architecture","structure","pillar","bank"]},"attrs":[{}],"properties":{"order":383,"id":293,"name":"building-columns","prevSize":24,"code":59930},"setIdx":0,"setId":1,"iconIdx":21},{"icon":{"paths":["M117.029 160.914c0-88.603 72.311-160.914 160.914-160.914h263.314c11.639 0 22.802 4.624 31.032 12.854l321.831 321.829c8.229 8.23 12.851 19.392 12.851 31.032v497.371c0 88.605-72.309 160.914-160.914 160.914h-468.114c-88.603 0-160.914-72.309-160.914-160.914v-702.171zM277.944 87.771c-40.128 0-73.143 33.014-73.143 73.143v702.171c0 40.126 33.014 73.143 73.143 73.143h468.114c40.126 0 73.143-33.017 73.143-73.143v-453.486h-277.942c-24.237 0-43.886-19.648-43.886-43.886v-277.943h-219.429zM585.144 149.835v171.993h171.995l-171.995-171.993zM703.947 572.289c17.138-17.138 17.138-44.925 0-62.063s-44.925-17.139-62.064 0l-203.025 203.025-56.74-56.739c-17.138-17.139-44.925-17.139-62.064 0s-17.138 44.925 0 62.063l87.771 87.774c17.139 17.137 44.926 17.137 62.064 0l234.057-234.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-check","document","confirmed","approve","verified","correct"]},"attrs":[{}],"properties":{"order":382,"id":292,"name":"file-check","prevSize":24,"code":59931},"setIdx":0,"setId":1,"iconIdx":22},{"icon":{"paths":["M321.829 43.886c0-24.237-19.648-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v73.143h-14.629c-56.554 0-102.4 45.846-102.4 102.4v14.629h-73.143c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h73.143v146.286h-73.143c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h73.143v146.286h-73.143c-24.237 0-43.886 19.648-43.886 43.886 0 24.24 19.648 43.886 43.886 43.886h73.143v14.629c0 56.554 45.846 102.4 102.4 102.4h14.629v73.143c0 24.24 19.648 43.886 43.886 43.886s43.886-19.646 43.886-43.886v-73.143h146.286v73.143c0 24.24 19.648 43.886 43.886 43.886s43.886-19.646 43.886-43.886v-73.143h146.286v73.143c0 24.24 19.648 43.886 43.886 43.886 24.24 0 43.886-19.646 43.886-43.886v-73.143h14.629c56.554 0 102.4-45.846 102.4-102.4v-14.629h73.143c24.24 0 43.886-19.646 43.886-43.886 0-24.237-19.646-43.886-43.886-43.886h-73.143v-146.286h73.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-73.143v-146.286h73.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-73.143v-14.629c0-56.554-45.846-102.4-102.4-102.4h-14.629v-73.143c0-24.237-19.646-43.886-43.886-43.886-24.237 0-43.886 19.648-43.886 43.886v73.143h-146.286v-73.143c0-24.237-19.648-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v73.143h-146.286v-73.143zM204.8 219.429c0-8.079 6.549-14.629 14.629-14.629h585.143c8.082 0 14.629 6.549 14.629 14.629v585.143c0 8.082-6.546 14.629-14.629 14.629h-585.143c-8.079 0-14.629-6.546-14.629-14.629v-585.143zM500.217 673.094c8.136 22.831 33.241 34.743 56.071 26.606s34.743-33.241 26.606-56.071l-99.474-279.115-0.199-0.557-0.214-0.552c-8.898-22.987-30.185-41.648-58.188-41.648s-49.29 18.662-58.188 41.648l-99.887 280.223c-8.137 22.831 3.775 47.935 26.606 56.072s47.935-3.775 56.071-26.606l16.097-45.166h118.6l16.097 45.166zM424.82 461.539l28.019 78.618h-56.038l28.020-78.618zM643.657 365.643c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v292.721c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v-292.721z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microchip-ai","technology","smart","artificial-intelligence"]},"attrs":[{}],"properties":{"order":381,"id":291,"name":"microchip-ai","prevSize":24,"code":59932},"setIdx":0,"setId":1,"iconIdx":23},{"icon":{"paths":["M266.334 91.953c-2.401 2.216-3.019 4.342-3.019 5.946v324.079c0 81.902 22.6 152.134 63.392 201.052 39.926 47.879 100.327 79.141 185.294 79.141s145.368-31.263 185.294-79.141c40.791-48.918 63.392-119.15 63.392-201.052v-324.079c0-1.604-0.622-3.73-3.021-5.946-2.458-2.27-6.451-4.182-11.608-4.182h-468.114c-5.156 0-9.149 1.911-11.609 4.182zM175.543 97.899c0-57.309 49.219-97.899 102.4-97.899h468.114c53.182 0 102.4 40.59 102.4 97.899v19.13h73.143c56.554 0 102.4 45.846 102.4 102.4v117.029c0 111.657-89.329 200.19-193.521 216.67-13.736 46.838-35.482 89.784-65.777 126.115-49.874 59.807-120.535 98.734-208.816 108.367v148.619h131.657c24.237 0 43.886 19.646 43.886 43.886s-19.648 43.886-43.886 43.886h-351.086c-24.237 0-43.886-19.646-43.886-43.886s19.648-43.886 43.886-43.886h131.657v-148.619c-88.281-9.633-158.942-48.56-208.817-108.367-30.296-36.331-52.043-79.277-65.772-126.115-104.192-16.481-193.525-105.013-193.525-216.67v-117.029c0-56.554 45.846-102.4 102.4-102.4h73.143v-19.13zM175.543 204.8h-73.143c-8.079 0-14.629 6.549-14.629 14.629v117.029c0 53.232 37.7 101.709 89.045 121.826-0.851-11.995-1.273-24.109-1.273-36.305v-217.178zM847.184 458.283c51.346-20.117 89.044-68.594 89.044-121.826v-117.029c0-8.079-6.546-14.629-14.629-14.629h-73.143v217.178c0 12.197-0.424 24.31-1.273 36.305z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["trophy","award","prize","win","victory"]},"attrs":[{}],"properties":{"order":380,"id":290,"name":"trophy","prevSize":24,"code":59933},"setIdx":0,"setId":1,"iconIdx":24},{"icon":{"paths":["M56.889 56.893c-31.419 0-56.889 25.47-56.889 56.889v796.445c0 31.422 25.47 56.891 56.889 56.891s56.889-25.468 56.889-56.891v-796.445c0-31.419-25.471-56.889-56.889-56.889zM227.555 56.893c-15.71 0-28.445 12.735-28.445 28.444v853.334c0 15.711 12.735 28.445 28.445 28.445s28.445-12.734 28.445-28.445v-853.334c0-15.709-12.735-28.444-28.445-28.444zM369.778 56.893c-15.71 0-28.445 12.735-28.445 28.444v853.334c0 15.711 12.735 28.445 28.445 28.445s28.444-12.734 28.444-28.445v-853.334c0-15.709-12.735-28.444-28.444-28.444zM938.664 99.56c0-23.564 19.105-42.667 42.672-42.667 23.559 0 42.664 19.103 42.664 42.667v824.885c0 23.567-19.105 42.672-42.664 42.672-23.567 0-42.672-19.105-42.672-42.672v-824.885zM540.445 113.782c0-31.419 25.47-56.889 56.889-56.889s56.888 25.47 56.888 56.889v796.445c0 31.422-25.47 56.891-56.888 56.891s-56.889-25.468-56.889-56.891v-796.445zM796.445 56.893c-31.422 0-56.891 25.47-56.891 56.889v796.445c0 31.422 25.468 56.891 56.891 56.891 31.415 0 56.891-25.468 56.891-56.891v-796.445c0-31.419-25.476-56.889-56.891-56.889z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["barcode","product","code","scan","retail","price"]},"attrs":[{}],"properties":{"order":379,"id":289,"name":"barcode","prevSize":24,"code":59934},"setIdx":0,"setId":1,"iconIdx":25},{"icon":{"paths":["M117.029 160.914c0-88.603 72.311-160.914 160.914-160.914h263.314c11.639 0 22.802 4.624 31.032 12.854l321.831 321.829c8.229 8.23 12.851 19.392 12.851 31.032v497.371c0 88.605-72.309 160.914-160.914 160.914h-468.114c-88.603 0-160.914-72.309-160.914-160.914v-702.171zM277.944 87.771c-40.128 0-73.143 33.014-73.143 73.143v702.171c0 40.126 33.014 73.143 73.143 73.143h468.114c40.126 0 73.143-33.017 73.143-73.143v-453.486h-277.942c-24.237 0-43.886-19.648-43.886-43.886v-277.943h-219.429zM585.144 149.835v171.993h171.995l-171.995-171.993zM543.032 510.226c-17.138-17.139-44.925-17.139-62.064 0l-117.029 117.029c-17.138 17.138-17.138 44.925 0 62.063s44.926 17.139 62.064 0l42.111-42.111v186.622c0 24.24 19.648 43.886 43.886 43.886s43.886-19.646 43.886-43.886v-186.622l42.111 42.111c17.139 17.139 44.926 17.139 62.064 0s17.138-44.925 0-62.063l-117.029-117.029z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-arrow-up","upload","send","transfer"]},"attrs":[{}],"properties":{"order":378,"id":288,"name":"file-arrow-up","prevSize":24,"code":59935},"setIdx":0,"setId":1,"iconIdx":26},{"icon":{"paths":["M722.823 45.176c0-24.95 20.228-45.176 45.177-45.176h210.827c24.949 0 45.173 20.226 45.173 45.176v210.824c0 24.95-20.224 45.177-45.173 45.177-24.956 0-45.18-20.226-45.18-45.177v-100.825l-207.86 210.37c54.698 69.238 87.386 156.767 87.386 251.867 0 224.55-182.032 406.588-406.585 406.588s-406.588-182.038-406.588-406.588c0-224.553 182.036-406.589 406.588-406.589 96.862 0 185.864 33.915 255.689 90.446l208.401-210.917h-102.678c-24.949 0-45.177-20.226-45.177-45.176zM406.588 301.177c-174.652 0-316.235 141.583-316.235 316.235s141.583 316.235 316.235 316.235c174.652 0 316.235-141.583 316.235-316.235 0-86.495-34.665-164.804-90.965-221.942-57.405-58.26-137.088-94.294-225.27-94.294z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["mars","male","man","men","gender"]},"attrs":[{}],"properties":{"order":377,"id":287,"name":"mars","prevSize":24,"code":59936},"setIdx":0,"setId":1,"iconIdx":27},{"icon":{"paths":["M960.044 419.841c-88.093 0.189-174.014-27.309-245.625-78.608v357.635c-0.020 66.235-20.263 130.886-58.023 185.305s-91.234 96.015-153.272 119.216c-62.038 23.208-129.682 26.917-193.886 10.635-64.203-16.289-121.905-51.785-165.388-101.749s-70.673-112.011-77.935-177.847c-7.262-65.838 5.751-132.323 37.298-190.563s80.125-105.46 139.236-135.344c59.111-29.884 125.937-41.008 191.541-31.883v179.818c-29.997-9.443-62.212-9.167-92.043 0.789s-55.754 29.083-74.067 54.65c-18.313 25.567-28.080 56.266-27.906 87.714s10.279 62.035 28.875 87.401c18.594 25.359 44.727 44.2 74.666 53.826s62.155 9.545 92.047-0.227c29.891-9.772 55.93-28.745 74.399-54.199s28.423-56.093 28.441-87.542v-698.868h176.017c-0.099 14.887 1.173 29.751 3.801 44.404 6.121 32.663 18.841 63.735 37.375 91.317s42.503 51.094 70.437 69.1c39.76 26.259 86.367 40.241 134.012 40.204v174.817z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["tiktok","social","media","video","app","music"]},"attrs":[{}],"properties":{"order":376,"id":286,"name":"tiktok","prevSize":24,"code":59937},"setIdx":0,"setId":1,"iconIdx":28},{"icon":{"paths":["M636.123 0c-25.707 0-46.546 20.839-46.546 46.545s20.839 46.546 46.546 46.546h228.959l-292.904 292.905c-18.177 18.177-18.177 47.648 0 65.826s47.648 18.177 65.826 0l292.907-292.906v228.963c0 25.706 20.838 46.545 46.548 46.545 25.702 0 46.541-20.839 46.541-46.545v-341.333c0-25.706-20.838-46.545-46.541-46.545h-341.336zM387.879 1024c25.706 0 46.545-20.838 46.545-46.548 0-25.702-20.839-46.541-46.545-46.541h-228.963l292.906-292.908c18.177-18.177 18.177-47.647 0-65.825s-47.648-18.177-65.825 0l-292.906 292.904v-228.961c0-25.706-20.839-46.545-46.546-46.545s-46.545 20.839-46.545 46.545v341.331c0 25.71 20.839 46.548 46.545 46.548h341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-right-and-arrow-down-left-from-center","split","diverge","separate"]},"attrs":[{}],"properties":{"order":375,"id":285,"name":"arrow-up-right-and-arrow-down-left-from-center","prevSize":24,"code":59938},"setIdx":0,"setId":1,"iconIdx":29},{"icon":{"paths":["M797.93 521.6l-285.929 185.6-286.117-185.6 286.117-521.6 285.929 521.6zM512.001 766.8l-286.117-185.601 286.117 442.8 286.119-442.8-286.119 185.601z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["ethereum","cryptocurrency","blockchain","digital","currency"]},"attrs":[{}],"properties":{"order":356,"id":284,"name":"ethereum","prevSize":24,"code":59939},"setIdx":0,"setId":1,"iconIdx":30},{"icon":{"paths":["M250.46 221.203c17.139-17.138 17.139-44.925 0-62.063s-44.925-17.139-62.063 0l-85.997 85.996-27.483-27.482c-17.138-17.139-44.925-17.139-62.063 0s-17.138 44.925 0 62.063l58.514 58.514c17.138 17.139 44.925 17.139 62.063 0l117.029-117.029zM394.971 234.057c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h585.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-585.143zM394.971 468.114c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h585.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-585.143zM980.114 819.2h-577.829c-24.237 0-43.886-19.646-43.886-43.886s19.648-43.886 43.886-43.886h577.829c24.24 0 43.886 19.646 43.886 43.886s-19.646 43.886-43.886 43.886zM250.46 393.197c17.139 17.138 17.139 44.925 0 62.063l-117.029 117.029c-17.138 17.139-44.925 17.139-62.063 0l-58.514-58.514c-17.138-17.138-17.138-44.925 0-62.063s44.925-17.139 62.063 0l27.483 27.482 85.997-85.996c17.138-17.139 44.925-17.139 62.063 0zM250.46 747.835c17.139-17.141 17.139-44.928 0-62.066s-44.925-17.139-62.063 0l-85.997 85.998-27.483-27.487c-17.138-17.136-44.925-17.136-62.063 0-17.138 17.145-17.138 44.924 0 62.069l58.514 58.514c17.138 17.137 44.925 17.137 62.063 0l117.029-117.029z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["list-check","items","tasks","complete","done"]},"attrs":[{}],"properties":{"order":355,"id":283,"name":"list-check","prevSize":24,"code":59940},"setIdx":0,"setId":1,"iconIdx":31},{"icon":{"paths":["M175.542 43.886c0-24.237 19.648-43.886 43.886-43.886h585.144c24.24 0 43.886 19.648 43.886 43.886s-19.646 43.886-43.886 43.886h-14.629v307.2c0 3.071 1.112 7.201 5.947 12.52 5.098 5.614 13.21 11.080 23.011 14.766 78.636 29.582 113.964 102.538 130.048 157.529 8.324 28.461 12.412 55.043 14.453 74.383 1.024 9.733 1.543 17.793 1.807 23.541 0.132 2.878 0.205 5.187 0.241 6.851l0.029 2.003 0.007 0.621v0.295c0 0.015 0 0.064-43.886 0.064h43.886c0 24.237-19.646 43.886-43.886 43.886h-365.715v248.686c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-248.686h-365.714c-24.237 0-43.886-19.648-43.886-43.886h43.886c-43.886 0-43.886 0.015-43.886 0v-0.064l0-0.082 0.001-0.213 0.005-0.621 0.033-2.003c0.036-1.663 0.105-3.972 0.238-6.851 0.265-5.748 0.786-13.808 1.81-23.541 2.035-19.34 6.123-45.922 14.447-74.383 16.083-54.99 51.417-127.947 130.054-157.529 9.8-3.686 17.908-9.152 23.009-14.766 4.833-5.319 5.946-9.449 5.946-12.52v-307.2h-14.629c-24.237 0-43.886-19.648-43.886-43.886zM321.828 87.771v307.2c0 59.070-48.079 95.239-85.823 109.437-39.517 14.866-63.261 54.015-76.715 100.017-4.035 13.797-6.837 27.241-8.774 39.232h722.964c-1.931-11.991-4.732-25.435-8.77-39.232-13.458-46.002-37.2-85.151-76.72-100.017-37.742-14.198-85.819-50.367-85.819-109.437v-307.2h-380.343z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbtack","pin","mark","secure","set"]},"attrs":[{}],"properties":{"order":354,"id":282,"name":"thumbtack","prevSize":24,"code":59941},"setIdx":0,"setId":1,"iconIdx":32},{"icon":{"paths":["M946.425 465.455c25.702 0 46.541-20.839 46.541-46.546s-20.838-46.545-46.541-46.545h-228.963l292.905-292.906c18.176-18.177 18.176-47.648 0-65.825s-47.645-18.177-65.821-0l-292.909 292.906v-228.963c0-25.707-20.839-46.546-46.545-46.546s-46.546 20.839-46.546 46.546l0.001 341.333c0 25.707 20.839 46.546 46.545 46.546h341.334zM77.576 558.545c-25.707 0-46.546 20.839-46.546 46.546s20.839 46.545 46.546 46.545h228.963l-292.906 292.909c-18.177 18.176-18.177 47.645 0 65.821s47.648 18.176 65.825 0l292.906-292.905v228.963c0 25.702 20.839 46.548 46.545 46.548s46.546-20.846 46.546-46.548v-341.334c0-25.707-20.839-46.546-46.546-46.546h-341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-left-and-arrow-up-right-to-center","join","meet","intersection"]},"attrs":[{}],"properties":{"order":353,"id":281,"name":"arrow-down-left-and-arrow-up-right-to-center","prevSize":24,"code":59942},"setIdx":0,"setId":1,"iconIdx":33},{"icon":{"paths":["M0 313.807c0-27.364 22.184-49.548 49.548-49.548h924.905c27.363 0 49.547 22.183 49.547 49.548s-22.184 49.548-49.547 49.548h-924.905c-27.365 0-49.548-22.183-49.548-49.548zM0 710.194c0-27.365 22.184-49.548 49.548-49.548h924.905c27.363 0 49.547 22.183 49.547 49.548 0 27.363-22.184 49.548-49.547 49.548h-924.905c-27.365 0-49.548-22.184-49.548-49.548z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["equals","same","identical","match","balance"]},"attrs":[{}],"properties":{"order":352,"id":280,"name":"equals","prevSize":24,"code":59943},"setIdx":0,"setId":1,"iconIdx":34},{"icon":{"paths":["M511.999 80.842c-156.268 0-282.947 126.68-282.947 282.947 0 94.958 46.738 179.001 118.644 230.387 24.496 17.505 43.040 46.479 43.040 80.807v93.017c0 7.439 6.032 13.473 13.474 13.473h215.578c7.442 0 13.474-6.034 13.474-13.473v-93.017c0-34.327 18.543-63.301 43.039-80.807 71.905-51.386 118.644-135.428 118.644-230.387 0-156.268-126.679-282.947-282.947-282.947zM148.21 363.789c0-200.915 162.874-363.789 363.789-363.789s363.791 162.874 363.791 363.789c0 122.162-60.255 230.251-152.485 296.16-6.809 4.866-9.201 10.884-9.201 15.034v93.017c0 52.092-42.227 94.318-94.316 94.318h-215.578c-52.089 0-94.316-42.225-94.316-94.318v-93.017c0-4.149-2.393-10.168-9.201-15.034-92.229-65.909-152.482-173.998-152.482-296.16zM309.894 983.581c0-22.323 18.097-40.426 40.421-40.426h323.369c22.324 0 40.421 18.103 40.421 40.426s-18.097 40.419-40.421 40.419h-323.369c-22.324 0-40.421-18.096-40.421-40.419z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["lightbulb","idea","inspiration","invention","light"]},"attrs":[{}],"properties":{"order":351,"id":279,"name":"lightbulb","prevSize":24,"code":59944},"setIdx":0,"setId":1,"iconIdx":35},{"icon":{"paths":["M521.391 24.144c18.97 4.425 32.39 21.336 32.39 40.815v741.543c0 15.572-8.638 29.864-22.429 37.105l-290.58 152.554c-14.117 7.409-31.217 6.173-44.117-3.204-12.899-9.37-19.363-25.249-16.676-40.967l51.615-301.865-218.957-213.744c-11.415-11.144-15.515-27.802-10.574-42.97s18.064-26.217 33.853-28.499l302.838-43.784 135.532-274.712c8.618-17.469 28.137-26.697 47.106-22.272zM469.96 244.635l-65.794 133.36c-6.109 12.382-17.924 20.961-31.588 22.936l-240.624 34.789 173.934 169.794c9.857 9.623 14.356 23.475 12.035 37.053l-41.029 239.96 193.066-101.361v-536.531z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["star-half","rate","like","average"]},"attrs":[{}],"properties":{"order":350,"id":278,"name":"star-half","prevSize":24,"code":59945},"setIdx":0,"setId":1,"iconIdx":36},{"icon":{"paths":["M146.285 102.4c0-6.261 5.881-14.629 17.288-14.629h550.566c11.407 0 17.289 8.368 17.289 14.629v819.2c0 6.261-5.881 14.629-17.289 14.629h-550.566c-11.407 0-17.288-8.368-17.288-14.629v-819.2zM163.573 0c-56.164 0-105.060 44.028-105.060 102.4v819.2c0 58.375 48.895 102.4 105.060 102.4h550.566c56.165 0 105.061-44.025 105.061-102.4v-819.2c0-58.372-48.896-102.4-105.061-102.4h-550.566zM965.486 160.914c0-24.237-19.646-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v117.029c0 24.237 19.646 43.886 43.886 43.886s43.886-19.648 43.886-43.886v-117.029zM438.856 365.714c-16.159 0-29.257 13.099-29.257 29.257s13.098 29.257 29.257 29.257c16.158 0 29.257-13.099 29.257-29.257s-13.099-29.257-29.257-29.257zM321.828 394.971c0-64.633 52.395-117.029 117.029-117.029s117.029 52.395 117.029 117.029c0 64.633-52.396 117.029-117.029 117.029s-117.029-52.395-117.029-117.029zM965.486 453.486c0-24.237-19.646-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v117.029c0 24.237 19.646 43.886 43.886 43.886s43.886-19.648 43.886-43.886v-117.029zM921.6 702.171c24.24 0 43.886 19.648 43.886 43.886v117.029c0 24.24-19.646 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-117.029c0-24.237 19.646-43.886 43.886-43.886zM307.199 702.171c0-25.354 3.88-39.823 7.984-48.031 3.529-7.058 8.070-11.317 15.273-14.746 8.441-4.020 21.047-7.053 40.275-8.697 19.156-1.637 41.279-1.669 68.126-1.669s48.97 0.032 68.125 1.669c19.229 1.644 31.835 4.677 40.275 8.697 7.202 3.43 11.743 7.688 15.272 14.746 4.104 8.207 7.984 22.677 7.984 48.031 0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886c0-33.161-4.897-62.576-17.251-87.284-12.928-25.856-32.524-43.54-56.041-54.739-22.279-10.609-46.976-14.89-70.537-16.903-23.271-1.989-48.984-1.989-74.413-1.988h-2.373c-25.43-0.001-51.143-0.001-74.414 1.988-23.56 2.014-48.257 6.295-70.536 16.903-23.518 11.199-43.114 28.883-56.042 54.739-12.353 24.708-17.25 54.123-17.25 87.284 0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["address-book","contacts","directory","information","numbers"]},"attrs":[{}],"properties":{"order":349,"id":277,"name":"address-book","prevSize":24,"code":59946},"setIdx":0,"setId":1,"iconIdx":37},{"icon":{"paths":["M46.545 0c25.706 0 46.546 20.839 46.546 46.545v884.366h884.361c25.71 0 46.548 20.838 46.548 46.541 0 25.71-20.838 46.548-46.548 46.548h-930.906c-25.706 0-46.545-20.838-46.545-46.548v-930.906c0-25.706 20.839-46.545 46.545-46.545zM263.758 636.121c34.275 0 62.061-27.786 62.061-62.060s-27.786-62.061-62.061-62.061c-34.275 0-62.060 27.786-62.060 62.061s27.786 62.060 62.060 62.060zM480.97 325.819c0 34.275-27.786 62.060-62.061 62.060s-62.060-27.786-62.060-62.060c0-34.275 27.786-62.061 62.060-62.061s62.061 27.786 62.061 62.061zM574.061 760.24c34.275 0 62.060-27.78 62.060-62.058 0-34.275-27.786-62.060-62.060-62.060s-62.061 27.786-62.061 62.060c0 34.278 27.786 62.058 62.061 62.058zM791.274 449.94c0 34.275-27.787 62.060-62.062 62.060s-62.061-27.786-62.061-62.060c0-34.275 27.786-62.061 62.061-62.061s62.062 27.786 62.062 62.061zM884.363 263.758c34.275 0 62.062-27.786 62.062-62.060s-27.787-62.061-62.062-62.061c-34.275 0-62.062 27.786-62.062 62.061s27.787 62.060 62.062 62.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["chart-scatter","graph","statistic","plot","data"]},"attrs":[{}],"properties":{"order":348,"id":276,"name":"chart-scatter","prevSize":24,"code":59947},"setIdx":0,"setId":1,"iconIdx":38},{"icon":{"paths":["M143.363 40.96c0-22.622 18.338-40.96 40.96-40.96h655.357c22.623 0 40.96 18.338 40.96 40.96s-18.337 40.96-40.96 40.96h-268.632c4.057 3.838 7.989 7.787 11.793 11.84 41.844 44.588 66.88 100.363 75.725 158.068h181.114c22.623 0 40.96 18.338 40.96 40.96s-18.337 40.96-40.96 40.96h-179.327c-6.797 62.512-32.376 123.625-77.512 171.721-53.884 57.418-133.289 93.76-234.678 93.76h-58.401l386.425 353.595c16.689 15.265 17.839 41.179 2.567 57.863-15.271 16.691-41.18 17.84-57.869 2.567l-464.213-424.768c-12.466-11.407-16.649-29.299-10.53-45.050s21.282-26.128 38.18-26.128h163.84c80.665 0 137.8-28.322 174.943-67.899 29.883-31.842 48.322-72.582 54.679-115.662h-393.462c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96h391.026c-7.971-37.989-25.538-73.552-52.243-102.009-37.143-39.578-94.278-67.899-174.943-67.899h-163.84c-22.622 0-40.96-18.338-40.96-40.96z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["indian-rupee","money","currency","inr","cash"]},"attrs":[{}],"properties":{"order":347,"id":275,"name":"indian-rupee","prevSize":24,"code":59948},"setIdx":0,"setId":1,"iconIdx":39},{"icon":{"paths":["M553.781 64.95c0-19.479-13.42-36.39-32.39-40.815s-38.488 4.803-47.106 22.272l-135.532 274.712-302.838 43.783c-15.789 2.283-28.912 13.331-33.853 28.499s-0.842 31.827 10.574 42.971l218.957 213.744-51.615 301.866c-2.687 15.711 3.776 31.598 16.676 40.967s30 10.613 44.117 3.204l290.58-152.554c13.791-7.241 22.429-21.533 22.429-37.113v-741.537z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["star-half-fill","rate","like","average"]},"attrs":[{}],"properties":{"order":346,"id":274,"name":"star-half-fill","prevSize":24,"code":59949},"setIdx":0,"setId":1,"iconIdx":40},{"icon":{"paths":["M0 73.144c0-24.237 19.648-43.885 43.885-43.885h117.028c21.209 0 39.383 15.168 43.177 36.035l110.476 607.616h514.245l108.72-434.869c5.881-23.513 29.703-37.809 53.219-31.931s37.808 29.706 31.927 53.219l-117.021 468.11c-4.886 19.533-22.44 33.24-42.576 33.24h-585.138c-21.209 0-39.383-15.163-43.177-36.033l-110.476-607.616h-80.402c-24.237 0-43.885-19.648-43.885-43.885zM292.569 906.964c0 48.567 39.204 87.771 87.771 87.771s87.771-39.205 87.771-87.771c0-48.567-39.205-87.771-87.771-87.771s-87.771 39.205-87.771 87.771zM672.908 906.964c0 48.567 39.204 87.771 87.771 87.771s87.771-39.205 87.771-87.771c0-48.567-39.205-87.771-87.771-87.771s-87.771 39.205-87.771 87.771zM614.394 131.658c0-24.237-19.648-43.885-43.886-43.885s-43.885 19.648-43.885 43.885v186.62l-42.111-42.111c-17.138-17.139-44.925-17.139-62.063 0s-17.138 44.924 0 62.063l117.027 117.027c17.138 17.138 44.925 17.138 62.063 0l117.028-117.027c17.14-17.139 17.14-44.925 0-62.063s-44.925-17.139-62.063 0l-42.111 42.111v-186.62z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-arrow-down","shopping"]},"attrs":[{}],"properties":{"order":345,"id":273,"name":"cart-arrow-down","prevSize":24,"code":59950},"setIdx":0,"setId":1,"iconIdx":41},{"icon":{"paths":["M309.895 0c-22.324 0-40.421 18.097-40.421 40.421v67.368h-67.369c-81.854 0-148.21 66.357-148.21 148.211v592.845c0 81.854 66.356 148.209 148.21 148.209h215.579c22.324 0 40.421-18.096 40.421-40.426 0-22.323-18.097-40.419-40.421-40.419h-215.579c-37.206 0-67.368-30.164-67.368-67.365v-363.792h714.108c22.323 0 40.419-18.097 40.419-40.421v-188.632c0-81.854-66.355-148.211-148.209-148.211h-67.37v-67.368c0-22.324-18.097-40.421-40.421-40.421s-40.421 18.097-40.421 40.421v67.368h-242.526v-67.368c0-22.324-18.097-40.421-40.421-40.421zM592.843 188.632v67.368c0 22.324 18.097 40.421 40.421 40.421s40.421-18.097 40.421-40.421v-67.368h67.37c37.208 0 67.365 30.162 67.365 67.368v148.211h-673.682v-148.211c0-37.206 30.162-67.368 67.368-67.368h67.369v67.368c0 22.324 18.097 40.421 40.421 40.421s40.421-18.097 40.421-40.421v-67.368h242.526zM727.579 619.789c-89.296 0-161.684 72.389-161.684 161.684 0 89.3 72.388 161.682 161.684 161.682s161.684-72.382 161.684-161.682c0-89.295-72.389-161.684-161.684-161.684zM485.053 781.473c0-133.943 108.583-242.526 242.526-242.526 133.941 0 242.529 108.583 242.529 242.526 0 133.947-108.588 242.527-242.529 242.527-133.944 0-242.526-108.581-242.526-242.527zM754.527 714.105c0-22.324-18.096-40.421-40.422-40.421-22.324 0-40.421 18.097-40.421 40.421v107.786c0 22.331 18.097 40.426 40.421 40.426h53.895c22.323 0 40.419-18.096 40.419-40.426 0-22.323-18.096-40.419-40.419-40.419h-13.473v-67.367z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["calendar-clock","schedule","date","event","time"]},"attrs":[{}],"properties":{"order":344,"id":272,"name":"calendar-clock","prevSize":24,"code":59951},"setIdx":0,"setId":1,"iconIdx":42},{"icon":{"paths":["M542.031 283.778c-16.586-16.585-43.476-16.585-60.062 0l-396.386 396.386c-12.146 12.147-15.78 30.414-9.206 46.283 6.573 15.872 22.059 26.214 39.237 26.214h792.769c17.181 0 32.666-10.342 39.241-26.214 6.576-15.87 2.94-34.137-9.209-46.283l-396.385-396.386z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sort-up-fill","ascending","arrange","rise"]},"attrs":[{}],"properties":{"order":343,"id":271,"name":"sort-up-fill","prevSize":24,"code":59952},"setIdx":0,"setId":1,"iconIdx":43},{"icon":{"paths":["M940.464 128.246l71.79 23.93c15.66 5.219 15.66 27.37 0 32.59l-71.79 23.93c-5.127 1.709-9.15 5.734-10.862 10.863l-23.932 71.79c-5.215 15.659-27.37 15.659-32.585 0l-23.932-71.79c-1.712-5.129-5.734-9.154-10.862-10.863l-71.79-23.93c-15.66-5.219-15.66-27.37 0-32.59l71.79-23.93c5.127-1.71 9.15-5.734 10.862-10.863l23.932-71.79c5.215-15.66 27.37-15.66 32.585-0l23.932 71.79c1.712 5.129 5.734 9.153 10.862 10.863zM385.172 113.933c14.789-44.37 77.548-44.369 92.338 0l87.974 263.921 263.919 87.974c44.368 14.789 44.368 77.548 0 92.338l-263.919 87.974-87.974 263.925c-14.789 44.368-77.548 44.368-92.338 0l-87.974-263.925-263.922-87.974c-44.369-14.789-44.368-77.548 0-92.338l263.922-87.974 87.974-263.921zM431.341 247.008l-58.552 175.658c-4.844 14.532-16.247 25.935-30.779 30.779l-175.658 58.553 175.658 58.552c14.532 4.844 25.935 16.247 30.779 30.779l58.552 175.66 58.553-175.66c4.844-14.532 16.247-25.935 30.779-30.779l175.658-58.552-175.658-58.553c-14.532-4.844-25.935-16.247-30.779-30.779l-58.553-175.658zM1012.253 839.227l-71.79-23.925c-5.127-1.712-9.15-5.734-10.862-10.869l-23.932-71.79c-5.215-15.657-27.37-15.657-32.585 0l-23.932 71.79c-1.712 5.135-5.734 9.157-10.862 10.869l-71.79 23.925c-15.66 5.222-15.66 27.37 0 32.592l71.79 23.932c5.127 1.704 9.15 5.734 10.862 10.862l23.932 71.79c5.215 15.66 27.37 15.66 32.585 0l23.932-71.79c1.712-5.127 5.734-9.157 10.862-10.862l71.79-23.932c15.66-5.222 15.66-27.37 0-32.592z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sparkles","shine","glitter","twinkle","bright","new","magic"]},"attrs":[{}],"properties":{"order":342,"id":270,"name":"sparkles","prevSize":24,"code":59953},"setIdx":0,"setId":1,"iconIdx":44},{"icon":{"paths":["M512 85.33c-235.644 0-426.67 191.026-426.67 426.67s191.026 426.672 426.67 426.672c235.644 0 426.672-191.027 426.672-426.672s-191.027-426.67-426.672-426.67zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512c0 282.77-229.23 512-512 512s-512-229.23-512-512zM511.977 263.099c-137.452 0-248.878 111.427-248.878 248.878s111.427 248.877 248.878 248.877c137.452 0 248.877-111.425 248.877-248.877s-111.425-248.878-248.877-248.878zM177.77 511.977c0-184.577 149.63-334.207 334.207-334.207s334.205 149.63 334.205 334.207c0 184.577-149.628 334.205-334.205 334.205s-334.207-149.628-334.207-334.205zM440.869 511.977c0-39.272 31.836-71.108 71.108-71.108s71.108 31.836 71.108 71.108c0 39.272-31.836 71.108-71.108 71.108s-71.108-31.836-71.108-71.108zM511.977 355.54c-86.398 0-156.437 70.039-156.437 156.437s70.039 156.437 156.437 156.437c86.398 0 156.437-70.039 156.437-156.437s-70.039-156.437-156.437-156.437z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bullseye","target","aim","goal","focus"]},"attrs":[{}],"properties":{"order":341,"id":269,"name":"bullseye","prevSize":24,"code":59954},"setIdx":0,"setId":1,"iconIdx":45},{"icon":{"paths":["M115.614 271.34c-17.178 0-32.663 10.348-39.237 26.217s-2.94 34.137 9.206 46.283l396.386 396.387c16.586 16.581 43.476 16.581 60.062 0l396.385-396.387c12.149-12.147 15.784-30.414 9.209-46.283s-22.060-26.217-39.241-26.217h-792.769z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sort-down-fill","descending","arrange","reduction"]},"attrs":[{}],"properties":{"order":340,"id":268,"name":"sort-down-fill","prevSize":24,"code":59955},"setIdx":0,"setId":1,"iconIdx":46},{"icon":{"paths":["M482.017 22.282c19.012-8.84 40.955-8.84 59.967 0l440.881 204.992c56.313 26.181 54.367 106.896-3.131 130.34l-26.814 10.931v217.054c0 26.986-11.052 54.78-34.626 73.544-22.916 18.244-64.944 48.491-122.668 76.477v230.064c0 23.567-19.105 42.672-42.672 42.672-23.562 0-42.666-19.105-42.666-42.672v-195.555c-57.399 18.776-124.096 31.949-198.288 31.949-210.294 0-360.312-115.032-409.746-158.555-21.279-18.735-31.174-45.057-31.174-70.564v-204.414l-26.812-10.931c-57.503-23.444-59.445-104.158-3.135-130.34l440.883-204.992zM156.42 407.753v165.205c0 3.906 1.431 5.812 2.228 6.513 43.438 38.245 173.774 137.269 353.352 137.269 75.812 0 142.832-15.99 198.288-37.121v-193.211l-168.095 78.157c-19.313 8.98-41.634 8.831-60.826-0.407l-324.947-156.404zM795.626 639.173c31.342-17.959 54.93-35.188 69.522-46.8 0.834-0.666 2.428-2.564 2.428-6.774v-176.302l-71.951 36.435v193.441zM753.276 371.522l139.249-70.516 24.781-10.102-405.307-188.45-405.307 188.45 24.381 9.94 381.241 183.499 144.279-67.083-164.371-85.979c-20.882-10.922-28.955-36.705-18.033-57.587s36.705-28.955 57.587-18.032l221.499 115.86z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["graduation-cap","education","school","diploma","university"]},"attrs":[{}],"properties":{"order":339,"id":267,"name":"graduation-cap","prevSize":24,"code":59956},"setIdx":0,"setId":1,"iconIdx":47},{"icon":{"paths":["M480.383 87.635c-5.439-5.439-14.256-5.439-19.694-0.001l-121.757 121.758c-5.439 5.438-5.439 14.256 0 19.694l455.985 455.982c5.435 5.439 14.256 5.439 19.69 0l121.761-121.757c5.435-5.438 5.435-14.256 0-19.694l-455.984-455.981zM401.605 28.552c38.069-38.069 99.792-38.069 137.86 0l455.979 455.982c38.071 38.069 38.071 99.791 0 137.86l-121.754 121.761c-38.071 38.064-99.789 38.064-137.86 0l-131.606-131.608-371.528 371.531c-53.233 53.226-139.54 53.226-192.773 0-53.233-53.233-53.233-139.542 0-192.775l371.528-371.529-131.604-131.604c-38.069-38.069-38.069-99.791 0-137.86l121.757-121.757zM470.536 478.858l-371.528 371.531c-20.602 20.597-20.602 54.001 0 74.606 20.602 20.597 54.005 20.597 74.606 0l371.528-371.53-74.606-74.606z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["hammer","tool","build","construction","fix"]},"attrs":[{}],"properties":{"order":338,"id":266,"name":"hammer","prevSize":24,"code":59957},"setIdx":0,"setId":1,"iconIdx":48},{"icon":{"paths":["M512 27.679c114.283 0 204.872 38.151 266.401 107.33 60.877 68.442 88.956 162.349 88.956 266.292 0 189.216 38.422 275 69.091 312.925 15.119 18.695 28.994 26.639 37.383 30.098 4.33 1.785 7.534 2.516 9.15 2.801 0.366 0.066 0.651 0.102 0.848 0.132l0.124 0.015c22.25 0.775 40.046 19.054 40.046 41.487 0 22.93-18.586 41.516-41.516 41.516h-93.506l39.834 39.834c16.216 16.216 16.216 42.496 0 58.712-16.208 16.208-42.496 16.208-58.704 0l-774.922-774.922c-16.212-16.212-16.212-42.497 0-58.709s42.497-16.212 58.709 0l72.006 72.006c15.689-24.207 39.13-55.116 68.741-76.374 57.556-41.321 130.816-63.142 217.358-63.142zM293.626 215.391c-2.692 4.247-5.159 8.335-7.379 12.15l519.706 519.708h51.902c-41.209-62.24-73.531-167.521-73.531-345.949 0-89.787-24.225-161.935-67.964-211.114-43.086-48.443-109.417-79.481-204.362-79.481-72.414 0-127.92 18.114-168.938 47.561-18.127 13.014-35.604 35.308-49.436 57.125zM239.672 401.3c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514c0 77.698-6.487 138.204-16.361 185.191-18.977 90.295-50.069 129.193-70.542 145.851-10.409 8.47-19.157 12.112-24.325 13.692-2.632 0.812-4.442 1.112-5.186 1.214l-0.186 0.022c-22.247 0.775-40.044 19.054-40.044 41.487 0 22.93 18.586 41.516 41.514 41.516h267.054c19.182 94.852 102.843 166.056 203.432 166.056 74.664 0 140.026-39.27 176.551-98.231 12.074-19.493 6.061-45.078-13.429-57.154s-45.079-6.064-57.152 13.429c-21.963 35.46-61.126 58.924-105.969 58.924-54.389 0-100.459-34.582-117.497-83.024h172.848c22.927 0 41.513-18.586 41.513-41.516 0-22.923-18.586-41.509-41.513-41.509h-401.208c22.293-33.701 42.028-80.101 55.39-143.681 11.29-53.722 18.137-120.101 18.137-202.268z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bell-slash","mute","alert","silence","quiet","off"]},"attrs":[{}],"properties":{"order":337,"id":265,"name":"bell-slash","prevSize":24,"code":59958},"setIdx":0,"setId":1,"iconIdx":49},{"icon":{"paths":["M257.285 305.786c52.726-36.030 122.418-62.445 215.33-68.273v90.689c0 21.752 17.633 39.385 39.385 39.385s39.385-17.633 39.385-39.385v-90.689c91.282 5.729 159.941 31.318 212 66.023 1.28 0.855 2.553 1.717 3.818 2.584l-73 73.002c-15.381 15.381-15.381 40.318 0 55.698s40.32 15.381 55.695 0l76.968-76.965c26.602 28.86 47.309 60.712 63.444 92.986 27.282 54.559 41.121 109.594 48.069 151.322 1.712 10.269 2.999 19.67 3.964 27.987h-89.008c-21.753 0-39.387 17.633-39.387 39.385s17.635 39.385 39.387 39.385h91.897v65.641c0 7.248-5.881 13.129-13.129 13.129h-535.071l221.586-221.587c15.381-15.381 15.381-40.318 0-55.698s-40.317-15.381-55.698 0l-277.285 277.285h-193.738c-7.251 0-13.128-5.881-13.128-13.129v-65.641h91.897c21.752 0 39.385-17.633 39.385-39.385s-17.633-39.385-39.385-39.385h-89.008c2.49-21.484 7.104-50.065 15.624-82.056 16.235-60.957 46.035-132.041 100.27-190.689l76.391 77.257c15.293 15.468 40.23 15.608 55.697 0.314s15.608-40.23 0.315-55.697l-72.67-73.494zM984.613 669.536c39.387 0 39.387-0.021 39.387-0.044v-0.611l-0.022-1.336c-0.015-1.113-0.051-2.665-0.117-4.629-0.132-3.926-0.388-9.502-0.885-16.494-0.995-13.97-2.977-33.671-6.897-57.207-7.812-46.887-23.515-110.005-55.311-173.6-31.876-63.749-80.311-128.696-153.688-177.618-73.633-49.086-170.034-80.461-295.080-80.461-152.822 0-262.455 46.882-339.874 114.805-87.351 76.637-129.989 176.742-150.96 255.482-10.549 39.608-15.823 74.569-18.47 99.74-1.326 12.608-1.999 22.825-2.341 30.018-0.171 3.598-0.26 6.445-0.306 8.463-0.023 1.009-0.035 1.811-0.042 2.396l-0.006 0.714-0.001 0.233-0 0.085c-0 0.015-0 0.064 39.385 0.064h-39.385v105.025c0 50.754 41.144 91.897 91.897 91.897h840.206c50.754 0 91.897-41.143 91.897-91.897v-105.069l-39.387 0.044z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["gauge","measure","meter","indicator","level"]},"attrs":[{}],"properties":{"order":336,"id":264,"name":"gauge","prevSize":24,"code":59959},"setIdx":0,"setId":1,"iconIdx":50},{"icon":{"paths":["M245.194 143.027c-4.484 0-8.724 2.038-11.525 5.539l-141.686 177.109c-7.731 9.664-0.851 23.978 11.525 23.978h816.988c12.376 0 19.251-14.315 11.52-23.979l-141.685-177.108c-2.801-3.501-7.044-5.539-11.527-5.539h-533.609zM164.519 93.247c19.606-24.507 49.29-38.774 80.674-38.774h533.609c31.386 0 61.074 14.267 80.677 38.774l141.685 177.109c54.118 67.645 5.954 167.852-80.669 167.852h-9.999v487.050c0 24.452-19.829 44.273-44.281 44.273s-44.273-19.822-44.273-44.273v-487.050h-88.554v368.975c0 89.666-72.689 162.348-162.353 162.348h-295.18c-89.663 0-162.349-72.682-162.349-162.348v-368.975h-9.999c-86.629 0-134.791-100.206-80.674-167.852l141.686-177.109zM202.061 438.208v368.975c0 40.755 33.039 73.794 73.795 73.794h295.18c40.756 0 73.795-33.039 73.795-73.794v-368.975h-73.795v265.663c0 57.057-46.255 103.312-103.313 103.312h-88.554c-57.059 0-103.314-46.256-103.314-103.312v-265.663h-73.795zM364.409 438.208v265.663c0 8.151 6.608 14.759 14.759 14.759h88.554c8.151 0 14.759-6.608 14.759-14.759v-265.663h-118.072z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shop","store","retail","purchase","sell"]},"attrs":[{}],"properties":{"order":335,"id":263,"name":"shop","prevSize":24,"code":59960},"setIdx":0,"setId":1,"iconIdx":51},{"icon":{"paths":["M186.356 548.116c43.279 7.444 76.208 45.158 76.208 90.563v166.689c0 61.052-58.437 105.136-117.143 88.364l-78.769-22.506c-39.452-11.271-66.651-47.331-66.651-88.364v-111.728c0-34.809 19.666-66.629 50.8-82.196l55.312-27.656c0.848-12.007 2.363-27.88 5.070-46.441 6.070-41.624 18.283-97.8 43.095-154.514 24.82-56.733 62.877-115.407 121.342-159.952 58.983-44.939 136.419-73.698 236.382-73.698s177.398 28.759 236.383 73.698c58.463 44.545 96.519 103.22 121.344 159.952 24.81 56.714 37.018 112.889 43.088 154.514 2.706 18.561 4.228 34.433 5.076 46.441l55.311 27.655c31.13 15.567 50.798 47.388 50.798 82.196v111.729c0 41.033-27.202 77.093-66.648 88.364l-78.775 22.506c-58.704 16.772-117.138-27.312-117.138-88.364v-166.689c0-45.405 32.929-83.119 76.208-90.563-0.709-6.638-1.616-13.983-2.772-21.907-5.42-37.146-16.179-85.996-37.317-134.309-21.124-48.293-51.99-94.644-96.913-128.869-44.402-33.83-104.812-57.584-188.644-57.584s-144.242 23.754-188.644 57.584c-44.919 34.225-75.786 80.576-96.914 128.869-21.137 48.313-31.898 97.163-37.315 134.309-1.156 7.924-2.061 15.269-2.771 21.907zM870.29 625.551h-16.955c-7.256 0-13.129 5.878-13.129 13.128v166.689c0 8.719 8.346 15.016 16.735 12.624l78.768-22.506c5.639-1.609 9.523-6.766 9.523-12.624v-111.729c0-4.972-2.809-9.518-7.256-11.742l-67.686-33.84zM153.708 625.551l-67.681 33.841c-4.448 2.224-7.257 6.769-7.257 11.742v111.728c0 5.859 3.886 11.015 9.522 12.624l78.769 22.506c8.387 2.392 16.735-3.906 16.735-12.624v-166.689c0-7.251-5.878-13.128-13.128-13.128h-16.959z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["headphones","music","audio","sound","listen"]},"attrs":[{}],"properties":{"order":388,"id":262,"name":"headphones","prevSize":24,"code":59961},"setIdx":0,"setId":1,"iconIdx":52},{"icon":{"paths":["M959.977 394.711c0-24.979-9.774-48.87-27.693-66.789l-236.207-236.207c-36.923-36.923-96.655-36.923-133.578 0l-470.781 470.781c-17.919 17.919-27.693 41.81-27.693 66.789s9.774 48.87 27.693 66.789l236.207 236.207c18.462 18.462 42.356 27.693 66.789 27.693 2.173 0 4.887 0 7.060-0.543 1.084 0 1.63 0 2.714 0h433.859c22.263 0 40.725-18.462 40.725-40.725s-18.462-40.725-40.725-40.725h-323.088l416.482-416.482c17.919-17.919 27.693-41.81 27.693-66.789zM149.275 638.521c-3.257-3.257-3.8-7.060-3.8-9.231s0-5.972 3.8-9.231l206.341-206.341 254.669 254.669-206.341 206.341c-4.887 4.887-13.032 4.887-18.462 0l-236.207-236.75zM874.725 404.486l-206.341 206.341-254.669-254.669 206.341-206.341c4.887-4.887 13.032-4.887 18.462 0l236.207 236.75c3.257 3.257 3.8 7.060 3.8 9.231s0 5.972-3.8 9.231z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["eraser","delete","remove","wipe","clean"]},"attrs":[{}],"properties":{"order":333,"id":261,"name":"eraser","prevSize":24,"code":59908},"setIdx":0,"setId":1,"iconIdx":53},{"icon":{"paths":["M496 128.019c-247.028 0-447.979 200.95-447.979 447.979s200.95 447.979 447.979 447.979 447.979-200.95 447.979-447.979-200.95-447.979-447.979-447.979zM496 927.979c-193.911 0-351.983-158.073-351.983-351.983s158.073-351.983 351.983-351.983 351.983 158.073 351.983 351.983-158.073 351.983-351.983 351.983zM288.011 48.023c0-26.238 21.759-47.998 47.998-47.998h319.984c26.238 0 47.998 21.759 47.998 47.998s-21.759 47.998-47.998 47.998h-319.984c-26.238 0-47.998-21.759-47.998-47.998zM543.998 384.007v191.991c0 26.238-21.759 47.998-47.998 47.998s-47.998-21.759-47.998-47.998v-191.991c0-26.238 21.759-47.998 47.998-47.998s47.998 21.759 47.998 47.998zM962.538 273.291c-9.6 9.6-21.759 14.080-33.918 14.080s-24.318-4.48-33.918-14.080l-95.995-95.995c-18.559-18.559-18.559-49.277 0-67.837s49.277-18.559 67.837 0l95.995 95.995c18.559 18.559 18.559 49.277 0 67.837z"],"attrs":[{}],"grid":16,"tags":["stopwatch","time","countdown","timer","race"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":332,"id":260,"name":"stopwatch","prevSize":24,"code":59905},"setIdx":0,"setId":1,"iconIdx":54},{"icon":{"paths":["M626.347 1024c-27.876 0-54.044-13.084-75.663-24.463-13.653-6.827-30.151-15.36-38.684-15.36s-25.6 8.533-38.684 15.36c-27.307 14.223-61.44 31.289-97.849 21.617-37.547-9.671-58.027-42.667-75.093-68.836-7.396-11.947-17.636-27.876-24.463-31.857s-25.031-4.551-40.391-5.689c-30.72-1.707-68.836-3.413-96.143-30.151-27.307-27.876-29.013-65.991-30.72-96.711-0.569-14.791-1.707-33.564-5.689-40.391-3.413-6.257-19.911-16.497-31.289-23.893-26.169-17.067-58.596-38.116-68.836-75.093-9.671-36.409 7.396-70.543 21.617-97.849 6.827-13.653 15.36-30.151 15.36-38.684s-8.533-25.6-15.36-38.684c-14.223-27.307-31.289-61.44-21.617-97.849 9.671-37.547 42.667-58.027 68.836-75.093 11.947-7.396 27.876-17.636 31.857-24.463s4.551-25.031 5.689-40.391c1.707-30.72 3.413-68.836 30.151-96.143 27.876-27.307 65.991-29.013 96.711-30.72 14.791-0.569 33.564-1.707 40.391-5.689 6.257-3.413 16.497-19.911 23.893-31.289 17.067-26.169 38.116-58.596 75.093-68.836 36.409-9.671 70.543 7.396 97.849 21.617 13.653 6.827 30.151 15.36 38.684 15.36s25.6-8.533 38.684-15.36c27.307-13.653 61.44-31.289 97.849-21.617 37.547 9.671 58.027 42.667 75.093 68.836 7.396 11.947 17.636 27.876 24.463 31.857s25.031 4.551 40.391 5.689c30.72 1.707 68.836 3.413 96.143 30.151 27.307 27.876 29.013 65.991 30.72 96.711 0.569 14.791 1.707 33.564 5.689 40.391 3.413 6.257 19.911 16.497 31.289 23.893 26.169 17.067 58.596 38.116 68.836 75.093 9.671 36.409-7.396 70.543-21.617 97.849-6.827 13.653-15.36 30.151-15.36 38.684s8.533 25.6 15.36 38.684c14.223 27.307 31.289 61.44 21.617 97.849-9.671 37.547-42.667 58.027-68.836 75.093-11.947 7.396-27.876 17.636-31.857 24.463s-4.551 25.031-5.689 40.391c-1.707 30.72-3.413 68.836-30.151 96.143-27.876 27.307-65.991 29.013-96.711 30.72-14.791 0.569-33.564 1.707-40.391 5.689-6.257 3.413-16.497 19.911-23.893 31.289-17.067 26.169-38.116 58.596-75.093 68.836-7.396 2.276-14.791 2.844-22.187 2.844zM398.223 85.333s0 0-0.569 0c-5.689 2.276-18.773 21.617-25.031 32.427-13.653 21.049-29.013 44.943-53.476 59.164-25.031 14.223-53.476 15.929-79.076 17.067-12.516 0.569-35.84 1.707-40.96 5.689-3.413 4.551-4.551 27.307-5.12 39.823-1.137 25.6-2.844 54.044-17.067 78.507s-38.116 39.823-59.164 53.476c-10.809 6.827-30.151 19.343-32.427 25.6-0.569 6.257 9.103 25.6 14.791 36.977 11.377 22.756 25.031 48.356 25.031 77.369s-13.084 54.613-25.031 77.369c-5.689 11.377-15.929 30.72-14.791 36.977 2.276 5.689 21.617 18.773 32.427 25.031 21.049 13.653 44.943 29.013 59.164 53.476 14.223 25.031 15.929 53.476 17.067 79.076 0.569 12.516 1.707 35.84 5.689 40.96 4.551 3.413 27.307 4.551 39.823 5.12 25.6 1.137 54.044 2.844 78.507 17.067s39.823 38.116 53.476 59.164c6.827 10.809 19.343 30.151 25.6 32.427 5.689 1.707 25.6-9.103 36.977-14.791 22.756-11.377 48.356-25.031 77.369-25.031s54.613 13.084 77.369 25.031c11.377 5.689 29.583 16.497 36.977 14.791 5.689-2.276 18.773-21.617 25.031-32.427 13.653-21.049 29.013-44.943 53.476-59.164 25.031-14.223 53.476-15.929 79.076-17.067 12.516-0.569 35.84-1.707 40.96-5.689 3.413-4.551 4.551-27.307 5.12-39.823 1.137-25.6 2.844-54.044 17.067-78.507s38.116-39.823 59.164-53.476c10.809-6.827 30.151-19.343 32.427-25.6 0.569-6.257-9.103-25.6-14.791-36.977-11.377-22.756-25.031-48.356-25.031-77.369s13.084-54.613 25.031-77.369c5.689-11.377 15.36-30.72 14.791-36.977-2.276-6.257-22.187-18.773-32.427-25.6-21.049-13.653-44.943-29.013-59.164-53.476-14.223-25.031-15.929-53.476-17.067-79.076-0.569-12.516-1.707-35.84-5.689-40.96-4.551-3.413-27.307-4.551-39.823-5.12-25.6-1.137-54.044-2.844-78.507-17.067s-39.823-38.116-53.476-59.164c-6.827-10.809-19.343-30.151-25.6-32.427-5.689-1.707-25.6 9.103-36.977 14.791-22.756 11.377-48.356 25.031-77.369 25.031s-54.613-13.084-77.369-25.031c-11.377-5.689-29.583-14.791-36.409-14.791zM938.667 397.084s0 0 0 0v0zM426.097 711.68v0c-11.377 0-22.187-4.551-30.151-12.516l-142.791-142.791c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l112.64 112.64 283.876-283.876c16.497-16.497 43.804-16.497 60.303 0s16.497 43.804 0 60.303l-314.027 314.027c-7.964 7.964-18.773 12.516-30.151 12.516z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["verified","confirm","checked","authenticated","approved"]},"attrs":[{}],"properties":{"order":331,"id":259,"name":"verified","prevSize":24,"code":59906},"setIdx":0,"setId":1,"iconIdx":55},{"icon":{"paths":["M799.19 390.096l-121.904 121.904 121.904 121.904c15.924 15.924 15.924 42.282 0 58.207-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081l-121.904-121.904-121.904 121.904c-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081c-15.924-15.924-15.924-42.282 0-58.207l121.904-121.904-121.904-121.904c-15.924-15.924-15.924-42.282 0-58.207s42.282-15.924 58.207 0l121.904 121.904 121.904-121.904c15.924-15.924 42.282-15.924 58.207 0s15.924 42.282 0 58.207zM1023.778 237.441v549.119c0 52.715-42.831 96.096-96.096 96.096h-655.098c-33.497 0-63.697-17.023-81.27-45.028l-180.66-289.385c-13.728-21.965-13.728-50.518 0-73.033l180.66-288.837c17.571-28.005 48.323-45.028 81.27-45.028h655.648c52.715 0 96.096 43.381 96.096 96.096zM941.41 237.441c0-7.687-6.040-13.728-13.728-13.728h-655.098c-4.942 0-9.335 2.197-11.531 6.589l-176.267 281.698 176.267 281.698c2.745 3.844 7.139 6.589 11.531 6.589h655.648c7.687 0 13.728-6.040 13.728-13.728v-549.119z"],"attrs":[{}],"grid":16,"tags":["delete-left","remove","backspace","erase","eliminate"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":330,"id":258,"name":"delete-left","prevSize":24,"code":59907},"setIdx":0,"setId":1,"iconIdx":56},{"icon":{"paths":["M877.707 936.219h-38.619c-22.234-79.578-90.695-277.351-257.457-424.219 166.762-146.867 235.222-344.642 257.457-424.219h38.619c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885h-731.412c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h38.619c22.234 79.578 90.695 277.351 257.457 424.219-166.762 146.867-235.222 344.642-257.457 424.219h-38.619c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h731.412c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885zM276.778 87.781h469.859c-26.331 83.089-93.621 248.679-235.222 367.462-141.601-119.366-208.891-284.373-235.222-367.462zM512 568.758c141.601 119.366 208.891 284.373 235.222 367.462h-470.444c26.331-83.089 93.621-248.681 235.222-367.462z"],"attrs":[{}],"grid":16,"tags":["hourglass","time","wait","patience","sand"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":329,"id":257,"name":"hourglass","prevSize":24,"code":59902},"setIdx":0,"setId":1,"iconIdx":57},{"icon":{"paths":["M816.58 221.265h-110.756v-41.534c0-53.163-43.749-96.912-96.912-96.912h-512.247c-53.163 0-96.912 43.749-96.912 96.912v498.402c0 53.163 43.749 96.912 96.912 96.912h15.506c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h85.836c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h15.506c53.163 0 96.912-43.749 96.912-96.912v-249.201c0-114.633-93.035-207.668-207.668-207.668zM82.82 678.134v-498.402c0-7.752 6.091-13.845 13.845-13.845h512.247c7.752 0 13.845 6.091 13.845 13.845v439.701s-2.768 3.323-4.43 4.43c-8.307 7.2-16.059 14.952-23.259 23.259-2.216 2.768-4.43 4.984-6.091 7.752-8.307 11.629-16.059 23.259-21.043 36.55h-110.756s0 0 0-0.554c0 0 0 0 0 0-3.877-9.414-9.414-18.829-14.952-27.136-1.661-2.216-3.323-4.43-4.984-7.2-4.43-6.645-9.414-12.184-14.952-18.275-2.216-2.216-3.877-4.43-6.091-6.645-7.2-6.645-14.398-12.737-22.152-18.275-1.107-0.554-1.661-1.661-2.768-2.216-8.307-5.538-17.168-9.968-26.027-14.398-3.323-1.661-6.645-2.768-9.968-3.877-7.2-2.768-13.845-4.984-21.043-6.645-3.323-0.554-6.645-1.661-9.968-2.216-10.522-2.216-21.597-3.323-32.673-3.323s-21.597 1.107-32.673 3.323c-3.323 0.554-6.645 1.661-9.968 2.216-7.2 1.661-14.398 3.877-21.043 6.645-3.323 1.107-6.645 2.216-9.968 3.877-8.861 3.877-17.721 8.861-26.027 14.398-1.107 0.554-1.661 1.107-2.768 2.216-7.752 5.538-15.506 11.629-22.152 18.275-2.216 2.216-4.43 4.43-6.091 6.645-5.538 5.538-10.522 11.629-14.952 18.275-1.661 2.216-3.323 4.43-4.984 7.2-5.538 8.861-10.522 17.721-14.952 27.136 0 0 0 0 0 0s0 0 0 0.554h-27.689c-7.752 0-13.845-6.091-13.845-13.845zM290.487 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 2.216-9.968 6.091-19.382 11.075-27.689 0.554-1.661 1.661-2.768 2.216-4.43 4.984-7.752 11.075-14.952 18.275-21.043 1.661-1.107 2.768-2.216 4.43-3.323 7.2-5.538 15.506-10.522 24.366-13.845 1.107 0 2.768-1.107 4.43-1.107 9.414-3.323 19.936-5.538 30.458-5.538s20.49 2.216 30.458 5.538c1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM733.513 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 1.661-6.645 3.323-13.291 6.091-19.382 0 0 0-0.554 0-1.107 2.768-5.538 5.538-11.075 9.414-16.059 0.554-1.107 1.661-1.661 2.216-2.768 3.323-4.43 6.645-8.307 10.522-12.184 1.107-1.107 2.216-1.661 3.323-2.768 3.877-3.323 8.307-6.645 12.737-9.414 1.107-0.554 2.768-1.661 4.43-2.216 4.984-2.768 10.522-4.984 16.059-6.645 2.216-0.554 4.43-1.661 7.2-2.216 7.2-1.661 14.952-2.768 22.705-2.768 10.522 0 20.49 2.216 30.458 5.538 1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM705.823 470.466v-166.134h110.756c68.669 0 124.601 55.931 124.601 124.601v41.534h-235.356z"],"attrs":[{}],"grid":16,"tags":["truck","delivery","transport","vehicle","cargo"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":328,"id":256,"name":"truck","prevSize":24,"code":59904},"setIdx":0,"setId":1,"iconIdx":58},{"icon":{"paths":["M168.104 1023.75v0c-44.45 0-86.559-17.546-118.726-49.128-65.505-65.505-65.505-171.363 0-236.867l322.256-322.256c-29.242-113.462 2.34-235.698 85.389-318.747 83.634-83.634 206.454-116.387 320.502-85.389 15.206 4.094 26.904 15.791 30.997 30.997s0 30.997-11.113 42.11l-143.29 143.29 30.413 111.707 111.707 30.413 143.29-143.29c11.113-11.113 27.488-15.206 42.11-11.113 15.206 4.094 26.904 15.791 30.997 30.997 30.997 114.047-1.169 236.867-85.389 320.502-83.050 83.050-205.285 114.633-318.747 85.389l-322.256 322.256c-31.582 31.582-73.692 49.128-118.142 49.128zM668.742 89.148c-56.146 4.678-109.369 29.242-150.308 70.183-66.674 66.674-88.314 164.345-56.146 254.413 5.849 15.791 1.755 33.922-10.527 45.619l-340.973 340.973c-30.997 30.997-30.997 81.88 0 112.878 15.206 15.206 35.091 23.395 56.732 23.395v0c21.055 0 41.524-8.188 56.146-23.395l340.973-340.973c12.282-12.282 29.828-15.791 45.619-10.527 90.069 31.582 187.739 10.527 254.413-56.146 40.941-40.941 64.919-94.162 70.183-150.308l-95.332 95.332c-11.113 11.113-27.488 15.206-42.695 11.113l-160.252-43.864c-15.206-4.094-26.904-15.791-30.997-30.997l-43.864-160.252c-4.094-15.206 0-31.582 11.113-42.695l95.332-95.332z"],"attrs":[{}],"grid":16,"tags":["wrench","tool","fix","repair","adjust"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":325,"id":255,"name":"wrench","prevSize":24,"code":59903},"setIdx":0,"setId":1,"iconIdx":59},{"icon":{"paths":["M495.693 730.292h32.612c77.849 0 140.443-64.699 140.443-144.651v-389.243c0-79.953-63.121-144.651-140.443-144.651h-32.612c-77.849 0-140.443 64.699-140.443 144.651v388.718c0 79.953 63.121 144.651 140.443 144.651zM434.151 196.397c0-36.294 27.877-65.751 61.542-65.751h32.612c34.19 0 61.542 29.456 61.542 65.751v388.718c0 36.294-27.877 65.751-61.542 65.751h-32.612c-34.19 0-61.542-29.456-61.542-65.751v-388.718zM814.452 374.712v222.5c0 147.807-116.773 267.736-263.003 275.101v99.941c0 21.566-17.885 39.45-39.45 39.45s-39.45-17.885-39.45-39.45v-99.941c-146.229-7.364-263.002-127.293-263.002-275.101v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45v222.5c0 108.883 88.896 197.779 198.304 197.779h51.023c109.409 0 198.304-88.896 198.304-197.779v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microphone","sound","record","speak","audio"]},"attrs":[{}],"properties":{"order":323,"id":254,"name":"microphone","prevSize":24,"code":59898},"setIdx":0,"setId":1,"iconIdx":60},{"icon":{"paths":["M906.87 28.172h-85.757c-64.638 0-117.117 52.479-117.117 117.117v28.799l-607.985 130.557v-32.639c0-26.239-21.76-47.999-47.999-47.999s-47.999 21.76-47.999 47.999v447.99c0 26.239 21.76 47.999 47.999 47.999s47.999-21.76 47.999-47.999v-40.319l607.985 130.557v28.799c0 64.638 52.479 117.117 117.117 117.117h85.757c64.638 0 117.117-52.479 117.117-117.117v-693.744c0-64.638-52.479-117.117-117.117-117.117zM96.011 581.118v-178.556l607.985-130.557v439.669l-607.985-130.557zM927.989 839.033c0 11.52-9.6 21.119-21.119 21.119h-85.757c-11.52 0-21.119-9.6-21.119-21.119v-693.744c0-11.52 9.6-21.119 21.119-21.119h85.757c11.52 0 21.119 9.6 21.119 21.119v693.744zM574.079 872.311c-23.68 74.238-92.158 124.156-170.876 124.156-98.558 0-179.196-79.359-179.196-175.995 0-7.039 0-14.719 1.279-21.76 3.199-26.239 27.52-44.799 53.759-41.598s44.799 26.879 41.598 53.118c0 3.199 0 6.4 0 9.6 0 44.159 37.12 79.998 83.198 79.998 36.479 0 68.478-23.039 79.359-56.958 7.68-25.6 35.2-39.679 60.159-31.36 25.6 7.68 39.040 35.2 31.36 60.159z"],"attrs":[{}],"grid":16,"tags":["megaphone","announce","shout","broadcast","loud"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":322,"id":253,"name":"megaphone","prevSize":24,"code":59899},"setIdx":0,"setId":1,"iconIdx":61},{"icon":{"paths":["M1023.949 776.232c0 27.083-22.46 49.543-49.543 49.543h-805.246l80.59 80.59c19.156 19.156 19.156 50.864 0 70.022-9.909 9.909-22.46 14.533-35.010 14.533s-25.101-4.625-35.010-14.533l-165.145-165.145c-4.625-4.625-7.927-9.909-10.57-15.854-5.284-11.89-5.284-25.763 0-37.653 2.643-5.945 5.945-11.229 10.57-15.854l165.145-165.145c19.156-19.156 50.864-19.156 70.022 0s19.156 50.864 0 70.022l-80.59 80.59h805.246c27.083 0 49.543 22.46 49.543 49.543zM49.594 297.311h805.246l-80.59 80.59c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l165.145-165.145c4.625-4.625 7.927-9.909 10.57-15.854 5.284-11.89 5.284-25.763 0-37.653-2.643-5.945-5.945-11.229-10.57-15.854l-165.145-165.145c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l80.59 80.59h-805.246c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-right-arrow-left","bidirectional","left-and-right","alternation","back-and-forth"]},"attrs":[{}],"properties":{"order":321,"id":252,"name":"arrow-right-arrow-left","prevSize":24,"code":59900},"setIdx":0,"setId":1,"iconIdx":62},{"icon":{"paths":["M609.223 618.817c-17.27 69.72-134.322 31.981-172.7 22.386l30.702-123.449c38.378 9.594 159.908 28.143 141.997 101.061zM509.441 348.895l-28.143 111.935c31.981 7.676 129.844 40.297 145.835-23.027 15.991-65.882-85.71-81.233-117.692-88.909zM1008.351 635.449c-68.44 273.76-346.039 440.703-620.44 372.904-273.76-68.44-441.343-346.039-372.904-619.8 68.44-274.4 346.039-440.703 620.44-372.904 273.76 68.44 441.343 346.039 372.904 619.8zM343.778 597.71c-2.559 7.035-9.594 17.27-25.586 13.432-2.559 0-40.937-10.235-40.937-10.235l-28.143 63.963 72.918 17.91c14.072 3.838 26.864 7.035 40.297 10.873l-23.027 92.747 55.648 14.072 23.027-92.106c15.351 4.478 30.062 7.676 44.774 11.513l-23.027 91.466 56.288 14.072 23.027-92.747c95.944 17.91 168.222 10.873 198.285-76.115 24.305-69.72-1.279-110.017-51.81-136.241 36.459-8.316 63.963-32.621 71.639-82.512 10.235-67.801-41.575-104.899-112.574-128.565l23.027-92.747-56.288-14.072-22.386 89.547c-14.711-3.838-30.062-7.035-45.413-10.873l22.386-90.188-55.648-14.072-23.027 92.106c-12.153-2.559-24.305-5.757-35.819-8.316l-77.395-19.829-14.711 60.126s40.937 9.594 40.937 10.235c22.386 5.757 26.224 20.468 26.224 32.621l-63.323 252.653z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bitcoin","cryptocurrency","digital","currency","btc","blockchain"]},"attrs":[{}],"properties":{"order":320,"id":251,"name":"bitcoin","prevSize":24,"code":59901},"setIdx":0,"setId":1,"iconIdx":63},{"icon":{"paths":["M290.603 885.606h-83.024c-38.191 0-69.186-30.995-69.186-69.186v-664.188c0-38.191 30.995-69.186 69.186-69.186h207.559v262.908c0 22.693 18.819 41.512 41.512 41.512h265.675c5.535 16.051 20.48 27.674 38.745 27.674 22.693 0 41.512-18.819 41.512-41.512v-27.674c0-5.535-1.107-11.069-3.321-16.051s-4.981-9.409-8.856-13.284l-304.42-304.42c-3.875-3.875-8.302-6.642-13.284-8.856s-10.517-3.321-16.051-3.321h-249.071c-84.13 0-152.209 68.079-152.209 152.209v664.188c0 84.13 68.079 152.209 152.209 152.209h83.024c22.693 0 41.512-18.819 41.512-41.512s-18.819-41.512-41.512-41.512zM498.162 141.715l162.726 162.726h-162.726v-162.726zM933.206 477.13c-21.032-21.032-52.029-33.763-84.13-34.316-33.209-1.66-64.758 11.069-85.791 32.655l-353.68 354.234c-7.196 7.196-11.069 16.051-12.177 26.014l-9.963 123.429c-1.107 12.177 3.321 24.353 12.177 32.655 7.748 7.748 18.265 12.177 29.335 12.177 1.107 0 2.214 0 3.875 0l124.535-11.623c9.409-1.107 18.819-4.981 25.461-12.177l353.68-354.234c44.279-43.726 42.618-122.875-3.321-168.814zM877.858 587.275l-343.164 343.717-60.331 5.535 4.427-58.67 343.164-343.717c5.535-5.535 15.498-7.748 25.461-8.302 11.069 0 21.032 3.875 27.121 9.963 13.284 12.73 14.944 39.851 3.321 51.475z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-edit","modify","amend","revise","change"]},"attrs":[{}],"properties":{"order":319,"id":250,"name":"file-edit","prevSize":24,"code":59894},"setIdx":0,"setId":1,"iconIdx":64},{"icon":{"paths":["M1021.466 949.618l-177.541-496.402c-12.469-32.659-40.377-52.846-72.441-52.846s-59.379 20.189-73.035 54.035l-176.948 495.215c-8.313 23.158 3.563 48.691 26.72 57.003s48.691-3.563 57.003-26.72l36.814-102.724h258.296l36.814 102.724c6.531 18.408 23.752 29.689 42.158 29.689 4.75 0 10.094-0.594 14.845-2.376 23.158-8.313 35.033-33.846 26.72-57.003zM674.697 787.515l97.38-272.547 97.38 272.547h-194.761zM523.282 265.579c-134.195 211.981-255.327 340.238-402.585 425.743-7.125 4.157-14.845 5.938-21.97 5.938-15.438 0-30.283-7.72-38.595-21.97-12.469-21.376-5.344-48.691 16.032-60.566 124.694-72.441 226.826-176.354 341.425-348.55h-373.489c-24.345 0-44.534-20.189-44.534-44.534s20.189-44.534 44.534-44.534h222.669v-117.569c0-24.345 20.189-44.534 44.534-44.534s44.534 20.189 44.534 44.534v117.569h222.669c24.345 0 44.534 20.189 44.534 44.534s-20.189 44.534-44.534 44.534h-55.816zM525.657 697.26c-7.72 0-15.438-1.781-22.563-5.938-38.595-22.563-76.004-47.502-111.038-73.63-19.595-14.845-23.752-42.752-8.907-62.347s42.752-23.752 62.347-8.907c32.064 24.345 67.097 46.909 102.724 67.691 21.376 12.469 28.502 39.784 16.032 61.16-8.313 14.251-23.158 21.97-38.595 21.97z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["language","linguistics","words","communication","dialect"]},"attrs":[{}],"properties":{"order":318,"id":249,"name":"language","prevSize":24,"code":59895},"setIdx":0,"setId":1,"iconIdx":65},{"icon":{"paths":["M696.881 725.324c-23.323 0-42.665 19.342-42.665 42.665v85.33c0 39.252-31.856 71.108-71.108 71.108h-426.648c-39.252 0-71.108-31.856-71.108-71.108v-682.637c0-39.252 31.856-71.108 71.108-71.108h184.881v270.211c0 23.323 19.342 42.665 42.665 42.665h270.211v71.108c0 23.323 19.342 42.665 42.665 42.665s42.665-19.342 42.665-42.665v-113.772c0-11.377-4.55-22.186-12.515-30.149l-312.876-312.876c-7.964-7.964-18.773-12.515-30.149-12.515h-227.546c-86.467 0-156.437 69.97-156.437 156.437v682.637c0 86.467 69.97 156.437 156.437 156.437h426.648c86.467 0 156.437-69.97 156.437-156.437v-85.33c0-23.323-19.342-42.665-42.665-42.665zM426.67 159.872l167.246 167.246h-167.246v-167.246zM1020.565 642.27c-2.276 5.12-5.12 9.67-9.102 13.653l-170.659 170.659c-8.533 8.533-19.342 12.515-30.149 12.515s-21.616-3.982-30.149-12.515c-16.497-16.497-16.497-43.802 0-60.3l97.845-97.845h-494.343c-23.323 0-42.665-19.342-42.665-42.665s19.342-42.665 42.665-42.665h494.343l-97.845-97.845c-16.497-16.497-16.497-43.802 0-60.3s43.802-16.497 60.3 0l170.659 170.659c3.982 3.982 6.826 8.533 9.102 13.653 4.55 10.24 4.55 22.186 0 32.425z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-export","send","save","dispatch"]},"attrs":[{}],"properties":{"order":317,"id":248,"name":"file-export","prevSize":24,"code":59896},"setIdx":0,"setId":1,"iconIdx":66},{"icon":{"paths":["M537.031 668.444h-494.364c-23.324 0-42.667-19.343-42.667-42.667s19.343-42.667 42.667-42.667h494.364l-97.849-97.849c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l170.667 170.667c3.983 3.983 6.827 8.533 9.103 13.653 4.551 10.24 4.551 22.187 0 32.427-2.276 5.12-5.12 9.671-9.103 13.653l-170.667 170.667c-8.533 8.533-19.343 12.516-30.151 12.516s-21.617-3.983-30.151-12.516c-16.497-16.497-16.497-43.804 0-60.303l97.849-97.849zM1024 369.777v483.556c0 86.471-69.973 156.444-156.444 156.444h-426.667c-86.471 0-156.444-69.973-156.444-156.444v-56.889c0-23.324 19.343-42.667 42.667-42.667s42.667 19.343 42.667 42.667v56.889c0 39.253 31.857 71.111 71.111 71.111h426.667c39.253 0 71.111-31.857 71.111-71.111v-440.889h-270.223c-23.324 0-42.667-19.343-42.667-42.667v-270.223h-184.889c-39.253 0-71.111 31.857-71.111 71.111v284.444c0 23.324-19.343 42.667-42.667 42.667s-42.667-19.343-42.667-42.667v-284.444c0-86.471 69.973-156.444 156.444-156.444h227.556c11.377 0 22.187 4.551 30.151 12.516l312.889 312.889c7.964 7.964 12.516 18.773 12.516 30.151zM711.111 327.111h167.253l-167.253-167.253v167.253z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-import","get","data","retrieve","fetch"]},"attrs":[{}],"properties":{"order":316,"id":247,"name":"file-import","prevSize":24,"code":59897},"setIdx":0,"setId":1,"iconIdx":67},{"icon":{"paths":["M894.076 334.712l-321.811-321.811c-8.191-8.191-19.309-12.873-31.010-12.873h-263.299c-88.936 0-160.905 71.968-160.905 160.905v702.132c0 88.936 71.968 160.905 160.905 160.905h468.087c88.936 0 160.905-71.968 160.905-160.905v-497.344c0-11.702-4.68-22.819-12.873-31.010zM585.138 149.817l172.022 172.022h-172.022v-172.022zM746.044 936.204h-468.087c-40.373 0-73.138-32.766-73.138-73.138v-702.132c0-40.373 32.766-73.138 73.138-73.138h219.416v277.928c0 23.989 19.894 43.883 43.883 43.883h277.928v453.46c0 40.373-32.766 73.138-73.138 73.138zM758.916 554.128l-87.766 292.554c-5.266 17.553-21.65 30.426-40.373 31.010-0.586 0-1.17 0-1.755 0-18.139 0-33.937-11.118-40.958-27.5l-76.065-190.745-76.065 190.745c-7.021 17.553-23.989 28.671-42.713 27.5-18.723-0.586-34.521-13.457-40.373-31.010l-87.766-292.554c-7.021-23.405 6.436-47.979 29.255-54.415 23.405-7.021 47.394 6.436 54.415 29.255l51.49 172.022 70.213-176.118c13.457-33.351 68.458-33.351 81.331 0l70.213 176.118 51.49-172.022c7.021-23.405 31.596-36.276 54.415-29.255 23.405 7.021 36.276 31.596 29.255 54.415z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-word","document","edit","write","microsoft"]},"attrs":[{}],"properties":{"order":311,"id":246,"name":"file-word","prevSize":24,"code":59889},"setIdx":0,"setId":1,"iconIdx":68},{"icon":{"paths":["M950.832 263.329h-81.915c23.405-28.085 38.032-63.192 38.032-102.395 0-88.936-71.968-160.905-160.905-160.905-98.298 0-184.895 52.074-234.044 129.309-49.149-77.234-135.746-129.309-234.044-129.309-88.936 0-160.905 71.968-160.905 160.905 0 39.203 14.628 74.309 38.032 102.395h-81.915c-40.373 0-73.138 32.766-73.138 73.138v146.278c0 35.107 25.16 63.192 58.511 70.213v397.874c0 40.373 32.766 73.138 73.138 73.138h760.643c40.373 0 73.138-32.766 73.138-73.138v-397.874c33.351-7.021 58.511-35.107 58.511-70.213v-146.278c0-40.373-32.766-73.138-73.138-73.138zM936.204 468.117h-380.321v-117.021h380.321v117.021zM746.044 87.796c40.373 0 73.138 32.766 73.138 73.138s-32.766 73.138-73.138 73.138h-184.895c19.894-83.67 95.373-146.278 184.895-146.278zM277.956 87.796c89.522 0 165.001 62.606 184.895 146.278h-184.895c-40.373 0-73.138-32.766-73.138-73.138s32.766-73.138 73.138-73.138zM87.796 351.095h380.321v117.021h-380.321v-117.021zM146.306 555.883h321.811v380.321h-321.811v-380.321zM877.694 936.204h-321.811v-380.321h321.811v380.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["gift","present","suprise","box","birthday"]},"attrs":[{}],"properties":{"order":312,"id":245,"name":"gift","prevSize":24,"code":59890},"setIdx":0,"setId":1,"iconIdx":69},{"icon":{"paths":["M417.791 482.743c0-23.991 19.896-43.886 43.886-43.886h73.143v-73.143c0-23.991 19.896-43.886 43.886-43.886s43.886 19.896 43.886 43.886v73.143h73.143c23.991 0 43.886 19.896 43.886 43.886s-19.896 43.886-43.886 43.886h-73.143v73.143c0 23.991-19.896 43.886-43.886 43.886s-43.886-19.896-43.886-43.886v-73.143h-73.143c-23.991 0-43.886-19.896-43.886-43.886zM468.114 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM848.461 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM1022.836 259.215l-117.029 468.119c-4.681 19.31-22.235 33.354-42.716 33.354h-585.15c-21.065 0-39.205-15.213-43.301-36.279l-110.593-607.385h-80.165c-23.991 0-43.886-19.896-43.886-43.886s19.896-43.886 43.886-43.886h117.029c21.065 0 39.205 15.213 43.301 36.279l25.162 139.266h750.746c13.458 0 26.332 6.436 34.523 16.969s11.118 24.576 8.192 37.45zM923.945 292.569h-678.773l69.048 380.347h514.346l94.794-380.347z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-plus","add-to-cart","purchase"]},"attrs":[{}],"properties":{"order":313,"id":244,"name":"cart-plus","prevSize":24,"code":59891},"setIdx":0,"setId":1,"iconIdx":70},{"icon":{"paths":["M1023.898 103.121v369.207c0 56.948-46.711 103.659-103.659 103.659h-103.019v-575.886h103.019c57.589 0 103.659 46.071 103.659 103.019zM85.844 79.445l-84.463 479.905c-10.238 58.868 34.553 112.617 94.702 112.617h305.86v223.955c0 70.386 57.589 127.974 127.335 127.974h5.759c25.595 0 48.631-15.357 58.868-39.033l174.685-408.879v-575.886s-588.683 0-588.683 0c-46.711 0-86.383 33.274-94.702 79.345z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-down-fill","disapproval","dislike","disagreement","refusal"]},"attrs":[{}],"properties":{"order":314,"id":243,"name":"thumbs-down-fill","prevSize":24,"code":59892},"setIdx":0,"setId":1,"iconIdx":71},{"icon":{"paths":["M207.428 448.014v575.872h-103.017c-57.587 0-103.657-46.070-103.657-103.017v-369.198c0-56.947 46.71-103.657 103.657-103.657h103.017zM927.907 352.035h-305.852v-223.95c0-70.384-57.587-127.971-127.332-127.971h-5.759c-25.595 0-48.63 15.357-58.866 39.032l-174.681 408.869v575.872s588.668 0 588.668 0c46.71 0 86.381-33.273 94.699-79.343l84.461-479.893c10.238-58.866-34.552-112.614-94.699-112.614z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-up-fill","approval","like","agreement","support"]},"attrs":[{}],"properties":{"order":315,"id":242,"name":"thumbs-up-fill","prevSize":24,"code":59893},"setIdx":0,"setId":1,"iconIdx":72},{"icon":{"paths":["M1020.467 528.967c-2.341 5.266-5.266 9.946-9.362 14.042l-146.281 146.281c-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873c-16.967-16.967-16.967-45.053 0-62.024l71.384-71.384h-318.304v318.304l71.384-71.384c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-146.281 146.281c-4.096 4.096-8.774 7.021-14.042 9.362s-11.117 3.513-16.967 3.513-11.701-1.17-16.967-3.513c-5.266-2.341-9.946-5.266-14.042-9.362l-146.281-146.281c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l71.384 71.384v-318.304h-318.304l71.384 71.384c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-146.281-146.281c-4.096-4.096-7.021-8.774-9.362-14.042-4.681-10.532-4.681-22.82 0-33.35 2.341-5.266 5.266-9.946 9.362-14.042l146.281-146.281c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-71.384 71.384h318.304v-318.889l-71.384 71.384c-16.967 16.967-45.053 16.967-62.024 0s-16.967-45.053 0-62.024l146.281-146.281c4.096-4.096 8.774-7.021 14.042-9.362 10.532-4.681 22.82-4.681 33.35 0 5.266 2.341 9.946 5.266 14.042 9.362l146.281 146.281c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-71.384-71.384v318.304h318.304l-71.384-71.384c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l146.281 146.281c4.096 4.096 7.021 8.774 9.362 14.042 4.681 10.532 4.681 22.82 0 33.35z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-alt","direction","move"]},"attrs":[{}],"properties":{"order":310,"id":241,"name":"arrows-alt","prevSize":24,"code":59888},"setIdx":0,"setId":1,"iconIdx":73},{"icon":{"paths":["M695.789 315.083h-367.579c-14.704 0-26.255-11.553-26.255-26.255v-78.767c0-14.704 11.553-26.255 26.255-26.255h367.579c14.704 0 26.255 11.553 26.255 26.255v78.767c0 14.704-11.553 26.255-26.255 26.255zM722.045 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-210.045c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h210.045c14.704 0 26.255-11.553 26.255-26.255zM892.706 905.834v-787.668c0-65.114-53.036-118.15-118.15-118.15h-525.113c-65.114 0-118.15 53.036-118.15 118.15v787.668c0 65.114 53.036 118.15 118.15 118.15h525.113c65.114 0 118.15-53.036 118.15-118.15zM774.556 78.782c21.529 0 39.383 17.854 39.383 39.383v787.668c0 21.529-17.854 39.383-39.383 39.383h-525.113c-21.529 0-39.383-17.854-39.383-39.383v-787.668c0-21.529 17.854-39.383 39.383-39.383h525.113z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["calculator","math","addition","subtraction","calculation"]},"attrs":[{}],"properties":{"order":308,"id":240,"name":"calculator","prevSize":24,"code":59887},"setIdx":0,"setId":1,"iconIdx":74},{"icon":{"paths":["M117.634 249.75l80.59-80.59v375.869c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-375.869l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0z","M906.366 774.25l-80.59 80.59v-375.869c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v375.869l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M976.388 117.634c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0l-80.59 80.59v-78.608c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v177.695l-679.075 679.075c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l80.59-80.59v78.608c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-177.695l679.075-679.075z"],"attrs":[{},{},{}],"grid":16,"tags":["sort-alt-slash","remove-sorting","unsorted","orderless"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":306,"id":239,"name":"sort-alt-slash","prevSize":24,"code":59886},"setIdx":0,"setId":1,"iconIdx":75},{"icon":{"paths":["M1020.451 495.033c-2.348-5.441-5.502-10.097-9.37-14.051l-234.032-234.032c-8.033-8.604-19.443-13.967-32.105-13.967-24.235 0-43.882 19.647-43.882 43.882 0 12.663 5.363 24.072 13.941 32.081l0.026 0.023 159.147 159.147h-724.353l159.147-159.147c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-234.040 234.040c-3.859 3.945-7.014 8.601-9.247 13.748l-0.114 0.295c-2.222 5-3.515 10.833-3.515 16.967s1.293 11.968 3.623 17.242l-0.108-0.273c2.348 5.441 5.502 10.097 9.37 14.051l234.032 234.032c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0c7.929-7.939 12.834-18.902 12.834-31.010s-4.904-23.071-12.834-31.011v0l-159.147-159.147h724.353l-159.147 159.147c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l234.040-234.040c3.859-3.945 7.014-8.601 9.247-13.748l0.114-0.295c2.222-5 3.515-10.833 3.515-16.967s-1.293-11.968-3.623-17.242l0.108 0.273z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-h","horizontal","left-and-right","bi-directional","move"]},"attrs":[{}],"properties":{"order":305,"id":238,"name":"arrows-h","prevSize":24,"code":59884},"setIdx":0,"setId":1,"iconIdx":76},{"icon":{"paths":["M528.967 1020.451c5.441-2.348 10.097-5.502 14.051-9.37l234.032-234.032c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-159.147 159.147v-724.353l159.147 159.147c7.815 7.297 18.343 11.777 29.915 11.777 24.235 0 43.882-19.647 43.882-43.882 0-11.574-4.48-22.1-11.802-29.942l0.023 0.026-234.040-234.040c-3.945-3.859-8.601-7.014-13.748-9.247l-0.295-0.114c-5-2.222-10.833-3.515-16.967-3.515s-11.968 1.293-17.242 3.623l0.273-0.108c-5.441 2.348-10.097 5.502-14.051 9.37l-234.032 234.032c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l159.147-159.147v724.353l-159.147-159.147c-7.939-7.929-18.902-12.834-31.010-12.834s-23.071 4.904-31.011 12.834v0c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0l234.040 234.040c3.945 3.859 8.601 7.014 13.748 9.247l0.295 0.114c5 2.222 10.833 3.515 16.967 3.515s11.968-1.293 17.242-3.623l-0.273 0.108z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-v","vertical","up-and-down","bi-directional","move"]},"attrs":[{}],"properties":{"order":304,"id":237,"name":"arrows-v","prevSize":24,"code":59885},"setIdx":0,"setId":1,"iconIdx":77},{"icon":{"paths":["M836.060 936.086h-552.19l116.989-164.955c5.016-7 8.065-15.709 8.189-25.123v-190.138h190.108c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0h-191.863v-190.108c-0.156-2.816-0.245-6.11-0.245-9.427 0-99.824 80.924-180.749 180.749-180.749 1.732 0 3.459 0.025 5.178 0.073l-0.254-0.005c3.537-0.243 7.666-0.381 11.827-0.381 101.439 0 183.673 82.233 183.673 183.673 0 5.695-0.259 11.328-0.766 16.89l0.052-0.716v58.495c0 24.229 19.642 43.871 43.871 43.871s43.871-19.642 43.871-43.871v0-58.495c0.352-5.164 0.553-11.193 0.553-17.269 0-149.252-120.994-270.246-270.246-270.246-4.515 0-9.003 0.111-13.464 0.329l0.628-0.025c-1.804-0.044-3.929-0.069-6.060-0.069-147.637 0-267.321 119.684-267.321 267.321 0 3.728 0.077 7.436 0.228 11.127l-0.018-0.528v190.108h-131.613c-24.229 0-43.871 19.642-43.871 43.871s19.642 43.871 43.871 43.871v0h131.613v175.484l-155.595 223.45c-3.958 6.515-6.3 14.39-6.3 22.813s2.343 16.298 6.411 23.010l-0.111-0.197c7.358 14.007 21.805 23.398 38.447 23.398 0.056 0 0.112 0 0.169 0h633.489c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pound","money","currency","sterling","uk"]},"attrs":[{}],"properties":{"order":303,"id":236,"name":"pound","prevSize":24,"code":59883},"setIdx":0,"setId":1,"iconIdx":78},{"icon":{"paths":["M727.036 469.12l-70.398-16 55.038 78.078v242.556l187.516-156.157v-265.595l-86.398 30.719-85.758 86.398z","M289.285 469.12l-86.398-86.398-85.758-30.719v265.595l187.516 156.157v-242.556l55.038-78.078-70.398 16z","M586.238 476.8h-156.157l-39.040-23.68-62.718 94.078v351.993l46.72 69.759 55.038 55.038h156.157l55.038-55.038 46.72-69.759v-351.993l-62.718-94.078-39.040 23.68z","M711.676 922.231l101.117-101.758v-101.117l-101.117 85.758v117.118z","M202.886 820.473l101.758 101.758v-117.118l-101.758-85.758v101.117z","M453.122 445.442h39.679v-445.431h-86.398l-62.079 147.837-282.234-23.040 47.359 195.836 335.993 124.797h7.68z","M671.997 147.848l-62.079-147.837h-86.398v447.991h52.479l335.993-127.997 47.999-191.996z","M852.474 109.449l-110.078-109.438h-109.438l55.038 124.797 164.476-15.36z","M382.722 0.011h-109.438l-109.438 109.438 164.476 15.36 54.399-124.797z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["prime","logo"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":307,"id":235,"name":"prime","prevSize":24,"code":59882},"setIdx":0,"setId":1,"iconIdx":79},{"icon":{"paths":["M589.605 64.373v-18.004c-0.345-25.576-20.987-46.218-46.53-46.563h-0.033c-300.373 1.794-543.179 245.708-543.179 546.331 0 98.823 26.237 191.517 72.126 271.496l-1.409-2.663c8.24 13.842 23.126 22.972 40.145 22.972 0.074 0 0.148 0 0.221 0h-0.012c8.464-0.017 16.386-2.321 23.186-6.325l-0.215 0.116 18.004-9.313c88.223 122.529 230.468 201.375 391.129 201.375 265.391 0 480.531-215.14 480.531-480.531 0-248.992-189.376-453.753-431.953-478.105l-2.014-0.163zM496.478 95.416v420.93l-365.676 209.844c-24.009-53.406-37.995-115.765-37.995-181.391 0-232.603 175.709-424.166 401.636-449.201l2.036-0.183zM543.042 931.068c-126.56-0.365-238.867-61.070-309.71-154.848l-0.712-0.982 333.392-191.84c14.165-7.849 23.596-22.711 23.596-39.775 0-0.204-0.001-0.407-0.004-0.611v0.031-384.921c192.214 25.131 339.099 187.876 339.099 384.928 0 213.47-172.379 386.677-385.534 388.018h-0.128z"],"attrs":[{}],"grid":16,"tags":["chart-pie","graph","statistics","proportion"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":301,"id":234,"name":"chart-pie","prevSize":24,"code":59881},"setIdx":0,"setId":1,"iconIdx":80},{"icon":{"paths":["M399.361 614.401c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2c28.276 0 51.199 22.923 51.199 51.2v0c0 28.276-22.923 51.2-51.199 51.2v0zM1023.999 512c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-282.77 229.23-512 512-512v0c282.769 0 512 229.23 512 512v0zM750.721 426.88c-18.359 1.113-34.69 8.976-46.715 21.114l-0.006 0.006c-49.923-33.418-111.167-53.62-177.080-54.397l-0.199-0.001 35.84-161.921 114.56 25.601c-0.003 0.191-0.005 0.416-0.005 0.641 0 27.924 22.636 50.56 50.56 50.56 0.002 0 0.003 0 0.005 0v0c28.355-0.361 51.2-23.43 51.2-51.836 0-0.001 0-0.003 0-0.004v0c0.016-0.492 0.027-1.071 0.027-1.653 0-27.924-22.637-50.56-50.561-50.56-20.408 0-37.99 12.090-45.978 29.498l-0.129 0.315-128-28.16c-0.688-0.138-1.481-0.217-2.292-0.217-5.656 0-10.412 3.862-11.77 9.093l-0.018 0.084-39.679 178.56c-66.101 0.974-127.301 21.143-178.501 55.164l1.221-0.764c-12.464-12.858-29.895-20.838-49.191-20.838-37.821 0-68.48 30.66-68.48 68.48 0 26.584 15.148 49.632 37.286 60.978l0.386 0.18c-0.468 4.795-0.733 10.366-0.733 16.001s0.267 11.205 0.787 16.701l-0.054-0.702c0 108.16 122.239 196.48 272.64 196.48s272.64-88.32 272.64-196.48c0-0.084 0-0.183 0-0.282 0-11.484-1.399-22.639-4.039-33.308l0.2 0.95c20.889-11.994 34.732-34.174 34.732-59.588 0-36.756-28.957-66.749-65.302-68.408l-0.15-0.006zM608.64 666.88c-27.226 17.349-60.409 27.649-96 27.649s-68.773-10.302-96.732-28.086l0.732 0.435c-2.268-2.080-5.305-3.355-8.64-3.355s-6.372 1.275-8.649 3.365l0.009-0.009c-2.426 2.23-3.939 5.418-3.939 8.959s1.514 6.729 3.93 8.952l0.009 0.008c31.918 21.918 71.391 35.004 113.921 35.004s82.002-13.086 114.611-35.451l-0.692 0.447c2.426-2.231 3.939-5.418 3.939-8.959s-1.514-6.729-3.93-8.952l-0.009-0.007c-2.337-2.457-5.63-3.984-9.28-3.984s-6.943 1.527-9.274 3.978l-0.005 0.006zM624.639 512c-28.277 0-51.2 22.923-51.2 51.2s22.923 51.2 51.2 51.2c28.276 0 51.199-22.923 51.199-51.2v0c0-28.277-22.923-51.2-51.199-51.2v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["reddit","social","news","discussions","forum","upvote"]},"attrs":[{}],"properties":{"order":299,"id":233,"name":"reddit","prevSize":24,"code":59880},"setIdx":0,"setId":1,"iconIdx":81},{"icon":{"paths":["M367.461 188.397c-7.939-7.93-18.905-12.836-31.014-12.836s-23.074 4.905-31.015 12.836v0l-292.589 292.589c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0l292.589 292.589c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0l-261.574-261.574 261.574-261.574c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z","M1011.156 480.986l-292.589-292.589c-7.817-7.298-18.345-11.779-29.92-11.779-24.239 0-43.889 19.649-43.889 43.889 0 11.575 4.481 22.104 11.803 29.946l-0.023-0.027 261.574 261.574-261.574 261.574c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0l292.589-292.589c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["code","programming","software","developer","script"]},"attrs":[{},{}],"properties":{"order":298,"id":232,"name":"code","prevSize":24,"code":59879},"setIdx":0,"setId":1,"iconIdx":82},{"icon":{"paths":["M936.767 0.034c-27.214 0.367-49.178 22.331-49.545 49.509v160.562l-55.49-55.49c-86.69-87.405-206.835-141.515-339.617-141.515-209.345 0-387.277 134.501-452.092 321.801l-1.011 3.36c-2.53 5.71-4.002 12.369-4.002 19.374 0 21.825 14.301 40.308 34.044 46.591l0.347 0.094c2.483 0.454 5.34 0.712 8.257 0.712s5.775-0.259 8.55-0.756l-0.293 0.043c21.606-0.226 39.922-14.066 46.794-33.339l0.108-0.351c19.528-56.988 50.528-105.653 90.48-145.309l0.022-0.022c68.806-68.546 163.72-110.925 268.534-110.925s199.729 42.378 268.547 110.936l55.478 55.478h-159.205c-27.363 0-49.545 22.182-49.545 49.545s22.182 49.545 49.545 49.545v0h280.095c0.198 0.003 0.432 0.005 0.666 0.005 26.997 0 48.884-21.887 48.884-48.884 0-0.234-0.002-0.468-0.005-0.7v0.036-280.755c0-27.363-22.182-49.545-49.545-49.545v0z","M953.281 622.981c-5.442-2.202-11.755-3.479-18.366-3.479-22.122 0-40.903 14.308-47.591 34.174l-0.104 0.355c-19.528 56.988-50.528 105.653-90.48 145.309l-0.022 0.022c-68.806 68.546-163.72 110.925-268.534 110.925s-199.729-42.378-268.547-110.936l-55.478-55.478h163.169c27.363 0 49.545-22.182 49.545-49.545s-22.182-49.545-49.545-49.545v0h-280.095c-0.198-0.003-0.432-0.005-0.666-0.005-26.997 0-48.884 21.887-48.884 48.884 0 0.234 0.002 0.468 0.005 0.7v-0.036 280.095c0 27.363 22.182 49.545 49.545 49.545s49.545-22.182 49.545-49.545v0-160.526l55.49 55.49c86.69 87.405 206.835 141.515 339.617 141.515 209.345 0 387.277-134.501 452.092-321.801l1.011-3.36c1.72-4.786 2.714-10.307 2.714-16.060 0-21.835-14.317-40.328-34.076-46.602l-0.347-0.094z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sync","update","refresh","reload","synchronize"]},"attrs":[{},{}],"properties":{"order":297,"id":231,"name":"sync","prevSize":24,"code":59878},"setIdx":0,"setId":1,"iconIdx":83},{"icon":{"paths":["M950.857 292.571h-175.543v-29.257c0-145.425-117.889-263.314-263.314-263.314s-263.314 117.889-263.314 263.314v0 29.257h-175.543c-40.395 0-73.142 32.747-73.142 73.142v0 497.372c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-497.372c0-40.395-32.747-73.142-73.142-73.142v0zM336.457 263.315c0-96.949 78.594-175.543 175.543-175.543s175.543 78.594 175.543 175.543v0 29.257h-351.086zM936.228 863.086c0 40.395-32.747 73.142-73.142 73.142v0h-702.171c-40.395 0-73.142-32.747-73.142-73.142v0-482.743h160.914v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h351.086v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h160.914z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shopping-bag","retail","purchase","buy","shop"]},"attrs":[{}],"properties":{"order":296,"id":230,"name":"shopping-bag","prevSize":24,"code":59877},"setIdx":0,"setId":1,"iconIdx":84},{"icon":{"paths":["M1023.969 301.19v-180.695c0-33.265-26.967-60.232-60.232-60.232v0h-903.474c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0h903.474c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0zM963.737 903.505h-903.474v-180.695h903.474zM963.737 602.347h-903.474v-180.695h903.474zM963.737 301.19h-903.474v-180.695h903.474z","M210.842 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["server","host","datacenter","cloud","storage"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":295,"id":229,"name":"server","prevSize":24,"code":59876},"setIdx":0,"setId":1,"iconIdx":85},{"icon":{"paths":["M926.005 99.103c-121.161-57.959-262.777-93.948-412.236-99.026l-1.769-0.048c-151.228 5.125-292.843 41.116-420.425 101.823l6.42-2.75c-32.977 15.76-55.351 48.848-55.351 87.164 0 0.296 0.001 0.59 0.004 0.885v-0.045 649.789c-0.003 0.249-0.004 0.545-0.004 0.839 0 38.315 22.376 71.404 54.773 86.914l0.58 0.25c121.161 57.959 262.777 93.948 412.236 99.026l1.769 0.048c151.228-5.125 292.843-41.116 420.425-101.823l-6.42 2.75c32.977-15.76 55.351-48.848 55.351-87.164 0-0.296-0.001-0.59-0.004-0.885v0.045-649.789c0.003-0.249 0.004-0.545 0.004-0.839 0-38.315-22.376-71.404-54.773-86.914l-0.58-0.25zM899.438 541.888c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-213.644c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618zM132.864 174.375c110.92-53.263 240.582-86.42 377.448-91.277l1.688-0.048c138.75 5.006 268.584 38.151 385.604 93.859l-5.915-2.535c4.63 2.445 7.734 7.224 7.748 12.728v48.156c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-49.813c0.619-4.997 3.823-9.121 8.213-11.035l0.090-0.035zM891.136 849.625c-110.92 53.263-240.582 86.42-377.448 91.277l-1.688 0.048c-138.75-5.006-268.584-38.151-385.604-93.859l5.915 2.535c-4.63-2.445-7.734-7.224-7.748-12.728v-204.238c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618v204.235c0 0.014 0 0.031 0 0.048 0 5.64-3.374 10.492-8.214 12.647l-0.088 0.035z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["database","data","storage","information","records"]},"attrs":[{}],"properties":{"order":294,"id":228,"name":"database","prevSize":24,"code":59875},"setIdx":0,"setId":1,"iconIdx":86},{"icon":{"paths":["M984.598 262.573h-157.533l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-45.159 180.113h-338.696l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-47.26 180.113h-179.062c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-85.593 341.321h-176.962c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h338.696l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h181.163c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0h-157.533l85.593-341.321h176.962c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0zM722.044 341.339l-85.593 341.321h-334.495l85.593-341.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["hashtag","tag","trend","topic","social-media"]},"attrs":[{}],"properties":{"order":293,"id":227,"name":"hashtag","prevSize":24,"code":59874},"setIdx":0,"setId":1,"iconIdx":87},{"icon":{"paths":["M731.351 0.181h-438.702c-88.839 0-160.857 72.018-160.857 160.857v0 818.91c-0.001 0.096-0.001 0.21-0.001 0.324 0 24.229 19.642 43.87 43.87 43.87 9.418 0 18.143-2.968 25.291-8.020l-0.137 0.092 311.186-217.011 311.186 217.011c6.914 4.763 15.47 7.606 24.689 7.606 0.163 0 0.325-0.001 0.488-0.003h-0.025c7.45-0.092 14.477-1.807 20.773-4.808l-0.3 0.129c13.96-7.76 23.279-22.374 23.398-39.173v-818.927c0-88.839-72.018-160.857-160.857-160.857v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bookmark-fill","save","favorite","keep"]},"attrs":[{}],"properties":{"order":290,"id":226,"name":"bookmark-fill","prevSize":24,"code":59871},"setIdx":0,"setId":1,"iconIdx":88},{"icon":{"paths":["M1004.095 24.725c-7.747-14.706-22.885-24.586-40.34-24.695h-903.493c-17.471 0.11-32.608 9.989-40.236 24.445l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.173 0 10.136 3.43 19.471 9.191 26.908l-0.075-0.1 322.241 440.294v466.797c0.335 24.813 20.361 44.839 45.141 45.174h240.96c24.813-0.335 44.839-20.361 45.174-45.141v-466.83l322.241-440.294c5.688-7.337 9.117-16.671 9.117-26.808 0-7.369-1.813-14.314-5.016-20.414l0.116 0.241z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["filter-fill","selection","full-filter","complete-criteria"]},"attrs":[{}],"properties":{"order":289,"id":225,"name":"filter-fill","prevSize":24,"code":59872},"setIdx":0,"setId":1,"iconIdx":89},{"icon":{"paths":["M940.27 142.985v0c-52.342-52.898-124.95-85.655-205.208-85.655-0.25 0-0.502 0-0.752 0.001h0.039c-0.212 0-0.462-0.001-0.714-0.001-80.258 0-152.867 32.757-205.183 85.63l-0.025 0.025-16.427 17.013-16.427-16.427c-52.551-52.546-125.148-85.046-205.334-85.046s-152.783 32.5-205.336 85.047v0c-51.85 52.868-83.852 125.364-83.852 205.334s32.002 152.468 83.898 205.382l-0.045-0.047 397.176 398.35c7.96 7.95 18.953 12.869 31.093 12.869s23.133-4.917 31.094-12.869v0l397.176-398.35c51.673-52.835 83.555-125.21 83.555-205.032 0-80.411-32.354-153.263-84.754-206.251l0.026 0.026z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["heart-fill","love","affection","full-heart"]},"attrs":[{}],"properties":{"order":288,"id":224,"name":"heart-fill","prevSize":24,"code":59873},"setIdx":0,"setId":1,"iconIdx":90},{"icon":{"paths":["M944.92 71.496c-6.851-4.781-15.351-7.639-24.52-7.639-5.664 0-11.074 1.091-16.029 3.074l0.291-0.103c-63.404 28.272-136.947 48.827-213.986 57.993l-3.642 0.353c-50.961-13.852-95.595-33.813-136.214-59.541l2.021 1.195c-50.241-31.546-108.991-55.111-171.832-67.168l-3.203-0.511c-75.265-7.001-254.385 51.927-291.724 64.179-17.436 6.017-29.741 22.283-29.756 41.423v874.010c0 24.167 19.592 43.759 43.759 43.759s43.759-19.592 43.759-43.759v0-341.902c65.742-24.141 142.134-41.68 221.425-49.3l3.786-0.294c53.070 13.251 99.74 33.289 142.139 59.564l-2.111-1.218c47.311 29.399 102.324 52.182 160.994 65.266l3.539 0.663h13.419c91.412-12.072 174.279-35.196 251.871-68.295l-6.238 2.366c16.429-6.638 27.841-22.387 28.006-40.821v-497.12c0.056-0.823 0.088-1.785 0.088-2.753 0-13.438-6.14-25.443-15.767-33.361l-0.075-0.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag-fill","complete","report"]},"attrs":[{}],"properties":{"order":287,"id":223,"name":"flag-fill","prevSize":24,"code":59870},"setIdx":0,"setId":1,"iconIdx":91},{"icon":{"paths":["M512 1023.989c-282.763 0-511.989-229.226-511.989-511.989s229.226-511.989 511.989-511.989c282.763 0 511.989 229.226 511.989 511.989v0c0 282.763-229.226 511.989-511.989 511.989v0zM512 85.343c-235.636 0-426.657 191.021-426.657 426.657s191.021 426.657 426.657 426.657c235.636 0 426.657-191.021 426.657-426.657v0c0-235.636-191.021-426.657-426.657-426.657v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle","round","cycle","loop","circular"]},"attrs":[{}],"properties":{"order":286,"id":222,"name":"circle","prevSize":24,"code":59868},"setIdx":0,"setId":1,"iconIdx":92},{"icon":{"paths":["M1023.989 512c0 282.763-229.226 511.989-511.989 511.989s-511.989-229.226-511.989-511.989c0-282.763 229.226-511.989 511.989-511.989s511.989 229.226 511.989 511.989z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle-fill","complete","whole"]},"attrs":[{}],"properties":{"order":285,"id":221,"name":"circle-fill","prevSize":24,"code":59869},"setIdx":0,"setId":1,"iconIdx":93},{"icon":{"paths":["M462.875 1024.834c-1.947 0.372-4.188 0.585-6.478 0.585s-4.531-0.213-6.702-0.62l0.224 0.035c-18.586-5.739-31.857-22.766-31.857-42.893 0-0.292 0.003-0.585 0.009-0.876l-0.001 0.044v-5.938l48.584-342.789h-234.284c-0.011 0-0.024 0-0.038 0-16.55 0-30.926-9.309-38.177-22.979l-0.114-0.234c-3.963-6.646-6.305-14.655-6.305-23.213s2.342-16.567 6.421-23.424l-0.116 0.211 107.965-188.4 221.328-351.967c7.563-12.608 21.158-20.914 36.694-20.914 4.633 0 9.094 0.739 13.272 2.105l-0.301-0.085c18.586 5.739 31.857 22.766 31.857 42.893 0 0.292-0.003 0.585-0.009 0.876l0.001-0.044v5.938l-48.584 342.789h234.824c0.011 0 0.024 0 0.038 0 16.55 0 30.926 9.309 38.177 22.979l0.114 0.234c3.963 6.646 6.305 14.655 6.305 23.213s-2.342 16.567-6.421 23.424l0.116-0.211-107.965 188.4-221.328 351.967c-7.762 11.483-20.733 18.931-35.445 18.931-0.634 0-1.265-0.014-1.893-0.042l0.090 0.003zM434.265 959.516v0zM292.291 549.248h215.931c24.812 0.302 44.809 20.488 44.809 45.342 0 0.191-0.001 0.382-0.004 0.572v-0.029 5.938l-31.849 223.488 134.957-215.931 77.735-133.876h-215.931c-24.812-0.302-44.809-20.488-44.809-45.342 0-0.191 0.001-0.382 0.004-0.572v0.029-5.938l31.849-223.488-134.957 215.931zM589.735 63.945v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bolt","lightning","electicity","speed","charge"]},"attrs":[{}],"properties":{"order":284,"id":220,"name":"bolt","prevSize":24,"code":59867},"setIdx":0,"setId":1,"iconIdx":94},{"icon":{"paths":["M876.353 155.475c-91.36-90.984-217.374-147.233-356.525-147.233s-265.163 56.249-356.542 147.25l-72.854 72.854v-175.251c0-24.945-20.222-45.168-45.168-45.168s-45.168 20.222-45.168 45.168v0 285.461c0 0.001 0 0.003 0 0.004 0 25.067 20.15 45.426 45.135 45.766h286.096c24.945 0 45.168-20.222 45.168-45.168s-20.222-45.168-45.168-45.168v0h-180.671l76.485-74.678c74.952-74.805 178.417-121.062 292.688-121.062s217.736 46.257 292.695 121.070l-0.007-0.007c372.786 402.897-180.671 958.161-585.375 585.375-8.171-8.161-19.456-13.21-31.918-13.21s-23.747 5.048-31.92 13.21v0c-8.309 8.103-13.464 19.409-13.464 31.918s5.155 23.815 13.454 31.91l0.010 0.008c91.243 91.243 217.293 147.678 356.525 147.678 278.462 0 504.201-225.739 504.201-504.201 0-139.231-56.434-265.282-147.678-356.525v0z","M512 256.049c-24.81 0.335-44.833 20.358-45.168 45.135v210.815c0.011 12.468 5.073 23.753 13.248 31.918v0l152.367 148.753c8.084 8.182 19.304 13.25 31.708 13.25 0.073 0 0.148 0 0.222 0h-0.011c21.988-3.292 38.658-22.048 38.658-44.696 0-10.97-3.91-21.026-10.413-28.851l0.059 0.073-137.31-137.31v-193.921c-0.294-24.201-19.326-43.864-43.245-45.162l-0.116-0.006z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["history","past","records","timeline","memories"]},"attrs":[{},{}],"properties":{"order":283,"id":219,"name":"history","prevSize":24,"code":59866},"setIdx":0,"setId":1,"iconIdx":95},{"icon":{"paths":["M1022.811 776.474s0-4.096 0-6.436v-516.077c-0.023-7.052-1.751-13.696-4.793-19.546l0.112 0.237c-4.397-9.329-11.736-16.668-20.801-20.952l-0.263-0.112-468.096-209.474c-5.326-2.478-11.563-3.924-18.139-3.924s-12.811 1.445-18.411 4.037l0.272-0.112-468.096 209.474c-14.982 7.661-25.187 22.762-25.744 40.299l-0.001 0.074v516.077c0.941 17.495 11.005 32.44 25.487 40.246l0.258 0.128 468.096 209.474c5.306 2.591 11.546 4.105 18.139 4.105s12.832-1.514 18.389-4.214l-0.251 0.11 468.096-209.474c13.538-6.306 23.285-18.763 25.711-33.677l0.034-0.259zM86.616 321.251l380.328 170.856v420.117l-380.328-170.27zM554.714 492.105l380.328-170.856v420.702l-380.328 170.27zM512 91.883l361.019 162.079-361.019 161.493-361.019-161.493z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["box","package","container","storage","delivery"]},"attrs":[{}],"properties":{"order":282,"id":218,"name":"box","prevSize":24,"code":59865},"setIdx":0,"setId":1,"iconIdx":96},{"icon":{"paths":["M512 0.027c-282.755 0-511.973 229.218-511.973 511.973v0c-0.022 1.75-0.034 3.816-0.034 5.886 0 279.524 226.599 506.123 506.123 506.123 2.069 0 4.135-0.012 6.199-0.037l-0.313 0.003c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0c-1.399 0.016-3.053 0.026-4.708 0.026-231.698 0-419.526-187.828-419.526-419.526 0-1.655 0.010-3.308 0.029-4.959l-0.003 0.251c0.333-234.15 190.058-423.874 424.174-424.206h0.032c281.439 0 424.206 142.768 424.206 424.206v80.745c0.187 2.116 0.292 4.578 0.292 7.064 0 47.18-38.247 85.426-85.426 85.426s-85.426-38.247-85.426-85.426c0-2.486 0.106-4.948 0.314-7.381l-0.022 0.317v-292.556c0-24.236-19.647-43.883-43.883-43.883s-43.883 19.647-43.883 43.883v0 19.894c-44.051-38.526-102.099-62.022-165.637-62.022-0.188 0-0.377 0-0.565 0h0.029c-140.246 0-253.938 113.692-253.938 253.938s113.692 253.938 253.938 253.938v0c75.633-0.27 143.364-33.87 189.31-86.869l0.266-0.313c30.329 52.256 86.021 86.836 149.789 86.836 95.329 0 172.609-77.279 172.609-172.609 0-0.084 0-0.169 0-0.252v0.014-80.745c0-330.003-181.969-511.973-511.973-511.973zM512 678.171c-91.774 0-166.171-74.397-166.171-166.171s74.397-166.171 166.171-166.171c91.774 0 166.171 74.397 166.171 166.171v0c-0.332 91.641-74.532 165.841-166.14 166.171h-0.032z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["at","email","location","place"]},"attrs":[{}],"properties":{"order":281,"id":217,"name":"at","prevSize":24,"code":59864},"setIdx":0,"setId":1,"iconIdx":97},{"icon":{"paths":["M273.927 128.663c-27.857 0-50.44 22.582-50.44 50.44s22.582 50.44 50.44 50.44v0h449.244l-579.714 579.714c-9.89 9.234-16.053 22.349-16.053 36.904 0 27.857 22.582 50.44 50.44 50.44 14.555 0 27.668-6.164 36.874-16.025l0.028-0.030 579.714-579.714v449.244c0 27.857 22.582 50.44 50.44 50.44s50.44-22.582 50.44-50.44v0-570.97c-0.038-7.053-1.518-13.753-4.16-19.829l0.126 0.327c-7.47-17.225-23.668-29.376-42.86-30.924l-0.182-0.011z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-right","northeast","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":309,"id":216,"name":"arrow-up-right","prevSize":24,"code":59860},"setIdx":0,"setId":1,"iconIdx":98},{"icon":{"paths":["M128.665 750.071c0 27.856 22.582 50.438 50.438 50.438s50.438-22.582 50.438-50.438v0-449.241l579.71 579.71c9.233 9.89 22.348 16.053 36.903 16.053 27.856 0 50.438-22.582 50.438-50.438 0-14.555-6.164-27.668-16.025-36.874l-0.030-0.028-579.71-579.71h449.241c27.856 0 50.438-22.582 50.438-50.438s-22.582-50.438-50.438-50.438v0h-570.968c-7.053 0.038-13.753 1.518-19.829 4.16l0.327-0.126c-18.183 7.953-30.702 25.689-30.935 46.373v0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-left","northwest","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":278,"id":215,"name":"arrow-up-left","prevSize":24,"code":59861},"setIdx":0,"setId":1,"iconIdx":99},{"icon":{"paths":["M749.048 893.688c27.738 0 50.223-22.484 50.223-50.223s-22.484-50.223-50.223-50.223v0h-447.31l577.218-577.218c9.846-9.194 15.985-22.253 15.985-36.744 0-27.738-22.484-50.223-50.223-50.223-14.491 0-27.549 6.138-36.714 15.954l-0.028 0.030-577.218 577.218v-447.31c0-27.738-22.484-50.223-50.223-50.223s-50.223 22.484-50.223 50.223v0 571.861c0.038 7.024 1.513 13.694 4.144 19.745l-0.126-0.325c7.919 18.102 25.578 30.57 46.174 30.801h0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-left","southwest","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":279,"id":214,"name":"arrow-down-left","prevSize":24,"code":59862},"setIdx":0,"setId":1,"iconIdx":100},{"icon":{"paths":["M896.598 273.145c0-27.949-22.657-50.606-50.606-50.606s-50.606 22.657-50.606 50.606v0 450.722l-581.62-581.62c-9.013-8.416-21.152-13.58-34.498-13.58-27.949 0-50.606 22.657-50.606 50.606 0 13.348 5.166 25.486 13.61 34.529l-0.028-0.030 581.62 581.62h-450.722c-27.949 0-50.606 22.657-50.606 50.606s22.657 50.606 50.606 50.606v0h576.221c7.076-0.039 13.797-1.525 19.894-4.175l-0.328 0.126c15.905-8.356 26.772-24.403 27.661-43.066l0.006-0.114z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-right","southeast","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":280,"id":213,"name":"arrow-down-right","prevSize":24,"code":59863},"setIdx":0,"setId":1,"iconIdx":101},{"icon":{"paths":["M512 0.011c-282.764 0-511.989 229.225-511.989 511.989s229.225 511.989 511.989 511.989c282.764 0 511.989-229.225 511.989-511.989v0c0-282.764-229.225-511.989-511.989-511.989v0zM763.515 350.723l-83.838 396.152c-6.4 28.159-23.040 34.559-46.72 21.76l-127.997-94.719-63.999 59.519c-5.961 7.732-15.19 12.694-25.582 12.799h-0.016l8.959-127.997 236.796-214.395c10.879-8.959 0-14.080-15.36-5.119l-290.555 182.396-127.997-39.679c-27.52-8.32-28.159-27.52 5.76-40.319l493.43-191.996c24.319-7.039 44.8 7.039 37.12 41.599z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["telegram","messaging","chat","fast"]},"attrs":[{}],"properties":{"order":276,"id":212,"name":"telegram","prevSize":24,"code":59859},"setIdx":0,"setId":1,"iconIdx":102},{"icon":{"paths":["M512 1023.991c-282.764 0-511.991-229.227-511.991-511.991s229.227-511.991 511.991-511.991c282.764 0 511.991 229.227 511.991 511.991v0c0 282.764-229.227 511.991-511.991 511.991v0zM512 85.341c-235.637 0-426.659 191.022-426.659 426.659s191.022 426.659 426.659 426.659c235.637 0 426.659-191.022 426.659-426.659v0c0-235.637-191.022-426.659-426.659-426.659v0z","M369.78 284.448h284.439c47.127 0 85.332 38.205 85.332 85.332v284.439c0 47.127-38.205 85.332-85.332 85.332h-284.439c-47.127 0-85.332-38.205-85.332-85.332v-284.439c0-47.127 38.205-85.332 85.332-85.332z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["stop-circle","halt","end","cease","finish"]},"attrs":[{},{}],"properties":{"order":275,"id":211,"name":"stop-circle","prevSize":24,"code":59858},"setIdx":0,"setId":1,"iconIdx":103},{"icon":{"paths":["M842.308 1023.979h-660.618c-100.333 0-181.669-81.336-181.669-181.669v0-660.618c0-100.333 81.336-181.669 181.669-181.669v0h660.618c100.333 0 181.669 81.336 181.669 181.669v0 660.618c0 100.333-81.336 181.669-181.669 181.669v0zM181.692 99.114c-45.606 0-82.577 36.971-82.577 82.577v0 660.618c0 45.606 36.971 82.577 82.577 82.577v0h660.618c45.606 0 82.577-36.971 82.577-82.577v0-660.618c0-45.606-36.971-82.577-82.577-82.577v0z"],"attrs":[{}],"grid":16,"tags":["stop","halt","end","cease","finish"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":274,"id":210,"name":"stop","prevSize":24,"code":59857},"setIdx":0,"setId":1,"iconIdx":104},{"icon":{"paths":["M870.378 148.502c-91.041-91.707-217.17-148.474-356.557-148.474-0.64 0-1.281 0.001-1.92 0.003h0.099c-280.418 0.282-507.634 227.671-507.634 508.129 0 93.024 24.997 180.211 68.642 255.208l-1.302-2.422-71.676 263.024 268.784-70.395c69.896 39.602 153.381 63.238 242.321 63.995l0.223 0.001c0.006 0 0.012 0 0.019 0 281.177 0 509.412-226.669 511.947-507.248l0.001-0.241c-0.978-141.618-59.303-269.426-152.883-361.512l-0.067-0.066zM512 929.894c-0.081 0-0.178 0-0.274 0-79.234 0-153.358-21.884-216.656-59.938l1.903 1.060-15.359-9.599-159.35 42.237 42.237-155.511-10.24-16c-39.739-63.209-63.313-140.066-63.313-222.43 0-233.27 189.104-422.374 422.374-422.374 115.76 0 220.644 46.569 296.938 121.995l-0.040-0.039c77.623 75.954 126.276 181.243 127.989 297.901l0.003 0.321c-2.173 233.734-192.155 422.374-426.196 422.374-0.006 0-0.012 0-0.018 0h0.001zM743.026 613.754c-12.799-6.4-74.875-37.118-86.395-40.958s-20.478-6.4-28.798 6.4c-13.451 18.342-26.668 34.402-40.702 49.701l0.384-0.424c-7.039 8.959-14.719 9.599-27.519 0-73.887-29.731-133.426-82.24-171.269-148.708l-0.882-1.681c-13.439-22.398 12.799-21.119 37.118-69.116 1.722-3.252 2.733-7.107 2.733-11.2s-1.011-7.948-2.796-11.332l0.064 0.132c0-6.4-28.798-69.116-39.038-94.074s-20.478-21.119-28.798-21.759h-24.958c-13.577 0.214-25.68 6.352-33.865 15.937l-0.052 0.063c-26.196 25.492-42.447 61.088-42.447 100.48 0 2.698 0.076 5.38 0.226 8.041l-0.016-0.369c4.318 50.122 23.15 95.162 52.219 131.69l-0.382-0.498c54.892 81.39 128.004 146.508 213.743 190.496l3.204 1.492c35.584 21.122 78.444 33.605 124.218 33.605 9.899 0 19.661-0.583 29.254-1.719l-1.162 0.112c36.419-7.408 66.636-29.449 84.793-59.581l0.322-0.576c5.793-12.526 9.172-27.184 9.172-42.632 0-6.192-0.543-12.256-1.582-18.147l0.091 0.624c-5.76-6.4-14.080-9.599-26.878-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["whatsapp","chat","message","instant-messaging","call"]},"attrs":[{}],"properties":{"order":273,"id":209,"name":"whatsapp","prevSize":24,"code":59856},"setIdx":0,"setId":1,"iconIdx":105},{"icon":{"paths":["M365.722 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M877.694 936.204h-29.255v-892.294c-0.325-24.104-19.779-43.558-43.852-43.883h-585.142c-24.104 0.325-43.558 19.779-43.883 43.852v892.325h-29.255c-24.236 0-43.883 19.647-43.883 43.883s19.647 43.883 43.883 43.883v0h731.387c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0zM760.671 936.204h-307.183v-131.65c0-16.157-13.098-29.255-29.255-29.255v0h-58.511c-16.157 0-29.255 13.098-29.255 29.255v0 131.65h-73.138v-848.41h497.344z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["building","office","architecture","structure","construction"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":272,"id":208,"name":"building","prevSize":24,"code":59855},"setIdx":0,"setId":1,"iconIdx":106},{"icon":{"paths":["M561.547 0.023v462.433h462.433v-462.433zM924.887 363.362h-264.247v-264.247h264.247z","M0.023 462.454h462.433v-462.433h-462.433zM99.116 99.116h264.247v264.247h-264.247z","M0.023 1023.98h462.433v-462.433h-462.433zM99.116 660.64h264.247v264.247h-264.247z","M561.547 561.547h115.609v115.609h-115.609v-115.609z","M792.764 561.547h115.609v115.609h-115.609v-115.609z","M677.156 677.156h115.609v115.609h-115.609v-115.609z","M908.371 677.156h115.609v115.609h-115.609v-115.609z","M561.547 792.764h115.609v115.609h-115.609v-115.609z","M792.764 792.764h115.609v115.609h-115.609v-115.609z","M677.156 908.371h115.609v115.609h-115.609v-115.609z","M908.371 908.371h115.609v115.609h-115.609v-115.609z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["qrcode","scan","code","data","barcode"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":271,"id":207,"name":"qrcode","prevSize":24,"code":59854},"setIdx":0,"setId":1,"iconIdx":107},{"icon":{"paths":["M966.767 407.505l-107.415-291.887c-13.941-40.405-51.44-68.998-95.682-69.469h-502.102c-43.76 0.101-81.048 27.7-95.509 66.429l-0.231 0.706-107.415 291.887c-34.342 16.711-57.732 51.084-58.377 90.984l-0.001 0.085v262.699c-0.012 0.59-0.019 1.285-0.019 1.983 0 35.143 17.95 66.093 45.181 84.184l0.372 0.233s0 3.503 0 3.503v116.754c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-102.161h583.775v102.161c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-116.754s0 0 0-3.503c26.927-18.415 44.367-48.984 44.367-83.626 0-0.155 0-0.308-0.001-0.462v0.023-262.699c-0.415-39.752-23.34-74.055-56.62-90.799l-0.59-0.27zM935.826 761.273c0 8.060-6.535 14.595-14.595 14.595v0h-817.284c-8.060 0-14.595-6.535-14.595-14.595v0-262.699c0-8.060 6.535-14.595 14.595-14.595v0h817.284c8.060 0 14.595 6.535 14.595 14.595v0zM248.14 143.055c2.145-5.454 7.332-9.259 13.417-9.341h502.055c6.095 0.082 11.281 3.887 13.392 9.241l0.034 0.099 81.728 224.169h-692.357z","M366.646 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z","M833.667 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["car","vehicle","transport","drive","auto"]},"attrs":[{},{},{}],"properties":{"order":270,"id":206,"name":"car","prevSize":24,"code":59853},"setIdx":0,"setId":1,"iconIdx":108},{"icon":{"paths":["M512 249.365c-145.049 0-262.635 117.585-262.635 262.635s117.585 262.635 262.635 262.635c145.049 0 262.635-117.585 262.635-262.635v0c0-0.191 0.002-0.416 0.002-0.641 0-144.695-117.299-261.995-261.995-261.995-0.225 0-0.45 0-0.676 0.002h0.035zM512 683.033c-94.459 0-171.033-76.575-171.033-171.033s76.575-171.033 171.033-171.033c94.459 0 171.033 76.575 171.033 171.033v0c0 94.459-76.575 171.033-171.033 171.033v0zM847.020 238.475c0 35.378-28.68 64.058-64.058 64.058s-64.058-28.68-64.058-64.058c0-35.378 28.68-64.058 64.058-64.058v0c35.378 0 64.058 28.68 64.058 64.058v0zM1020.615 302.532c0.053-2.1 0.083-4.576 0.083-7.056 0-80.466-31.5-153.574-82.841-207.667l0.125 0.132c-54.19-52.344-128.080-84.599-209.504-84.599-1.79 0-3.575 0.015-5.357 0.047l0.267-0.003c-83.275-3.843-339.503-3.843-422.778 0-1.952-0.045-4.253-0.071-6.559-0.071-80.622 0-153.889 31.489-208.175 82.838l0.141-0.134c-51.217 53.961-82.717 127.069-82.717 207.535 0 2.482 0.030 4.956 0.090 7.423l-0.008-0.366c-3.843 83.275-3.843 339.503 0 422.778-0.053 2.1-0.083 4.576-0.083 7.056 0 80.466 31.5 153.574 82.841 207.667l-0.125-0.132c54.143 51.217 127.412 82.705 208.032 82.705 2.306 0 4.608-0.026 6.902-0.077l-0.342 0.006c84.556 5.124 338.223 5.124 422.778 0 2.1 0.053 4.576 0.083 7.056 0.083 80.466 0 153.574-31.5 207.667-82.841l-0.132 0.125c51.217-53.961 82.717-127.069 82.717-207.535 0-2.482-0.030-4.956-0.090-7.423l0.008 0.366c3.843-83.275 3.843-339.503 0-422.778zM911.718 814.991c-17.965 44.669-52.697 79.402-96.206 96.954l-1.162 0.414c-68.692 14.541-147.62 22.867-228.491 22.867-25.987 0-51.772-0.86-77.33-2.552l3.471 0.185c-22.061 1.512-47.813 2.374-73.767 2.374-80.681 0-159.416-8.328-235.394-24.172l7.451 1.3c-44.669-17.965-79.402-52.697-96.954-96.206l-0.414-1.162c-26.904-67.901-21.139-228.044-21.139-302.351s-5.765-235.091 21.139-302.351c17.48-45.144 52.371-80.244 96.218-97.607l1.149-0.401c68.527-14.544 147.262-22.873 227.943-22.873 25.954 0 51.706 0.862 77.231 2.558l-3.464-0.185c22.086-1.509 47.872-2.368 73.859-2.368 80.871 0 159.799 8.326 235.971 24.167l-7.48-1.3c44.669 17.965 79.402 52.697 96.954 96.206l0.414 1.162c26.904 67.901 20.498 228.044 20.498 302.351s6.406 235.091-20.498 302.351z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["instagram","photos","hashtag","selfie","social"]},"attrs":[{}],"properties":{"order":268,"id":205,"name":"instagram","prevSize":24,"code":59852},"setIdx":0,"setId":1,"iconIdx":109},{"icon":{"paths":["M942.030 0.060h-854.301c-1.171-0.058-2.544-0.091-3.924-0.091-44.98 0-81.687 35.426-83.74 79.897l-0.007 0.184v856.22c1.381 47.853 39.817 86.288 87.54 87.666l0.129 0.003h854.301c45.688-2.098 81.934-39.649 81.934-85.666 0-0.705-0.009-1.408-0.025-2.109l0.001 0.103v-856.22c0.007-0.4 0.012-0.873 0.012-1.345 0-43.471-35.24-78.711-78.711-78.711-1.129 0-2.253 0.024-3.37 0.070l0.159-0.006zM320.022 853.72h-149.102v-456.266h149.102zM248.991 328.342v0c-0.784 0.028-1.705 0.046-2.629 0.046-41.704 0-75.512-33.808-75.512-75.512 0-1.141 0.025-2.277 0.075-3.406l-0.006 0.16c-0.046-0.985-0.072-2.14-0.072-3.301 0-41.704 33.808-75.512 75.512-75.512 1.375 0 2.743 0.037 4.101 0.109l-0.189-0.007c0.784-0.028 1.705-0.046 2.629-0.046 41.704 0 75.512 33.808 75.512 75.512 0 1.141-0.025 2.277-0.075 3.406l0.006-0.16c0.046 0.985 0.072 2.14 0.072 3.301 0 41.704-33.808 75.512-75.512 75.512-1.375 0-2.743-0.037-4.101-0.109l0.189 0.007zM853.72 853.72h-149.743v-249.571c0-59.513-21.118-100.469-74.231-100.469-34.5 0.309-63.758 22.412-74.697 53.194l-0.174 0.559c-3.36 9.138-5.302 19.69-5.302 30.697 0 2.034 0.066 4.051 0.196 6.052l-0.013-0.271v259.81h-147.182v-456.266h147.182v63.993c25.685-46.508 74.423-77.484 130.396-77.484 1.402 0 2.8 0.019 4.194 0.058l-0.205-0.004c96.629 0 169.581 63.993 169.581 200.297z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["linkedin","jobs","professionals","business","network"]},"attrs":[{}],"properties":{"order":266,"id":204,"name":"linkedin","prevSize":24,"code":59851},"setIdx":0,"setId":1,"iconIdx":110},{"icon":{"paths":["M998.721 25.279c-15.31-15.206-36.405-24.601-59.695-24.601-9.365 0-18.373 1.518-26.795 4.325l0.597-0.173-854.831 285.138c-34.333 11.124-58.722 42.818-58.722 80.21 0 32.269 18.165 60.295 44.829 74.41l0.459 0.221 354.67 175.29 175.29 355.84c14.186 27.601 42.466 46.16 75.080 46.16 0.106 0 0.207 0 0.309 0h5.827c34.71-2.632 63.306-26.111 73.46-57.839l0.162-0.591 289.228-852.494c2.939-8.121 4.642-17.492 4.642-27.261 0-22.937-9.373-43.685-24.499-58.622l-0.010-0.010zM94.226 370.599l746.151-248.912-414.27 414.27zM653.984 929.774l-165.94-331.884 414.27-414.27z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["send","deliver","dispatch","transmit","message"]},"attrs":[{}],"properties":{"order":263,"id":203,"name":"send","prevSize":24,"code":59850},"setIdx":0,"setId":1,"iconIdx":111},{"icon":{"paths":["M215.050 647.037c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517c0-59.379 48.138-107.517 107.517-107.517v0h107.517zM269.445 647.037c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0zM376.963 215.050c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517c59.379 0 107.517 48.138 107.517 107.517v0 107.517zM376.963 269.445c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517h-269.434c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517v0zM808.95 376.963c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517c0 59.379-48.138 107.517-107.517 107.517v0h-107.517v-107.517zM754.555 376.963c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0-269.434c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434zM647.037 808.95c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517c-59.379 0-107.517-48.138-107.517-107.517v0-107.517zM647.037 754.555c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517h269.434c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["slack","communication","team","work","collabrate"]},"attrs":[{}],"properties":{"order":262,"id":202,"name":"slack","prevSize":24,"code":59849},"setIdx":0,"setId":1,"iconIdx":112},{"icon":{"paths":["M517.309 1022.789c-22.691-0.029-45.007-1.526-66.885-4.41l2.595 0.278c-233.58-31.279-416.401-214.099-447.387-445.014l-0.291-2.662c-2.859-20.354-4.49-43.869-4.49-67.761 0-246.048 172.971-451.698 403.948-501.981l3.392-0.62c4.828-1.146 10.369-1.803 16.065-1.803 24.13 0 45.508 11.78 58.7 29.904l0.144 0.209c8.716 12.084 13.937 27.19 13.937 43.519 0 14.447-4.091 27.937-11.173 39.378l0.187-0.321c-26.726 45.102-42.523 99.41-42.523 157.408 0 16.683 1.308 33.056 3.823 49.030l-0.228-1.77c21.13 133.311 125.031 237.216 256.587 258.114l1.758 0.228c14.358 2.386 30.902 3.749 47.766 3.749 57.921 0 112.086-16.086 158.27-44.036l-1.366 0.768c10.914-6.566 24.086-10.453 38.167-10.453 16.715 0 32.146 5.473 44.609 14.724l-0.202-0.143c18.334 13.090 30.142 34.293 30.142 58.257 0 5.696-0.669 11.235-1.926 16.546l0.097-0.484c-49.878 235.319-255.888 409.342-502.54 409.342-0.413 0-0.822 0-1.235-0.001h0.064zM394.034 99.12c-178.936 53.807-307.056 217.078-307.056 410.275 0 236.171 191.454 427.623 427.623 427.623 193.197 0 356.468-128.116 409.491-304.027l0.784-3.028c-50.869 25.361-110.807 40.205-174.212 40.205-197.518 0-361.392-144.047-392.301-332.818l-0.31-2.3c-2.962-18.244-4.655-39.278-4.655-60.703 0-63.794 15.005-124.084 41.678-177.535l-1.042 2.307z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["moon","night","dark","lunar","crescent"]},"attrs":[{}],"properties":{"order":261,"id":201,"name":"moon","prevSize":24,"code":59847},"setIdx":0,"setId":1,"iconIdx":113},{"icon":{"paths":["M512 806.395c-162.589 0-294.395-131.804-294.395-294.395s131.804-294.395 294.395-294.395c162.589 0 294.395 131.804 294.395 294.395v0c-0.29 162.471-131.922 294.103-294.366 294.395h-0.028zM512 294.404c-120.176 0-217.596 97.422-217.596 217.596s97.422 217.596 217.596 217.596c120.176 0 217.596-97.422 217.596-217.596v0c-0.29-120.058-97.538-217.306-217.567-217.596h-0.028z","M512 153.605c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M512 1023.99c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M985.591 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M115.206 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M230.404 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043-55.808-51.2c-7.14-7.14-11.557-17.006-11.557-27.903 0-21.794 17.667-39.461 39.461-39.461 10.897 0 20.763 4.417 27.903 11.557v0l51.2 55.808c6.068 6.763 9.778 15.747 9.778 25.599s-3.711 18.837-9.81 25.635l0.031-0.035c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M847.867 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003-52.736-55.808c-2.366-4.842-3.748-10.533-3.748-16.548 0-21.206 17.191-38.399 38.399-38.399 6.016 0 11.709 1.383 16.778 3.85l-0.227-0.099 55.808 51.2c6.939 6.946 11.231 16.541 11.231 27.135s-4.291 20.189-11.231 27.136v0c-6.701 7.568-16.317 12.423-27.072 12.798l-0.065 0.001z","M793.596 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043c-6.068-6.763-9.778-15.747-9.778-25.599s3.711-18.837 9.81-25.635l-0.031 0.035 51.2-55.808c7.14-7.14 17.006-11.557 27.903-11.557 21.794 0 39.461 17.667 39.461 39.461 0 10.897-4.417 20.763-11.557 27.903v0l-55.808 51.2c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M176.133 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003c-6.939-6.946-11.231-16.541-11.231-27.135s4.291-20.189 11.231-27.136v0l55.808-52.736c4.842-2.366 10.533-3.748 16.548-3.748 21.206 0 38.399 17.191 38.399 38.399 0 6.016-1.383 11.709-3.85 16.778l0.099-0.227-51.2 55.808c-6.876 6.978-16.43 11.301-26.992 11.301-0.591 0-1.178-0.014-1.761-0.042l0.082 0.003z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sun","daylight","bright","sunny","weather","light"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":260,"id":200,"name":"sun","prevSize":24,"code":59848},"setIdx":0,"setId":1,"iconIdx":114},{"icon":{"paths":["M1002.843 264.979c-11.885-44.735-46.258-79.32-89.974-91.303l-0.899-0.211c-108.991-13.585-235.136-21.338-363.093-21.338-12.967 0-25.913 0.079-38.842 0.238l1.964-0.020c-10.965-0.138-23.912-0.217-36.878-0.217-127.957 0-254.101 7.753-377.993 22.812l14.9-1.475c-44.618 12.192-78.989 46.777-90.67 90.619l-0.202 0.895c-13.45 71.849-21.144 154.515-21.144 238.976 0 2.83 0.010 5.654 0.025 8.48l-0.001-0.435c-0.015 2.515-0.025 5.487-0.025 8.463 0 84.76 7.694 167.728 22.419 248.235l-1.273-8.397c12.473 43.944 46.687 77.735 89.978 89.387l0.896 0.205c108.991 13.585 235.136 21.338 363.093 21.338 12.967 0 25.913-0.079 38.842-0.238l-1.964 0.020c10.965 0.138 23.912 0.217 36.878 0.217 127.957 0 254.101-7.753 377.993-22.812l-14.9 1.475c44.184-11.858 78.4-45.649 90.654-88.691l0.222-0.902c13.451-72.109 21.145-155.075 21.145-239.836 0-2.976-0.010-5.952-0.030-8.921l0.002 0.458c0.014-2.39 0.024-5.216 0.024-8.045 0-84.461-7.694-167.123-22.415-247.326l1.272 8.351zM407.049 664.948v-304.617l268.139 151.669-268.139 152.31z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["youtube","video","sharing","music","clip","vlog"]},"attrs":[{}],"properties":{"order":245,"id":199,"name":"youtube","prevSize":24,"code":59845},"setIdx":0,"setId":1,"iconIdx":115},{"icon":{"paths":["M921.584 0.020h-819.169c-56.554 0-102.397 45.843-102.397 102.397v0 819.169c0 56.554 45.843 102.397 102.397 102.397h819.169c56.554 0 102.397-45.843 102.397-102.397v0-819.169c0-56.554-45.843-102.397-102.397-102.397v0zM861.428 339.846q-5.119 108.157-150.396 296.31c-100.477 127.996-186.234 195.834-255.991 195.834-43.518 0-79.358-39.678-109.437-119.677-58.239-213.112-83.198-337.908-127.996-337.908-22.288 9.156-41.514 20.78-58.626 34.868l0.387-0.309-34.559-44.799c85.118-74.878 166.394-158.075 217.592-162.554s90.237 33.919 105.597 118.396c47.358 300.15 68.477 345.588 154.236 209.272 23.167-31.534 40.499-68.894 49.548-109.38l0.37-1.973c8.32-76.157-58.878-71.038-104.956-51.198q53.118-179.195 206.712-174.714 113.917 3.84 107.517 147.835z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["vimeo","video","movie","clip","streaming"]},"attrs":[{}],"properties":{"order":246,"id":198,"name":"vimeo","prevSize":24,"code":59846},"setIdx":0,"setId":1,"iconIdx":116},{"icon":{"paths":["M945.168 71.244c-6.854-4.784-15.36-7.644-24.533-7.644-5.667 0-11.082 1.091-16.037 3.075l0.291-0.101c-63.362 27.754-136.884 48.272-213.777 57.97l-3.973 0.411c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525c-107.474 9.724-206.538 32.466-299.99 66.82l8.098-2.606c-17.445 6.019-29.758 22.294-29.774 41.446v874.511c0 24.18 19.602 43.782 43.782 43.782s43.782-19.602 43.782-43.782v0-341.516c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662h13.426c91.375-11.776 174.319-34.938 251.841-68.29l-6.068 2.323c16.532-6.508 28.021-22.337 28.021-40.848 0-0.004 0-0.013 0-0.017v0.001-496.801c0.058-0.822 0.086-1.787 0.086-2.754 0-13.445-6.144-25.457-15.776-33.379l-0.076-0.061zM876.865 575.050c-55.28 23.59-119.414 40.863-186.43 48.723l-3.3 0.316c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525h-11.676c-81.373 7.491-156.277 24.016-227.356 48.724l6.685-2.021v-408.651c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662c72.593-2.928 140.796-18.315 203.651-44.065l-3.998 1.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag","report","banner"]},"attrs":[{}],"properties":{"order":247,"id":197,"name":"flag","prevSize":24,"code":59844},"setIdx":0,"setId":1,"iconIdx":117},{"icon":{"paths":["M921.328 234.242h-14.62v-131.569c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032c-2.11-0.402-4.538-0.635-7.018-0.635s-4.909 0.229-7.26 0.672l0.242-0.037-695.856 233.902h-15.789l-9.939 3.508h-8.187l-9.357 5.263-7.018 9.939-8.187 7.018-6.432 5.85-7.018 8.771c-1.843 1.659-3.402 3.587-4.62 5.733l-0.060 0.112c-1.923 2.94-3.872 6.386-5.601 9.962l-0.245 0.564-3.508 6.432c-1.391 3.423-2.79 7.711-3.925 12.107l-0.165 0.758c0.126 0.965 0.196 2.083 0.196 3.216s-0.070 2.252-0.21 3.346l0.014-0.13c-0.288 2.979-0.451 6.443-0.451 9.939s0.164 6.961 0.485 10.379l-0.033-0.436v584.754c0.266 54.991 43.614 99.77 98.010 102.322l0.229 0.010h818.656c56.383-0.331 102.001-45.949 102.333-102.301v-584.786c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032zM809.056 88.637c5.781 2.176 9.84 7.618 9.939 14.021v131.582h-446.167zM935.946 921.328c0 8.075-6.545 14.62-14.62 14.62v0h-818.656c-8.075 0-14.62-6.545-14.62-14.62v0-584.754c0-8.075 6.545-14.62 14.62-14.62v0h818.656c8.075 0 14.62 6.545 14.62 14.62v0z","M848.233 628.95c0 40.368-32.724 73.092-73.092 73.092s-73.092-32.724-73.092-73.092c0-40.368 32.724-73.092 73.092-73.092s73.092 32.724 73.092 73.092z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["wallet","money","cash","payments","finance"]},"attrs":[{},{}],"properties":{"order":248,"id":196,"name":"wallet","prevSize":24,"code":59843},"setIdx":0,"setId":1,"iconIdx":118},{"icon":{"paths":["M974.245 49.171c-15.932-10.721-35.555-17.111-56.669-17.111-14.627 0-28.534 3.067-41.12 8.59l0.658-0.257-208.887 89.524-277.931-117.023c-10.185-4.441-22.051-7.024-34.522-7.024s-24.338 2.583-35.094 7.244l0.571-0.221-255.112 107.663c-39.245 17.382-66.129 55.99-66.129 100.873 0 0.535 0.003 1.071 0.012 1.601l-0.001-0.081v658.259c-0.001 0.193-0.001 0.422-0.001 0.65 0 38.606 19.576 72.638 49.339 92.718l0.396 0.252c15.932 10.721 35.555 17.111 56.669 17.111 14.627 0 28.534-3.067 41.12-8.59l-0.658 0.257 208.887-89.524 277.931 117.023c9.959 4.44 21.578 7.024 33.803 7.024 0.254 0 0.506-0.001 0.759-0.002h-0.037c12.47-0.016 24.335-2.597 35.099-7.244l-0.579 0.222 255.112-109.419c39.245-17.382 66.129-55.99 66.129-100.873 0-0.535-0.003-1.071-0.012-1.601l0.001 0.081v-656.503c0.001-0.193 0.001-0.422 0.001-0.65 0-38.606-19.576-72.638-49.339-92.718l-0.396-0.252zM399.657 107.683l224.685 95.96v709.749l-224.685-95.96zM112.365 902.859c-2.099 1.232-4.621 1.96-7.312 1.96s-5.216-0.728-7.384-1.996l0.067 0.036c-6.069-4.287-9.983-11.275-9.983-19.174 0-0.459 0.014-0.915 0.041-1.366l-0.002 0.063v-659.428c-0.001-0.106-0.002-0.225-0.002-0.349 0-9.66 5.999-17.916 14.475-21.246l0.156-0.052 209.473-90.694v706.823zM936.211 801.048c0.016 0.329 0.027 0.713 0.027 1.097 0 8.996-5.204 16.772-12.765 20.489l-0.133 0.060-211.228 90.694v-706.823l199.525-85.427c2.099-1.232 4.621-1.96 7.312-1.96s5.216 0.728 7.384 1.996l-0.067-0.036c6.069 4.287 9.983 11.275 9.983 19.174 0 0.459-0.014 0.915-0.041 1.366l0.002-0.063z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["map","location","route","journey","area"]},"attrs":[{}],"properties":{"order":249,"id":195,"name":"map","prevSize":24,"code":59842},"setIdx":0,"setId":1,"iconIdx":119},{"icon":{"paths":["M232.89 877.709c-0.229 0.001-0.5 0.001-0.772 0.001-64.296 0-122.536-25.926-164.839-67.892l0.014 0.014c-41.67-44.195-67.28-103.927-67.28-169.644 0-70.104 29.144-133.401 75.978-178.432l0.081-0.077 220.011-221.767c46.236-47.686 110.48-77.679 181.734-78.989l0.242-0.003c64.887 0.446 123.436 27.23 165.557 70.178l0.036 0.036c42.26 44.485 68.256 104.777 68.256 171.139 0 70.733-29.531 134.567-76.936 179.85l-0.095 0.091-73.728 73.728c-8.035 8.605-19.444 13.968-32.108 13.968-24.236 0-43.886-19.648-43.886-43.886 0-12.665 5.363-24.073 13.943-32.084l0.025-0.023 71.384-76.068c31.073-29.214 50.426-70.586 50.426-116.481 0-41.8-16.055-79.851-42.334-108.318l0.099 0.109c-28.323-24.799-65.659-39.923-106.527-39.923-45.364 0-86.377 18.637-115.797 48.671l-0.027 0.027-218.256 221.181c-30.617 29.25-49.65 70.402-49.65 115.998 0 41.161 15.51 78.698 41.005 107.085l-0.133-0.148c26.409 26.109 62.734 42.236 102.824 42.236 5.002 0 9.944-0.251 14.816-0.741l-0.615 0.049c1.28-0.135 2.767-0.212 4.272-0.212 22.546 0 41.068 17.231 43.113 39.245l0.012 0.171c0.136 1.297 0.214 2.802 0.214 4.324 0 22.665-17.181 41.315-39.226 43.641l-0.191 0.015z","M545.938 863.081c-64.887-0.446-123.436-27.23-165.557-70.178l-0.036-0.036c-42.26-44.485-68.256-104.777-68.256-171.139 0-70.733 29.531-134.567 76.936-179.85l0.095-0.091 73.728-73.728c8.035-8.605 19.444-13.968 32.108-13.968 24.236 0 43.886 19.648 43.886 43.886 0 12.665-5.363 24.073-13.943 32.084l-0.025 0.023-71.384 76.068c-31.073 29.214-50.426 70.586-50.426 116.481 0 41.8 16.055 79.851 42.334 108.318l-0.099-0.109c28.323 24.799 65.659 39.923 106.527 39.923 45.364 0 86.377-18.637 115.797-48.671l0.027-0.027 220.596-221.181c29.874-29.148 48.402-69.807 48.402-114.793 0-41.733-15.944-79.74-42.074-108.264l0.109 0.122c-26.409-26.109-62.734-42.236-102.824-42.236-5.002 0-9.944 0.251-14.816 0.741l0.615-0.049c-1.28 0.135-2.767 0.212-4.272 0.212-22.546 0-41.068-17.231-43.113-39.245l-0.012-0.171c-0.136-1.297-0.214-2.802-0.214-4.324 0-22.665 17.181-41.315 39.226-43.641l0.191-0.015c7.239-0.795 15.632-1.247 24.131-1.247 63.452 0 121.008 25.25 163.166 66.25l-0.054-0.053c41.67 44.195 67.28 103.927 67.28 169.644 0 70.104-29.144 133.401-75.978 178.432l-0.081 0.077-220.011 221.767c-46.236 47.686-110.48 77.679-181.734 78.989l-0.242 0.003z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["link","connect","join","attach","web","url"]},"attrs":[{},{}],"properties":{"order":250,"id":194,"name":"link","prevSize":24,"code":59841},"setIdx":0,"setId":1,"iconIdx":120},{"icon":{"paths":["M921.589 117.040h-819.178c-56.419 0.331-102.067 45.977-102.398 102.366v585.16c0.331 56.419 45.977 102.067 102.366 102.398h819.209c56.419-0.331 102.067-45.977 102.398-102.366v-585.16c-0.331-56.419-45.977-102.067-102.366-102.398h-0.033zM102.411 204.808h819.178c8.080 0 14.628 6.551 14.628 14.628v0 131.653h-848.434v-131.653c0-8.080 6.551-14.628 14.628-14.628v0zM921.589 819.192h-819.178c-8.080 0-14.628-6.551-14.628-14.628v0-365.705h848.434v365.705c0 8.080-6.551 14.628-14.628 14.628v0z","M336.461 570.514h-117.025c-32.315 0-58.514 26.197-58.514 58.514s26.197 58.514 58.514 58.514v0h117.025c32.315 0 58.514-26.197 58.514-58.514s-26.197-58.514-58.514-58.514v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["credit-card","payment","purchase","money","bank"]},"attrs":[{},{}],"properties":{"order":251,"id":193,"name":"credit-card","prevSize":24,"code":59839},"setIdx":0,"setId":1,"iconIdx":121},{"icon":{"paths":["M867.007 182.851c-66.261-30.706-136.831-53.332-211.172-66.261-9.158 16.161-19.933 38.248-26.935 56.025-78.651-11.852-156.763-11.852-233.798 0-7.541-17.777-18.316-39.864-27.474-56.025-74.341 12.929-144.911 35.555-211.172 66.261-133.599 201.475-169.692 398.104-151.915 591.499 88.886 66.261 174.541 106.125 259.118 132.522 21.010-28.551 39.326-59.257 55.487-91.042-30.706-11.313-59.796-25.858-87.27-42.558 7.541-5.387 14.545-11.313 21.549-16.7 168.615 78.651 351.236 78.651 517.696 0 7.004 5.925 14.006 11.313 21.549 16.7-27.474 16.7-57.103 30.706-87.27 42.558 16.161 31.783 34.478 62.489 55.487 91.042 84.577-26.397 170.769-66.261 259.118-132.522 21.010-224.64-36.094-419.113-151.915-591.499zM341.769 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508zM681.692 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508z"],"attrs":[{}],"grid":16,"tags":["discord","voice","chat","game","social","communication"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":252,"id":192,"name":"discord","prevSize":24,"code":59840},"setIdx":0,"setId":1,"iconIdx":122},{"icon":{"paths":["M71.252 1019.529c-0.094 0-0.205 0-0.308 0-18.338 0-34.928-7.49-46.876-19.583l-0.004-0.004c-12.065-12.080-19.533-28.766-19.533-47.194s7.46-35.107 19.533-47.195v0l881.496-881.496c12.224-13.091 29.586-21.252 48.86-21.252 36.88 0 66.781 29.901 66.781 66.781 0 19.267-8.161 36.636-21.215 48.818l-0.036 0.034-881.496 881.496c-11.952 12.097-28.542 19.587-46.879 19.587-0.11 0-0.221 0-0.324 0h0.016z","M200.36 400.703c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM200.36 133.579c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z","M823.64 1023.979c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM823.64 756.859c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["percentage","ratio","portion","rate","fraction"]},"attrs":[{},{},{}],"properties":{"order":253,"id":191,"name":"percentage","prevSize":24,"code":59838},"setIdx":0,"setId":1,"iconIdx":123},{"icon":{"paths":["M634.635 1025.058h-8.795c-278.481-6.291-501.825-233.529-501.825-512.936 0-143.581 58.979-273.384 154.031-366.506l0.087-0.085c90.386-89.279 214.664-144.424 351.826-144.424 4.737 0 9.461 0.066 14.166 0.197l-0.694-0.015c137.202 2.016 261.047 57.579 351.895 146.67l-0.082-0.081c7.946 7.955 12.862 18.943 12.862 31.077s-4.914 23.121-12.862 31.078v0c-7.955 7.946-18.943 12.862-31.077 12.862s-23.121-4.914-31.078-12.862v0c-76.784-75.59-182.227-122.264-298.57-122.264-235.104 0-425.69 190.589-425.69 425.69s190.589 425.69 425.69 425.69c110.943 0 211.975-42.441 287.744-111.973l-0.312 0.283 12.901-12.313c8.295-7.915 19.557-12.787 31.955-12.787s23.661 4.872 31.975 12.806l-0.018-0.018c8.518 7.555 13.858 18.529 13.858 30.751 0 10.778-4.154 20.587-10.95 27.911l0.023-0.026-2.931 2.931-17.003 16.418c-90.306 81.848-210.707 131.947-342.808 131.947-1.515 0-3.029-0.007-4.542-0.019l0.232 0.001z","M869.176 468.024h-820.891c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h820.891c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z","M781.223 643.928h-732.939c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h732.939c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["euro","money","currency","europe","cash"]},"attrs":[{},{},{}],"properties":{"order":233,"id":190,"name":"euro","prevSize":24,"code":59837},"setIdx":0,"setId":1,"iconIdx":124},{"icon":{"paths":["M921.533 0.085h-716.682c-1.243-0.037-2.704-0.062-4.171-0.062-76.892 0-139.525 61.042-142.084 137.312l-0.005 0.236v725.456c3.196 89.572 76.578 160.974 166.638 160.974 1.887 0 3.764-0.032 5.636-0.094l-0.273 0.005h690.939c24.1-0.324 43.553-19.777 43.877-43.845v-936.102c-0.324-24.1-19.777-43.553-43.845-43.877h-0.032zM877.652 936.158h-647.059c-1.635 0.122-3.546 0.19-5.469 0.19-41.629 0-75.733-32.206-78.764-73.058l-0.015-0.26c3.043-41.116 37.15-73.322 78.779-73.322 1.923 0 3.834 0.068 5.723 0.205l-0.254-0.015h647.059zM877.652 702.141h-647.059c-30.908 0.035-59.934 8.052-85.138 22.102l0.893-0.458v-586.214c2.714-28.081 26.19-49.857 54.753-49.857 1.322 0 2.628 0.047 3.925 0.14l-0.175-0.011h672.802z","M321.859 321.859h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z","M321.859 526.626h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["book","read","literature","knowledge","education"]},"attrs":[{},{},{}],"properties":{"order":232,"id":189,"name":"book","prevSize":24,"code":59834},"setIdx":0,"setId":1,"iconIdx":125},{"icon":{"paths":["M512 1023.233c-5.884-0.076-11.5-1.139-16.713-3.034l0.353 0.112c-294.424-132.986-495.622-424.049-495.622-762.108 0-25.218 1.12-50.181 3.311-74.828l-0.228 3.185c1.091-20.259 15.977-36.738 35.376-40.276l0.266-0.038c170.071-26.272 323.191-75.689 464.402-145.534l-9.257 4.14c5.319-2.475 11.548-3.917 18.114-3.917s12.794 1.442 18.385 4.030l-0.271-0.112c131.953 65.702 285.069 115.119 446.231 140.248l8.916 1.146c19.665 3.576 34.547 20.055 35.634 40.204l0.003 0.11c1.964 21.462 3.084 46.42 3.084 71.642 0 338.056-201.194 629.119-490.377 759.984l-5.245 2.124c-4.86 1.783-10.476 2.845-16.326 2.921h-0.034zM88.991 226.293c-0.817 12.916-1.282 28.011-1.282 43.216 0 292.016 171.793 543.905 419.826 660.115l4.464 1.881c252.498-118.092 424.293-369.981 424.293-661.997 0-15.204-0.465-30.297-1.384-45.268l0.1 2.056c-158.673-27.438-300.659-73.974-432.589-137.992l9.58 4.192c-122.352 59.822-264.337 106.359-413.369 132.403l-9.639 1.394z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shield","protect","secure","guard","defense"]},"attrs":[{}],"properties":{"order":231,"id":188,"name":"shield","prevSize":24,"code":59833},"setIdx":0,"setId":1,"iconIdx":126},{"icon":{"paths":["M330.174 602.273c-7.682 42.896-39.055 245.207-48.017 302.191 0 4.482 0 5.762-7.042 5.762h-167.743c-0.080 0.001-0.175 0.001-0.271 0.001-15.204 0-27.532-12.324-27.532-27.532 0-1.356 0.097-2.688 0.287-3.989l-0.017 0.147 131.888-839.984c3.692-21.668 21.877-38.101 44.080-39.052l0.096-0.002c342.523 0 371.334-8.323 459.046 26.251 135.089 52.499 147.892 179.266 99.235 316.915s-163.261 201.671-315.635 203.593c-97.314 0-156.215-15.364-169.663 55.059zM883.334 277.035c-3.841-3.2-5.121-3.841-6.402 0-5.355 29.455-12.228 55.051-20.948 79.774l1.103-3.586c-89.632 256.095-338.682 234.965-460.326 234.965-0.779-0.096-1.678-0.148-2.591-0.148-11.979 0-21.761 9.396-22.379 21.221l-0.002 0.053c-50.578 320.115-64.022 384.138-64.022 384.138-0.348 1.539-0.545 3.309-0.545 5.121 0 13.404 10.837 24.274 24.228 24.326h143.414c19.695-0.387 35.904-14.834 39.022-33.697l0.032-0.236c0-12.164 0 14.084 32.653-206.154 10.243-49.297 32.013-44.176 64.022-44.176 159.417 0 284.262-64.022 320.115-256.095 6.318-18.661 9.965-40.158 9.965-62.502 0-57.89-24.469-110.067-63.632-146.751l-0.111-0.101z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["paypal","payment","money","transfer","ecommerce","transaction"]},"attrs":[{}],"properties":{"order":229,"id":186,"name":"paypal","prevSize":24,"code":59835},"setIdx":0,"setId":1,"iconIdx":127},{"icon":{"paths":["M590.061 298.931c-114.531 3.839-397.983 35.193-397.983 268.094 0 250.818 326.32 261.056 433.175 99.176 33.603 38.347 68.51 73.249 105.572 105.755l1.281 1.101 133.727-127.968s-76.142-58.226-76.142-120.93v-335.917c0-57.586-57.586-188.114-264.895-188.114s-319.921 127.968-319.921 238.663l174.038 17.277c14.203-60.869 64.928-106.62 127.331-113.199l0.637-0.053c95.977 0 83.181 67.824 83.181 158.042zM590.061 497.283c0 182.995-198.352 155.482-198.352 39.029s119.010-127.968 198.352-131.807zM909.983 870.953c-103.709 94.959-242.457 153.142-394.795 153.142-5.62 0-11.222-0.080-16.805-0.238l0.821 0.018c-195.949-7.842-370.074-95.152-492.135-230.369l-0.545-0.613c-15.997-17.277 0-25.596 12.797-18.556 172.759 101.736 443.413 268.735 876.588 69.103 19.837-8.319 33.91 4.48 15.357 27.515zM1004.041 876.072c-11.535 27.968-28.737 51.536-50.314 70.185l-0.235 0.197c-12.797 10.238-22.395 6.399-15.357-8.319s46.068-106.215 30.074-127.968-87.020-9.598-113.251-7.038-30.714 4.48-32.634 0 51.186-35.829 88.3-40.309 96.617 0 108.772 13.437c1.186 7.461 1.861 16.066 1.861 24.83 0 26.848-6.362 52.211-17.654 74.664l0.435-0.957z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["amazon","online-shopping","ecommerce","products","retail"]},"attrs":[{}],"properties":{"order":240,"id":185,"name":"amazon","prevSize":24,"code":59836},"setIdx":0,"setId":1,"iconIdx":128},{"icon":{"paths":["M886.693 1024.275h-13.467c-160.026-17.856-304.577-71.747-429.374-153.346l3.746 2.3c-119.858-77.12-218.914-175.988-293.94-291.862l-2.302-3.793c-79.488-121.374-133.409-266.357-150.654-422.398l-0.396-4.402c-0.449-4.129-0.705-8.915-0.705-13.764 0-33.499 12.23-64.138 32.468-87.698l-0.148 0.178c22.748-27.565 55.792-45.921 93.167-49.141l0.507-0.035h152.22c68.811 0.070 125.838 50.433 136.308 116.306l0.101 0.786c6.186 45.698 17.046 86.978 32.301 126.063l-1.274-3.701c5.445 14.293 8.602 30.826 8.602 48.093 0 38.102-15.36 72.621-40.225 97.697l-35.702 35.702c57.148 89.292 131.053 162.822 217.85 217.845l2.869 1.699 35.713-35.126c25.068-24.854 59.584-40.214 97.686-40.214 17.267 0 33.797 3.154 49.045 8.917l-0.956-0.318c35.315 13.822 76.581 24.675 119.402 30.688l2.96 0.339c66.678 10.304 117.132 67.286 117.132 136.053 0 1.155-0.014 2.306-0.044 3.455l0.002-0.171v140.51c0 0 0 0.001 0 0.001 0 76.101-61.525 137.836-137.551 138.165h-0.032zM277.818 87.541h-139.923c-14.387 0.979-27.011 7.794-35.649 18.070l-0.063 0.079c-7.402 8.481-11.91 19.649-11.91 31.87 0 1.557 0.075 3.102 0.218 4.622l-0.015-0.194c15.36 145.534 63.692 277.249 137.347 391.045l-2.107-3.473c70.038 108.811 159.916 198.686 265.265 266.637l3.46 2.091c110.418 72.299 242.202 121.557 384.020 137.782l4.14 0.385c0.876 0.051 1.901 0.082 2.931 0.082 14.116 0 26.923-5.614 36.306-14.733l-0.013 0.013c8.993-9.216 14.563-21.807 14.638-35.698v-139.938c0.005-0.32 0.012-0.7 0.012-1.075 0-25.332-18.708-46.298-43.066-49.826l-0.272-0.033c-53.039-7.261-100.842-19.551-146.288-36.646l4.608 1.52c-5.299-2.044-11.429-3.227-17.839-3.227-13.78 0-26.284 5.472-35.452 14.364l0.014-0.013-58.546 58.546c-8.012 7.814-18.974 12.637-31.061 12.637-7.941 0-15.396-2.080-21.853-5.726l0.223 0.115c-125.62-71.885-227.060-173.136-297.132-294.748l-2.038-3.837c-3.709-6.254-5.9-13.781-5.9-21.824 0-12.079 4.944-23.005 12.918-30.863l58.55-58.55c8.886-8.986 14.38-21.346 14.38-34.991 0-6.364-1.195-12.447-3.371-18.038l0.116 0.338c-15.651-40.876-27.948-88.685-34.741-138.244l-0.385-3.437c-3.034-25.502-24.528-45.088-50.597-45.088-0.323 0-0.646 0.002-0.971 0.011l0.048-0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["phone","call","talk","voice","telephone"]},"attrs":[{}],"properties":{"order":227,"id":184,"name":"phone","prevSize":24,"code":59832},"setIdx":0,"setId":1,"iconIdx":129},{"icon":{"paths":["M1004.108 24.712c-7.747-14.706-22.886-24.587-40.341-24.696h-421.65c-24.95 0-45.175 20.226-45.175 45.175s20.226 45.175 45.175 45.175v0h331.285l-111.431 154.198c-5.421 7.322-8.676 16.532-8.676 26.503 0 24.752 20.065 44.816 44.816 44.816 14.78 0 27.892-7.156 36.054-18.191l0.086-0.121 165.641-225.875c5.688-7.337 9.117-16.671 9.117-26.809 0-7.369-1.813-14.314-5.016-20.415l0.116 0.241z","M310.219 13.266s0 0-3.011 0c-3.291-2.852-7.063-5.273-11.155-7.112l-0.289-0.116c-3.885-1.54-8.385-2.612-13.079-3l-0.172-0.011h-222.261c-17.471 0.11-32.609 9.989-40.237 24.446l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.174 0 10.136 3.43 19.472 9.191 26.909l-0.075-0.1 322.25 437.295v466.81c0.335 24.814 20.362 44.84 45.142 45.175h240.967c24.814-0.335 44.84-20.362 45.175-45.142v-466.843l3.614-5.421 220.455 218.045c8.085 8.184 19.307 13.251 31.713 13.251 0.073 0 0.148 0 0.222 0h-0.011c0.137 0.001 0.299 0.003 0.462 0.003 12.327 0 23.47-5.072 31.455-13.244l0.008-0.008c8.162-8.172 13.212-19.46 13.212-31.923s-5.048-23.751-13.212-31.925v0zM596.326 470.439c-5.634 7.174-9.035 16.335-9.035 26.291 0 0.075 0 0.15 0 0.224v-0.011 436.692h-150.584v-436.692c0-0.064 0-0.138 0-0.212 0-9.955-3.401-19.117-9.105-26.384l0.071 0.093-277.075-380.073h109.624l355.98 352.366z"],"attrs":[{},{}],"grid":16,"tags":["filter-slash","remove-filter","all-results","clear-filter"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":226,"id":183,"name":"filter-slash","prevSize":24,"code":59831},"setIdx":0,"setId":1,"iconIdx":130},{"icon":{"paths":["M1023.989 515.199c-3.553-280.043-231.4-505.695-511.951-505.695-282.764 0-511.989 229.225-511.989 511.989 0 254.507 185.702 465.641 428.999 505.297l2.953 0.397v-362.872h-127.997v-149.116h127.997v-113.278c-0.721-6.073-1.134-13.108-1.134-20.239 0-100.028 81.088-181.117 181.117-181.117 4.227 0 8.421 0.145 12.576 0.43l-0.561-0.031c40.895 0.576 80.479 4.278 119.075 10.879l-4.516-0.639v127.997h-63.999c-2.79-0.372-6.015-0.583-9.289-0.583-41 0-74.238 33.238-74.238 74.238 0 2.458 0.12 4.89 0.352 7.287l-0.024-0.304v96.638h142.077l-23.040 149.116h-118.397v358.392c246.274-40.033 432-251.177 432-505.702 0-1.084-0.003-2.169-0.010-3.253l0.001 0.166z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["facebook","social-network","friends","like","post"]},"attrs":[{}],"properties":{"order":223,"id":182,"name":"facebook","prevSize":24,"code":59828},"setIdx":0,"setId":1,"iconIdx":131},{"icon":{"paths":["M342.537 824.066c0 4.477-4.477 7.674-10.871 7.674s-11.511 0-11.511-7.674 5.115-7.674 10.871-7.674 11.511 3.197 11.511 7.674zM278.59 814.474c0 4.477 0 9.592 8.952 10.871 1.214 0.597 2.642 0.946 4.152 0.946 3.78 0 7.050-2.187 8.614-5.366l0.025-0.057c0-4.477 0-8.952-8.952-10.871s-11.511 0-12.789 4.477zM369.395 811.277c-5.755 0-9.592 5.115-8.952 10.232s5.755 7.034 12.151 5.755 9.592-5.755 8.952-10.232-5.755-6.395-12.151-5.755zM505.605 0.416c-1.401-0.013-3.056-0.022-4.712-0.022-276.536 0-500.713 224.177-500.713 500.713 0 5.405 0.085 10.79 0.256 16.152l-0.019-0.784c-0.043 2.548-0.069 5.556-0.069 8.569 0 228.113 144.076 422.574 346.195 497.35l3.671 1.189c26.218 4.477 35.81-12.151 35.81-25.58s0-85.69 0-127.896c0 0-144.523 31.974-175.218-63.949 0 0-23.021-63.949-56.913-77.378 0 0-47.321-33.253 3.197-32.614 34.33 4.756 63.049 25.238 79.017 53.815l0.277 0.541c18.278 35.272 54.506 58.959 96.268 58.959 20.145 0 39.003-5.513 55.146-15.109l-0.498 0.274c2.59-27.799 14.547-52.403 32.64-71.009l-0.027 0.027c-115.106-13.429-231.491-30.055-231.491-234.050-0.145-2.57-0.228-5.577-0.228-8.605 0-45.473 18.687-86.583 48.8-116.067l0.028-0.028c-6.646-19.325-10.482-41.593-10.482-64.756 0-28.316 5.734-55.295 16.103-79.836l-0.505 1.347c43.484-14.069 142.605 56.913 142.605 56.913 38.806-11.37 83.386-17.912 129.495-17.912s90.69 6.541 132.864 18.747l-3.369-0.835s99.119-70.982 142.605-56.913c10.054 23.11 15.902 50.029 15.902 78.316 0 23.246-3.951 45.569-11.215 66.335l0.429-1.407c32.709 30.551 53.097 73.938 53.097 122.086 0 0.919-0.007 1.836-0.022 2.75l0.001-0.138c0 204.633-121.502 220.621-236.608 234.050 20.129 22.501 32.432 52.369 32.432 85.111 0 3.805-0.166 7.572-0.492 11.293l0.034-0.483c0 71.622 0 159.871 0 177.137-0.001 0.076-0.001 0.166-0.001 0.258 0 14.833 12.025 26.858 26.858 26.858 3.209 0 6.287-0.564 9.141-1.596l-0.187 0.058c204.623-75.025 347.995-268.129 347.995-494.721 0-3.906-0.042-7.803-0.127-11.688l0.010 0.579c0.012-1.343 0.019-2.929 0.019-4.517 0-282.54-229.044-511.584-511.584-511.584-2.256 0-4.508 0.015-6.757 0.043l0.342-0.003zM201.213 730.062s0 7.034 0 10.871c1.389 1.394 3.312 2.257 5.436 2.257s4.047-0.863 5.436-2.257v0s0-7.034 0-11.511-8.314-1.918-10.871 0.64zM178.831 712.796s0 6.395 4.477 8.314c1.064 1.308 2.674 2.137 4.477 2.137s3.413-0.829 4.468-2.127l0.009-0.010s0-6.395-4.477-8.314-7.674-1.918-8.952 0zM242.778 788.256s0 8.952 0 13.429 10.871 5.115 13.429 0 0-8.952 0-13.429-8.314-3.197-10.871 0zM219.118 756.92s0 7.674 0 12.789 8.952 7.034 12.151 5.115c1.56-1.787 2.512-4.14 2.512-6.715s-0.952-4.928-2.522-6.727l0.010 0.012c-3.197-5.115-8.314-7.034-12.151-4.477z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["github","code","repository","developer","open-source"]},"attrs":[{}],"properties":{"order":222,"id":181,"name":"github","prevSize":24,"code":59829},"setIdx":0,"setId":1,"iconIdx":132},{"icon":{"paths":["M806.385 48h157.089l-343.111 393.062 403.637 534.942h-315.967l-247.656-324.357-283.035 324.357h-157.316l366.922-420.503-386.948-507.5h323.978l223.624 296.469 258.784-296.469zM751.199 881.861h87.003l-561.62-744.631h-93.455l568.072 744.631z"],"attrs":[{}],"grid":16,"tags":["twitter","social-media","tweet","bird","x"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":221,"id":180,"name":"twitter","prevSize":24,"code":59830},"setIdx":0,"setId":1,"iconIdx":133},{"icon":{"paths":["M795.402 3.99c-18.498-7.266-39.637-3.303-54.171 10.57l-443.93 443.93v-408.918c0-27.085-22.461-49.546-49.546-49.546s-49.546 22.461-49.546 49.546v924.854c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-408.918l443.93 443.93c9.248 9.248 22.461 14.534 35.012 14.534 6.607 0 12.552-1.321 19.157-3.964 18.498-7.927 30.389-25.764 30.389-45.582v-924.854c0-19.818-11.891-38.316-30.389-45.582zM726.699 854.857l-342.857-342.857 342.857-342.857v685.713z"],"attrs":[{}],"tags":["step-backward-alt","previous-step"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":211,"id":0,"name":"step-backward-alt","prevSize":24,"code":59820},"setIdx":0,"setId":1,"iconIdx":134},{"icon":{"paths":["M776.245 0.027c-27.085 0-49.546 22.461-49.546 49.546v408.918l-443.93-443.93c-13.873-13.873-35.673-18.498-54.171-10.57s-30.389 25.764-30.389 45.582v924.854c0 19.818 11.891 38.316 30.389 45.582 5.945 2.643 12.552 3.964 19.157 3.964 13.212 0 25.764-5.284 35.012-14.534l443.93-443.93v408.918c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-924.854c0-27.085-22.461-49.546-49.546-49.546zM297.301 854.857v-685.713l342.857 342.857-342.857 342.857z"],"attrs":[{}],"tags":["step-forward-alt","next-step"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":210,"id":1,"name":"step-forward-alt","prevSize":24,"code":59821},"setIdx":0,"setId":1,"iconIdx":135},{"icon":{"paths":["M1009.943 479.818l-437.090-409.59c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v366.875l-425.388-399.058c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v819.178c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l425.388-399.058v366.875c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l437.090-409.59c8.777-8.191 14.043-19.895 14.043-32.182s-5.266-23.99-14.043-32.182zM87.783 820.362v-616.725l328.842 308.362-328.842 308.362zM586.896 820.362v-616.725l328.842 308.362-328.842 308.362z"],"attrs":[{}],"tags":["forward","advance","proceed","next","move-on"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":259,"id":2,"name":"forward","prevSize":24,"code":59822},"setIdx":0,"setId":1,"iconIdx":136},{"icon":{"paths":["M997.655 62.036c-15.798-7.022-34.522-3.511-47.395 8.191l-425.388 399.058v-366.875c0-17.554-10.532-33.352-26.331-40.374s-34.522-3.511-47.395 8.191l-437.090 409.59c-8.777 8.191-14.043 19.895-14.043 32.182s5.266 23.99 14.043 32.182l437.090 409.59c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-366.875l425.388 399.058c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-819.178c0-17.554-10.532-33.352-26.331-40.374zM437.104 820.362l-328.842-308.362 328.842-308.362v616.725zM936.217 820.362l-328.842-308.362 328.842-308.362v616.725z"],"attrs":[{}],"tags":["backward","return","reverse","back","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":254,"id":3,"name":"backward","prevSize":24,"code":59823},"setIdx":0,"setId":1,"iconIdx":137},{"icon":{"paths":["M997.071 62.036c-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-17.554-10.532-33.938-26.916-40.374-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-23.99-19.895-43.885-43.885-43.885s-43.885 19.895-43.885 43.885v819.178c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-819.178c0-17.554-10.532-33.938-26.916-40.374zM468.115 815.681l-303.681-303.681 303.681-303.681v607.362zM936.217 815.681l-303.681-303.681 303.681-303.681v607.362z"],"attrs":[{}],"tags":["fast-backward","previous","speed","quick","past"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":207,"id":4,"name":"fast-backward","prevSize":24,"code":59824},"setIdx":0,"setId":1,"iconIdx":138},{"icon":{"paths":["M980.102 58.526c-23.99 0-43.885 19.895-43.885 43.885v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v819.178c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-819.178c0-23.99-19.895-43.885-43.885-43.885zM87.783 815.681v-607.362l303.681 303.681-303.681 303.681zM555.885 815.681v-607.362l303.681 303.681-303.681 303.681z"],"attrs":[{}],"tags":["fast-forward","next","speed","quick","future"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":206,"id":5,"name":"fast-forward","prevSize":24,"code":59825},"setIdx":0,"setId":1,"iconIdx":139},{"icon":{"paths":["M313.813 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z","M710.187 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["pause","stop","wait","halt","break"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":205,"id":6,"name":"pause","prevSize":24,"code":59826},"setIdx":0,"setId":1,"iconIdx":140},{"icon":{"paths":["M280.358 1024.923c-6.942-0.037-13.534-1.495-19.514-4.095l0.321 0.124c-18.014-7.505-30.445-24.968-30.445-45.335 0-0.116 0-0.233 0.002-0.349v0.019-926.568c1.044-26.589 22.852-47.75 49.602-47.75 12.752 0 24.381 4.809 33.173 12.712l-0.045-0.040 463.285 463.285c8.969 8.98 14.517 21.381 14.517 35.077s-5.547 26.097-14.517 35.078v0l-463.285 463.285c-8.576 8.44-20.14 13.868-32.964 14.555l-0.127 0.006zM329.996 168.508v686.985l343.492-343.492z"],"attrs":[{}],"tags":["play","start","go","run","action"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":204,"id":7,"name":"play","prevSize":24,"code":59827},"setIdx":0,"setId":1,"iconIdx":141},{"icon":{"paths":["M736.143 262.827l-277.617 113.777c-38.623 15.541-68.655 45.573-83.837 83.191l-0.359 1.004-113.777 277.617c-0.848 2.097-1.341 4.529-1.341 7.076 0 8.091 4.968 15.023 12.020 17.908l0.129 0.047c2.113 0.807 4.557 1.275 7.111 1.275s4.997-0.467 7.252-1.321l-0.141 0.047 277.617-113.777c38.623-15.541 68.655-45.573 83.837-83.191l0.359-1.004 113.777-277.617c0.848-2.097 1.341-4.529 1.341-7.076 0-8.091-4.968-15.023-12.020-17.908l-0.129-0.047c-2.113-0.807-4.557-1.275-7.111-1.275s-4.997 0.467-7.252 1.321l0.141-0.047zM512 568.889c-31.419 0-56.889-25.471-56.889-56.889s25.471-56.889 56.889-56.889c31.419 0 56.889 25.471 56.889 56.889v0c0 31.419-25.471 56.889-56.889 56.889v0z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{}],"tags":["compass","navigation","direction","explorer","pathfinder"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":203,"id":8,"name":"compass","prevSize":24,"code":59819},"setIdx":0,"setId":1,"iconIdx":142},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-585.157c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v585.157c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM102.412 204.809c-8.079 0-14.629 6.55-14.629 14.629v0 585.126c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-585.126c0-8.079-6.55-14.629-14.629-14.629v0z","M336.462 497.371c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0zM336.462 351.091c-16.158 0-29.256 13.098-29.256 29.256s13.098 29.256 29.256 29.256c16.158 0 29.256-13.098 29.256-29.256v0c0-16.158-13.098-29.256-29.256-29.256v0z","M512 731.422c-24.105-0.325-43.559-19.78-43.884-43.853v-0.032c0-39.788-9.947-73.14-131.653-73.14s-131.653 33.352-131.653 73.14c0 24.237-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0c0-160.909 165.005-160.909 219.422-160.909s219.422 0 219.422 160.909c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032z","M804.562 438.86h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M746.051 614.397h-117.025c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h117.025c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{},{}],"tags":["id-card","identification","personal-info","identity","proof"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":202,"id":9,"name":"id-card","prevSize":24,"code":59818},"setIdx":0,"setId":1,"iconIdx":143},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-146.313c0.325-24.105 19.78-43.559 43.853-43.884h0.032c56.552 0 102.397-45.844 102.397-102.397s-45.844-102.397-102.397-102.397v0c-24.105-0.325-43.559-19.78-43.884-43.853v-146.313c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v146.313c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032c-56.552 0-102.397 45.844-102.397 102.397s45.844 102.397 102.397 102.397v0c24.105 0.325 43.559 19.78 43.884 43.853v146.313c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM87.785 696.9v107.664c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-107.664c-84.233-20.753-145.724-95.646-145.724-184.9s61.489-164.147 144.417-184.627l1.306-0.273v-107.664c0-8.079-6.55-14.629-14.629-14.629v0h-819.175c-8.079 0-14.629 6.55-14.629 14.629v0 107.664c84.233 20.753 145.724 95.646 145.724 184.9s-61.489 164.147-144.417 184.627l-1.306 0.273z"],"attrs":[{}],"tags":["ticket","pass","entry","admit","voucher"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":201,"id":10,"name":"ticket","prevSize":24,"code":59817},"setIdx":0,"setId":1,"iconIdx":144},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file-o","deprecate","document","draft"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":200,"id":11,"name":"file-o","prevSize":24,"code":59816},"setIdx":0,"setId":1,"iconIdx":145},{"icon":{"paths":["M680.456 749.159c-0.386 0.011-0.839 0.017-1.294 0.017-27.363 0-49.546-22.183-49.546-49.546 0-13.679 5.543-26.064 14.506-35.029v0l258.959-256.978-258.959-256.978c-8.952-8.963-14.491-21.342-14.491-35.012s5.537-26.049 14.491-35.013v0c8.963-8.952 21.342-14.491 35.012-14.491s26.049 5.537 35.013 14.491v0l294.632 291.991c8.952 8.963 14.491 21.342 14.491 35.012s-5.537 26.049-14.491 35.013v0l-294.632 291.991c-8.452 8.957-20.405 14.534-33.659 14.534-0.011 0-0.023 0-0.034 0h0.002z","M49.571 957.913c-27.215-0.367-49.179-22.331-49.546-49.51v-500.779c0.367-27.215 22.331-49.179 49.51-49.546h924.892c27.363 0 49.546 22.183 49.546 49.546s-22.183 49.546-49.546 49.546v0h-875.31v451.197c-0.367 27.215-22.331 49.179-49.51 49.546h-0.036z"],"attrs":[{},{}],"tags":["reply","respond","answer","comment-back","feedback"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":199,"id":12,"name":"reply","prevSize":24,"code":59815},"setIdx":0,"setId":1,"iconIdx":146},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M441.707 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-121.77-121.77c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l121.767-122.873c7.51-7.501 17.881-12.141 29.334-12.141s21.825 4.639 29.335 12.141v0c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0l-94.092 92.985 94.092 92.985c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M705.718 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-110.726h-345.927c-22.926 0-41.511-18.585-41.511-41.511s18.585-41.511 41.511-41.511v0h387.438c22.801 0.307 41.204 18.71 41.511 41.481v154.451c-1.483 21.852-19.449 39.046-41.487 39.297h-0.025z"],"attrs":[{},{},{}],"tags":["directions-alt","route","navigation","path","guide","left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":195,"id":13,"name":"directions-alt","prevSize":24,"code":59813},"setIdx":0,"setId":1,"iconIdx":147},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M582.293 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-0.004-0.004c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l94.092-92.985-94.092-92.985c-8.139-7.599-13.212-18.392-13.212-30.371 0-22.926 18.585-41.511 41.511-41.511 11.979 0 22.771 5.073 30.347 13.188l0.022 0.025 121.767 122.319c7.668 7.537 12.42 18.020 12.42 29.612s-4.752 22.075-12.413 29.605l-0.006 0.005-121.767 121.767c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M318.282 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-154.451c0.307-22.801 18.71-41.204 41.481-41.511h387.468c22.926 0 41.511 18.585 41.511 41.511s-18.585 41.511-41.511 41.511v0h-345.927v110.696c0.021 0.497 0.032 1.078 0.032 1.663 0 23.049-18.537 41.768-41.516 42.061h-0.027z"],"attrs":[{},{},{}],"tags":["directions","route","navigation","path","guide","right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":196,"id":14,"name":"directions","prevSize":24,"code":59814},"setIdx":0,"setId":1,"iconIdx":148},{"icon":{"paths":["M992.966 368.647c-25.16-29.841-61.437-46.809-100.641-46.809h-235.803v-160.907c0-88.937-71.969-160.907-165.589-160.907-40.959 0-77.821 24.575-94.203 62.607l-148.619 346.974h-109.417c-76.65 0-138.673 62.023-138.673 138.673v337.613c0 76.066 62.607 138.087 138.673 138.087h676.396c63.778 0 118.194-45.639 129.31-108.832l77.235-438.838c6.436-38.618-4.096-77.821-29.255-107.662zM138.696 936.209c-28.086 0-50.905-22.82-50.905-50.32v-337.613c0-28.086 22.82-50.905 50.905-50.905h94.203v438.838h-94.203zM858.39 899.933c-3.511 21.064-21.65 36.277-43.298 36.277h-493.839v-473.945l156.226-365.699c2.341-5.266 7.607-9.362 18.723-9.362 40.373 0 72.555 32.766 72.555 73.139v248.674h323.57c13.457 0 25.16 5.266 33.352 15.213s11.702 22.82 9.362 36.277l-77.235 438.838z"],"attrs":[{}],"tags":["thumbs-up","like","positive","agree","good"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":191,"id":15,"name":"thumbs-up","prevSize":24,"code":59811},"setIdx":0,"setId":1,"iconIdx":149},{"icon":{"paths":["M885.271 0.068h-676.92c-63.773 0-118.184 45.635-129.299 108.822l-76.643 438.799c-6.435 38.614 4.096 77.814 28.669 107.652 25.158 29.838 61.432 46.805 100.632 46.805h235.782v160.892c0 88.929 71.963 160.892 165.574 160.892 40.955 0 77.814-24.573 94.195-62.602l148.606-346.943h109.992c76.643 0 138.66-62.017 138.66-138.66v-337.583c0-76.059-62.017-138.075-138.66-138.075zM702.731 561.731l-156.212 365.666c-2.341 5.266-7.606 9.361-18.722 9.361-40.369 0-72.549-32.763-72.549-73.133v-248.652h-323.541c-13.456 0-25.158-5.266-33.349-15.211-8.776-9.946-11.701-22.818-9.361-36.274l76.643-438.799c3.51-21.062 21.648-36.274 43.294-36.274h493.795v473.317zM936.172 475.726c0 28.083-22.818 50.901-50.901 50.901h-94.195v-438.799h94.195c28.083 0 50.901 22.818 50.901 50.315v337.583z"],"attrs":[{}],"tags":["thumbs-down","dislike","negative","disagree","bad"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":258,"id":16,"name":"thumbs-down","prevSize":24,"code":59812},"setIdx":0,"setId":1,"iconIdx":150},{"icon":{"paths":["M410.934 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 12.551-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M842.942 569.469c-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s43.597 32.368 67.377 19.156l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606z","M809.253 33.093c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 181.719c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":255,"id":17,"name":"sort-numeric-down-alt","prevSize":24,"code":59798},"setIdx":0,"setId":1,"iconIdx":151},{"icon":{"paths":["M315.813 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M842.942 569.469c-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s43.597 32.368 67.377 19.156l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606z","M809.253 33.093c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 181.719c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":182,"id":18,"name":"sort-numeric-up-alt","prevSize":24,"code":59799},"setIdx":0,"setId":1,"iconIdx":152},{"icon":{"paths":["M394.419 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 12.551-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M971.751 924.852l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414s54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414zM761.031 807.932l31.707-88.515 31.707 88.515h-63.414z","M632.883 415.558c12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515z"],"attrs":[{},{},{}],"tags":["sort-alpha-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":183,"id":19,"name":"sort-alpha-down-alt","prevSize":24,"code":59800},"setIdx":0,"setId":1,"iconIdx":153},{"icon":{"paths":["M299.298 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M971.751 924.852l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414s54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414zM761.031 807.932l31.707-88.515 31.707 88.515h-63.414z","M632.883 415.558c12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515z"],"attrs":[{},{},{}],"tags":["sort-alpha-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":184,"id":20,"name":"sort-alpha-up-alt","prevSize":24,"code":59801},"setIdx":0,"setId":1,"iconIdx":154},{"icon":{"paths":["M410.934 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M766.977 159.26l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s42.936 32.368 67.377 19.156z","M809.253 561.542c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 710.169c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":185,"id":21,"name":"sort-numeric-down","prevSize":24,"code":59802},"setIdx":0,"setId":1,"iconIdx":155},{"icon":{"paths":["M315.813 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M766.977 159.26l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s42.936 32.368 67.377 19.156z","M809.253 561.542c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 710.169c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":186,"id":22,"name":"sort-numeric-up","prevSize":24,"code":59803},"setIdx":0,"setId":1,"iconIdx":156},{"icon":{"paths":["M394.419 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M644.112 459.815c25.762 9.247 54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414zM824.445 279.482h-63.414l31.707-88.515 31.707 88.515z","M952.596 608.442c-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515 12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176z"],"attrs":[{},{},{}],"tags":["sort-alpha-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":187,"id":23,"name":"sort-alpha-down","prevSize":24,"code":59804},"setIdx":0,"setId":1,"iconIdx":157},{"icon":{"paths":["M299.298 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M644.112 459.815c25.762 9.247 54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414zM824.445 279.482h-63.414l31.707-88.515 31.707 88.515z","M952.596 608.442c-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515 12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176z"],"attrs":[{},{},{}],"tags":["sort-alpha-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":188,"id":24,"name":"sort-alpha-up","prevSize":24,"code":59805},"setIdx":0,"setId":1,"iconIdx":158},{"icon":{"paths":["M412.908 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M247.755 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M776.245 1023.975c-12.552 0-25.103-4.625-35.012-14.534l-165.154-165.154c-19.157-19.157-19.157-50.867 0-70.025s50.867-19.157 70.025 0l130.14 130.14 130.14-130.14c19.157-19.157 50.867-19.157 70.025 0s19.157 50.867 0 70.025l-165.154 165.154c-9.909 9.909-22.461 14.534-35.012 14.534z","M776.245 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z"],"attrs":[{},{},{},{}],"tags":["sort-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":189,"id":25,"name":"sort-alt","prevSize":24,"code":59806},"setIdx":0,"setId":1,"iconIdx":159},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":190,"id":26,"name":"sort-amount-up","prevSize":24,"code":59807},"setIdx":0,"setId":1,"iconIdx":160},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":180,"id":27,"name":"sort-amount-down","prevSize":24,"code":59808},"setIdx":0,"setId":1,"iconIdx":161},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":179,"id":28,"name":"sort-amount-down-alt","prevSize":24,"code":59809},"setIdx":0,"setId":1,"iconIdx":162},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":178,"id":29,"name":"sort-amount-up-alt","prevSize":24,"code":59810},"setIdx":0,"setId":1,"iconIdx":163},{"icon":{"paths":["M516.624 0.063s-4.624 0-7.266 0c-250.354 0-468.339 184.297-507.973 432.008-5.284 33.028 3.963 67.377 26.423 93.139 21.799 25.762 52.844 40.295 85.874 40.295h3.963c114.938 0 201.471 28.405 256.958 83.892 56.148 56.148 83.892 144.002 83.231 260.922 0 33.028 14.533 64.075 39.634 85.874 21.137 18.496 48.222 28.405 75.304 27.744 5.945 0 11.89 0 17.835-1.321 250.354-40.295 435.971-261.583 432.669-515.239-3.963-275.455-231.196-503.349-507.312-507.312zM575.414 924.852c-3.963 0-9.247-0.661-13.211-3.963-1.982-1.982-5.284-5.284-5.284-9.908 0.661-144.663-36.991-256.299-112.295-331.603-74.643-74.643-184.958-112.956-326.978-112.956h-3.963c-5.284 0-8.588-3.302-10.57-5.284-1.321-1.982-5.284-6.606-3.963-13.211 32.368-199.489 208.077-348.777 410.209-348.777 1.982 0 3.963 0 5.945 0v0c218.647 3.302 406.246 190.242 409.548 409.548 2.643 204.775-147.306 383.786-348.777 416.154zM375.925 315.152c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM575.414 231.921c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM642.13 315.152c0-36.331 29.725-66.716 66.716-66.716s66.716 29.725 66.716 66.716-29.725 66.716-66.716 66.716-66.716-29.725-66.716-66.716zM858.134 514.643c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM774.903 714.132c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716z"],"attrs":[{}],"tags":["palette","colors","design","art","creative"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":257,"id":30,"name":"palette","prevSize":24,"code":59797},"setIdx":0,"setId":1,"iconIdx":164},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["undo","revert","back","cancel","reverse"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":256,"id":31,"name":"undo","prevSize":24,"code":59796},"setIdx":0,"setId":1,"iconIdx":165},{"icon":{"paths":["M921.582 789.931h-819.163c-56.418-0.33-102.065-45.976-102.396-102.364v-585.149c0.33-56.418 45.976-102.065 102.364-102.396h819.194c56.418 0.33 102.065 45.976 102.396 102.364v585.149c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 87.791c-8.079 0-14.628 6.55-14.628 14.628v0 585.117c0 8.079 6.55 14.628 14.628 14.628v0h819.163c8.079 0 14.628-6.55 14.628-14.628v0-585.117c0-8.079-6.55-14.628-14.628-14.628v0z","M687.535 1023.977h-175.535c-24.105-0.325-43.559-19.779-43.884-43.852v-234.079c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 190.163h131.651c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M512 1023.977h-175.535c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.535c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["desktop","computer","monitor","pc","screen"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":175,"id":32,"name":"desktop","prevSize":24,"code":59795},"setIdx":0,"setId":1,"iconIdx":166},{"icon":{"paths":["M809.27 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M809.27 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M908.36 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M214.73 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M214.73 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M313.82 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M512 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M512 693.665c-27.214-0.367-49.178-22.331-49.545-49.509v-594.576c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 594.541c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M611.090 693.665h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-v","controls","adjustments","sliders","settings"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":174,"id":33,"name":"sliders-v","prevSize":24,"code":59793},"setIdx":0,"setId":1,"iconIdx":167},{"icon":{"paths":["M974.421 264.275h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 264.275h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 363.365c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 858.815h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 858.815h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 957.906c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 561.545h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 561.545h-594.541c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h594.541c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 660.635c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-h","controls","adjustments","sliders","settings"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":173,"id":34,"name":"sliders-h","prevSize":24,"code":59794},"setIdx":0,"setId":1,"iconIdx":168},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M438.902 628.957c-24.091-0.325-43.534-19.768-43.859-43.827v-292.424c0-24.222 19.636-43.859 43.859-43.859s43.859 19.636 43.859 43.859v0 292.393c-0.325 24.091-19.768 43.534-43.827 43.859h-0.032z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{},{}],"tags":["search-plus","increase-search","more-search","wide-filter","expand-search"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":172,"id":35,"name":"search-plus","prevSize":24,"code":59791},"setIdx":0,"setId":1,"iconIdx":169},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c-0.332 243.061-197.282 440.011-440.311 440.344h-0.033zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{}],"tags":["search-minus","reduce-search","less-results","narrow-filter","restrict-search"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":171,"id":36,"name":"search-minus","prevSize":24,"code":59792},"setIdx":0,"setId":1,"iconIdx":170},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M656.524 506.734c-7.496-5.775-17.020-9.255-27.356-9.255-13.907 0-26.344 6.301-34.608 16.205l-0.059 0.071-82.501 103.566-82.501-105.321c-8.353-9.812-20.716-15.996-34.521-15.996-24.992 0-45.251 20.259-45.251 45.251 0 11.185 4.058 21.422 10.782 29.32l-0.053-0.064 93.034 117.023-93.034 117.023c-5.992 7.47-9.615 17.061-9.615 27.5 0 24.376 19.76 44.136 44.136 44.136 13.937 0 26.366-6.461 34.454-16.55l0.067-0.086 82.501-101.81 82.501 105.321c8.276 9.979 20.653 16.31 34.509 16.384h0.012c1.085 0.096 2.348 0.149 3.622 0.149 24.236 0 43.884-19.648 43.884-43.884 0-12.183-4.964-23.206-12.981-31.157l-0.003-0.003-93.034-117.023 95.374-117.023c5.757-7.489 9.225-16.998 9.225-27.316 0-14.937-7.268-28.175-18.461-36.373l-0.126-0.088z"],"attrs":[{},{}],"tags":["file-excel","spreadsheet","workbook","xls","microsoft"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":170,"id":37,"name":"file-excel","prevSize":24,"code":59790},"setIdx":0,"setId":1,"iconIdx":171},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M599.182 678.758c-35.612-22.599-62.527-56.14-76.26-95.834l-0.389-1.295c8.513-24.598 13.428-52.947 13.428-82.444 0-12.194-0.841-24.192-2.466-35.938l0.154 1.359c-3.892-22.255-23.068-38.954-46.145-38.954-18.984 0-35.328 11.301-42.673 27.543l-0.119 0.295c-1.82 12.259-2.859 26.407-2.859 40.798 0 35.745 6.41 69.992 18.145 101.654l-0.657-2.026c-26.663 62.22-51.535 112.192-78.718 160.691l4.409-8.561c-41.543 23.405-98.3 58.512-107.076 98.885-7.021 32.766 54.416 117.023 159.151-65.534 38.752-15.060 86.483-29.549 135.472-40.728l7.296-1.4c33.675 19.598 73.544 32.44 116.101 35.636l0.922 0.056c0.37 0.010 0.806 0.016 1.244 0.016 26.499 0 47.98-21.481 47.98-47.98 0-12.689-4.926-24.228-12.97-32.809l0.025 0.026c-24.575-25.16-97.714-18.139-133.992-13.457zM319.497 854.293c16.89-28.581 38.169-52.658 63.208-72.128l0.569-0.426c-39.787 63.193-63.778 74.31-63.778 73.139zM490.35 455.829c15.213 0 14.043 67.289 3.511 85.427-4.439-14.87-6.994-31.954-6.994-49.637 0-12.459 1.269-24.62 3.683-36.365l-0.199 1.16zM439.445 741.365c17.504-31.081 34.829-68.095 49.5-106.424l1.99-5.919c15.998 29.397 37.215 53.976 62.634 73.317l0.558 0.407c-44.504 11.253-82.688 24.668-119.265 41.035l4.582-1.832zM714.451 730.833s-10.532 12.873-77.821-16.384c73.139-4.68 85.427 12.287 77.821 16.968z"],"attrs":[{},{}],"tags":["file-pdf","document","adobe","read","acrobat"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":169,"id":38,"name":"file-pdf","prevSize":24,"code":59789},"setIdx":0,"setId":1,"iconIdx":172},{"icon":{"paths":["M863.086 1024h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h518.437c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-518.437c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-451.145c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 451.145c0 88.87-72.044 160.914-160.914 160.914v0z","M424.229 702.172c-11.709-0.922-21.992-6.372-29.216-14.581l-0.041-0.048-175.543-175.543c-2.703-5.532-4.284-12.038-4.284-18.913 0-24.237 19.648-43.886 43.886-43.886 6.875 0 13.381 1.581 19.174 4.4l-0.261-0.114 144.531 144.531 499.127-495.616c5.532-2.703 12.038-4.284 18.913-4.284 24.237 0 43.886 19.648 43.886 43.886 0 6.875-1.581 13.381-4.4 19.174l0.114-0.261-526.629 526.629c-7.264 8.256-17.547 13.707-29.107 14.619l-0.151 0.010z"],"attrs":[{},{}],"tags":["check-square","confirm","agree","approved","accepted"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":168,"id":39,"name":"check-square","prevSize":24,"code":59788},"setIdx":0,"setId":1,"iconIdx":173},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M636.121 682.666c-0.064 0-0.141 0-0.217 0-12.783 0-24.345-5.222-32.671-13.649l-153.295-153.295-153.29 153.29c-8.289 7.74-19.456 12.492-31.731 12.492-25.706 0-46.545-20.839-46.545-46.545 0-12.276 4.752-23.441 12.518-31.759l-0.025 0.028 186.182-186.182c8.42-8.41 20.049-13.613 32.892-13.613s24.471 5.201 32.893 13.613v0l153.29 153.29 215.35-215.35c8.289-7.74 19.456-12.492 31.731-12.492 25.706 0 46.545 20.839 46.545 46.545 0 12.276-4.752 23.441-12.518 31.759l0.025-0.028-248.243 248.243c-8.33 8.432-19.892 13.654-32.675 13.654-0.076 0-0.153 0-0.228 0h0.012z","M915.393 626.192c-25.567-0.345-46.201-20.979-46.545-46.512v-176.285h-170.666c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h217.212c25.567 0.345 46.201 20.979 46.545 46.512v222.831c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["chart-line","growth","increase","stats","trend"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":167,"id":40,"name":"chart-line","prevSize":24,"code":59787},"setIdx":0,"setId":1,"iconIdx":174},{"icon":{"paths":["M431.778 504.757c-115.379 0-208.912-93.532-208.912-208.912s93.532-208.912 208.912-208.912c115.379 0 208.912 93.532 208.912 208.912v0c-0.316 115.251-93.66 208.596-208.881 208.912h-0.030zM431.778 170.499c-69.227 0-125.347 56.12-125.347 125.347s56.12 125.347 125.347 125.347c69.227 0 125.347-56.12 125.347-125.347v0c0-69.227-56.12-125.347-125.347-125.347v0z","M41.809 894.726c-23.076 0-41.782-18.707-41.782-41.782v0c0-264.622 302.504-264.622 431.751-264.622 40.111 0 75.766 0 108.076 3.9 21.638 1.734 38.542 19.721 38.542 41.657 0 1.025-0.037 2.041-0.11 3.046l0.008-0.134c-2.011 21.692-20.122 38.543-42.169 38.543-1.041 0-2.072-0.038-3.093-0.111l0.137 0.008c-30.083 0-63.509-3.343-101.391-3.343-288.576 0-348.186 72.423-348.186 181.057 0.003 0.167 0.004 0.364 0.004 0.561 0 22.767-18.457 41.225-41.225 41.225-0.197 0-0.394-0.001-0.59-0.004h0.030z","M549.326 937.066c-11.533-0.010-21.972-4.693-29.526-12.255v0c-7.671-7.32-12.439-17.622-12.439-29.037 0-1.349 0.067-2.683 0.197-3.998l-0.013 0.166 8.914-106.963c0.738-10.242 5.062-19.352 11.708-26.194l-0.009 0.010 307.518-307.518c20.408-18.948 47.843-30.576 77.993-30.576s57.585 11.627 78.066 30.642l-0.072-0.067c19.978 20.131 32.325 47.862 32.325 78.475 0 0.614-0.005 1.227-0.014 1.838l0.001-0.093c0.008 0.488 0.013 1.065 0.013 1.643 0 28.208-11.272 53.784-29.557 72.47l-307.499 307.499c-6.609 6.771-15.516 11.272-25.457 12.242l-0.17 0.013-108.076 10.028zM657.402 885.256v0zM598.35 806.705l-3.343 42.34 43.454-3.9 296.932-296.932c3.138-3.741 5.043-8.607 5.043-13.917 0-0.396-0.010-0.789-0.031-1.178l0.003 0.055c-0.022-8.097-2.969-15.5-7.838-21.216l0.038 0.046c-5.22-3.914-11.806-6.267-18.942-6.267s-13.722 2.354-19.024 6.327l0.082-0.059z"],"attrs":[{},{},{}],"tags":["user-edit","change-profile","user-modification","edit-user","update-details"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":166,"id":41,"name":"user-edit","prevSize":24,"code":59786},"setIdx":0,"setId":1,"iconIdx":175},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 568.889c-23.436-0.316-42.351-19.231-42.667-42.636v-199.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 199.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 739.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["exclamation-circle","important","attention","alert","warning"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":165,"id":42,"name":"exclamation-circle","prevSize":24,"code":59785},"setIdx":0,"setId":1,"iconIdx":176},{"icon":{"paths":["M897.818 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M126.182 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M229.321 342.011v407.465c0 37.624 30.5 68.122 68.122 68.122v0h43.293v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0 0-144.522h103.139v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-144.522h43.293c37.624 0 68.122-30.5 68.122-68.122v0-407.465z","M787.039 257.334c-19.494-64.041-60.923-116.427-115.35-149.595l-1.159-0.657-9.55-5.73-10.187-5.093 11.46-19.737 33.743-63.667c0.321-0.883 0.507-1.901 0.507-2.963 0-2.96-1.443-5.584-3.665-7.206l-0.025-0.018h-4.457c-3.404 0.157-6.379 1.864-8.255 4.426l-0.021 0.030-34.38 59.21-10.823 19.737-10.187-4.457-10.823-3.82c-30.354-10.882-65.375-17.173-101.867-17.173s-71.511 6.291-104.038 17.846l2.171-0.673-10.187 3.82-10.823 4.457-10.823-19.737-34.38-63.667c-1.592-2.804-4.559-4.665-7.958-4.665-5.038 0-9.122 4.084-9.122 9.122 0 1.637 0.431 3.174 1.186 4.502l-0.024-0.045 33.743 63.667 11.46 19.737-10.187 5.093-9.55 5.73c-55.806 33.938-97.174 86.897-115.417 149.695l-0.455 1.831c-4.717 15.122-7.703 32.57-8.27 50.627l-0.007 0.307h565.357c-0.686-18.4-3.432-35.851-8.017-52.541l0.378 1.609zM384.668 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0zM639.332 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0z"],"attrs":[{},{},{},{}],"tags":["android","mobile","os","tech","robot","system"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":164,"id":43,"name":"android","prevSize":24,"code":59781},"setIdx":0,"setId":1,"iconIdx":177},{"icon":{"paths":["M1008.591 433.288l-5.759-22.397h-476.114v202.221h284.773c-32.683 123.892-143.735 213.758-275.775 213.758-1.138 0-2.275-0.006-3.409-0.019l0.172 0.001c-86.669-0.738-165.327-34.432-224.185-89.141l0.207 0.19c-58.421-57.606-94.785-137.451-95.35-225.791v-0.106c1.039-88.017 36.49-167.558 93.495-225.963l-0.064 0.066c57.221-54.292 134.738-87.683 220.053-87.683 0.93 0 1.86 0.004 2.788 0.012l-0.142-0.001c73.95 0.586 141.235 28.652 192.25 74.471l-0.268-0.238 140.787-144.626c-88.734-79.432-206.552-127.99-335.711-127.99-0.54 0-1.080 0.001-1.62 0.003h0.084c-0.919-0.006-2.007-0.009-3.094-0.009-142.761 0-272.106 57.428-366.198 150.443l0.049-0.049c-90.236 93.627-145.825 221.183-145.825 361.724 0 137.597 53.284 262.749 140.344 355.947l-0.279-0.301c96.859 96.51 230.481 156.177 378.041 156.177 2.082 0 4.162-0.012 6.238-0.036l-0.316 0.003c1.053 0.009 2.296 0.013 3.543 0.013 134.433 0 255.872-55.642 342.541-145.151l0.123-0.127c82.61-90.584 133.206-211.608 133.206-344.45 0-3.543-0.036-7.076-0.108-10.602l0.009 0.526c0.105-4.284 0.163-9.328 0.163-14.387 0-26.957-1.687-53.521-4.962-79.591l0.318 3.106z"],"attrs":[{}],"tags":["google","search","brand","technology","internet"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":163,"id":44,"name":"google","prevSize":24,"code":59782},"setIdx":0,"setId":1,"iconIdx":178},{"icon":{"paths":["M800.988 541.411c-0.025-1.227-0.040-2.673-0.040-4.124 0-81.14 45.665-151.616 112.697-187.127l1.149-0.554c-43.688-60.224-112.883-99.642-191.399-102.285l-0.408-0.010c-81.199-6.394-169.43 47.312-202.037 47.312s-113.166-44.755-174.544-44.755c-127.87 0-262.775 101.657-262.775 304.332 0.671 66.632 12.562 130.276 33.869 189.424l-1.262-4.011c28.131 81.837 133.625 287.070 243.594 283.874 57.542 0 98.461-40.919 173.266-40.919s109.97 40.919 174.544 40.919c110.608 0 206.511-188.61 234.004-272.365-83.223-34.69-140.659-115.384-140.659-209.49 0-0.076 0-0.154 0-0.231v0.012zM673.117 166.109c33.682-37.846 54.259-88 54.259-142.959 0-7.972-0.433-15.844-1.277-23.592l0.085 0.959c-61.9 6.974-115.875 36.341-154.514 79.679l-0.211 0.24c-37.077 39.007-59.884 91.883-59.884 150.086 0 4.782 0.154 9.526 0.457 14.231l-0.033-0.641c1.605 0.048 3.493 0.075 5.387 0.075 63.128 0 119.134-30.497 154.087-77.563l0.366-0.514z"],"attrs":[{}],"tags":["apple","brand","computer","technology","mac"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":162,"id":45,"name":"apple","prevSize":24,"code":59783},"setIdx":0,"setId":1,"iconIdx":179},{"icon":{"paths":["M0.001 0.001h480v480h-480zM543.999 0.001h480v480h-480zM0.001 543.999h480v480h-480zM543.999 543.999h480v480h-480z"],"attrs":[{}],"tags":["microsoft","brand","computer","technology","windows"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":161,"id":46,"name":"microsoft","prevSize":24,"code":59784},"setIdx":0,"setId":1,"iconIdx":180},{"icon":{"paths":["M512 966.541c-12.142-0.011-23.132-4.94-31.084-12.902v0l-397.063-398.237c-51.836-52.853-83.828-125.328-83.828-205.276s31.993-152.425 83.874-205.324l-0.045 0.047c52.537-52.531 125.112-85.022 205.276-85.022s152.739 32.491 205.277 85.023v0l17.595 15.249 16.423-16.423c52.328-52.883 124.914-85.631 205.15-85.631 0.25 0 0.502 0 0.752 0.001h-0.038c0.384-0.001 0.839-0.003 1.294-0.003 79.947 0 152.3 32.511 204.559 85.034l0.012 0.012c51.836 52.853 83.828 125.328 83.828 205.276s-31.993 152.425-83.874 205.324l0.045-0.047-397.063 398.237c-7.714 8.616-18.706 14.16-30.998 14.66l-0.087 0.003zM289.714 145.434c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l0.010-0.010c-36.735 36.902-59.445 87.793-59.445 143.987s22.71 107.086 59.452 143.994l-0.007-0.007 365.979 368.325 365.392-367.151c36.877-36.837 59.687-87.747 59.687-143.987s-22.81-107.15-59.686-143.985l-0.001-0.001c-36.111-36.238-86.066-58.659-141.257-58.659-0.65 0-1.3 0.003-1.949 0.010l0.099-0.001c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l-47.497 47.497c-8.080 7.677-19.030 12.4-31.084 12.4s-23.006-4.723-31.104-12.418l0.019 0.018-47.507-47.507c-36.581-36.947-87.314-59.823-143.391-59.823-0.107 0-0.213 0-0.32 0h0.016z"],"attrs":[{}],"tags":["heart","love","like","affection","favorite"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":160,"id":47,"name":"heart","prevSize":24,"code":59780},"setIdx":0,"setId":1,"iconIdx":181},{"icon":{"paths":["M746.047 0.023h-468.093c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h468.125c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM760.674 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-468.093c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h468.093c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["mobile","phone","device","smartphone","cellphone"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":159,"id":48,"name":"mobile","prevSize":24,"code":59778},"setIdx":0,"setId":1,"iconIdx":182},{"icon":{"paths":["M863.070 0.023h-702.14c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h702.172c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM877.699 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-702.14c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h702.14c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["tablet","device","tech","screen","mobile"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":220,"id":49,"name":"tablet","prevSize":24,"code":59779},"setIdx":0,"setId":1,"iconIdx":183},{"icon":{"paths":["M687.134 672.539c-0.215 0-0.469 0.001-0.724 0.001-92.498 0-176.242-37.479-236.875-98.078l0.001 0.001c-61.305-61.014-99.243-145.459-99.243-238.766 0-186.032 150.809-336.841 336.841-336.841s336.841 150.809 336.841 336.841c0 186.032-150.808 336.84-336.84 336.841v0zM687.134 88.761c-136.764 0.345-247.499 111.293-247.499 248.106 0 68.362 27.648 130.267 72.373 175.141l-0.007-0.007c44.929 45.079 107.076 72.972 175.74 72.972 137.026 0 248.106-111.081 248.106-248.106s-111.081-248.106-248.106-248.106c-0.213 0-0.427 0-0.639 0.001h0.033z","M74.166 993.618c-11.682-0.919-21.941-6.357-29.147-14.547l-0.041-0.048c-6.919-7.71-11.15-17.955-11.15-29.188s4.231-21.479 11.185-29.23l-0.036 0.041 377.122-377.705c7.941-7.869 18.873-12.731 30.94-12.731 24.281 0 43.963 19.683 43.963 43.963 0 12.213-4.98 23.263-13.020 31.229l-0.003 0.003-380.624 373.619c-7.248 8.237-17.507 13.675-29.039 14.585l-0.151 0.010z","M278.488 1022.806c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-7.28-7.798-11.75-18.301-11.75-29.848 0-24.181 19.603-43.783 43.783-43.783 11.548 0 22.050 4.47 29.874 11.775l-0.026-0.023 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z","M395.245 906.051c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-8.584-8.015-13.935-19.399-13.935-32.033 0-24.181 19.603-43.783 43.783-43.783 12.634 0 24.018 5.351 32.008 13.909l0.023 0.026 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{},{},{}],"tags":["key","unlock","access","secret","password"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":219,"id":50,"name":"key","prevSize":24,"code":59777},"setIdx":0,"setId":1,"iconIdx":184},{"icon":{"paths":["M468.112 906.989c0 48.569-39.207 87.775-87.775 87.775s-87.775-39.207-87.775-87.775 39.207-87.775 87.775-87.775 87.775 39.207 87.775 87.775zM760.696 819.214c-48.569 0-87.775 39.207-87.775 87.775s39.207 87.775 87.775 87.775 87.775-39.207 87.775-87.775-39.207-87.775-87.775-87.775zM1022.852 259.207l-117.033 468.135c-4.681 19.311-22.236 33.355-42.718 33.355h-585.169c-21.066 0-39.207-15.214-43.302-36.28l-110.597-607.405h-80.168c-23.991 0-43.888-19.896-43.888-43.888s19.896-43.888 43.888-43.888h117.033c21.066 0 39.207 15.214 43.302 36.28l25.163 139.271h750.771c13.458 0 26.333 6.436 34.525 16.969s11.119 24.577 8.192 37.451zM923.958 292.562h-678.795l69.050 380.359h514.363l95.383-380.359z"],"attrs":[{}],"tags":["shopping-cart","buy","purchase","retain","shop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":156,"id":51,"name":"shopping-cart","prevSize":24,"code":59776},"setIdx":0,"setId":1,"iconIdx":185},{"icon":{"paths":["M46.723 830.79c-0.231 0.004-0.504 0.007-0.777 0.007-24.867 0-45.027-20.159-45.027-45.027 0-5.382 0.944-10.545 2.676-15.329l-0.098 0.314 75.044-247.348c-14.665-39.037-23.418-84.145-24.012-131.219l-0.003-0.259c0-0.259-0.001-0.566-0.001-0.874 0-54.129 11.264-105.629 31.575-152.281l-0.955 2.464c60.427-141.25 198.214-238.423 358.696-238.423 106.632 0 203.244 42.901 273.517 112.384l-0.037-0.035c34.184 34.714 62.103 75.715 81.849 121.093l1 2.581c19.107 44.313 30.22 95.904 30.22 150.090s-11.112 105.775-31.182 152.616l0.962-2.526c-20.746 47.959-48.666 88.96-82.9 123.725l0.051-0.051c-70.377 70.256-167.536 113.703-274.844 113.703-48.549 0-95.021-8.893-137.875-25.139l2.675 0.889-247.348 76.845c-3.958 1.137-8.504 1.794-13.204 1.801h-0.004zM442.359 91.749c-0.253-0.001-0.554-0.001-0.856-0.001-41.547 0-81.081 8.613-116.916 24.15l1.904-0.734c-71.28 30.615-127.108 85.859-157.736 154.781l-0.758 1.912c-14.788 34.299-23.39 74.229-23.39 116.169s8.602 81.87 24.134 118.125l-0.744-1.956c1.7 4.555 2.682 9.817 2.682 15.309s-0.984 10.754-2.783 15.621l0.101-0.312-55.232 180.107 180.107-55.232c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101c34.014 14.517 73.588 22.957 115.132 22.957 122.867 0 228.493-73.819 274.946-179.525l0.754-1.926c13.056-32.416 20.631-70.004 20.631-109.36 0-163.117-130.105-295.846-292.2-300.074l-0.391-0.008z","M977.277 1022.304c-1.984 0.28-4.275 0.439-6.603 0.439s-4.621-0.16-6.864-0.469l0.26 0.030-247.348-75.044c-40.428 15.733-87.225 24.849-136.153 24.849-158.064 0-293.904-95.147-353.373-231.291l-0.967-2.482c-2.862-5.665-4.539-12.349-4.539-19.423 0-18.267 11.175-33.923 27.063-40.506l0.291-0.107c5.517-2.599 11.984-4.116 18.806-4.116 18.319 0 34.084 10.94 41.115 26.643l0.114 0.286c15.121 35.516 35.349 65.946 60.152 91.977l-0.117-0.122c54.202 53.624 128.774 86.753 211.084 86.753 41.688 0 81.392-8.499 117.473-23.857l-1.963 0.743c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101 180.107 55.232-55.232-180.107c-1.7-4.555-2.682-9.817-2.682-15.309s0.984-10.754 2.783-15.621l-0.101 0.312c14.803-33.932 23.415-73.467 23.415-115.014 0-0.301 0-0.602-0.001-0.902v0.046c0.001-0.319 0.001-0.697 0.001-1.075 0-81.912-33.275-156.053-87.045-209.642l-0.008-0.008c-12.456-15.658-25.63-29.595-39.895-42.336l-0.328-0.288c-13.187-8.012-21.861-22.298-21.861-38.61 0-24.867 20.159-45.027 45.027-45.027 10.297 0 19.786 3.456 27.372 9.273l-0.107-0.079c22.529 14.653 42.156 30.276 60.175 47.561l-0.139-0.132c34.393 34.592 62.347 75.63 81.881 121.138l0.968 2.536c19.357 44.266 30.62 95.849 30.62 150.064 0 0.431-0.001 0.863-0.003 1.293v-0.066c-0.136 48.508-8.929 94.919-24.912 137.831l0.898-2.751 75.044 247.348c1.634 4.472 2.578 9.633 2.578 15.015 0 24.867-20.159 45.027-45.027 45.027-0.273 0-0.546-0.003-0.818-0.007h0.041z"],"attrs":[{},{}],"tags":["comments","chats","forums","discussions","feedbacks"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":155,"id":52,"name":"comments","prevSize":24,"code":59774},"setIdx":0,"setId":1,"iconIdx":186},{"icon":{"paths":["M89.22 977.058c-0.217 0.004-0.473 0.007-0.729 0.007-23.349 0-42.278-18.929-42.278-42.278 0-5.053 0.887-9.901 2.513-14.393l-0.093 0.294 90.193-295.946c-18.558-46.704-29.318-100.819-29.318-157.447 0-0.732 0.001-1.463 0.006-2.195v0.113c0-0.201 0-0.439 0-0.677 0-62.834 12.85-122.668 36.068-177.015l-1.118 2.942c23.991-55.124 56.28-102.224 95.856-142.080l-0.026 0.026c39.776-39.941 87.133-72.3 139.735-94.736l2.882-1.092c51.475-22.443 111.446-35.5 174.466-35.5s122.993 13.057 177.355 36.615l-2.889-1.115c161.557 70.486 272.594 228.494 273.398 412.529v0.103c-0.378 123.676-50.484 235.576-131.361 316.819l0.016-0.016c-39.83 39.549-86.93 71.841-139.11 94.681l-2.944 1.149c-51.439 22.133-111.317 35.003-174.201 35.003-57.536 0-112.557-10.776-163.152-30.417l3.076 1.050-295.946 90.193c-3.604 1.586-7.788 2.774-12.162 3.355l-0.239 0.026zM557.097 103.314c-149.484 0.668-277.735 90.884-333.925 219.741l-0.917 2.358c-17.678 41.648-27.953 90.087-27.953 140.927s10.274 99.278 28.861 143.354l-0.909-2.427c1.596 4.277 2.518 9.218 2.518 14.374s-0.923 10.098-2.613 14.668l0.095-0.293-69.336 235.065 233.938-71.027c4.277-1.596 9.218-2.518 14.374-2.518s10.098 0.923 14.668 2.613l-0.293-0.095c41.635 17.765 90.074 28.091 140.927 28.091s99.291-10.328 143.335-28.999l-2.408 0.907c131.638-56.462 222.168-184.951 222.168-334.586 0-51.2-10.598-99.924-29.723-144.098l0.907 2.35c-56.972-130.557-184.848-220.199-333.686-220.41h-0.028z"],"attrs":[{}],"tags":["comment","chat","talk","feedback","opinion"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":154,"id":53,"name":"comment","prevSize":24,"code":59775},"setIdx":0,"setId":1,"iconIdx":187},{"icon":{"paths":["M921.588 175.553h-219.422v-73.14c-4.292-57.542-52.035-102.602-110.299-102.602-2.366 0-4.715 0.074-7.043 0.221l0.318-0.016h-146.282c-2.010-0.13-4.36-0.204-6.725-0.204-58.266 0-106.007 45.060-110.277 102.234l-0.022 0.368v73.14h-219.422c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM409.603 102.412c0-4.681 11.118-14.629 29.256-14.629h146.282c18.139 0 29.256 9.947 29.256 14.629v73.14h-204.793zM102.412 263.322h819.175c8.079 0 14.629 6.55 14.629 14.629v0 190.166h-848.432v-190.166c0-8.079 6.55-14.629 14.629-14.629v0zM321.834 555.884h380.331v87.769h-380.331zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-307.191h146.282v131.653c0.325 24.105 19.78 43.559 43.853 43.884h468.131c24.105-0.325 43.559-19.78 43.884-43.853v-131.685h146.282v307.191c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["briefcase","work","job","professional","business"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":153,"id":54,"name":"briefcase","prevSize":24,"code":59773},"setIdx":0,"setId":1,"iconIdx":188},{"icon":{"paths":["M983.875 747.107c-4.979 0-116.724-19.915-116.724-345.747 0-230.128-133.873-373.406-355.151-373.406s-355.151 143.278-355.151 373.406c0 331.917-115.617 345.747-115.065 345.747-22.914 0-41.49 18.576-41.49 41.49s18.576 41.49 41.49 41.49v0h267.193c19.311 95.868 102.854 167.053 203.023 167.053s183.711-71.186 202.798-165.727l0.223-1.325h267.746c22.914 0 41.49-18.576 41.49-41.49s-18.576-41.49-41.49-41.49v0zM512 913.065c-53.673-0.105-99.33-34.318-116.453-82.114l-0.271-0.865h233.448c-17.395 48.661-63.050 82.874-116.711 82.979h-0.013zM166.807 747.107c39.83-60.299 73.022-165.958 73.022-345.747s99.575-290.427 272.172-290.427 272.172 105.66 272.172 290.427 33.192 285.448 73.022 345.747z"],"attrs":[{}],"tags":["bell","alarm","reminder","notification","alert"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":218,"id":55,"name":"bell","prevSize":24,"code":59772},"setIdx":0,"setId":1,"iconIdx":189},{"icon":{"paths":["M333.040 1023.149c-0.395 0.001-0.861 0.003-1.328 0.003-89.93 0-171.755-34.697-232.82-91.434l0.214 0.196c-60.481-56.047-98.213-135.906-98.213-224.578s37.732-168.531 98.016-224.397l0.197-0.181 442.138-417.574c43.713-40.007 102.187-64.52 166.387-64.52s122.673 24.512 166.573 64.688l-0.186-0.169c46.303 43.075 75.506 103.992 76.611 171.742l0.003 0.2c0.003 0.343 0.003 0.748 0.003 1.154 0 58.355-24.702 110.942-64.219 147.873l-0.117 0.107-442.723 418.16c-25.698 23.896-60.263 38.561-98.253 38.561s-72.555-14.665-98.342-38.643l0.089 0.082c-25.889-23.908-42.047-58.024-42.047-95.913s16.158-72.005 41.958-95.834l0.088-0.081 409.387-385.408c7.935-7.925 18.894-12.829 30.996-12.829s23.061 4.902 30.997 12.829v0c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-409.387 385.408c-8.981 7.868-14.621 19.359-14.621 32.167s5.64 24.299 14.572 32.124l0.049 0.042c10.156 8.727 23.465 14.040 38.014 14.040s27.858-5.313 38.092-14.105l-0.078 0.066 442.723-416.989c21.667-21.246 35.097-50.823 35.097-83.538 0-0.444-0.003-0.888-0.007-1.331v0.067c-1.049-42.681-19.73-80.802-49.009-107.504l-0.118-0.107c-27.771-25.797-65.112-41.627-106.148-41.627s-78.377 15.83-106.245 41.716l0.097-0.090-440.383 416.989c-43.561 40.015-70.766 97.247-70.766 160.83s27.203 120.815 70.608 160.688l0.158 0.143c45.833 42.805 107.572 69.087 175.451 69.087s129.619-26.282 175.601-69.225l-0.149 0.137 438.043-414.651c7.869-8.069 18.849-13.075 30.996-13.075s23.127 5.006 30.988 13.066l0.008 0.010c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-441.552 416.405c-60.773 56.558-142.541 91.272-232.414 91.272-1.768 0-3.534-0.014-5.296-0.040l0.267 0.003z"],"attrs":[{}],"tags":["paperclip","attach","link","join","bind"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":151,"id":56,"name":"paperclip","prevSize":24,"code":59771},"setIdx":0,"setId":1,"iconIdx":190},{"icon":{"paths":["M833.7 643.604c-62.907 0.233-118.56 31.082-152.865 78.411l-0.38 0.551-309.417-152.076c5.76-17.446 9.17-37.537 9.358-58.398v-0.093c-0.189-20.954-3.597-41.044-9.755-59.892l0.396 1.402 309.417-152.076c34.79 46.82 89.928 76.825 152.074 76.825 104.34 0 188.925-84.585 188.925-188.925s-84.585-188.925-188.925-188.925c-104.34 0-188.925 84.585-188.925 188.925 0 0.34 0.001 0.68 0.003 1.020v-0.052c0.152 10.439 1.209 20.53 3.098 30.325l-0.173-1.080-319.945 160.849c-34.095-36.053-82.261-58.491-135.669-58.491-0.217 0-0.432 0-0.647 0.001h0.033c-104.986 0-190.096 85.108-190.096 190.096s85.108 190.096 190.096 190.096v0c0.182 0 0.399 0.001 0.614 0.001 53.408 0 101.575-22.439 135.587-58.404l0.082-0.088 319.945 160.849c-1.751 8.911-2.81 19.209-2.924 29.734l-0.001 0.096c0 104.986 85.108 190.096 190.096 190.096s190.096-85.108 190.096-190.096c0-104.986-85.108-190.096-190.096-190.096v0zM833.7 87.942c56.531 0 102.359 45.827 102.359 102.359s-45.827 102.359-102.359 102.359c-56.531 0-102.359-45.827-102.359-102.359v0c0.33-56.398 45.96-102.029 102.328-102.359h0.032zM190.3 614.359c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032zM833.7 936.058c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032z"],"attrs":[{}],"tags":["share-alt","distribute","social","link"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":150,"id":57,"name":"share-alt","prevSize":24,"code":59770},"setIdx":0,"setId":1,"iconIdx":191},{"icon":{"paths":["M921.588 58.527h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v702.182c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-702.182c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM102.412 146.296h819.175c8.079 0 14.629 6.55 14.629 14.629v0 90.11l-424.215 211.815-424.215-211.815v-90.11c0-8.079 6.55-14.629 14.629-14.629v0zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-514.325l404.322 202.454c5.795 2.962 12.643 4.698 19.895 4.698s14.098-1.736 20.147-4.815l-0.252 0.117 404.322-202.454v514.325c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["envelope","email","letter","mail","message"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":217,"id":58,"name":"envelope","prevSize":24,"code":59769},"setIdx":0,"setId":1,"iconIdx":192},{"icon":{"paths":["M710.11 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.124 19.673-11.546 36.649-28.101 44.774l-0.296 0.132c-5.939 2.921-12.928 4.629-20.316 4.629-0.288 0-0.574-0.003-0.859-0.008h0.043zM99.27 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z","M915.484 735.204c-11.19-0.147-21.49-3.841-29.859-10.006l0.142 0.101c-12.083-9.132-19.811-23.475-19.811-39.622 0-11.206 3.721-21.543 9.995-29.84l-0.090 0.124c30.292-39.484 48.545-89.591 48.545-143.96s-18.251-104.477-48.961-144.528l0.418 0.566c-6.185-8.174-9.906-18.511-9.906-29.717 0-27.353 22.174-49.528 49.528-49.528 16.148 0 30.49 7.728 39.532 19.687l0.090 0.124c42.965 55.728 68.862 126.535 68.862 203.393s-25.897 147.666-69.442 204.176l0.58-0.783c-9.257 11.932-23.523 19.596-39.586 19.811h-0.036z"],"attrs":[{},{}],"tags":["volume-down","low-sound","decrease-volume","quiet","softer"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":148,"id":59,"name":"volume-down","prevSize":24,"code":59766},"setIdx":0,"setId":1,"iconIdx":193},{"icon":{"paths":["M565.883 929.593c-9.559-0.164-18.337-3.376-25.438-8.703l0.112 0.081-258.099-206.91h-255.405c-22.198-0.299-40.113-18.215-40.412-40.383v-323.327c0.299-22.198 18.215-40.113 40.383-40.412h255.434l258.099-206.91c6.865-5.557 15.703-8.921 25.326-8.921 22.319 0 40.412 18.093 40.412 40.412 0 0.105 0 0.21-0.001 0.316v-0.016 754.361c-0.101 16.052-9.421 29.904-22.929 36.534l-0.241 0.107c-4.846 2.383-10.549 3.777-16.577 3.777-0.235 0-0.469-0.003-0.701-0.006h0.035zM67.466 633.237h229.002c9.573 0.042 18.381 3.277 25.424 8.695l-0.099-0.073 203.677 161.649v-584.629l-203.677 161.649c-6.785 5.918-15.568 9.703-25.217 10.233l-0.107 0.005h-229.002z","M860.084 839.070c-10.094-0.015-19.331-3.681-26.461-9.747l0.058 0.048c-8.624-7.36-14.057-18.239-14.057-30.387 0-10.3 3.905-19.687 10.315-26.762l-0.030 0.034c61.742-68.722 99.501-160.079 99.501-260.255s-37.758-191.532-99.818-260.614l0.318 0.36c-6.378-7.12-10.277-16.575-10.277-26.941 0-22.34 18.111-40.451 40.451-40.451 11.975 0 22.734 5.203 30.141 13.472l0.034 0.038c74.659 82.7 120.339 192.814 120.339 313.599s-45.68 230.898-120.705 314.010l0.366-0.412c-7.167 8.586-17.874 14.010-29.847 14.010-0.115 0-0.23 0-0.345-0.001h0.018z","M733.459 694.124c-9.131-0.12-17.535-3.134-24.364-8.165l0.116 0.082c-9.859-7.451-16.165-19.154-16.165-32.33 0-9.143 3.036-17.578 8.156-24.348l-0.073 0.101c24.717-32.217 39.61-73.102 39.61-117.464s-14.892-85.248-39.95-117.928l0.341 0.462c-5.046-6.669-8.082-15.104-8.082-24.247 0-22.319 18.093-40.412 40.412-40.412 13.176 0 24.879 6.306 32.257 16.064l0.073 0.101c35.058 45.471 56.188 103.247 56.188 165.959s-21.131 120.489-56.662 166.598l0.474-0.639c-7.553 9.736-19.193 15.989-32.301 16.165h-0.029z"],"attrs":[{},{},{}],"tags":["volume-up","loud","increase-sound","high-volume","louder"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":147,"id":60,"name":"volume-up","prevSize":24,"code":59767},"setIdx":0,"setId":1,"iconIdx":194},{"icon":{"paths":["M842.183 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.153 19.495-11.255 36.364-27.452 44.771l-0.283 0.133c-6.264 2.921-13.598 4.625-21.331 4.625-0.163 0-0.323 0-0.486-0.002h0.025zM231.344 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z"],"attrs":[{}],"tags":["volume-off","mute","silent","noiseless","sound-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":146,"id":61,"name":"volume-off","prevSize":24,"code":59768},"setIdx":0,"setId":1,"iconIdx":195},{"icon":{"paths":["M974.421 561.545h-924.841c-27.344-0.025-49.502-22.198-49.502-49.545 0-13.671 5.537-26.048 14.49-35.013v0l462.421-462.421c8.963-8.952 21.342-14.49 35.011-14.49s26.048 5.537 35.013 14.49v0l462.421 462.421c8.952 8.963 14.49 21.342 14.49 35.011 0 27.347-22.157 49.52-49.499 49.545h-0.003zM169.148 462.455h685.704l-342.852-342.852z","M908.36 1023.966h-792.721c-63.696-0.373-115.233-51.908-115.606-115.57v-132.155c0.373-63.696 51.908-115.233 115.57-115.606h792.757c63.696 0.373 115.233 51.908 115.606 115.57v132.155c-0.373 63.696-51.908 115.233-115.57 115.606h-0.036zM115.64 759.725c-9.121 0-16.516 7.395-16.516 16.516v0 132.12c0 9.121 7.395 16.516 16.516 16.516v0h792.721c9.121 0 16.516-7.395 16.516-16.516v0-132.12c0-9.121-7.395-16.516-16.516-16.516v0z"],"attrs":[{},{}],"tags":["eject","remove","release","take-out","disconnect"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":145,"id":62,"name":"eject","prevSize":24,"code":59765},"setIdx":0,"setId":1,"iconIdx":196},{"icon":{"paths":["M921.588 117.040h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM936.215 219.438v97.715h-12.288c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-7.607c-7.377-1.502-13.839-3.52-20.003-6.11l0.694 0.259h-7.022c-8.645-4.243-16.008-9.735-22.196-16.341l-0.038-0.041c-16.923-16.712-27.426-39.89-27.5-65.521v-0.014c0.016-8.559 1.299-16.812 3.668-24.592l-0.158 0.601h98.887c0.004 0 0.008 0 0.012 0 7.873 0 14.294 6.219 14.615 14.014l0.001 0.029zM102.412 204.809h98.887c2.212 7.178 3.494 15.431 3.511 23.981v0.010c-0.074 25.645-10.578 48.823-27.491 65.525l-0.010 0.010c-6.348 6.456-13.68 11.92-21.756 16.155l-0.479 0.229h-7.607c-5.25 2.652-11.34 4.689-17.749 5.795l-0.389 0.056h-8.191c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-12.288v-97.131c0-8.079 6.55-14.629 14.629-14.629v0zM87.785 804.562v-97.715h12.288c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h7.607c7.229 1.166 13.718 3.206 19.76 6.041l-0.451-0.191h7.022c8.556 4.464 15.886 9.927 22.223 16.372l0.012 0.012c16.923 16.712 27.426 39.89 27.5 65.521v0.014c-0.016 8.559-1.299 16.812-3.668 24.592l0.158-0.601h-98.887c-0.004 0-0.008 0-0.012 0-7.873 0-14.294-6.219-14.615-14.014l-0.001-0.029zM290.823 819.191c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549c0.004-0.481 0.007-1.050 0.007-1.62 0-49.382-20.391-94-53.213-125.896l-0.041-0.040c-8.427-8.529-17.825-16.067-28.024-22.443l-0.647-0.377-9.947-6.436c-5.625-3.003-12.567-6.153-19.707-8.903l-1.358-0.459-11.702-4.681c-8.77-2.704-19.269-4.96-30.044-6.336l-0.968-0.101c-2.719-0.288-5.875-0.451-9.069-0.451s-6.35 0.165-9.458 0.484l0.389-0.033h-29.256v-210.060h49.736c9.036-1.557 16.909-3.588 24.522-6.182l-1.116 0.331 12.873-4.096c9.915-3.42 18.418-7.374 26.429-12.074l-0.683 0.37 9.362-5.266c11.406-7.555 21.355-15.646 30.453-24.6l-0.026 0.025c32.863-31.937 53.254-76.555 53.254-125.937 0-0.569-0.003-1.138-0.008-1.707v0.086c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549h442.355c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549c-0.004 0.481-0.007 1.050-0.007 1.62 0 49.382 20.391 94 53.213 125.896l0.041 0.040c8.973 9.14 18.943 17.251 29.747 24.168l0.679 0.407 9.362 5.266c7.327 4.329 15.83 8.282 24.727 11.392l1.018 0.31 12.873 4.096c6.721 2.133 14.826 3.972 23.141 5.166l0.85 0.1h49.151v208.304h-29.256c-2.719-0.277-5.876-0.435-9.069-0.435s-6.351 0.158-9.463 0.466l0.394-0.032c-11.742 1.477-22.241 3.733-32.391 6.794l1.38-0.358-11.702 4.681c-9.096 3.533-16.61 7.072-23.848 11.051l1.029-0.518-9.947 6.436c-10.846 6.753-20.244 14.291-28.657 22.805l-0.015 0.015c-32.863 31.937-53.254 76.555-53.254 125.937 0 0.569 0.003 1.138 0.008 1.707v-0.086c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549zM921.588 819.191h-98.887c-2.212-7.178-3.494-15.431-3.511-23.981v-0.010c0.074-25.645 10.578-48.823 27.491-65.525l0.010-0.010c6.226-6.647 13.589-12.14 21.793-16.186l0.443-0.197h7.022c5.388-2.223 11.845-4.236 18.507-5.704l0.802-0.148h7.607c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h12.288v97.131c0 8.079-6.55 14.629-14.629 14.629v0z","M512 307.207c-113.105 0-204.793 91.69-204.793 204.793s91.69 204.793 204.793 204.793c113.105 0 204.793-91.69 204.793-204.793v0c0-113.105-91.69-204.793-204.793-204.793v0zM512 629.025c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0z"],"attrs":[{},{}],"tags":["money-bill","cash","currency","banknote","bucks"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":144,"id":63,"name":"money-bill","prevSize":24,"code":59764},"setIdx":0,"setId":1,"iconIdx":197},{"icon":{"paths":["M871.768 55.371h-553.491c-84.063 0-152.209 68.147-152.209 152.209v0 13.838h-13.838c-84.063 0-152.209 68.147-152.209 152.209v0 442.792c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-13.838h13.838c84.063 0 152.209-68.147 152.209-152.209v0-442.792c0-84.063-68.147-152.209-152.209-152.209v0zM249.092 207.58c0-38.21 30.976-69.186 69.186-69.186v0h553.491c38.21 0 69.186 30.976 69.186 69.186v0 343.163l-125.642-105.716c-7.15-6.241-16.567-10.047-26.872-10.047-12.495 0-23.684 5.595-31.196 14.418l-0.048 0.058-59.223 69.74-221.396-214.755c-6.965-8.265-17.229-13.559-28.735-13.836l-0.047-0.001c-11.963 0.464-22.566 5.925-29.844 14.338l-0.044 0.052-168.814 200.917zM318.279 719.559c-38.21 0-69.186-30.976-69.186-69.186v0-16.605l203.131-239.108 191.508 187.633-116.233 137.265zM774.908 816.42c0 38.21-30.976 69.186-69.186 69.186v0h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-442.792c0-38.21 30.976-69.186 69.186-69.186v0h13.838v345.932c0 84.063 68.147 152.209 152.209 152.209v0h456.629zM871.768 719.559h-235.233l157.191-184.866 145.567 123.429c-3.487 34.553-32.362 61.315-67.514 61.437h-0.013z"],"attrs":[{}],"tags":["images","pictures","photos","graphics","illustrations"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":143,"id":64,"name":"images","prevSize":24,"code":59763},"setIdx":0,"setId":1,"iconIdx":198},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM160.914 146.285h702.171c40.395 0 73.142 32.747 73.142 73.142v0 479.232l-159.158-159.158c-7.493-7.993-18.119-12.974-29.908-12.974-1.007 0-2.005 0.036-2.992 0.108l0.133-0.008c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-75.483 90.697-269.166-269.166c-7.488-7.945-18.081-12.89-29.83-12.89-0.416 0-0.831 0.007-1.244 0.018l0.060-0.001c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-216.503 258.048v-405.504c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-42.716l251.612-301.934 241.079 241.079-147.456 175.543h-272.091c-0.003 0-0.005 0-0.010 0-39.984 0-72.475-32.083-73.133-71.911l-0.001-0.062zM863.086 877.715h-315.977l201.874-242.249 184.32 184.32c-6.765 33.136-35.591 57.744-70.197 57.929h-0.021z"],"attrs":[{}],"tags":["image","picture","photo","graphic","illustration"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":142,"id":65,"name":"image","prevSize":24,"code":59762},"setIdx":0,"setId":1,"iconIdx":199},{"icon":{"paths":["M863.075 1023.984h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.762 0.162 3.81 0.255 5.881 0.255 34.275 0 62.615-25.405 67.22-58.41l0.041-0.357v-729.651c-4.645-33.363-32.986-58.768-67.261-58.768-2.069 0-4.118 0.093-6.141 0.274l0.261-0.019h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.958-0.089 4.255-0.14 6.565-0.14 83.099 0 150.872 65.615 154.335 147.863l0.011 0.313v726.14c-3.472 82.56-71.246 148.176-154.344 148.176-2.309 0-4.606-0.051-6.89-0.151l0.325 0.011z","M453.487 789.935c-0.060 0-0.133 0-0.204 0-12.052 0-22.953-4.923-30.803-12.869l-0.004-0.004c-7.929-7.939-12.835-18.903-12.835-31.011s4.904-23.072 12.835-31.013v0l203.038-203.038-203.038-203.038c-7.297-7.816-11.777-18.344-11.777-29.917 0-24.237 19.648-43.884 43.884-43.884 11.575 0 22.101 4.48 29.943 11.802l-0.026-0.023 234.051 234.051c7.929 7.939 12.835 18.903 12.835 31.011s-4.904 23.072-12.835 31.013v0l-234.051 234.051c-7.854 7.95-18.755 12.873-30.807 12.873-0.071 0-0.144 0-0.215 0h0.011z","M687.538 555.884h-643.638c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h643.638c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["sign-in","login","enter","connect","access"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":141,"id":66,"name":"sign-in","prevSize":24,"code":59760},"setIdx":0,"setId":1,"iconIdx":200},{"icon":{"paths":["M336.515 1023.832h-175.485c-1.958 0.089-4.254 0.14-6.563 0.14-83.075 0-150.827-65.596-154.289-147.819l-0.011-0.313v-727.679c3.471-82.536 71.225-148.132 154.298-148.132 2.309 0 4.605 0.051 6.888 0.151l-0.325-0.011h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0h-175.485c-1.762-0.162-3.809-0.255-5.879-0.255-34.265 0-62.596 25.397-67.2 58.393l-0.041 0.356v729.434c4.644 33.353 32.976 58.751 67.241 58.751 2.069 0 4.117-0.093 6.139-0.274l-0.26 0.019h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z","M745.981 789.852c-0.060 0-0.133 0-0.204 0-12.048 0-22.946-4.922-30.794-12.865l-0.004-0.004c-7.927-7.937-12.831-18.898-12.831-31.002s4.903-23.065 12.831-31.003v0l202.978-202.978-202.978-202.978c-8.602-8.031-13.963-19.438-13.963-32.097 0-24.229 19.642-43.871 43.871-43.871 12.66 0 24.066 5.362 32.073 13.937l0.023 0.026 233.981 233.981c7.927 7.937 12.831 18.898 12.831 31.002s-4.903 23.065-12.831 31.003v0l-233.981 233.981c-7.852 7.948-18.75 12.869-30.798 12.869-0.071 0-0.144 0-0.215 0h0.011z","M979.961 555.871h-643.446c-24.229 0-43.871-19.642-43.871-43.871s19.642-43.871 43.871-43.871v0h643.446c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z"],"attrs":[{},{},{}],"tags":["sign-out","logout","exit","leave","disconnect"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":140,"id":67,"name":"sign-out","prevSize":24,"code":59761},"setIdx":0,"setId":1,"iconIdx":201},{"icon":{"paths":["M823.892 558.055c-0.046 0-0.1 0-0.154 0-10.973 0-20.961-4.21-28.44-11.103l0.029 0.026c-74.352-66.801-173.194-107.653-281.576-107.653s-207.224 40.851-281.966 107.996l0.389-0.344c-7.699 6.911-17.932 11.137-29.152 11.137-12.958 0-24.6-5.638-32.606-14.593l-0.037-0.042c-6.617-7.695-10.645-17.782-10.645-28.809 0-13.081 5.67-24.84 14.685-32.949l0.041-0.036c89.475-80.776 208.611-130.198 339.291-130.198s249.814 49.422 339.736 130.594l-0.445-0.396c9.056 8.146 14.726 19.904 14.726 32.986 0 11.028-4.029 21.114-10.694 28.868l0.049-0.059c-8.339 8.889-20.122 14.46-33.209 14.575h-0.020z","M978.379 395.406c-11.486-0.060-21.927-4.48-29.763-11.688l0.031 0.029c-113.494-108.335-267.577-175.003-437.231-175.003s-323.736 66.669-437.478 175.238l0.247-0.234c-8.074 9.555-20.065 15.58-33.462 15.58-24.147 0-43.723-19.576-43.723-43.723 0-14.862 7.414-27.991 18.746-35.891l0.142-0.094c128.857-122.252 303.412-197.437 495.528-197.437s366.671 75.186 495.847 197.738l-0.318-0.301c8.63 8.010 14.013 19.416 14.013 32.079 0 23.746-18.928 43.070-42.521 43.707l-0.059 0.001z","M359.26 724.203c-14.255 0-26.917-6.822-34.899-17.38l-0.079-0.109c-5.603-7.207-8.984-16.384-8.984-26.351 0-14.271 6.93-26.924 17.608-34.778l0.12-0.083c49.111-37.883 111.521-60.719 179.265-60.719s130.154 22.836 179.953 61.23l-0.689-0.51c10.667 8.061 17.489 20.723 17.489 34.978 0 9.892-3.285 19.018-8.824 26.343l0.079-0.109c-8.18 10.541-20.853 17.261-35.095 17.261-9.821 0-18.895-3.195-26.241-8.603l0.123 0.086c-34.771-26.697-78.905-42.783-126.797-42.783s-92.026 16.086-127.294 43.149l0.497-0.366c-7.262 5.353-16.355 8.615-26.202 8.745h-0.031z","M512 905.508c-24.147 0-43.723-19.576-43.723-43.723s19.576-43.723 43.723-43.723v0 0c24.147 0 43.723 19.576 43.723 43.723s-19.576 43.723-43.723 43.723v0z"],"attrs":[{},{},{},{}],"tags":["wifi","internet","wireless","network","connection"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":139,"id":68,"name":"wifi","prevSize":24,"code":59759},"setIdx":0,"setId":1,"iconIdx":202},{"icon":{"paths":["M590.766 393.851h-157.532c-50.632-0.297-91.598-41.261-91.894-91.866v-157.56c0.297-50.632 41.261-91.598 91.866-91.894h157.56c50.632 0.297 91.598 41.261 91.894 91.866v157.56c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM433.234 131.298c-7.25 0-13.128 5.878-13.128 13.128v0 157.532c0 7.25 5.878 13.128 13.128 13.128v0h157.532c7.25 0 13.128-5.878 13.128-13.128v0-157.532c0-7.25-5.878-13.128-13.128-13.128v0z","M196.936 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM91.915 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M564.511 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM459.489 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M932.085 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM827.064 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M879.575 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-105.049c0-7.25-5.878-13.128-13.128-13.128v0h-630.129c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 21.751-17.633 39.383-39.383 39.383s-39.383-17.633-39.383-39.383v0-105.021c0.297-50.632 41.261-91.598 91.866-91.894h630.157c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z","M512 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-315.093c0-21.751 17.633-39.383 39.383-39.383s39.383 17.633 39.383 39.383v0 315.064c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z"],"attrs":[{},{},{},{},{},{}],"tags":["sitemap","hierarchy","structure","tree","network"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":138,"id":69,"name":"sitemap","prevSize":24,"code":59758},"setIdx":0,"setId":1,"iconIdx":203},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M263.757 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M480.97 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M698.182 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M915.393 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{},{},{}],"tags":["chart-bar","graphic","diagram","stats","bar-chart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":137,"id":70,"name":"chart-bar","prevSize":24,"code":59757},"setIdx":0,"setId":1,"iconIdx":204},{"icon":{"paths":["M863.086 936.228h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-351.086c0-88.87 72.044-160.914 160.914-160.914v0h35.109l69.047-102.4c29.412-43.303 78.425-71.379 133.997-71.387h225.866c55.573 0.008 104.587 28.085 133.636 70.825l0.361 0.562 69.047 102.4h35.109c88.87 0 160.914 72.044 160.914 160.914v0 351.086c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 351.086c-40.395 0-73.142 32.747-73.142 73.142v0 351.086c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-351.086c0-40.395-32.747-73.142-73.142-73.142v0h-58.515c-15.035-0.029-28.294-7.614-36.181-19.159l-0.097-0.151-80.75-123.466c-12.764-19.278-34.075-32.011-58.402-32.765l-0.111-0.003h-229.961c-24.44 0.758-45.751 13.489-58.346 32.499l-0.167 0.269-84.846 123.466c-7.986 11.696-21.243 19.281-36.274 19.31h-0.004z","M512 760.685c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 468.114c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["camera","photo","picture","snapshot","image"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":136,"id":71,"name":"camera","prevSize":24,"code":59756},"setIdx":0,"setId":1,"iconIdx":205},{"icon":{"paths":["M512 1023.977c-24.105-0.325-43.559-19.779-43.884-43.852v-936.219c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 936.187c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M599.768 906.954h-380.325c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h380.325c3.954 0.373 8.548 0.587 13.193 0.587 76.308 0 139.186-57.511 147.651-131.554l0.063-0.684c-8.529-74.727-71.406-132.238-147.714-132.238-4.645 0-9.24 0.213-13.775 0.629l0.583-0.044h-175.535c-4.502 0.309-9.759 0.484-15.056 0.484-124.284 0-225.944-96.875-233.585-219.234l-0.033-0.671c7.676-123.029 109.334-219.903 233.619-219.903 5.298 0 10.553 0.176 15.762 0.522l-0.706-0.037h321.815c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0h-321.815c-3.954-0.373-8.548-0.587-13.193-0.587-76.308 0-139.186 57.511-147.651 131.554l-0.063 0.684c8.529 74.727 71.406 132.238 147.714 132.238 4.645 0 9.24-0.213 13.775-0.629l-0.583 0.044h175.535c4.502-0.309 9.759-0.484 15.056-0.484 124.284 0 225.944 96.875 233.585 219.234l0.033 0.671c-7.676 123.029-109.334 219.903-233.619 219.903-5.298 0-10.553-0.176-15.762-0.522l0.706 0.037z"],"attrs":[{},{}],"tags":["dollar","money","currency","cash","payment"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":135,"id":72,"name":"dollar","prevSize":24,"code":59755},"setIdx":0,"setId":1,"iconIdx":206},{"icon":{"paths":["M746.049 0.019c-153.498 0-277.933 124.435-277.933 277.933v0 131.652h-307.189c-88.867 0-160.908 72.041-160.908 160.908v0 292.56c0 88.867 72.041 160.908 160.908 160.908v0h409.585c88.867 0 160.908-72.041 160.908-160.908v0-292.56c0-88.867-72.041-160.908-160.908-160.908v0h-14.628v-131.652c0-105.024 85.139-190.165 190.165-190.165s190.165 85.139 190.165 190.165v0c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0c0-153.498-124.435-277.933-277.933-277.933v0zM643.652 570.513v292.56c0 40.394-32.746 73.14-73.14 73.14v0h-409.585c-40.394 0-73.14-32.746-73.14-73.14v0-292.56c0-40.394 32.746-73.14 73.14-73.14v0h409.585c40.394 0 73.14 32.746 73.14 73.14v0z"],"attrs":[{}],"tags":["lock-open","unlock","access","open","unchain"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":134,"id":73,"name":"lock-open","prevSize":24,"code":59754},"setIdx":0,"setId":1,"iconIdx":207},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM936.228 219.429v248.685h-380.342v-321.829h307.2c40.395 0 73.142 32.747 73.142 73.142v0zM160.914 146.285h307.2v321.829h-380.342v-248.685c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-248.685h380.342v321.829h-307.2c-40.395 0-73.142-32.747-73.142-73.142v0zM863.086 877.715h-307.2v-321.829h380.342v248.685c0 40.395-32.747 73.142-73.142 73.142v0z"],"attrs":[{}],"tags":["table","spreadsheet","grid","chart","layout"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":133,"id":74,"name":"table","prevSize":24,"code":59753},"setIdx":0,"setId":1,"iconIdx":208},{"icon":{"paths":["M512 1022.599c-0.113 0.001-0.245 0.001-0.378 0.001-8.356 0-16.084-2.691-22.364-7.254l0.11 0.076c-16.56-10.488-405.166-271.583-405.166-588.982 0-236.266 191.533-427.799 427.799-427.799s427.799 191.533 427.799 427.799v0c0 317.399-386.399 578.495-405.166 588.982-6.17 4.487-13.897 7.178-22.254 7.178-0.133 0-0.265-0.001-0.397-0.003h0.021zM512 84.201c-0.329-0.001-0.718-0.001-1.107-0.001-189.346 0-342.951 153.026-343.891 342.151v0.089c0 232.392 264.407 444.91 344.999 503.975 80.591-59.063 344.999-271.583 344.999-503.975-0.939-189.216-154.544-342.241-343.891-342.241-0.389 0-0.779 0.001-1.168 0.003h0.061z","M512 553.4c-83.836 0-151.799-67.963-151.799-151.799s67.963-151.799 151.799-151.799c83.836 0 151.799 67.963 151.799 151.799v0c0 83.836-67.963 151.799-151.799 151.799v0zM512 332.6c-38.107 0-68.999 30.892-68.999 68.999s30.892 68.999 68.999 68.999c38.107 0 68.999-30.892 68.999-68.999v0c0-38.107-30.892-68.999-68.999-68.999v0z"],"attrs":[{},{}],"tags":["map-marker","location","pin","place","position"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":132,"id":75,"name":"map-marker","prevSize":24,"code":59752},"setIdx":0,"setId":1,"iconIdx":209},{"icon":{"paths":["M967.082 560.759h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 268.207h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 853.311h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M56.918 284.46c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c5.935-5.857 13.086-10.5 21.038-13.514l0.416-0.139c7.303-3.084 15.795-4.877 24.704-4.877s17.401 1.792 25.134 5.036l-0.428-0.16c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c11.461 12.002 18.595 28.224 18.853 46.107v0.050c0 0.111 0.002 0.244 0.002 0.376 0 17.859-7.201 34.037-18.859 45.786l0.005-0.005c-6.208 5.511-13.262 10.282-20.899 14.055l-0.555 0.248c-7.082 2.883-15.3 4.556-23.909 4.556-0.28 0-0.559-0.002-0.84-0.005h0.043z","M56.918 577.012c-8.949-0.111-17.424-2.014-25.124-5.363l0.419 0.163c-8.262-3.501-15.357-8.097-21.513-13.706l0.059 0.053c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c6.096-5.555 13.192-10.151 20.966-13.467l0.488-0.186c8.019-3.808 17.424-6.032 27.348-6.032 3.658 0 7.245 0.302 10.739 0.882l-0.379-0.052 11.702 3.901 11.702 5.851c3.642 2.58 6.822 5.141 9.837 7.878l-0.085-0.076c11.672 12.226 18.854 28.826 18.854 47.102 0 0.125 0 0.251-0.002 0.376v-0.020c0 35.905-29.107 65.012-65.012 65.012v0z","M56.918 869.564c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-5.555-6.096-10.151-13.192-13.467-20.966l-0.186-0.488c-3.296-7.27-5.216-15.763-5.216-24.704s1.92-17.436 5.371-25.089l-0.155 0.385c3.501-8.262 8.097-15.357 13.706-21.513l-0.053 0.059c11.733-11.582 27.863-18.736 45.663-18.736 9.098 0 17.76 1.87 25.624 5.245l-0.424-0.162c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c5.555 6.096 10.151 13.192 13.467 20.966l0.186 0.488c3.296 7.27 5.216 15.763 5.216 24.704s-1.92 17.436-5.371 25.089l0.155-0.385c-3.501 8.262-8.097 15.357-13.706 21.513l0.053-0.059c-11.746 11.653-27.923 18.854-45.783 18.854-0.133 0-0.264 0-0.396-0.002h0.020z"],"attrs":[{},{},{},{},{},{}],"tags":["list","items","tasks","enumeration","record"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":131,"id":76,"name":"list","prevSize":24,"code":59751},"setIdx":0,"setId":1,"iconIdx":210},{"icon":{"paths":["M1020.3 494.452c-7.019-15.208-167.289-377.277-508.3-377.277-0.14 0-0.306 0-0.472 0-34.241 0-67.586 3.836-99.63 11.102l3.004-0.573c-18.045 5.713-30.896 22.309-30.896 41.908 0 24.228 19.641 43.869 43.869 43.869 2.026 0 4.020-0.137 5.972-0.403l-0.228 0.025c23.536-5.148 50.592-8.127 78.334-8.188h0.045c244.499 0 384.881 239.819 419.391 307.086-23.064 44.686-47.534 82.99-75.058 118.824l1.357-1.84c-5.75 7.348-9.221 16.722-9.221 26.907 0 24.18 19.562 43.79 43.724 43.869h0.007c13.993-0.045 26.437-6.635 34.437-16.866l0.073-0.096c34.924-43.997 66.128-93.737 91.55-146.775l2.039-4.721c2.455-5.422 3.887-11.757 3.887-18.425s-1.431-13.003-4.002-18.713l0.117 0.288z","M192.045 130.044c-7.813-7.295-18.337-11.773-29.907-11.773-24.228 0-43.869 19.641-43.869 43.869 0 11.571 4.479 22.094 11.798 29.933l-0.023-0.026 53.813 53.813c-74.699 68.875-135.393 151.659-178.181 244.402l-1.975 4.776c-2.203 5.093-3.485 11.025-3.485 17.256s1.282 12.161 3.596 17.545l-0.111-0.289c7.019 15.208 167.289 377.277 508.3 377.277 0.681 0.004 1.487 0.005 2.294 0.005 94.711 0 182.793-28.386 256.201-77.116l-1.714 1.069 63.172 63.172c7.936 7.927 18.897 12.83 31.001 12.83s23.064-4.902 31.002-12.83v0c7.927-7.936 12.83-18.897 12.83-31.001s-4.902-23.064-12.83-31.002v0zM416.073 480.999l129.268 129.853c-9.942 3.409-21.397 5.378-33.312 5.378-28.107 0-53.656-10.952-72.612-28.824l0.052 0.049c-18.724-18.468-30.323-44.118-30.323-72.478 0-13.277 2.543-25.962 7.167-37.592l-0.241 0.688zM512 819.086c-245.083 0-384.881-240.404-419.391-307.086 39.962-79.399 91.284-146.975 152.768-203.701l0.481-0.439 104.701 104.701c-17.797 28.341-28.353 62.795-28.353 99.714 0 104.667 84.849 189.516 189.516 189.516 36.919 0 71.373-10.557 100.508-28.817l-0.792 0.463 94.173 94.173c-54.756 32.362-120.666 51.482-191.042 51.482-0.903 0-1.805-0.003-2.708-0.010l0.138 0.001z"],"attrs":[{},{}],"tags":["eye-slash","hide","private","unseen","invisible"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":130,"id":77,"name":"eye-slash","prevSize":24,"code":59749},"setIdx":0,"setId":1,"iconIdx":211},{"icon":{"paths":["M512 906.971c-341.139 0-501.467-362.204-508.489-377.417-2.22-5.185-3.511-11.22-3.511-17.554s1.291-12.369 3.623-17.853l-0.112 0.299c7.022-15.213 167.351-377.417 508.489-377.417s501.467 362.204 508.489 377.417c2.22 5.185 3.511 11.22 3.511 17.554s-1.291 12.369-3.623 17.853l0.112-0.299c-7.022 15.213-167.351 377.417-508.489 377.417zM92.453 512c34.523 67.292 175.543 307.2 419.547 307.2s385.024-239.908 419.547-307.2c-34.523-67.292-175.543-307.2-419.547-307.2s-385.024 239.908-419.547 307.2z","M512 702.172c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 409.6c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["eye","view","see","look","watch"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":129,"id":78,"name":"eye","prevSize":24,"code":59750},"setIdx":0,"setId":1,"iconIdx":212},{"icon":{"paths":["M82.761 872.006h-83.078v-609.242c-0.010-0.662-0.017-1.442-0.017-2.225 0-82.317 66.265-149.157 148.363-150.085l0.088-0.001h133.48c0.27-0.006 0.588-0.010 0.906-0.010 12.364 0 23.485 5.331 31.186 13.821l0.031 0.035 147.88 178.895h271.943c0.175-0.001 0.383-0.001 0.591-0.001 82.895 0 150.096 67.2 150.096 150.096 0 1.168-0.013 2.335-0.040 3.497l0.003-0.173v27.692h-83.078v-27.692c0.013-0.495 0.021-1.077 0.021-1.662 0-37.318-30.252-67.57-67.57-67.57-0.008 0-0.014 0-0.022 0h-291.881c-12.686-0.029-24.015-5.815-31.514-14.885l-0.056-0.069-147.88-178.895h-114.094c-36.362 1.219-65.376 30.988-65.376 67.535 0 0.597 0.008 1.192 0.023 1.785l-0.001-0.088z","M795.574 913.546h-754.353c-14.913-0.126-27.961-7.987-35.343-19.762l-0.103-0.177c-3.401-5.891-5.407-12.958-5.407-20.493s2.007-14.601 5.513-20.694l-0.106 0.201 187.203-360.006c7.347-13.219 21.185-22.042 37.092-22.155h752.707c14.913 0.126 27.961 7.987 35.343 19.762l0.103 0.177c3.401 5.891 5.407 12.958 5.407 20.493s-2.007 14.601-5.513 20.694l0.106-0.201-187.203 360.006c-7.071 12.759-20.17 21.423-35.35 22.151l-0.097 0.004zM109.346 830.467h661.305l144.002-276.928h-661.305z"],"attrs":[{},{}],"tags":["folder-open","access-files","open-directory","open-folder","file-access"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":128,"id":79,"name":"folder-open","prevSize":24,"code":59748},"setIdx":0,"setId":1,"iconIdx":213},{"icon":{"paths":["M853.323 961.925h-682.645c-94.253 0-170.661-76.408-170.661-170.661v0-558.528c0-94.253 76.408-170.661 170.661-170.661v0h155.147c0.039 0 0.084 0 0.131 0 13.934 0 26.476 5.965 35.211 15.48l0.032 0.035 171.903 201.070h320.223c0 0 0 0 0.001 0 94.253 0 170.661 76.408 170.661 170.661 0 0.218 0 0.436-0.001 0.655v-0.033 341.323c0 94.253-76.408 170.661-170.661 170.661v0zM170.677 155.163c-42.842 0-77.573 34.731-77.573 77.573v0 558.528c0 42.842 34.731 77.573 77.573 77.573v0h682.645c42.842 0 77.573-34.731 77.573-77.573v0-341.323c0-42.842-34.731-77.573-77.573-77.573v0h-341.323c-14.071-0.131-26.67-6.321-35.33-16.085l-0.044-0.049-171.903-201.070z"],"attrs":[{}],"tags":["folder","file-holder","organizer","container","directory"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":126,"id":80,"name":"folder","prevSize":24,"code":59747},"setIdx":0,"setId":1,"iconIdx":214},{"icon":{"paths":["M570.515 906.971h-409.6c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h409.6c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 204.8c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h409.6c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M980.114 789.943c-8.437-0.136-16.291-2.51-23.030-6.553l0.21 0.117-292.571-175.543c-12.706-7.831-21.051-21.663-21.065-37.447v-117.029c0.014-15.785 8.359-29.619 20.876-37.34l0.189-0.108 292.571-175.543c6.348-3.861 14.026-6.145 22.235-6.145s15.887 2.285 22.428 6.254l-0.192-0.108c13.334 7.666 22.183 21.811 22.235 38.027v468.122c-0.053 16.223-8.901 30.368-22.022 37.921l-0.213 0.112c-5.841 3.327-12.834 5.288-20.285 5.288-0.48 0-0.959-0.008-1.435-0.025l0.069 0.001zM731.429 545.939l204.8 122.88v-313.636l-204.8 122.88z"],"attrs":[{},{}],"tags":["video","movie","clip","footage","film"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":125,"id":81,"name":"video","prevSize":24,"code":59746},"setIdx":0,"setId":1,"iconIdx":215},{"icon":{"paths":["M862.966 979.954h-701.931c-88.84 0-160.859-72.019-160.859-160.859v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.014 0.522-0.021 1.138-0.021 1.755 0 40.382 32.736 73.117 73.117 73.117 0.007 0 0.015 0 0.022 0h701.93c40.382 0 73.117-32.736 73.117-73.117v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.991 88.083-72.627 159.104-160.849 159.104-0.004 0-0.007 0-0.011 0h0.001z","M512 702.107c-0.038 0-0.085 0-0.13 0-110.716 0-202.222-82.245-216.757-188.973l-0.126-1.134h-250.94c-0.097 0.001-0.211 0.001-0.326 0.001-24.229 0-43.871-19.642-43.871-43.871 0-8.677 2.52-16.767 6.867-23.575l-0.106 0.177 218.184-350.966c17.362-29.96 49.275-49.789 85.818-49.789 1.293 0 2.582 0.025 3.862 0.074l-0.185-0.005h395.422c40.382 0.115 75.22 23.729 91.572 57.882l0.265 0.613 215.844 347.456c2.498 5.344 3.955 11.604 3.955 18.204 0 23.357-18.253 42.45-41.273 43.795l-0.119 0.005h-250.94c-14.66 107.862-106.167 190.107-216.883 190.107-0.047 0-0.092 0-0.138 0h0.007zM123.014 426.013h213.504c24.229 0 43.871 19.642 43.871 43.871v0 12.869c0 72.687 58.925 131.612 131.612 131.612s131.612-58.925 131.612-131.612v0-12.869c0-24.229 19.642-43.871 43.871-43.871v0h213.504l-175.483-284.282c-4.679-8.189-9.36-11.698-15.208-11.698h-396.006c-5.783 0.148-10.777 3.381-13.412 8.109l-0.041 0.081z"],"attrs":[{},{}],"tags":["inbox","email","messages","mail","receive"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":124,"id":82,"name":"inbox","prevSize":24,"code":59745},"setIdx":0,"setId":1,"iconIdx":216},{"icon":{"paths":["M804.555 409.605h-14.628v-131.65c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM321.839 277.955c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0 131.65h-380.321zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["lock","secure","safe","restrict","close"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":123,"id":83,"name":"lock","prevSize":24,"code":59743},"setIdx":0,"setId":1,"iconIdx":217},{"icon":{"paths":["M804.555 409.605h-482.716v-131.65c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0c0 24.236 19.647 43.883 43.883 43.883s43.883-19.647 43.883-43.883v0c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["unlock","open","access","free","unchain"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":122,"id":84,"name":"unlock","prevSize":24,"code":59744},"setIdx":0,"setId":1,"iconIdx":218},{"icon":{"paths":["M988.652 422.661l-315.315-315.315c-7.357-7.357-17.342-11.562-27.852-11.562h-606.456c-21.546 0-39.414 17.868-39.414 39.414v414.113c0 10.51 4.204 20.495 11.562 27.852l315.315 314.789c23.123 23.123 53.604 35.735 86.186 35.735v0c32.582 0 63.589-12.613 86.186-35.735l11.562-11.562c2.103 4.204 4.204 8.409 7.883 11.562 23.649 23.649 55.18 35.735 86.186 35.735s62.537-12.087 86.712-35.735l296.922-296.922c47.297-47.297 47.297-124.549 0-172.373zM443.681 836.249c-8.409 8.409-18.919 12.613-30.481 12.613s-22.598-4.73-30.481-12.613l-304.279-303.228v-358.409h358.409l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961l-296.922 296.922zM932.946 539.328l-296.922 296.922c-16.816 16.816-44.67 16.816-61.486 0-3.679-3.679-7.357-5.78-12.087-7.883l233.333-233.333c47.297-47.823 47.297-125.075 0-172.373l-248.048-248.048h80.931l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961zM314.928 328.067c0 36.261-29.429 65.69-65.69 65.69s-65.69-29.429-65.69-65.69 29.429-65.69 65.69-65.69 65.69 29.429 65.69 65.69z"],"attrs":[{}],"tags":["tags","labels","prices","identifiers","stickers"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":121,"id":85,"name":"tags","prevSize":24,"code":59741},"setIdx":0,"setId":1,"iconIdx":219},{"icon":{"paths":["M532.53 1023.985c-37.212 0-74.423-14.115-102.654-42.345l-415.747-415.105c-8.982-8.982-14.115-21.172-14.115-34.004v-484.396c0-26.304 21.814-48.119 48.119-48.119h483.756c12.831 0 25.022 5.132 34.004 14.115l415.747 415.747c55.818 56.46 55.818 148.206 0 204.666 0 0 0 0 0 0l-347.098 347.098c-28.229 28.229-65.442 42.345-102.654 42.345zM96.253 512.642l401.632 400.991c19.248 18.605 50.044 18.605 68.649 0l347.098-347.098c18.605-18.605 18.605-49.402 0-68.649l-401.632-401.632h-415.747v415.747zM947.637 600.539v0zM287.446 367.643c-44.269 0-80.198-35.928-80.198-80.198s35.928-80.198 80.198-80.198 80.198 35.928 80.198 80.198-35.928 80.198-80.198 80.198z"],"attrs":[{}],"tags":["tag","label","price","identifier","sticker"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":120,"id":86,"name":"tag","prevSize":24,"code":59742},"setIdx":0,"setId":1,"iconIdx":220},{"icon":{"paths":["M512 1024.445c-282.822-0.256-511.994-229.587-511.994-512.445 0-141.396 57.267-269.417 149.871-362.133l-0.005 0.005c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c7.716 7.725 12.49 18.395 12.49 30.177s-4.772 22.451-12.49 30.178v0c-83.727 78.173-135.917 189.204-135.917 312.426 0 235.846 191.191 427.037 427.037 427.037 123.22 0 234.253-52.189 312.196-135.668l0.23-0.248c77.442-77.134 125.361-183.857 125.361-301.773s-47.919-224.639-125.347-301.759l-0.015-0.015c-7.716-7.725-12.49-18.395-12.49-30.177s4.772-22.451 12.49-30.178v0c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c92.6 92.711 149.866 220.732 149.866 362.128 0 282.858-229.172 512.187-511.97 512.445h-0.024z","M512 554.704c-23.456-0.316-42.387-19.247-42.704-42.673v-455.537c0-23.584 19.119-42.704 42.704-42.704s42.704 19.119 42.704 42.704v0 455.506c-0.316 23.456-19.247 42.387-42.673 42.704h-0.031z"],"attrs":[{},{}],"tags":["power-off","shutdown","turn-off","stop","end"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":119,"id":87,"name":"power-off","prevSize":24,"code":59740},"setIdx":0,"setId":1,"iconIdx":221},{"icon":{"paths":["M804.571 1024h-585.143c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h438.857c12.114 0.011 23.078 4.929 31.012 12.872v0l263.314 265.070c7.945 7.935 12.863 18.898 12.874 31.011v554.133c0 88.87-72.044 160.914-160.914 160.914v0zM219.429 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h585.143c40.395 0 73.142-32.747 73.142-73.142v0-537.747l-237.568-237.568z","M789.943 980.114h-87.771v-365.715h-380.342v365.715h-87.771v-380.342c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0z","M539.501 321.828h-230.547c-41.436-0.331-74.901-33.998-74.901-75.481 0-0.207 0.001-0.413 0.003-0.619v0.032-201.874h87.771v190.172h204.8v-190.172h87.771v201.874c0.001 0.174 0.003 0.381 0.003 0.587 0 41.483-33.464 75.152-74.869 75.481h-0.032z"],"attrs":[{},{},{}],"tags":["save","store","keep","reserve","record"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":118,"id":88,"name":"save","prevSize":24,"code":59739},"setIdx":0,"setId":1,"iconIdx":222},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM512 938.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0z","M381.156 267.377c-33.393 33.448-54.044 79.627-54.044 130.628 0 0.076 0 0.152 0 0.228v-0.012c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0c-0.001-0.156-0.001-0.341-0.001-0.525 0-27.345 11.088-52.101 29.015-70.016v0c18.327-17.443 43.181-28.173 70.543-28.173s52.216 10.731 70.585 28.213l-0.043-0.040c18.449 18.085 29.885 43.264 29.885 71.115 0 54.983-44.572 99.556-99.556 99.556-0.307 0-0.613-0.001-0.919-0.004h0.047c-23.436 0.316-42.351 19.231-42.667 42.636v56.92c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-19.343c34.751-8.129 64.687-25.311 88.169-48.916l0.008-0.008c33.387-33.532 54.025-79.777 54.025-130.844s-20.64-97.313-54.032-130.851l0.007 0.007c-34.036-32.508-80.253-52.515-131.144-52.515-50.6 0-96.58 19.779-130.632 52.028l0.087-0.081z","M583.111 753.777c0 39.273-31.837 71.111-71.111 71.111s-71.111-31.837-71.111-71.111c0-39.273 31.837-71.111 71.111-71.111s71.111 31.837 71.111 71.111z"],"attrs":[{},{},{}],"tags":["question-circle","help","info","query","uncertainty"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":117,"id":89,"name":"question-circle","prevSize":24,"code":59737},"setIdx":0,"setId":1,"iconIdx":223},{"icon":{"paths":["M750.032 98.514c-60.88-61-145.050-98.738-238.034-98.738-185.726 0-336.287 150.56-336.287 336.287 0 0.17 0 0.34 0 0.511v-0.026c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0c0-0.174 0-0.378 0-0.584 0-137.598 111.546-249.145 249.145-249.145s249.145 111.546 249.145 249.145c0 137.598-111.546 249.145-249.145 249.145-0.206 0-0.411 0-0.617-0.001h0.032c-24.093 0.325-43.539 19.77-43.864 43.832v117c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0-76.031c165.808-22.845 292.141-163.614 292.141-333.889 0-92.678-37.425-176.615-97.988-237.522l0.016 0.016z","M585.105 950.635c0 40.375-32.73 73.105-73.105 73.105s-73.105-32.73-73.105-73.105c0-40.375 32.73-73.105 73.105-73.105s73.105 32.73 73.105 73.105z"],"attrs":[{},{}],"tags":["question","help","query","doubt","uncertainty"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":116,"id":90,"name":"question","prevSize":24,"code":59738},"setIdx":0,"setId":1,"iconIdx":224},{"icon":{"paths":["M907.406 301.957l-290.385-290.385c-7.121-7.13-16.959-11.543-27.829-11.553h-129.703c-79.752 0-144.404 64.652-144.404 144.404v0 65.638h-65.638c-79.752 0-144.404 64.652-144.404 144.404v0 525.108c0 79.752 64.652 144.404 144.404 144.404v0h367.575c79.752 0 144.404-64.652 144.404-144.404v0-65.638h13.128c79.752 0 144.404-64.652 144.404-144.404v0-341.319c-0.443-10.296-4.774-19.502-11.552-26.254l-0.001-0.001zM630.149 134.448l154.382 154.382h-154.382zM682.66 879.575c0 36.251-29.387 65.638-65.638 65.638v0h-367.575c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h65.638v380.702c0 79.752 64.652 144.404 144.404 144.404v0h223.17zM774.553 735.17h-315.064c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h91.894v249.426c0.292 21.632 17.751 39.091 39.355 39.383h249.455v301.936c0 36.251-29.387 65.638-65.638 65.638v0z"],"attrs":[{}],"tags":["copy","duplicate","replicate","clone","reproduce"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":115,"id":91,"name":"copy","prevSize":24,"code":59735},"setIdx":0,"setId":1,"iconIdx":225},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file","document","record","data","paper"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":114,"id":92,"name":"file","prevSize":24,"code":59736},"setIdx":0,"setId":1,"iconIdx":226},{"icon":{"paths":["M629.028 789.943h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h468.114c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M863.086 1024h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-117.028h87.771v117.028c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0h-117.028v-87.771h117.028c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0z"],"attrs":[{},{}],"tags":["clone","duplicate","copy","replicate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":111,"id":93,"name":"clone","prevSize":24,"code":59733},"setIdx":0,"setId":1,"iconIdx":227},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M619.381 626.023c-7.448-7.637-17.839-12.375-29.336-12.375s-21.888 4.738-29.328 12.366l-0.008 0.009-48.71 48.71-48.71-48.71c-7.393-6.903-17.353-11.141-28.301-11.141-22.927 0-41.514 18.586-41.514 41.514 0 10.949 4.238 20.907 11.165 28.325l-0.022-0.025 48.71 48.71-48.71 48.71c-7.637 7.448-12.375 17.839-12.375 29.336s4.738 21.888 12.366 29.328l0.009 0.008c7.171 7.515 17.264 12.187 28.45 12.187 0.311 0 0.623-0.004 0.933-0.010l-0.047 0.001c0.057 0 0.126 0 0.193 0 11.401 0 21.713-4.657 29.139-12.174l48.714-48.714 48.71 48.71c7.43 7.52 17.742 12.178 29.142 12.178 0.067 0 0.136 0 0.204 0h-0.010c0.263 0.006 0.575 0.010 0.886 0.010 11.185 0 21.278-4.673 28.435-12.173l0.014-0.016c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008-48.71-48.71 48.71-48.71c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008z"],"attrs":[{},{}],"tags":["calendar-times","delete-event","clear-calendar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":110,"id":94,"name":"calendar-times","prevSize":24,"code":59730},"setIdx":0,"setId":1,"iconIdx":228},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 694.659h-221.406c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h221.406c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-minus","remove-event","delete-date","cancel-event"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":109,"id":95,"name":"calendar-minus","prevSize":24,"code":59731},"setIdx":0,"setId":1,"iconIdx":229},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 691.892h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-plus","add-event","new-date","schedule"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":108,"id":96,"name":"calendar-plus","prevSize":24,"code":59732},"setIdx":0,"setId":1,"iconIdx":230},{"icon":{"paths":["M614.393 512c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 102.431c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 921.569c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z"],"attrs":[{},{},{}],"tags":["ellipsis-v","more","options","menu","vertical","dots"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":107,"id":97,"name":"ellipsis-v","prevSize":24,"code":59728},"setIdx":0,"setId":1,"iconIdx":231},{"icon":{"paths":["M614.379 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M1023.886 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M204.868 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z"],"attrs":[{},{},{}],"tags":["ellipsis-h","more","options","menu","horizontal","dots"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":106,"id":98,"name":"ellipsis-h","prevSize":24,"code":59729},"setIdx":0,"setId":1,"iconIdx":232},{"icon":{"paths":["M848.457 1024c-9.363-0.189-18.033-2.998-25.352-7.723l0.191 0.115-311.296-217.088-311.296 217.088c-6.501 4.018-14.382 6.4-22.821 6.4s-16.32-2.381-23.010-6.509l0.189 0.108c-13.4-7.013-22.574-20.486-23.401-36.171l-0.004-0.107v-819.2c0-88.87 72.044-160.914 160.914-160.914v0h438.857c88.87 0 160.914 72.044 160.914 160.914v0 819.2c0 0.048 0 0.104 0 0.159 0 16.646-9.393 31.099-23.169 38.347l-0.237 0.114c-5.911 3.304-12.965 5.254-20.477 5.266h-0.004zM512 702.172c0.137-0.001 0.3-0.003 0.464-0.003 9.223 0 17.782 2.846 24.846 7.706l-0.148-0.096 267.411 186.075v-734.939c0-40.395-32.747-73.142-73.142-73.142v0h-438.857c-40.395 0-73.142 32.747-73.142 73.142v0 734.939l267.411-186.075c6.916-4.764 15.475-7.609 24.698-7.609 0.163 0 0.325 0.001 0.488 0.003h-0.025z"],"attrs":[{}],"tags":["bookmark","favorite","mark","save","tag"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":105,"id":99,"name":"bookmark","prevSize":24,"code":59726},"setIdx":0,"setId":1,"iconIdx":233},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM936.391 469.333h-157.013c-21.309-143.377-80.98-269.999-168.128-372.54l0.875 1.056c174.421 43.539 304.877 189.937 324.104 369.605l0.163 1.879zM330.524 554.667h362.951c-28.064 140.685-92.065 263.297-182.001 361.829l0.527-0.585c-89.411-97.947-153.411-220.56-180.673-356.452l-0.803-4.792zM330.524 469.333c28.064-140.685 92.065-263.297 182.001-361.829l-0.527 0.585c89.411 97.947 153.411 220.56 180.673 356.452l0.803 4.792zM411.876 97.849c-86.273 101.485-145.944 228.107-166.755 367.427l-0.499 4.057h-157.013c19.389-181.548 149.845-327.945 321.319-370.86l2.948-0.625zM87.609 552.96h157.013c21.309 143.377 80.98 269.999 168.128 372.54l-0.875-1.056c-173.937-43.335-304.18-188.936-324.092-367.845l-0.175-1.933zM612.124 924.444c86.273-101.485 145.944-228.107 166.755-367.427l0.499-4.057h157.013c-18.688 182.253-149.359 329.449-321.317 372.565l-2.949 0.627z"],"attrs":[{}],"tags":["globe","world","internet","global","earth"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":104,"id":100,"name":"globe","prevSize":24,"code":59727},"setIdx":0,"setId":1,"iconIdx":234},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["replay","repeat","redo","play-again","loop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":102,"id":101,"name":"replay","prevSize":24,"code":59725},"setIdx":0,"setId":1,"iconIdx":235},{"icon":{"paths":["M632.463 1023.971h-240.928c-24.813-0.335-44.839-20.361-45.174-45.141v-466.83l-322.241-440.294c-5.688-7.337-9.117-16.671-9.117-26.808 0-7.369 1.813-14.314 5.016-20.414l-0.116 0.241c7.747-14.706 22.885-24.586 40.34-24.695h903.493c17.471 0.11 32.608 9.989 40.236 24.445l0.12 0.25c3.089 5.86 4.901 12.805 4.901 20.173 0 10.136-3.43 19.471-9.191 26.908l0.075-0.1-322.241 440.294v466.797c-0.335 24.813-20.361 44.839-45.141 45.174h-0.032zM436.711 933.623h150.58v-436.68c0-0.064 0-0.138 0-0.212 0-9.955 3.401-19.116 9.105-26.383l-0.071 0.093 277.067-380.063h-722.782l278.271 380.063c5.634 7.174 9.035 16.335 9.035 26.29 0 0.075 0 0.15 0 0.224v-0.011z"],"attrs":[{}],"tags":["filter","refine","criteria","sort","selection"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":101,"id":102,"name":"filter","prevSize":24,"code":59724},"setIdx":0,"setId":1,"iconIdx":236},{"icon":{"paths":["M863.086 789.943h-117.028c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886v0h117.028c40.395 0 73.142-32.747 73.142-73.142v0-234.058c0-40.395-32.747-73.142-73.142-73.142v0h-702.171c-40.395 0-73.142 32.747-73.142 73.142v0 234.058c0 40.395 32.747 73.142 73.142 73.142v0h117.028c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-117.028c-88.87 0-160.914-72.044-160.914-160.914v0-234.058c0-88.87 72.044-160.914 160.914-160.914v0h702.171c88.87 0 160.914 72.044 160.914 160.914v0 234.058c0 88.87-72.044 160.914-160.914 160.914v0z","M746.058 321.828c-24.106-0.325-43.561-19.78-43.886-43.854v-190.203h-380.342v190.172c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v0-204.8c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 204.8c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z","M716.8 1024h-409.6c-40.395 0-73.142-32.747-73.142-73.142v0-409.6c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 409.6c0 40.395-32.747 73.142-73.142 73.142v0zM321.828 936.228h380.342v-380.342h-380.342z"],"attrs":[{},{},{}],"tags":["print","printout","hard-copy","document","printer"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":99,"id":103,"name":"print","prevSize":24,"code":59723},"setIdx":0,"setId":1,"iconIdx":237},{"icon":{"paths":["M980.093 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-right","text-alignment","right-aligned","end-alignment","text-flush-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":98,"id":104,"name":"align-right","prevSize":24,"code":59718},"setIdx":0,"setId":1,"iconIdx":238},{"icon":{"paths":["M624.033 453.952h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 221.761h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 686.143h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M624.033 918.335h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z"],"attrs":[{},{},{},{}],"tags":["align-left","text-alignment","left-aligned","start-alignment","text-flush-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":97,"id":105,"name":"align-left","prevSize":24,"code":59719},"setIdx":0,"setId":1,"iconIdx":239},{"icon":{"paths":["M804.558 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M804.558 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-center","text-alignment","center-text","middle-alignment","centered-layout"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":96,"id":106,"name":"align-center","prevSize":24,"code":59720},"setIdx":0,"setId":1,"iconIdx":240},{"icon":{"paths":["M980.093 438.861h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-justify","text-alignment","justify-text","uniform-spacing","balanced-layout"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":95,"id":107,"name":"align-justify","prevSize":24,"code":59721},"setIdx":0,"setId":1,"iconIdx":241},{"icon":{"paths":["M512 683.439c-94.683 0-171.439-76.755-171.439-171.439s76.755-171.439 171.439-171.439c94.683 0 171.439 76.755 171.439 171.439v0c0 94.683-76.755 171.439-171.439 171.439v0zM512 428.329c-46.211 0-83.671 37.462-83.671 83.671s37.462 83.671 83.671 83.671c46.211 0 83.671-37.462 83.671-83.671v0c0-46.211-37.462-83.671-83.671-83.671v0z","M515.511 1023.977c-71.489-0.329-129.316-58.359-129.316-129.895 0-0.411 0.001-0.823 0.005-1.234v0.063c-0.496-11.009-7.26-20.325-16.788-24.505l-0.181-0.070c-3.653-1.718-7.933-2.721-12.448-2.721-7.858 0-15.007 3.038-20.337 8.003l0.018-0.016c-23.441 23.268-55.642 37.739-91.222 38.032h-0.056c-0.252 0.001-0.55 0.003-0.848 0.003-35.579 0-67.876-14.051-91.644-36.906l0.043 0.041c-23.515-23.508-38.058-55.987-38.058-91.864s14.545-68.356 38.058-91.864v0c5.876-5.37 9.547-13.066 9.547-21.622 0-3.145-0.496-6.173-1.414-9.011l0.058 0.207c-5.723-9.782-16.134-16.274-28.071-16.384h-0.015c-71.692-0.291-129.966-57.335-132.231-128.518l-0.005-0.208c0.332-71.488 58.36-129.312 129.895-129.312 0.206 0 0.413 0 0.618 0.001h-0.032c11.009-0.496 20.325-7.26 24.505-16.788l0.070-0.181c1.718-3.653 2.721-7.933 2.721-12.448 0-7.858-3.038-15.007-8.003-20.337l0.016 0.018c-23.268-23.441-37.739-55.642-38.032-91.222v-0.056c-0.012-0.671-0.019-1.462-0.019-2.255 0-35.137 14.077-66.986 36.901-90.213l-0.018 0.019c23.508-23.515 55.987-38.058 91.864-38.058s68.356 14.545 91.864 38.058v0c6.075 5.789 14.317 9.35 23.391 9.35 3.125 0 6.153-0.422 9.028-1.214l-0.239 0.056c10.177-5.653 17.174-15.957 18.131-27.962l0.008-0.123c0-0.019 0-0.041 0-0.063 0-71.915 57.154-130.481 128.518-132.752l0.208-0.005c71.237 0.66 128.732 58.56 128.732 129.89 0 0.413-0.001 0.826-0.005 1.238v-0.063c0.477 11.185 6.924 20.76 16.218 25.665l0.166 0.080c2.998 1.135 6.465 1.792 10.084 1.792 7.909 0 15.084-3.138 20.35-8.236l-0.008 0.007c23.441-23.268 55.642-37.739 91.222-38.032h0.056c1.163-0.038 2.53-0.062 3.903-0.062 34.624 0 65.95 14.12 88.535 36.914l0.010 0.010c23.515 23.508 38.058 55.987 38.058 91.864s-14.545 68.356-38.058 91.864v0c-4.99 5.871-8.027 13.54-8.027 21.916 0 3.667 0.581 7.197 1.657 10.505l-0.067-0.24c5.653 10.177 15.957 17.174 27.962 18.131l0.123 0.008c71.192 0.937 128.814 57.74 131.062 128.518l0.005 0.208c-0.66 71.237-58.56 128.732-129.89 128.732-0.413 0-0.826-0.001-1.238-0.005h0.063c-11.185 0.477-20.76 6.924-25.665 16.218l-0.080 0.166c-1.135 2.998-1.792 6.465-1.792 10.084 0 7.909 3.138 15.084 8.236 20.35l-0.007-0.008c23.268 23.441 37.739 55.642 38.032 91.222v0.056c0.012 0.671 0.019 1.462 0.019 2.255 0 35.137-14.077 66.986-36.901 90.213l0.018-0.019c-23.508 23.515-55.987 38.058-91.864 38.058s-68.356-14.545-91.864-38.058v0c-5.258-5.092-12.433-8.23-20.341-8.23-3.62 0-7.086 0.657-10.287 1.86l0.202-0.066c-9.782 5.723-16.274 16.134-16.384 28.071v0.015c-0.937 71.192-57.74 128.814-128.518 131.062l-0.208 0.005zM356.944 777.643c0.372-0.004 0.812-0.007 1.252-0.007 15.867 0 30.927 3.45 44.471 9.643l-0.669-0.274c41.82 17.762 70.846 58.017 71.967 105.181l0.003 0.14c-0.003 0.185-0.004 0.402-0.004 0.62 0 23.297 18.4 42.297 41.461 43.26l0.088 0.003c23.005-1.873 40.964-21.005 40.964-44.331 0-0.254-0.003-0.509-0.007-0.761v0.038c0.3-47.575 28.116-88.582 68.322-107.933l0.723-0.313c13.278-5.676 28.727-8.976 44.947-8.976 32.246 0 61.445 13.042 82.611 34.139l-0.003-0.003c7.488 7.488 17.831 12.119 29.255 12.119 22.85 0 41.374-18.524 41.374-41.374 0-11.425-4.631-21.769-12.119-29.255v0c-20.848-21.12-33.725-50.154-33.725-82.193 0-16.378 3.364-31.971 9.44-46.123l-0.291 0.761c18.745-40.97 59.339-68.943 106.478-69.044h0.014c0.185 0.003 0.403 0.004 0.621 0.004 22.975 0 41.712-18.138 42.674-40.875l0.003-0.088c-1.57-22.953-20.575-40.976-43.788-40.976-0.446 0-0.889 0.007-1.332 0.019l0.064-0.001c-47.872-1.343-88.773-29.867-107.929-70.632l-0.317-0.752c-5.566-13.342-8.8-28.841-8.8-45.097 0-32.536 12.954-62.046 33.987-83.655l-0.026 0.027c7.488-7.488 12.119-17.831 12.119-29.255 0-22.85-18.524-41.374-41.374-41.374-11.425 0-21.769 4.631-29.255 12.119v0c-20.824 19.383-48.841 31.278-79.638 31.278-63.284 0-114.836-50.233-116.956-113.001l-0.005-0.195c0.003-0.185 0.004-0.403 0.004-0.621 0-22.975-18.138-41.712-40.875-42.674l-0.088-0.003c-22.953 1.57-40.976 20.575-40.976 43.788 0 0.446 0.007 0.889 0.019 1.332l-0.001-0.064c-1.343 47.872-29.867 88.773-70.632 107.929l-0.752 0.317c-13.342 5.566-28.841 8.8-45.097 8.8-32.536 0-62.046-12.954-83.655-33.987l0.027 0.026c-7.488-7.488-17.831-12.119-29.255-12.119-22.85 0-41.374 18.524-41.374 41.374 0 11.425 4.631 21.769 12.119 29.255v0c20.603 21.075 33.316 49.942 33.316 81.777 0 16.537-3.43 32.274-9.617 46.535l0.292-0.757c-17.762 41.82-58.017 70.846-105.181 71.967l-0.14 0.003c-0.185-0.003-0.402-0.004-0.62-0.004-23.297 0-42.297 18.4-43.26 41.461l-0.003 0.088c1.873 23.005 21.005 40.964 44.331 40.964 0.254 0 0.509-0.003 0.761-0.007h-0.038c47.575 0.3 88.582 28.116 107.933 68.322l0.313 0.723c5.676 13.278 8.976 28.727 8.976 44.947 0 32.246-13.042 61.445-34.139 82.611l0.003-0.003c-7.488 7.488-12.119 17.831-12.119 29.255 0 22.85 18.524 41.374 41.374 41.374 11.425 0 21.769-4.631 29.255-12.119v0c21.423-20.481 50.464-33.15 82.462-33.352h0.040zM825.038 639.555v0z"],"attrs":[{},{}],"tags":["cog","settings","gears","options","configuration"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":94,"id":108,"name":"cog","prevSize":24,"code":59722},"setIdx":0,"setId":1,"iconIdx":242},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 177.736 8.28 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-206.991 0-206.991-213.062-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M512 908.319c-0.057 0-0.125 0-0.193 0-11.369 0-21.653-4.644-29.058-12.14l-156.213-156.213c-6.884-7.373-11.11-17.304-11.11-28.222 0-22.863 18.535-41.398 41.398-41.398 10.919 0 20.849 4.226 28.246 11.134l-0.025-0.022 126.954 126.954 126.954-126.954c7.373-6.884 17.304-11.11 28.222-11.11 22.863 0 41.398 18.535 41.398 41.398 0 10.919-4.226 20.849-11.134 28.246l0.022-0.025-156.209 158.416c-7.128 6.219-16.515 10.011-26.787 10.011-0.868 0-1.73-0.027-2.585-0.080l0.116 0.006z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-download","download","data","fetch","retrieval"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":93,"id":109,"name":"cloud-download","prevSize":24,"code":59715},"setIdx":0,"setId":1,"iconIdx":243},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 189.879 41.951 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-137.994 0-206.991-124.194-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M668.209 713.47c-11.406-0.137-21.709-4.745-29.262-12.15l-126.947-126.947-126.954 126.954c-7.373 6.884-17.304 11.11-28.222 11.11-22.863 0-41.398-18.535-41.398-41.398 0-10.919 4.226-20.849 11.134-28.246l-0.022 0.025 156.209-156.209c7.427-7.616 17.79-12.341 29.254-12.341s21.827 4.725 29.246 12.331l0.008 0.009 156.209 156.209c7.48 7.489 12.108 17.832 12.108 29.254s-4.626 21.765-12.108 29.256v0c-7.6 7.307-17.868 11.888-29.205 12.143l-0.049 0.001z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-upload","backup","save","upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":92,"id":110,"name":"cloud-upload","prevSize":24,"code":59716},"setIdx":0,"setId":1,"iconIdx":244},{"icon":{"paths":["M761.085 885.627h-387.465c-206.337-0.017-373.598-167.289-373.598-373.627 0-206.348 167.278-373.627 373.627-373.627 152.926 0 284.392 91.876 342.215 223.439l0.939 2.397c13.246-2.68 28.531-4.285 44.166-4.428l0.115-0.001c141.466 8.944 253.978 121.457 262.882 262.11l0.042 0.813c0 145.209-117.715 262.923-262.923 262.923v0zM373.619 221.401c-160.494 0-290.599 130.105-290.599 290.599s130.105 290.599 290.599 290.599v0h387.465c99.226-0.314 179.581-80.668 179.895-179.864v-0.030c-8.504-95.738-84.157-171.391-179.139-179.84l-0.755-0.054c-19.989 0.459-38.949 4.276-56.529 10.907l1.178-0.389c-4.752 1.958-10.27 3.095-16.052 3.095s-11.3-1.136-16.34-3.199l0.288 0.104c-9.801-5.017-17.16-13.636-20.404-24.069l-0.077-0.287c-36.721-121.012-147.288-207.574-278.073-207.574-0.511 0-1.022 0.001-1.533 0.004h0.079z"],"attrs":[{}],"tags":["cloud","internet","storage","weather","data"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":91,"id":111,"name":"cloud","prevSize":24,"code":59717},"setIdx":0,"setId":1,"iconIdx":245},{"icon":{"paths":["M45.313 1022.421c-0.136 0.001-0.296 0.003-0.456 0.003-11.964 0-22.806-4.803-30.702-12.588l0.006 0.006c-8.248-8.149-13.356-19.461-13.356-31.966 0-1.401 0.065-2.787 0.19-4.155l-0.013 0.176 18.572-230.049c0.852-11.108 5.734-20.935 13.169-28.147l662.6-662.6c34.079-31.973 80.059-51.615 130.628-51.615 2.096 0 4.186 0.034 6.267 0.101l-0.303-0.008c52.335 0.418 99.758 21.108 134.873 54.592l-0.079-0.074c34.783 35.688 56.235 84.513 56.235 138.348 0 50.427-18.822 96.457-49.825 131.448l0.181-0.208-663.188 665.585c-7.185 7.16-16.72 11.966-27.348 13.161l-0.211 0.020-233.044 20.968zM105.22 767.211l-12.581 164.15 164.15-14.978 653.004-654.202c15.132-17.82 24.333-41.087 24.333-66.503 0-56.908-46.133-103.043-103.043-103.043-0.341 0-0.681 0.001-1.021 0.006h0.052c-1.828-0.124-3.962-0.194-6.112-0.194-25.163 0-48.075 9.635-65.249 25.419l0.069-0.063zM727.071 84.852v0z"],"attrs":[{}],"tags":["pencil","edit","write","draw","update"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":90,"id":112,"name":"pencil","prevSize":24,"code":59714},"setIdx":0,"setId":1,"iconIdx":246},{"icon":{"paths":["M617.025 525.129c-108.758 0-196.923-88.165-196.923-196.923s88.165-196.923 196.923-196.923c108.758 0 196.923 88.165 196.923 196.923v0c0 108.758-88.165 196.923-196.923 196.923v0zM617.025 210.052c-65.254 0-118.154 52.9-118.154 118.154s52.9 118.154 118.154 118.154c65.254 0 118.154-52.9 118.154-118.154v0c0-65.254-52.9-118.154-118.154-118.154v0z","M984.615 892.718c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-102.4-55.664-170.667-328.206-170.667s-328.206 68.267-328.206 170.667c0 21.751-17.633 39.385-39.385 39.385s-39.385-17.633-39.385-39.385v0c0-249.436 285.145-249.436 406.975-249.436s406.975 0 406.975 249.436c-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z","M318.753 567.664h-16.804c-80.61-8.022-143.044-75.489-143.044-157.538 0-87.412 70.862-158.273 158.273-158.273 5.362 0 10.663 0.267 15.888 0.788l-0.66-0.053c21.012 0.932 37.694 18.192 37.694 39.348 0 21.751-17.633 39.385-39.385 39.385-2.183 0-4.326-0.177-6.414-0.519l0.228 0.031c-2.281-0.241-4.928-0.378-7.607-0.378-18.98 0-36.35 6.897-49.738 18.321l0.107-0.089c-15.663 12.706-26.198 31.205-28.33 52.186l-0.027 0.326c-0.273 2.455-0.43 5.301-0.43 8.183 0 40.775 31.191 74.267 71.015 77.915l0.306 0.022c2.052 0.186 4.437 0.293 6.848 0.293 15.535 0 30.039-4.409 42.331-12.043l-0.342 0.198c5.898-3.695 13.065-5.886 20.742-5.886 21.812 0 39.494 17.682 39.494 39.494 0 14.133-7.424 26.533-18.586 33.511l-0.166 0.097c-23.058 14.912-51.098 24.022-81.222 24.678l-0.174 0.002z","M39.385 853.333c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-141.785 37.809-236.308 223.179-236.308 21.751 0 39.385 17.633 39.385 39.385s-17.633 39.385-39.385 39.385v0c-123.406 0-144.41 39.385-144.41 157.538-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z"],"attrs":[{},{},{},{}],"tags":["users","group","team","people","crowd"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":88,"id":113,"name":"users","prevSize":24,"code":59713},"setIdx":0,"setId":1,"iconIdx":247},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M682.667 554.667h-170.667c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 241.777h128c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["clock","time","hours","minutes","seconds"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":87,"id":114,"name":"clock","prevSize":24,"code":59712},"setIdx":0,"setId":1,"iconIdx":248},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{}],"tags":["user-minus","remove-user","delete-user","user-deletion","eliminate-user"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":83,"id":115,"name":"user-minus","prevSize":24,"code":59710},"setIdx":0,"setId":1,"iconIdx":249},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M927.518 660.4c-24.454-0.33-44.19-20.066-44.52-44.488v-207.79c0-24.587 19.932-44.52 44.52-44.52s44.52 19.932 44.52 44.52v0 207.758c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{},{}],"tags":["user-plus","add-user","new-user","register","signup"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":86,"id":116,"name":"user-plus","prevSize":24,"code":59711},"setIdx":0,"setId":1,"iconIdx":250},{"icon":{"paths":["M979.856 319.009h-935.714c-24.224 0-43.862-19.638-43.862-43.862s19.638-43.862 43.862-43.862h935.714c24.224 0 43.862 19.638 43.862 43.862s-19.638 43.862-43.862 43.862v0z","M771.66 1023.718h-519.321c-2.865 0.208-6.208 0.328-9.577 0.328-74.752 0-135.856-58.437-140.12-132.119l-0.018-0.377v-613.477c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 613.477c0 23.977 27.486 44.447 58.483 44.447h519.321c32.75 0 58.483-20.468 58.483-44.447v-613.477c0-26.162 21.208-47.37 47.37-47.37s47.37 21.208 47.37 47.37v0 613.477c-4.282 74.060-65.385 132.496-140.136 132.496-3.37 0-6.712-0.119-10.022-0.352l0.445 0.025zM778.678 263.452c-0.175 0.003-0.382 0.004-0.589 0.004-23.9 0-43.276-19.376-43.276-43.276 0-0.207 0.001-0.414 0.004-0.62v0.032-87.138c0-23.977-28.071-44.447-58.483-44.447h-326.915c-32.166 0-58.483 20.468-58.483 44.447v87.138c0 24.224-19.638 43.862-43.862 43.862s-43.862-19.638-43.862-43.862v0-87.138c4.697-74.022 65.883-132.278 140.675-132.278 1.945 0 3.88 0.040 5.806 0.118l-0.276-0.008h325.161c2.174-0.119 4.719-0.188 7.28-0.188 74.82 0 136.023 58.3 140.66 131.951l0.021 0.407v87.138c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M407.901 804.41c-24.092-0.325-43.537-19.769-43.862-43.83v-264.955c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M616.099 804.41c-24.224 0-43.862-19.638-43.862-43.862v0-264.924c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0 0.001 0 0.003 0 0.004 0 24.342-19.568 44.112-43.83 44.443h-0.032z"],"attrs":[{},{},{},{}],"tags":["trash","delete","remove","garbage","waste"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":81,"id":117,"name":"trash","prevSize":24,"code":59709},"setIdx":0,"setId":1,"iconIdx":251},{"icon":{"paths":["M863.070 0.023h-702.14c-88.866 0-160.907 72.041-160.907 160.907v0 351.070c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0-351.070c0-40.394 32.746-73.139 73.139-73.139v0h702.14c40.394 0 73.139 32.746 73.139 73.139v0 702.14c0 40.394-32.746 73.139-73.139 73.139v0h-351.070c-24.236 0-43.884 19.648-43.884 43.884s19.648 43.884 43.884 43.884v0h351.070c88.866 0 160.907-72.041 160.907-160.907v0-702.14c0-88.866-72.041-160.907-160.907-160.907v0z","M465.775 581.628c5.003 2.189 10.831 3.478 16.956 3.511h234.059c24.236 0 43.884-19.648 43.884-43.884s-19.648-43.884-43.884-43.884v0h-128.141l188.408-188.408c7.297-7.815 11.777-18.343 11.777-29.916 0-24.236-19.648-43.884-43.884-43.884-11.574 0-22.101 4.48-29.942 11.802l0.026-0.023-188.408 188.408v-128.141c0-24.236-19.648-43.884-43.884-43.884s-43.884 19.648-43.884 43.884v0 234.047c0.033 6.137 1.322 11.965 3.62 17.252l-0.11-0.284c4.316 10.739 12.665 19.089 23.125 23.305l0.28 0.099z","M277.953 643.651h-175.535c-56.418 0.33-102.065 45.976-102.396 102.364v175.567c0.33 56.418 45.976 102.065 102.364 102.396h175.567c56.418-0.33 102.065-45.976 102.396-102.364v-175.567c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM292.581 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-175.535c-8.079 0-14.628-6.55-14.628-14.628v0-175.535c0-8.079 6.55-14.628 14.628-14.628v0h175.535c8.079 0 14.628 6.55 14.628 14.628v0z"],"attrs":[{},{},{}],"tags":["window-minimize","shrink","small-screen","collapse","decrease-size"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":80,"id":118,"name":"window-minimize","prevSize":24,"code":59706},"setIdx":0,"setId":1,"iconIdx":252},{"icon":{"paths":["M863.070 1023.977h-351.070c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h351.070c40.394 0 73.139-32.746 73.139-73.139v0-702.14c0-40.394-32.746-73.139-73.139-73.139v0h-702.14c-40.394 0-73.139 32.746-73.139 73.139v0 351.070c0 24.236-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0-351.070c0-88.866 72.041-160.907 160.907-160.907v0h702.14c88.866 0 160.907 72.041 160.907 160.907v0 702.14c0 88.866-72.041 160.907-160.907 160.907v0z","M746.047 555.884c-24.105-0.325-43.559-19.779-43.884-43.852v-190.195h-190.163c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h234.047c24.105 0.325 43.559 19.779 43.884 43.852v234.079c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M482.745 585.139c-11.709-0.922-21.991-6.371-29.214-14.58l-0.041-0.048c-6.935-7.728-11.175-17.996-11.175-29.255s4.24-21.528 11.211-29.297l-0.036 0.041 263.303-263.303c7.815-7.297 18.343-11.777 29.916-11.777 24.236 0 43.884 19.648 43.884 43.884 0 11.574-4.48 22.101-11.802 29.942l0.023-0.026-266.813 259.792c-7.264 8.256-17.547 13.707-29.106 14.619l-0.151 0.010z","M277.953 1023.977h-175.535c-56.418-0.33-102.065-45.976-102.396-102.364v-175.567c0.33-56.418 45.976-102.065 102.364-102.396h175.567c56.418 0.33 102.065 45.976 102.396 102.364v175.567c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 731.419c-8.079 0-14.628 6.55-14.628 14.628v0 175.535c0 8.079 6.55 14.628 14.628 14.628v0h175.535c8.079 0 14.628-6.55 14.628-14.628v0-175.535c0-8.079-6.55-14.628-14.628-14.628v0z"],"attrs":[{},{},{},{}],"tags":["window-maximize","enlarge","full-screen","expand","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":79,"id":119,"name":"window-maximize","prevSize":24,"code":59707},"setIdx":0,"setId":1,"iconIdx":253},{"icon":{"paths":["M862.106 1022.571h-700.213c-88.622 0-160.465-71.843-160.465-160.465v0-700.213c0-88.622 71.843-160.465 160.465-160.465v0h350.106c24.17 0 43.763 19.594 43.763 43.763s-19.594 43.763-43.763 43.763v0h-350.106c-40.283 0-72.938 32.656-72.938 72.938v0 700.213c0 40.283 32.656 72.938 72.938 72.938v0h700.213c40.283 0 72.938-32.656 72.938-72.938v0-350.106c0-24.17 19.594-43.763 43.763-43.763s43.763 19.594 43.763 43.763v0 350.106c0 88.622-71.843 160.465-160.465 160.465v0z","M978.808 322.359c-24.038-0.324-43.439-19.725-43.763-43.732v-189.673h-189.641c-24.17 0-43.763-19.594-43.763-43.763s19.594-43.763 43.763-43.763v0h233.405c24.038 0.324 43.439 19.725 43.763 43.732v233.436c-0.324 24.038-19.725 43.439-43.732 43.763h-0.031z","M599.527 468.237c-11.677-0.919-21.931-6.354-29.134-14.54l-0.041-0.048c-6.916-7.706-11.145-17.947-11.145-29.175s4.229-21.469 11.18-29.216l-0.036 0.041 379.281-379.281c8.011-8.58 19.39-13.929 32.018-13.929 24.17 0 43.763 19.594 43.763 43.763 0 12.628-5.349 24.007-13.903 31.994l-0.026 0.023-382.782 375.78c-7.244 8.233-17.498 13.669-29.026 14.579l-0.15 0.010z"],"attrs":[{},{},{}],"tags":["external-link","new-tab","external","link","outside"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":78,"id":120,"name":"external-link","prevSize":24,"code":59708},"setIdx":0,"setId":1,"iconIdx":254},{"icon":{"paths":["M512 1023.452c-234.044 0-423.774-189.73-423.774-423.774s189.73-423.774 423.774-423.774v0h146.13c24.211 0 43.839 19.627 43.839 43.839s-19.627 43.839-43.839 43.839v0h-146.13c-185.621 0-336.097 150.475-336.097 336.097s150.475 336.097 336.097 336.097c185.621 0 336.097-150.475 336.097-336.097v0c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c-0.333 233.911-189.864 423.443-423.743 423.774h-0.032z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-0.004-0.004c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l144.376-144.376-144.376-144.376c-8.595-8.025-13.953-19.423-13.953-32.074 0-24.211 19.627-43.839 43.839-43.839 12.65 0 24.048 5.358 32.049 13.927l0.023 0.026 175.355 175.355c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0l-175.355 175.355c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["refresh","update","reload","renew","repeat"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":77,"id":121,"name":"refresh","prevSize":24,"code":59704},"setIdx":0,"setId":1,"iconIdx":255},{"icon":{"paths":["M512 528.516c-136.816 0-247.725-110.91-247.725-247.725s110.91-247.725 247.725-247.725c136.816 0 247.725 110.91 247.725 247.725v0c0 136.816-110.91 247.725-247.725 247.725v0zM512 132.155c-82.088 0-148.635 66.547-148.635 148.635s66.547 148.635 148.635 148.635c82.088 0 148.635-66.547 148.635-148.635v0c0-82.088-66.547-148.635-148.635-148.635v0z","M974.421 990.935c-27.214-0.367-49.178-22.331-49.545-49.509v-0.036c0-128.817-70.024-214.696-412.876-214.696s-412.876 85.879-412.876 214.696c0 27.363-22.182 49.545-49.545 49.545s-49.545-22.182-49.545-49.545v0c0-313.786 358.706-313.786 511.966-313.786s511.966 0 511.966 313.786c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{}],"tags":["user","profile","person","account","individual"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":76,"id":122,"name":"user","prevSize":24,"code":59705},"setIdx":0,"setId":1,"iconIdx":256},{"icon":{"paths":["M980.247 964.701h-936.496c-16.088-0.051-30.159-8.633-37.933-21.458l-0.111-0.198c-3.59-6.323-5.705-13.888-5.705-21.949s2.115-15.627 5.823-22.173l-0.117 0.224 468.247-819.433c8.296-12.379 22.232-20.419 38.044-20.419s29.748 8.039 37.942 20.254l0.104 0.165 468.247 819.433c3.59 6.323 5.705 13.888 5.705 21.949s-2.115 15.627-5.823 22.173l0.117-0.224c-7.885 13.022-21.958 21.606-38.038 21.657h-0.007zM119.257 876.905h785.486l-392.743-687.154z","M512 642.78c-24.113-0.325-43.573-19.786-43.898-43.866v-204.89c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 204.858c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z","M512 818.373c-24.113-0.325-43.573-19.786-43.898-43.866v-29.297c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 29.265c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z"],"attrs":[{},{},{}],"tags":["exclamation-triangle","warning","alert","danger","caution"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":75,"id":123,"name":"exclamation-triangle","prevSize":24,"code":59682},"setIdx":0,"setId":1,"iconIdx":257},{"icon":{"paths":["M788.745 110.712h-69.186v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-249.071v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-69.186c-84.063 0-152.209 68.147-152.209 152.209v0 608.839c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-608.839c0-84.063-68.147-152.209-152.209-152.209v0zM235.255 193.735h69.186v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h249.071v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h69.186c38.21 0 69.186 30.976 69.186 69.186v0 152.209h-691.862v-152.209c0-38.21 30.976-69.186 69.186-69.186v0zM788.745 940.947h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-373.606h691.862v373.606c0 38.21-30.976 69.186-69.186 69.186v0z"],"attrs":[{}],"tags":["calendar","date","event","schedule","day"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":74,"id":124,"name":"calendar","prevSize":24,"code":59687},"setIdx":0,"setId":1,"iconIdx":258},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M625.777 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-left","back","return","left","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":73,"id":125,"name":"chevron-circle-left","prevSize":24,"code":59688},"setIdx":0,"setId":1,"iconIdx":259},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-down","download","decrease","down","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":70,"id":126,"name":"chevron-circle-down","prevSize":24,"code":59689},"setIdx":0,"setId":1,"iconIdx":260},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M398.223 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-right","next","proceed","right","forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":69,"id":127,"name":"chevron-circle-right","prevSize":24,"code":59690},"setIdx":0,"setId":1,"iconIdx":261},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-up","upload","increase","up","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":68,"id":128,"name":"chevron-circle-up","prevSize":24,"code":59691},"setIdx":0,"setId":1,"iconIdx":262},{"icon":{"paths":["M512 902.549c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-260.364c-5.628-8.568-8.981-19.073-8.981-30.354 0-30.81 24.977-55.792 55.792-55.792 10.145 0 19.649 2.705 27.846 7.433l-0.269-0.143 223.173 223.173 223.173-223.173c7.925-4.589 17.434-7.289 27.577-7.289 30.81 0 55.792 24.977 55.792 55.792 0 11.285-3.353 21.785-9.108 30.566l0.128-0.209-258.132 258.132c-9.737 10.997-23.705 18.053-39.331 18.593l-0.092 0.004z","M512 493.405c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-262.596c-3.437-7.037-5.446-15.305-5.446-24.041 0-30.81 24.977-55.792 55.792-55.792 8.741 0 17.009 2.009 24.377 5.597l-0.329-0.145 223.173 223.173 223.173-223.173c7.037-3.437 15.305-5.446 24.041-5.446 30.81 0 55.792 24.977 55.792 55.792 0 8.741-2.009 17.009-5.597 24.377l0.145-0.329-260.364 260.364c-9.233 10.493-22.31 17.429-37.002 18.583l-0.192 0.012z"],"attrs":[{},{}],"tags":["angle-double-down","fast-fall","down","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":67,"id":129,"name":"angle-double-down","prevSize":24,"code":59692},"setIdx":0,"setId":1,"iconIdx":263},{"icon":{"paths":["M436.578 832.544c-0.073 0-0.172 0-0.262 0-15.535 0-29.584-6.348-39.707-16.591l-0.004-0.004-261.716-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l261.716-261.716c8.688-5.708 19.333-9.102 30.778-9.102 31.242 0 56.568 25.327 56.568 56.568 0 10.286-2.746 19.925-7.538 28.233l0.144-0.272-226.267 226.267 226.267 226.267c10.22 10.237 16.542 24.365 16.542 39.973s-6.32 29.742-16.542 39.973v0c-9.854 8.923-22.994 14.389-37.408 14.389-0.902 0-1.8-0.024-2.694-0.065l0.124 0.004z","M851.399 832.544c-15.091-1.188-28.351-8.214-37.656-18.795l-0.055-0.065-263.977-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l263.977-259.453c7.129-3.487 15.515-5.521 24.379-5.521 31.242 0 56.568 25.327 56.568 56.568 0 8.864-2.038 17.25-5.669 24.715l0.144-0.336-226.267 226.267 226.267 226.267c8.942 9.959 14.408 23.201 14.408 37.714s-5.466 27.749-14.45 37.763l0.045-0.055c-9.366 10.641-22.619 17.666-37.517 18.843l-0.193 0.014z"],"attrs":[{},{}],"tags":["angle-double-left","fast-return","left","back","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":66,"id":130,"name":"angle-double-left","prevSize":24,"code":59693},"setIdx":0,"setId":1,"iconIdx":264},{"icon":{"paths":["M587.102 831.182c-0.073 0-0.171 0-0.259 0-15.47 0-29.463-6.321-39.534-16.519l-0.004-0.004c-10.173-10.194-16.472-24.266-16.472-39.803s6.29-29.611 16.472-39.809v0l225.304-225.304-225.304-225.304c-3.536-7.161-5.605-15.588-5.605-24.492 0-31.111 25.217-56.325 56.325-56.325 10.665 0 20.638 2.967 29.14 8.115l-0.251-0.143 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.83 11.106-23.933 18.225-39.711 18.775l-0.094 0.004z","M174.042 831.182c-15.029-1.181-28.228-8.178-37.495-18.716l-0.053-0.063c-8.9-9.92-14.342-23.099-14.342-37.554s5.442-27.63 14.391-37.603l-0.045 0.053 225.304-225.304-225.304-225.304c-3.467-7.105-5.497-15.45-5.497-24.276 0-31.111 25.217-56.325 56.325-56.325 8.82 0 17.176 2.028 24.609 5.644l-0.339-0.145 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.32 10.596-22.521 17.598-37.357 18.765l-0.192 0.014z"],"attrs":[{},{}],"tags":["angle-double-right","fast-proceed","right","next","forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":65,"id":131,"name":"angle-double-right","prevSize":24,"code":59694},"setIdx":0,"setId":1,"iconIdx":265},{"icon":{"paths":["M768.744 493.657c-0.079 0-0.163 0-0.259 0-15.11 0-28.77-6.175-38.616-16.135l-220.071-220.071-220.067 220.067c-6.991 3.451-15.223 5.479-23.923 5.479-30.385 0-55.016-24.631-55.016-55.016 0-10.412 2.899-20.155 7.927-28.458l-0.139 0.247 254.542-254.542c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l256.744 256.744c9.943 9.955 16.087 23.695 16.087 38.874s-6.151 28.926-16.087 38.877v0c-9.583 8.683-22.363 13.999-36.378 13.999-0.883 0-1.752-0.019-2.623-0.067l0.127 0.007z","M768.744 897.118c-14.683-1.159-27.57-7.987-36.629-18.283l-0.055-0.060-220.067-220.067-220.067 220.067c-6.935 3.391-15.091 5.371-23.707 5.371-30.385 0-55.016-24.631-55.016-55.016 0-8.623 1.987-16.772 5.515-24.038l-0.139 0.331 256.744-256.744c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l252.342 256.744c8.695 9.691 14.011 22.565 14.011 36.678s-5.316 26.99-14.059 36.726l0.043-0.055c-9.104 10.351-22.001 17.184-36.486 18.331l-0.187 0.012z"],"attrs":[{},{}],"tags":["angle-double-up","fast-rise","lift","double-up","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":64,"id":132,"name":"angle-double-up","prevSize":24,"code":59695},"setIdx":0,"setId":1,"iconIdx":266},{"icon":{"paths":["M512 724.21c-0.086 0-0.192 0-0.293 0-17.487 0-33.3-7.139-44.687-18.671l-0.006-0.006-294.549-297.097c-6.421-9.779-10.246-21.757-10.246-34.639 0-35.163 28.506-63.662 63.662-63.662 11.573 0 22.424 3.091 31.773 8.485l-0.306-0.164 254.656 254.656 254.656-254.656c9.044-5.23 19.894-8.318 31.469-8.318 35.163 0 63.662 28.506 63.662 63.662 0 12.88-3.82 24.863-10.395 34.879l0.149-0.244-297.097 297.097c-10.874 11.029-25.782 18.050-42.325 18.671l-0.112 0.002z"],"attrs":[{}],"tags":["angle-down","fall","down","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":224,"id":133,"name":"angle-down","prevSize":24,"code":59696},"setIdx":0,"setId":1,"iconIdx":267},{"icon":{"paths":["M645.785 836.904c-0.077 0-0.174 0-0.264 0-15.744 0-29.987-6.434-40.247-16.814l-267.57-267.57c-10.36-10.374-16.768-24.697-16.768-40.517s6.404-30.147 16.768-40.517v0l267.566-265.27c8.804-5.784 19.594-9.224 31.197-9.224 31.667 0 57.335 25.671 57.335 57.335 0 10.424-2.782 20.194-7.64 28.617l0.144-0.274-229.343 229.343 229.343 229.343c10.36 10.374 16.768 24.697 16.768 40.517s-6.404 30.147-16.768 40.517v0c-9.987 9.044-23.307 14.584-37.917 14.584-0.914 0-1.824-0.023-2.732-0.064l0.124 0.004z"],"attrs":[{}],"tags":["angle-left","back","return","left","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":62,"id":134,"name":"angle-left","prevSize":24,"code":59697},"setIdx":0,"setId":1,"iconIdx":268},{"icon":{"paths":["M377.809 837.894c-16.204-0.566-30.605-7.836-40.589-19.11l-0.054-0.059c-10.396-10.404-16.822-24.776-16.822-40.643s6.424-30.235 16.822-40.645v0l230.044-230.044-230.044-230.044c-2.746-6.474-4.334-14.004-4.334-21.905 0-31.765 25.748-57.513 57.513-57.513 10.324 0 20.016 2.723 28.392 7.484l-0.286-0.149 268.384 268.384c10.396 10.406 16.822 24.773 16.822 40.643s-6.424 30.236-16.822 40.645v0l-268.384 263.783c-10.036 11.334-24.433 18.607-40.543 19.164l-0.096 0.006z"],"attrs":[{}],"tags":["angle-right","next","proceed","right","forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":61,"id":135,"name":"angle-right","prevSize":24,"code":59698},"setIdx":0,"setId":1,"iconIdx":269},{"icon":{"paths":["M804.999 721.286c-0.087 0-0.194 0-0.29 0-17.244 0-32.838-7.040-44.069-18.415l-251.149-251.149-251.143 251.143c-7.978 3.94-17.369 6.249-27.304 6.249-34.676 0-62.787-28.109-62.787-62.787 0-11.887 3.305-23 9.042-32.478l-0.157 0.277 292.999-292.999c11.357-11.344 27.043-18.363 44.37-18.363s33.008 7.014 44.37 18.363v0l292.999 292.999c11.344 11.357 18.363 27.043 18.363 44.37s-7.014 33.008-18.363 44.37v0c-11.24 11.41-26.866 18.481-44.134 18.481-0.966 0-1.925-0.024-2.88-0.070l0.133 0.002z"],"attrs":[{}],"tags":["angle-up","rise","lift","up","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":60,"id":136,"name":"angle-up","prevSize":24,"code":59699},"setIdx":0,"setId":1,"iconIdx":270},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M746.058 321.828c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-203.048-203.048-203.044 203.044c-7.816 7.297-18.344 11.778-29.918 11.778-24.237 0-43.886-19.648-43.886-43.886 0-11.575 4.48-22.102 11.803-29.944l-0.023 0.026 234.058-234.058c7.939-7.93 18.904-12.835 31.012-12.835s23.073 4.904 31.013 12.835v0l234.058 234.058c7.93 7.939 12.835 18.904 12.835 31.012s-4.904 23.073-12.835 31.013v0c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["upload","send","transfer","give","provide"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":59,"id":137,"name":"upload","prevSize":24,"code":59700},"setIdx":0,"setId":1,"iconIdx":271},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M512 731.429c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-234.062-234.062c-7.297-7.816-11.778-18.344-11.778-29.918 0-24.237 19.648-43.886 43.886-43.886 11.575 0 22.102 4.48 29.944 11.803l-0.026-0.023 203.044 203.044 203.044-203.044c7.816-7.297 18.344-11.778 29.918-11.778 24.237 0 43.886 19.648 43.886 43.886 0 11.575-4.48 22.102-11.803 29.944l0.023-0.026-234.058 234.058c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["download","save","transfer","get","receive"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":113,"id":138,"name":"download","prevSize":24,"code":59734},"setIdx":0,"setId":1,"iconIdx":272},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM85.333 512c0-0.111 0-0.24 0-0.369 0-102.621 36.521-196.712 97.276-269.985l-0.565 0.701 599.609 599.609c-72.916 60.16-167.308 96.645-270.223 96.645-235.327 0-426.097-190.771-426.097-426.097 0-0.177 0-0.353 0-0.531v0.028zM841.956 781.653l-599.609-599.609c72.855-59.977 167.108-96.344 269.855-96.344 235.327 0 426.097 190.771 426.097 426.097 0 102.747-36.367 197-96.931 270.591l0.587-0.735z"],"attrs":[{}],"tags":["ban","block","stop","deny","prohibit"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":58,"id":139,"name":"ban","prevSize":24,"code":59701},"setIdx":0,"setId":1,"iconIdx":273},{"icon":{"paths":["M1021.85 393.483c-4.841-15.030-17.644-26.152-33.316-28.484l-0.227-0.028-303.002-44.165-135.848-274.491c-7.746-12.831-21.614-21.279-37.457-21.279s-29.71 8.447-37.346 21.083l-0.11 0.195-135.848 274.491-303.002 44.165c-15.899 2.36-28.701 13.481-33.462 28.219l-0.081 0.292c-1.397 4-2.204 8.612-2.204 13.413 0 11.571 4.687 22.048 12.267 29.634v0l220.265 213.556-51.991 301.885c-0.38 2.136-0.597 4.594-0.597 7.102 0 14.016 6.787 26.448 17.254 34.186l0.115 0.081c6.76 4.866 15.204 7.783 24.332 7.783 7.263 0 14.096-1.847 20.052-5.097l-0.219 0.11 270.579-142.557 271.137 142.557c5.647 3.156 12.387 5.020 19.564 5.031h0.004c9.211-0.109 17.721-3.021 24.742-7.922l-0.143 0.094c10.582-7.821 17.369-20.251 17.369-34.267 0-2.509-0.218-4.967-0.634-7.356l0.037 0.254-52.551-301.885 219.705-213.556c7.83-7.626 12.687-18.27 12.687-30.050 0-4.646-0.756-9.117-2.151-13.294l0.085 0.296z"],"attrs":[{}],"tags":["star-fill","favorite","rate","like","full-star"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":57,"id":140,"name":"star-fill","prevSize":24,"code":59702},"setIdx":0,"setId":1,"iconIdx":274},{"icon":{"paths":["M802.661 1001.092c-7.178-0.012-13.918-1.875-19.772-5.137l0.207 0.106-271.096-142.535-271.096 142.535c-5.737 3.14-12.567 4.986-19.829 4.986-9.126 0-17.571-2.916-24.452-7.867l0.124 0.085c-10.58-7.82-17.366-20.248-17.366-34.262 0-2.509 0.217-4.966 0.634-7.355l-0.037 0.254 52.543-301.84-220.232-213.524c-7.577-7.585-12.265-18.059-12.265-29.629 0-4.8 0.807-9.412 2.291-13.706l-0.089 0.295c4.841-15.028 17.641-26.148 33.311-28.48l0.227-0.028 302.957-44.158 135.828-274.45c7.745-12.829 21.611-21.276 37.451-21.276s29.706 8.446 37.341 21.080l0.11 0.195 135.828 274.45 302.957 44.158c15.896 2.359 28.697 13.479 33.457 28.215l0.081 0.292c1.397 4 2.204 8.611 2.204 13.411 0 11.569-4.686 22.045-12.265 29.63v0l-220.232 213.524 51.984 301.84c0.38 2.135 0.597 4.593 0.597 7.101 0 14.014-6.786 26.444-17.251 34.181l-0.115 0.081c-6.725 4.703-15.021 7.598-23.979 7.824l-0.056 0.001zM512 764.651c7.119 0.088 13.834 1.727 19.85 4.594l-0.287-0.123 215.201 111.792-40.805-239.795c-0.368-2.129-0.579-4.58-0.579-7.081 0-11.813 4.698-22.528 12.328-30.38l-0.010 0.010 174.396-167.689-240.912-35.774c-13.783-2.252-25.168-10.868-31.19-22.677l-0.111-0.241-107.88-217.995-107.88 218.555c-6.135 12.049-17.52 20.666-31.056 22.884l-0.246 0.033-240.912 35.215 174.396 167.689c7.619 7.842 12.317 18.557 12.317 30.37 0 2.501-0.211 4.952-0.614 7.338l0.035-0.257-40.805 241.472 215.201-111.792c5.628-3.296 12.279-5.497 19.381-6.135l0.183-0.013z"],"attrs":[{}],"tags":["star","favorite","rate","like","highlight"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":56,"id":141,"name":"star","prevSize":24,"code":59703},"setIdx":0,"setId":1,"iconIdx":275},{"icon":{"paths":["M679.213 992.738c-0.086 0-0.19 0-0.292 0-17.22 0-32.796-7.035-44.013-18.388l-418.039-418.039c-11.33-11.344-18.339-27.010-18.339-44.311s7.007-32.967 18.339-44.313v0l418.033-418.033c11.167-10.427 26.211-16.828 42.747-16.828 34.631 0 62.705 28.074 62.705 62.705 0 16.538-6.402 31.58-16.864 42.785l0.034-0.037-373.722 373.722 373.722 373.722c11.33 11.344 18.339 27.010 18.339 44.311s-7.007 32.967-18.339 44.313v0c-11.222 11.36-26.798 18.394-44.019 18.394-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-left","backward","previous","return","left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":16,"id":142,"name":"chevron-left","prevSize":24,"code":59648},"setIdx":0,"setId":1,"iconIdx":276},{"icon":{"paths":["M344.779 992.761c-0.086 0-0.19 0-0.292 0-17.221 0-32.798-7.035-44.016-18.389l-0.006-0.006c-11.331-11.345-18.34-27.011-18.34-44.313s7.008-32.969 18.34-44.315v0l373.739-373.739-373.739-373.739c-10.427-11.167-16.829-26.212-16.829-42.749 0-34.632 28.075-62.708 62.708-62.708 16.539 0 31.582 6.402 42.787 16.865l-0.037-0.034 418.053 418.053c11.331 11.345 18.34 27.011 18.34 44.313s-7.008 32.969-18.34 44.315v0l-418.053 418.053c-11.223 11.36-26.8 18.395-44.021 18.395-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-right","forward","next","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":17,"id":143,"name":"chevron-right","prevSize":24,"code":59649},"setIdx":0,"setId":1,"iconIdx":277},{"icon":{"paths":["M512 774.266c-0.084 0-0.183 0-0.282 0-16.621 0-31.655-6.79-42.481-17.748l-403.49-403.49c-6.608-9.557-10.557-21.395-10.557-34.153 0-33.426 27.098-60.522 60.522-60.522 13.37 0 25.728 4.335 35.742 11.677l-0.17-0.119 360.715 358.295 360.715-358.295c9.294-6.106 20.686-9.741 32.927-9.741 33.426 0 60.522 27.098 60.522 60.522 0 11.002-2.935 21.318-8.065 30.207l0.155-0.294-403.485 403.485c-10.561 11.928-25.717 19.583-42.668 20.171l-0.102 0.002z"],"attrs":[{}],"tags":["chevron-down","down","fall","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":18,"id":144,"name":"chevron-down","prevSize":24,"code":59650},"setIdx":0,"setId":1,"iconIdx":278},{"icon":{"paths":["M912.529 772.345c-0.083 0-0.182 0-0.279 0-16.5 0-31.424-6.74-42.17-17.619l-358.079-358.079-358.074 355.671c-9.226 6.061-20.534 9.669-32.685 9.669-33.181 0-60.080-26.899-60.080-60.080 0-10.921 2.914-21.161 8.005-29.985l-0.154 0.291 400.529-400.529c10.869-10.856 25.879-17.571 42.456-17.571s31.587 6.714 42.457 17.571v0l400.529 400.529c10.856 10.869 17.571 25.879 17.571 42.456s-6.714 31.587-17.571 42.457v0c-10.467 9.481-24.421 15.283-39.728 15.283-0.96 0-1.913-0.022-2.862-0.068l0.134 0.005z"],"attrs":[{}],"tags":["chevron-up","up","increase","rise","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":19,"id":145,"name":"chevron-up","prevSize":24,"code":59651},"setIdx":0,"setId":1,"iconIdx":279},{"icon":{"paths":["M777.445 959.937c-0.065 0-0.144 0-0.22 0-11.19 0-21.502-3.743-29.759-10.044l0.119 0.088-530.888-398.166c-12.143-9.177-19.908-23.59-19.908-39.817s7.765-30.639 19.784-39.726l0.124-0.091 530.888-398.166c8.229-6.251 18.645-10.014 29.941-10.014 8.203 0 15.94 1.984 22.762 5.498l-0.278-0.131c16.203 8.535 27.088 25.214 27.208 44.445v796.35c-0.121 19.249-11.006 35.927-26.932 44.329l-0.275 0.133c-6.602 3.186-14.334 5.125-22.5 5.309l-0.063 0.002zM329.508 512l398.166 298.625v-597.249z"],"attrs":[{}],"tags":["caret-left","previous","backward","left","return"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":20,"id":146,"name":"caret-left","prevSize":24,"code":59652},"setIdx":0,"setId":1,"iconIdx":280},{"icon":{"paths":["M246.514 960.008c-8.001-0.105-15.52-2.052-22.189-5.441l0.287 0.133c-16.574-8.253-27.783-25.040-27.876-44.458v-796.469c0.092-19.426 11.302-36.213 27.587-44.339l0.287-0.132c6.449-3.33 14.077-5.284 22.158-5.284 11.175 0 21.478 3.731 29.729 10.017l-0.119-0.089 530.972 398.228c12.145 9.177 19.912 23.594 19.912 39.823s-7.766 30.645-19.789 39.733l-0.124 0.091-530.972 398.228c-8.14 6.214-18.456 9.957-29.645 9.957-0.077 0-0.156 0-0.232 0h0.012zM296.292 213.328v597.343l398.228-298.672z"],"attrs":[{}],"tags":["caret-right","next","forward","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":21,"id":147,"name":"caret-right","prevSize":24,"code":59653},"setIdx":0,"setId":1,"iconIdx":281},{"icon":{"paths":["M512 808.242c-0.092 0-0.203 0.002-0.311 0.002-15.157 0-28.607-7.307-37.020-18.589l-0.088-0.122-374.2-498.935c-5.874-7.735-9.411-17.522-9.411-28.14 0-7.708 1.865-14.982 5.168-21.391l-0.124 0.263c8.022-15.226 23.696-25.457 41.77-25.57h748.419c18.091 0.116 33.765 10.344 41.662 25.311l0.125 0.259c3.18 6.151 5.044 13.42 5.044 21.131 0 10.614-3.536 20.406-9.494 28.255l0.085-0.116-374.2 498.935c-8.503 11.404-21.951 18.712-37.108 18.712-0.109 0-0.218 0-0.329-0.002h0.017zM231.349 309.307l280.651 374.2 280.651-374.2z"],"attrs":[{}],"tags":["caret-down","collapse","down","fall","decrease"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":22,"id":148,"name":"caret-down","prevSize":24,"code":59654},"setIdx":0,"setId":1,"iconIdx":282},{"icon":{"paths":["M886.087 808.153h-748.175c-18.084-0.115-33.754-10.339-41.649-25.303l-0.125-0.259c-3.18-6.148-5.042-13.416-5.042-21.125 0-10.612 3.535-20.4 9.492-28.247l-0.085 0.116 374.087-498.782c8.871-10.966 22.328-17.919 37.409-17.919s28.537 6.953 37.338 17.828l0.069 0.090 374.087 498.782c5.874 7.732 9.407 17.518 9.407 28.131 0 7.706-1.864 14.977-5.165 21.386l0.123-0.262c-8.019 15.222-23.689 25.45-41.757 25.562h-0.016zM231.436 714.631h561.131l-280.564-374.087z"],"attrs":[{}],"tags":["caret-up","expand","up","rise","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":23,"id":149,"name":"caret-up","prevSize":24,"code":59655},"setIdx":0,"setId":1,"iconIdx":283},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["search","find","query","lookup","discover"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":24,"id":150,"name":"search","prevSize":24,"code":59656},"setIdx":0,"setId":1,"iconIdx":284},{"icon":{"paths":["M367.973 877.709c-12.364-0.429-23.354-5.979-30.973-14.583l-0.039-0.045-292.569-292.569c-12.118-7.943-20.011-21.462-20.011-36.822 0-24.237 19.649-43.886 43.886-43.886 16.258 0 30.454 8.843 38.038 21.983l0.112 0.213 261.556 259.802 612.637-610.884c6.739-4.429 14.999-7.063 23.874-7.063 24.237 0 43.886 19.649 43.886 43.886 0 7.977-2.129 15.457-5.848 21.903l0.112-0.213-643.651 643.651c-7.658 8.649-18.646 14.2-30.94 14.626l-0.073 0.001z"],"attrs":[{}],"tags":["check","done","complete","ok","approve"],"grid":16,"isMulticolor":false,"isMulticolor2":false,"width":1088},"attrs":[{}],"properties":{"order":25,"id":151,"name":"check","prevSize":24,"code":59657},"setIdx":0,"setId":1,"iconIdx":285},{"icon":{"paths":["M426.842 696.51c-11.361-0.894-21.337-6.182-28.346-14.147l-0.040-0.047-170.317-170.317c-2.623-5.368-4.157-11.68-4.157-18.35 0-23.516 19.064-42.579 42.579-42.579 6.67 0 12.983 1.534 18.603 4.269l-0.253-0.11 140.228 140.228 484.268-480.861c5.368-2.623 11.68-4.157 18.35-4.157 23.516 0 42.579 19.064 42.579 42.579 0 6.67-1.534 12.983-4.269 18.603l0.11-0.253-510.95 510.95c-7.048 8.010-17.025 13.299-28.241 14.184l-0.146 0.009z","M512 1022.95c-191.476-0.317-358.217-105.908-445.47-261.972l-1.328-2.587c-31.938-55.832-53.595-121.525-60.581-191.54l-0.166-2.053c-1.75-15.87-2.746-34.274-2.746-52.91 0-191.528 105.381-358.444 261.324-445.927l2.575-1.327c55.832-31.938 121.525-53.595 191.54-60.581l2.053-0.166c16.139-1.838 34.846-2.885 53.796-2.885 52.724 0 103.554 8.111 151.308 23.156l-3.563-0.969c19.66 4.032 34.236 21.19 34.236 41.754 0 23.516-19.064 42.579-42.579 42.579-5.793 0-11.317-1.158-16.352-3.253l0.282 0.104c-37.278-11.625-80.141-18.322-124.567-18.322-16.116 0-32.026 0.881-47.685 2.599l1.933-0.172c-60.018 6.3-114.675 24.271-163.354 51.622l2.121-1.095c-49.065 27.393-90.495 62.305-124.293 103.695l-0.607 0.765c-59.499 72.093-95.584 165.431-95.584 267.195 0 16.071 0.899 31.933 2.652 47.536l-0.174-1.916c6.3 60.018 24.271 114.675 51.622 163.354l-1.095-2.121c27.393 49.065 62.305 90.495 103.695 124.293l0.765 0.607c72.093 59.499 165.431 95.584 267.195 95.584 16.071 0 31.933-0.899 47.536-2.652l-1.916 0.174c60.018-6.3 114.675-24.271 163.354-51.622l-2.121 1.095c49.065-27.393 90.495-62.305 124.293-103.695l0.607-0.765c59.499-72.093 95.584-165.431 95.584-267.195 0-16.071-0.899-31.933-2.652-47.536l0.174 1.916c-0.129-1.276-0.204-2.758-0.204-4.258 0-24.725 20.044-44.769 44.769-44.769 23.226 0 42.321 17.686 44.551 40.326l0.015 0.185c1.73 15.781 2.716 34.082 2.716 52.613 0 191.743-105.619 358.82-261.851 446.222l-2.584 1.328c-56.511 33.262-123.144 55.912-194.296 63.403l-2.137 0.182c-17.6 0-35.767 0-52.798 0z"],"attrs":[{},{}],"tags":["check-circle","done","complete","ok","approve"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":26,"id":152,"name":"check-circle","prevSize":24,"code":59658},"setIdx":0,"setId":1,"iconIdx":286},{"icon":{"paths":["M586.932 512l312.455-312.455c10.394-9.708 16.875-23.488 16.875-38.79 0-29.283-23.737-53.020-53.020-53.020-15.299 0-29.084 6.481-38.759 16.841l-0.027 0.029-312.455 312.455-312.455-312.455c-9.444-8.816-22.161-14.228-36.145-14.228-29.283 0-53.020 23.737-53.020 53.020 0 13.985 5.412 26.701 14.261 36.174l-0.027-0.029 312.455 312.455-312.455 312.455c-9.582 9.589-15.504 22.839-15.504 37.468s5.926 27.874 15.504 37.469v0c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0l312.455-312.455 312.455 312.455c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0c9.582-9.589 15.504-22.839 15.504-37.468s-5.926-27.874-15.504-37.469v0z"],"attrs":[{}],"tags":["times","close","cancel","delete","remove"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":265,"id":153,"name":"times","prevSize":24,"code":59659},"setIdx":0,"setId":1,"iconIdx":287},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M341.333 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l341.333-341.333c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-341.333 341.333c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M682.667 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-341.337-341.337c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 341.333 341.333c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{},{}],"tags":["times-circle","close","cancel","delete","times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":28,"id":154,"name":"times-circle","prevSize":24,"code":59660},"setIdx":0,"setId":1,"iconIdx":288},{"icon":{"paths":["M559.485 464.515v-395.695c0-26.223-21.257-47.485-47.485-47.485s-47.485 21.257-47.485 47.485v0 395.695h-395.695c-26.223 0-47.485 21.257-47.485 47.485s21.257 47.485 47.485 47.485v0h395.695v395.695c0.352 26.082 21.403 47.133 47.447 47.485h0.033c26.223 0 47.485-21.257 47.485-47.485v0-395.695h395.695c26.223 0 47.485-21.257 47.485-47.485v0c-0.352-26.082-21.403-47.133-47.447-47.485h-0.033z"],"attrs":[{}],"tags":["plus","add","increase","more","extra"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":35,"id":155,"name":"plus","prevSize":24,"code":59661},"setIdx":0,"setId":1,"iconIdx":289},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["plus-circle","add","increase","plus","more"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":36,"id":156,"name":"plus-circle","prevSize":24,"code":59662},"setIdx":0,"setId":1,"iconIdx":290},{"icon":{"paths":["M967.085 568.886h-910.171c-31.417 0-56.886-25.469-56.886-56.886s25.469-56.886 56.886-56.886v0h910.171c31.417 0 56.886 25.469 56.886 56.886s-25.469 56.886-56.886 56.886v0z"],"attrs":[{}],"tags":["minus","remove","subtract","decrease","less"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":41,"id":157,"name":"minus","prevSize":24,"code":59663},"setIdx":0,"setId":1,"iconIdx":291},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["minus-circle","remove","subtract","decrease","minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":42,"id":158,"name":"minus-circle","prevSize":24,"code":59664},"setIdx":0,"setId":1,"iconIdx":292},{"icon":{"paths":["M1024 512c0 282.769-229.231 512-512 512s-512-229.231-512-512c0-282.769 229.231-512 512-512s512 229.231 512 512z"],"attrs":[{}],"tags":["circle-on","deprecate","on","enable","active","start"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":47,"id":159,"name":"circle-on","prevSize":24,"code":59665},"setIdx":0,"setId":1,"iconIdx":293},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{}],"tags":["circle-off","deprecate","off","disable","inactive","stop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":48,"id":160,"name":"circle-off","prevSize":24,"code":59666},"setIdx":0,"setId":1,"iconIdx":294},{"icon":{"paths":["M512 761.297c-0.059 0-0.133 0-0.206 0-12.080 0-23.010-4.935-30.879-12.901l-410.613-410.613c-7.95-7.958-12.867-18.951-12.867-31.089 0-24.283 19.676-43.971 43.952-43.993h821.216c23.565 0.924 42.321 20.252 42.321 43.961 0 11.301-4.262 21.608-11.268 29.401l0.035-0.040-410.607 410.607c-7.678 8.671-18.694 14.235-31.015 14.662l-0.074 0.003zM207.563 350.691l304.437 304.437 304.437-304.437z"],"attrs":[{}],"tags":["sort-down","descending","down","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":51,"id":161,"name":"sort-down","prevSize":24,"code":59667},"setIdx":0,"setId":1,"iconIdx":295},{"icon":{"paths":["M921.888 760.859h-819.773c-0.088 0-0.19 0.002-0.294 0.002-18.019 0-33.47-11-40.004-26.651l-0.105-0.287c-1.856-4.68-2.932-10.103-2.932-15.777 0-11.845 4.689-22.595 12.313-30.495l409.875-409.875c7.945-7.935 18.917-12.844 31.034-12.844s23.089 4.908 31.035 12.844v0l409.888 409.888c7.91 7.94 12.801 18.896 12.801 30.993 0 6.145-1.262 11.997-3.542 17.308l0.108-0.285c-7.032 14.993-22.001 25.192-39.352 25.192-0.369 0-0.739-0.004-1.106-0.013l0.055 0.002zM208.099 673.027h607.804l-303.901-303.901z"],"attrs":[{}],"tags":["sort-up","ascending","up","increase","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":52,"id":162,"name":"sort-up","prevSize":24,"code":59668},"setIdx":0,"setId":1,"iconIdx":296},{"icon":{"paths":["M841.149 443.428h-658.298c-0.083 0-0.179 0.001-0.275 0.001-16.883 0-31.357-10.305-37.478-24.968l-0.099-0.269c-2.034-4.708-3.217-10.189-3.217-15.949 0-11.333 4.583-21.597 11.994-29.037l329.147-329.147c7.443-7.433 17.723-12.033 29.075-12.033s21.632 4.598 29.076 12.033v0l329.149 329.149c7.411 7.439 11.993 17.704 11.993 29.036 0 5.757-1.183 11.24-3.319 16.216l0.101-0.267c-6.22 14.932-20.695 25.236-37.577 25.236-0.097 0-0.193 0-0.29-0.001h0.015zM282.145 361.141h459.712l-229.855-229.855z","M512 992.009c-0.056 0-0.125 0-0.191 0-11.299 0-21.519-4.615-28.879-12.065l-329.153-329.153c-7.411-7.439-11.993-17.704-11.993-29.036 0-5.757 1.183-11.24 3.319-16.216l-0.101 0.267c6.22-14.932 20.695-25.236 37.577-25.236 0.097 0 0.193 0 0.29 0.001h658.283c0.083 0 0.179-0.001 0.275-0.001 16.883 0 31.357 10.305 37.478 24.968l0.099 0.269c2.034 4.708 3.217 10.189 3.217 15.949 0 11.333-4.583 21.597-11.994 29.037l-329.147 329.147c-7.363 7.453-17.584 12.068-28.883 12.068-0.067 0-0.135 0-0.202 0h0.010zM282.145 662.859l229.855 229.855 229.855-229.855z"],"attrs":[{},{}],"tags":["sort","order","sequence"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":54,"id":163,"name":"sort","prevSize":24,"code":59669},"setIdx":0,"setId":1,"iconIdx":297},{"icon":{"paths":["M776.253 1023.989c-13.652-0.164-25.983-5.679-35.022-14.542l-462.434-462.434c-8.953-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l462.442-462.442c8.959-8.925 21.319-14.443 34.966-14.443 6.933 0 13.536 1.424 19.529 3.996l-0.322-0.122c17.981 7.491 30.389 24.922 30.389 45.252 0 0.116 0 0.233-0.002 0.348v-0.019 924.882c0 0.099 0.002 0.215 0.002 0.331 0 20.33-12.41 37.761-30.067 45.132l-0.324 0.119c-5.648 2.471-12.229 3.927-19.143 3.964h-0.014zM383.839 512l342.867 342.867v-685.734z","M247.747 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.511 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-backward","back","previous","return","rewind"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":29,"id":164,"name":"step-backward","prevSize":24,"code":59670},"setIdx":0,"setId":1,"iconIdx":298},{"icon":{"paths":["M247.747 1023.989c-6.929-0.037-13.509-1.493-19.478-4.087l0.321 0.124c-17.981-7.491-30.389-24.922-30.389-45.252 0-0.116 0-0.231 0.002-0.348v0.019-924.882c0-0.099-0.002-0.215-0.002-0.331 0-20.33 12.41-37.761 30.067-45.132l0.324-0.119c5.67-2.449 12.271-3.874 19.206-3.874 13.649 0 26.007 5.518 34.967 14.444l462.441 462.441c8.953 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-462.442 462.442c-9.030 8.855-21.362 14.37-34.982 14.533h-0.031zM297.295 169.133v685.734l342.867-342.867z","M776.253 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.513 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-forward","next","proceed","forward","advance"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":30,"id":165,"name":"step-forward","prevSize":24,"code":59671},"setIdx":0,"setId":1,"iconIdx":299},{"icon":{"paths":["M325.818 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M325.818 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["th-large","grid","layout","blocks","sections"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":34,"id":166,"name":"th-large","prevSize":24,"code":59672},"setIdx":0,"setId":1,"iconIdx":300},{"icon":{"paths":["M512 1023.983c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 361.361 361.361 361.361-361.361c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-down","download","decrease","down","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":37,"id":167,"name":"arrow-down","prevSize":24,"code":59673},"setIdx":0,"setId":1,"iconIdx":301},{"icon":{"paths":["M445.937 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l396.374-396.374c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-361.361 361.361 361.361 361.361c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-left","back","previous","left","return"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":40,"id":168,"name":"arrow-left","prevSize":24,"code":59674},"setIdx":0,"setId":1,"iconIdx":302},{"icon":{"paths":["M578.063 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-0.005-0.005c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l361.361-361.361-361.361-361.361c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-right","next","forward","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":43,"id":169,"name":"arrow-right","prevSize":24,"code":59675},"setIdx":0,"setId":1,"iconIdx":303},{"icon":{"paths":["M908.374 495.484c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-361.366-361.366-361.361 361.361c-8.824 8.239-20.711 13.297-33.777 13.297-27.364 0-49.547-22.183-49.547-49.547 0-13.068 5.058-24.953 13.325-33.806l-0.026 0.029 396.374-396.374c8.963-8.952 21.342-14.491 35.013-14.491s26.049 5.537 35.014 14.491v0l396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-up","upload","increase","up","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":216,"id":170,"name":"arrow-up","prevSize":24,"code":59676},"setIdx":0,"setId":1,"iconIdx":304},{"icon":{"paths":["M974.438 561.547h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 264.265h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 858.829h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{},{}],"tags":["bars","menu","options","list","categories","hamburger"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":215,"id":171,"name":"bars","prevSize":24,"code":59677},"setIdx":0,"setId":1,"iconIdx":305},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-down","download","decrease","down","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":50,"id":172,"name":"arrow-circle-down","prevSize":24,"code":59678},"setIdx":0,"setId":1,"iconIdx":306},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-left","back","previous","left","return"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":53,"id":173,"name":"arrow-circle-left","prevSize":24,"code":59679},"setIdx":0,"setId":1,"iconIdx":307},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-right","next","forward","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":55,"id":174,"name":"arrow-circle-right","prevSize":24,"code":59680},"setIdx":0,"setId":1,"iconIdx":308},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-up","upload","increase","up","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":31,"id":175,"name":"arrow-circle-up","prevSize":24,"code":59681},"setIdx":0,"setId":1,"iconIdx":309},{"icon":{"paths":["M512 1023.999c-36.682-0.495-66.288-30.1-66.783-66.735v-623.353c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 623.305c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z","M512 178.087c-36.682-0.495-66.288-30.1-66.783-66.735v-44.569c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 44.521c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z"],"attrs":[{},{}],"tags":["info","information","help","details"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":33,"id":176,"name":"info","prevSize":24,"code":59683},"setIdx":0,"setId":1,"iconIdx":310},{"icon":{"paths":["M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 284.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 355.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{},{}],"tags":["info-circle","information","help","details"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":38,"id":177,"name":"info-circle","prevSize":24,"code":59684},"setIdx":0,"setId":1,"iconIdx":311},{"icon":{"paths":["M980.714 497.352c-0.058 0-0.126 0-0.195 0-9.879 0-18.984-3.304-26.275-8.867l0.106 0.077-442.349-331.615-442.349 331.615c-7.252 5.487-16.423 8.788-26.365 8.788-24.268 0-43.942-19.674-43.942-43.942 0-14.326 6.856-27.052 17.467-35.074l0.11-0.080 468.714-351.536c7.252-5.487 16.423-8.788 26.365-8.788s19.113 3.301 26.475 8.868l-0.11-0.080 468.714 351.536c9.942 8.121 16.239 20.379 16.239 34.109 0 9.129-2.783 17.608-7.548 24.634l0.099-0.154c-7.474 11.934-20.322 19.902-35.068 20.503l-0.085 0.003z","M863.536 966.067h-703.071c-24.136-0.325-43.617-19.805-43.942-43.91v-556.629c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 512.656h615.187v-512.656c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 556.598c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z","M629.178 966.067c-24.136-0.325-43.617-19.805-43.942-43.91v-366.215h-146.474v366.183c0 24.268-19.674 43.942-43.942 43.942s-43.942-19.674-43.942-43.942v0-410.125c0.325-24.136 19.805-43.617 43.91-43.942h234.389c24.136 0.325 43.617 19.805 43.942 43.91v410.157c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z"],"attrs":[{},{},{}],"tags":["home","house","homepage","shelter","building"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":214,"id":178,"name":"home","prevSize":24,"code":59685},"setIdx":0,"setId":1,"iconIdx":312},{"icon":{"paths":["M512 1023.985c-282.573-0.249-511.548-229.377-511.548-511.985 0-282.761 229.224-511.985 511.985-511.985 136.039 0 259.684 53.057 351.374 139.607l-0.248-0.232c7.709 7.718 12.478 18.378 12.478 30.15s-4.768 22.431-12.478 30.151v0c-7.654 7.849-18.334 12.718-30.15 12.718s-22.495-4.869-30.142-12.709l-0.008-0.009c-76.159-71.371-178.876-115.207-291.832-115.207-235.949 0-427.224 191.274-427.224 427.224s191.274 427.224 427.224 427.224c235.845 0 427.056-191.106 427.224-426.913v-0.016c0-23.563 19.102-42.665 42.665-42.665s42.665 19.102 42.665 42.665v0c0 282.761-229.224 511.985-511.985 511.985v0z"],"attrs":[{}],"tags":["spinner","loading","process","wait","buffering"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":44,"id":179,"name":"spinner","prevSize":24,"code":59686},"setIdx":0,"setId":1,"iconIdx":313}],"height":1024,"metadata":{"name":"primeicons","url":"https://github.com/primefaces/primeicons","designer":"","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"pi-","metadata":{"fontFamily":"primeicons","majorVersion":1,"minorVersion":0,"copyright":"PrimeTek Informatics","designer":"","description":"Icon Library for Prime UI Libraries","fontURL":"https://github.com/primefaces/primeicons","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"includeMetadata":true},"imagePref":{"prefix":"pi-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","height":32,"columns":16,"margin":16,"name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"PrimeIcons":"ZDFmZGNjZmE5MSMxNzEwOTQzNzg1I0JySHZZUUtzUlV1Q2VTVXdnaUg1TFpNTjRaRllSMW1CM2JVd3M0SXIxRVlY"},"showGrid":true}}

From d139aebc714bb6abc41383b6158372d1c918541f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Fri, 29 Mar 2024 15:45:21 +0300
Subject: [PATCH 061/194] Format and Lint

---
 .eslintrc.json                                |  485 +++----
 components/demo/DeferredDemo.js               |    2 +-
 components/doc/accessibility/colorsdoc.js     |    4 +-
 components/doc/accordion/disableddoc.js       |    2 +-
 components/doc/accordion/importdoc.js         |    2 +-
 components/doc/accordion/pt/ptdoc.js          |    6 +-
 components/doc/autocomplete/importdoc.js      |    2 +-
 components/doc/autocomplete/pt/ptdoc.js       |    2 +-
 components/doc/autocomplete/templatedoc.js    |    2 +-
 components/doc/avatar/importdoc.js            |    2 +-
 components/doc/avatar/pt/ptdoc.js             |    2 +-
 components/doc/badge/basicdoc.js              |    2 +-
 components/doc/badge/buttondoc.js             |    4 +-
 components/doc/badge/importdoc.js             |    2 +-
 components/doc/badge/positiondoc.js           |    6 +-
 components/doc/badge/pt/ptdoc.js              |    2 +-
 components/doc/badge/severitydoc.js           |   14 +-
 components/doc/badge/sizedoc.js               |    6 +-
 components/doc/blockui/basicdoc.js            |    4 +-
 components/doc/blockui/importdoc.js           |    2 +-
 components/doc/blockui/pt/ptdoc.js            |    6 +-
 components/doc/blockui/templatedoc.js         |    4 +-
 components/doc/bootstrap/exampledoc.js        |    2 +-
 components/doc/breadcrumb/importdoc.js        |    2 +-
 components/doc/breadcrumb/pt/ptdoc.js         |    2 +-
 components/doc/breadcrumb/templatedoc.js      |    2 +-
 components/doc/bulma/exampledoc.js            |    2 +-
 components/doc/button/importdoc.js            |    2 +-
 components/doc/button/pt/ptdoc.js             |    2 +-
 components/doc/button/templatedoc.js          |    2 +-
 components/doc/calendar/importdoc.js          |    2 +-
 components/doc/calendar/pt/ptdoc.js           |    2 +-
 components/doc/captcha/captchadoc.js          |    2 +-
 components/doc/captcha/importdoc.js           |    2 +-
 components/doc/card/importdoc.js              |    2 +-
 components/doc/card/pt/ptdoc.js               |    2 +-
 components/doc/carousel/basicdoc.js           |   18 +-
 components/doc/carousel/circulardoc.js        |   18 +-
 components/doc/carousel/importdoc.js          |    2 +-
 components/doc/carousel/numscrolldoc.js       |   18 +-
 components/doc/carousel/pt/ptdoc.js           |   20 +-
 components/doc/carousel/responsivedoc.js      |   18 +-
 components/doc/carousel/verticaldoc.js        |   18 +-
 components/doc/cascadeselect/importdoc.js     |    2 +-
 components/doc/cascadeselect/pt/ptdoc.js      |    2 +-
 components/doc/chart/importdoc.js             |    2 +-
 components/doc/chart/pt/ptdoc.js              |    2 +-
 components/doc/checkbox/basicdoc.js           |    2 +-
 components/doc/checkbox/disableddoc.js        |    2 +-
 components/doc/checkbox/dynamicdoc.js         |    7 +-
 components/doc/checkbox/form/formikdoc.js     |    2 +-
 components/doc/checkbox/form/hookformdoc.js   |    2 +-
 components/doc/checkbox/groupdoc.js           |    7 +-
 components/doc/checkbox/importdoc.js          |    2 +-
 components/doc/checkbox/invaliddoc.js         |    2 +-
 components/doc/checkbox/pt/ptdoc.js           |    4 +-
 components/doc/chip/importdoc.js              |    2 +-
 components/doc/chip/pt/ptdoc.js               |    2 +-
 components/doc/chips/importdoc.js             |    2 +-
 components/doc/chips/pt/ptdoc.js              |    2 +-
 components/doc/chips/templatedoc.js           |    2 +-
 components/doc/colorpicker/importdoc.js       |    2 +-
 components/doc/colorpicker/pt/ptdoc.js        |    2 +-
 components/doc/common/codeeditor/index.js     |    2 +-
 components/doc/common/codeeditor/templates.js |   20 +-
 components/doc/common/developmentsection.js   |    2 +-
 components/doc/common/docapisection.js        |   28 +-
 components/doc/common/docapitable.js          |   80 +-
 components/doc/common/doccomponent.js         |   21 +-
 components/doc/common/docsectioncode.js       |   14 +-
 components/doc/common/docsections.js          |    5 +-
 components/doc/confirmdialog/basicdoc.js      |    4 +-
 components/doc/confirmdialog/headlessdoc.js   |    8 +-
 components/doc/confirmdialog/importdoc.js     |    2 +-
 components/doc/confirmdialog/pt/ptdoc.js      |    2 +-
 components/doc/confirmdialog/templatedoc.js   |    4 +-
 components/doc/confirmpopup/basicdoc.js       |    4 +-
 components/doc/confirmpopup/headlessdoc.js    |    8 +-
 components/doc/confirmpopup/importdoc.js      |    2 +-
 components/doc/confirmpopup/pt/ptdoc.js       |    2 +-
 components/doc/confirmpopup/templatedoc.js    |    4 +-
 components/doc/contextmenu/commanddoc.js      |   10 +-
 components/doc/contextmenu/importdoc.js       |    2 +-
 components/doc/contextmenu/pt/ptdoc.js        |    2 +-
 components/doc/contextmenu/routerdoc.js       |    2 +-
 components/doc/contextmenu/templatedoc.js     |    2 +-
 components/doc/datascroller/basicdoc.js       |   24 +-
 components/doc/datascroller/importdoc.js      |    2 +-
 components/doc/datascroller/inlinedoc.js      |   24 +-
 components/doc/datascroller/loaderdoc.js      |   24 +-
 components/doc/datascroller/pt/ptdoc.js       |   26 +-
 components/doc/datatable/basicdoc.js          |    8 +-
 .../datatable/cellselection/disableddoc.js    |    8 +-
 .../doc/datatable/cellselection/eventsdoc.js  |    8 +-
 .../datatable/cellselection/multipledoc.js    |    8 +-
 .../doc/datatable/cellselection/singledoc.js  |    8 +-
 .../doc/datatable/colresize/expandmodedoc.js  |    8 +-
 .../doc/datatable/colresize/fitmodedoc.js     |    8 +-
 components/doc/datatable/columngroupdoc.js    |    4 +-
 .../doc/datatable/conditionalstyledoc.js      |    8 +-
 components/doc/datatable/contextmenudoc.js    |    6 +-
 components/doc/datatable/edit/celleditdoc.js  |   35 +-
 components/doc/datatable/edit/roweditdoc.js   |   30 +-
 .../doc/datatable/filter/advanceddoc.js       |   32 +-
 components/doc/datatable/filter/basicdoc.js   |   24 +-
 components/doc/datatable/filter/customdoc.js  |   38 +-
 components/doc/datatable/gridlinesdoc.js      |    8 +-
 components/doc/datatable/importdoc.js         |    2 +-
 components/doc/datatable/lazyloaddoc.js       |    2 +-
 .../doc/datatable/paginator/basicdoc.js       |    8 +-
 .../doc/datatable/paginator/templatedoc.js    |    8 +-
 components/doc/datatable/pt/ptdoc.js          |   10 +-
 components/doc/datatable/rowexpansiondoc.js   |   52 +-
 .../doc/datatable/rowgroup/expandabledoc.js   |   30 +-
 .../doc/datatable/rowgroup/rowspandoc.js      |   34 +-
 .../doc/datatable/rowgroup/subheaderdoc.js    |   30 +-
 .../doc/datatable/rowselection/checkboxdoc.js |   10 +-
 .../doc/datatable/rowselection/disableddoc.js |    8 +-
 .../doc/datatable/rowselection/eventsdoc.js   |    8 +-
 .../doc/datatable/rowselection/multipledoc.js |    8 +-
 .../datatable/rowselection/radiobuttondoc.js  |   10 +-
 .../doc/datatable/rowselection/singledoc.js   |    8 +-
 .../doc/datatable/samples/customersdoc.js     |   30 +-
 .../doc/datatable/samples/productsdoc.js      |   42 +-
 .../doc/datatable/scroll/flexibledoc.js       |    8 +-
 .../doc/datatable/scroll/frozencolumnsdoc.js  |   20 +-
 .../doc/datatable/scroll/frozenrowsdoc.js     |   12 +-
 .../doc/datatable/scroll/horizontaldoc.js     |   18 +-
 .../doc/datatable/scroll/verticaldoc.js       |    8 +-
 components/doc/datatable/sizedoc.js           |    8 +-
 .../doc/datatable/sort/multiplecolumnsdoc.js  |    8 +-
 components/doc/datatable/sort/presortdoc.js   |   10 +-
 .../doc/datatable/sort/removablesortdoc.js    |    8 +-
 .../doc/datatable/sort/singlecolumndoc.js     |    8 +-
 components/doc/datatable/statefuldoc.js       |   32 +-
 components/doc/datatable/stripedrowsdoc.js    |    8 +-
 components/doc/datatable/templatedoc.js       |   30 +-
 .../doc/datatable/virtualscroll/lazydoc.js    |   10 +-
 .../doc/datatable/virtualscroll/preloaddoc.js |   10 +-
 components/doc/dataview/basicdoc.js           |   28 +-
 components/doc/dataview/importdoc.js          |    2 +-
 components/doc/dataview/layoutdoc.js          |   39 +-
 components/doc/dataview/loadingdoc.js         |    7 +-
 components/doc/dataview/paginationdoc.js      |   28 +-
 components/doc/dataview/pt/ptdoc.js           |   41 +-
 components/doc/dataview/sortingdoc.js         |   28 +-
 .../doc/deferredcontent/datatabledoc.js       |    8 +-
 components/doc/deferredcontent/importdoc.js   |    2 +-
 components/doc/dialog/headlessdoc.js          |   10 +-
 components/doc/dialog/importdoc.js            |    2 +-
 components/doc/dialog/pt/ptdoc.js             |    2 +-
 components/doc/divider/contentdoc.js          |    4 +-
 components/doc/divider/importdoc.js           |    2 +-
 components/doc/divider/logindoc.js            |    4 +-
 components/doc/divider/pt/ptdoc.js            |    2 +-
 components/doc/dock/advanceddoc.js            |   47 +-
 components/doc/dock/importdoc.js              |    2 +-
 components/doc/dropdown/importdoc.js          |    2 +-
 .../doc/dropdown/lazyvirtualscrolldoc.js      |    2 +-
 components/doc/dropdown/pt/ptdoc.js           |    2 +-
 components/doc/editor/form/formikdoc.js       |    6 +-
 components/doc/editor/form/hookformdoc.js     |    6 +-
 components/doc/editor/importdoc.js            |    2 +-
 components/doc/editor/pt/ptdoc.js             |    2 +-
 components/doc/editor/templatedoc.js          |    6 +-
 components/doc/fieldset/importdoc.js          |    2 +-
 components/doc/fieldset/pt/ptdoc.js           |    2 +-
 components/doc/fileupload/autodoc.js          |    2 +-
 components/doc/fileupload/basicdoc.js         |    2 +-
 components/doc/fileupload/importdoc.js        |    2 +-
 components/doc/fileupload/pt/ptdoc.js         |    2 +-
 components/doc/fileupload/templatedoc.js      |   10 +-
 components/doc/floatlabel/basicdoc.js         |    2 +-
 components/doc/floatlabel/importdoc.js        |    2 +-
 components/doc/galleria/importdoc.js          |    2 +-
 .../doc/galleria/indicator/positiondoc.js     |    2 +-
 components/doc/galleria/pt/ptdoc.js           |    2 +-
 components/doc/gmap/gmapdoc.js                |   10 +-
 components/doc/gmap/importdoc.js              |    2 +-
 .../doc/hooks/useclickoutside/importdoc.js    |    2 +-
 components/doc/hooks/usecounter/basicdoc.js   |    6 +-
 components/doc/hooks/usecounter/importdoc.js  |    2 +-
 components/doc/hooks/usecounter/optionsdoc.js |    6 +-
 components/doc/hooks/usedebounce/importdoc.js |    2 +-
 .../doc/hooks/useeventlistener/importdoc.js   |    2 +-
 components/doc/hooks/usefavicon/importdoc.js  |    2 +-
 .../hooks/useintersectionobserver/basicdoc.js |    2 +-
 .../useintersectionobserver/importdoc.js      |    2 +-
 .../useintersectionobserver/thresholddoc.js   |    2 +-
 components/doc/hooks/useinterval/importdoc.js |    2 +-
 .../doc/hooks/usemounteffect/importdoc.js     |    2 +-
 components/doc/hooks/usemouse/importdoc.js    |    2 +-
 components/doc/hooks/usemove/basicdoc.js      |    4 +-
 components/doc/hooks/usemove/horizontaldoc.js |    4 +-
 components/doc/hooks/usemove/importdoc.js     |    2 +-
 components/doc/hooks/usemove/verticaldoc.js   |    4 +-
 .../doc/hooks/useoverlaylistener/basicdoc.js  |    4 +-
 .../doc/hooks/useoverlaylistener/importdoc.js |    2 +-
 .../useoverlayscrolllistener/importdoc.js     |    2 +-
 components/doc/hooks/useprevious/importdoc.js |    2 +-
 .../doc/hooks/useresizelistener/importdoc.js  |    2 +-
 components/doc/hooks/usestorage/importdoc.js  |    2 +-
 components/doc/hooks/usestorage/localdoc.js   |    4 +-
 components/doc/hooks/usestorage/sessiondoc.js |    4 +-
 components/doc/hooks/usetimeout/importdoc.js  |    2 +-
 .../doc/hooks/useunmounteffect/importdoc.js   |    2 +-
 .../doc/hooks/useupdateeffect/importdoc.js    |    2 +-
 components/doc/iconfield/importdoc.js         |    2 +-
 components/doc/icons/basicdoc.js              |    8 +-
 components/doc/icons/colordoc.js              |    8 +-
 components/doc/icons/figmadoc.js              |    2 +-
 components/doc/icons/listdoc.js               |   16 +-
 components/doc/icons/sizedoc.js               |    8 +-
 components/doc/icons/spindoc.js               |    4 +-
 components/doc/image/importdoc.js             |    2 +-
 components/doc/image/pt/ptdoc.js              |    2 +-
 components/doc/image/templatedoc.js           |    2 +-
 components/doc/inplace/imagedoc.js            |    2 +-
 components/doc/inplace/importdoc.js           |    2 +-
 components/doc/inplace/lazydoc.js             |    8 +-
 components/doc/inplace/pt/ptdoc.js            |    2 +-
 components/doc/inputgroup/basicdoc.js         |    2 +-
 components/doc/inputgroup/multipledoc.js      |    4 +-
 components/doc/inputmask/form/hookformdoc.js  |    2 +-
 components/doc/inputmask/importdoc.js         |    2 +-
 components/doc/inputmask/maskdoc.js           |    6 +-
 components/doc/inputmask/pt/ptdoc.js          |    2 +-
 components/doc/inputnumber/form/formikdoc.js  |    4 +-
 components/doc/inputnumber/importdoc.js       |    2 +-
 components/doc/inputnumber/pt/ptdoc.js        |    2 +-
 .../doc/inputswitch/form/hookformdoc.js       |    2 +-
 components/doc/inputswitch/importdoc.js       |    2 +-
 components/doc/inputswitch/pt/ptdoc.js        |    2 +-
 components/doc/inputtext/form/hookformdoc.js  |    2 +-
 components/doc/inputtext/importdoc.js         |    2 +-
 components/doc/inputtextarea/importdoc.js     |    2 +-
 components/doc/inputtextarea/pt/ptdoc.js      |    2 +-
 components/doc/installation/examplesdoc.js    |   10 +-
 .../doc/installation/videos/nextjsdoc.js      |    2 +-
 components/doc/keyfilter/importdoc.js         |    2 +-
 components/doc/keyfilter/regexdoc.js          |    2 +-
 components/doc/knob/form/hookformdoc.js       |    2 +-
 components/doc/knob/importdoc.js              |    2 +-
 components/doc/knob/pt/ptdoc.js               |    2 +-
 components/doc/listbox/form/hookformdoc.js    |    2 +-
 components/doc/listbox/importdoc.js           |    2 +-
 components/doc/listbox/pt/ptdoc.js            |    2 +-
 components/doc/megamenu/importdoc.js          |    2 +-
 components/doc/megamenu/pt/ptdoc.js           |    2 +-
 components/doc/megamenu/templatedoc.js        |   18 +-
 components/doc/mention/autoresizedoc.js       |    2 +-
 components/doc/mention/basicdoc.js            |    2 +-
 components/doc/mention/floatlabeldoc.js       |    2 +-
 components/doc/mention/form/formikdoc.js      |    4 +-
 components/doc/mention/form/hookformdoc.js    |    2 +-
 components/doc/mention/importdoc.js           |    2 +-
 components/doc/mention/invaliddoc.js          |    2 +-
 components/doc/mention/pt/ptdoc.js            |    4 +-
 components/doc/mention/triggersdoc.js         |    2 +-
 components/doc/menu/groupdoc.js               |    2 +-
 components/doc/menu/importdoc.js              |    2 +-
 components/doc/menu/popupdoc.js               |    2 +-
 components/doc/menu/pt/ptdoc.js               |    2 +-
 components/doc/menubar/importdoc.js           |    2 +-
 components/doc/menubar/pt/ptdoc.js            |    2 +-
 components/doc/menubar/templatedoc.js         |    2 +-
 components/doc/message/importdoc.js           |    2 +-
 components/doc/message/pt/ptdoc.js            |    2 +-
 components/doc/messages/importdoc.js          |    2 +-
 components/doc/messages/pt/ptdoc.js           |    2 +-
 components/doc/metergroup/importdoc.js        |    2 +-
 components/doc/metergroup/pt/ptdoc.js         |    2 +-
 .../doc/multiselect/form/hookformdoc.js       |    2 +-
 components/doc/multiselect/importdoc.js       |    2 +-
 components/doc/multiselect/pt/ptdoc.js        |   10 +-
 .../doc/multistatecheckbox/importdoc.js       |    2 +-
 components/doc/multistatecheckbox/pt/ptdoc.js |    2 +-
 components/doc/orderlist/basicdoc.js          |    4 +-
 components/doc/orderlist/dragdropdoc.js       |    4 +-
 components/doc/orderlist/filterdoc.js         |    4 +-
 components/doc/orderlist/importdoc.js         |    2 +-
 components/doc/orderlist/pt/ptdoc.js          |    6 +-
 components/doc/organizationchart/importdoc.js |    2 +-
 components/doc/organizationchart/pt/ptdoc.js  |    2 +-
 components/doc/overlaypanel/basicdoc.js       |    2 +-
 components/doc/overlaypanel/datatabledoc.js   |    2 +-
 components/doc/overlaypanel/importdoc.js      |    2 +-
 components/doc/overlaypanel/pt/ptdoc.js       |    2 +-
 components/doc/paginator/importdoc.js         |    2 +-
 components/doc/paginator/pt/ptdoc.js          |    2 +-
 components/doc/paginator/templatedoc.js       |    4 +-
 components/doc/panel/importdoc.js             |    2 +-
 components/doc/panel/pt/ptdoc.js              |    2 +-
 components/doc/panel/templatedoc.js           |    6 +-
 components/doc/panelmenu/importdoc.js         |    2 +-
 components/doc/panelmenu/pt/ptdoc.js          |    2 +-
 components/doc/password/importdoc.js          |    2 +-
 components/doc/password/pt/ptdoc.js           |    2 +-
 components/doc/picklist/basicdoc.js           |    2 +-
 components/doc/picklist/filterdoc.js          |    2 +-
 components/doc/picklist/importdoc.js          |    2 +-
 components/doc/picklist/pt/ptdoc.js           |    4 +-
 components/doc/progressbar/basicdoc.js        |    2 +-
 components/doc/progressbar/dynamicdoc.js      |    6 +-
 components/doc/progressbar/importdoc.js       |    2 +-
 .../doc/progressbar/indeterminatedoc.js       |    2 +-
 components/doc/progressbar/pt/ptdoc.js        |    4 +-
 components/doc/progressbar/templatedoc.js     |    2 +-
 components/doc/progressspinner/importdoc.js   |    2 +-
 components/doc/progressspinner/pt/ptdoc.js    |    4 +-
 components/doc/radiobutton/disableddoc.js     |    2 +-
 components/doc/radiobutton/importdoc.js       |    2 +-
 components/doc/radiobutton/pt/ptdoc.js        |    2 +-
 components/doc/rating/importdoc.js            |    2 +-
 components/doc/rating/pt/ptdoc.js             |    2 +-
 components/doc/ripple/importdoc.js            |    2 +-
 components/doc/scrollpanel/importdoc.js       |    2 +-
 components/doc/scrollpanel/pt/ptdoc.js        |    2 +-
 components/doc/scrolltop/basicdoc.js          |    2 +-
 components/doc/scrolltop/importdoc.js         |    2 +-
 components/doc/scrolltop/pt/ptdoc.js          |    2 +-
 components/doc/selectbutton/importdoc.js      |    2 +-
 components/doc/selectbutton/pt/ptdoc.js       |    2 +-
 components/doc/selectbutton/templatedoc.js    |    2 +-
 .../doc/selectbutton/theming/styleddoc.js     |    2 +-
 components/doc/sidebar/headlessdoc.js         |   40 +-
 components/doc/sidebar/importdoc.js           |    2 +-
 components/doc/sidebar/pt/ptdoc.js            |    2 +-
 components/doc/skeleton/carddoc.js            |   14 +-
 components/doc/skeleton/datatabledoc.js       |    8 +-
 components/doc/skeleton/importdoc.js          |    2 +-
 components/doc/skeleton/listdoc.js            |   24 +-
 components/doc/skeleton/pt/ptdoc.js           |    2 +-
 components/doc/skeleton/shapesdoc.js          |   36 +-
 components/doc/slider/importdoc.js            |    2 +-
 components/doc/slider/pt/ptdoc.js             |    2 +-
 components/doc/speeddial/importdoc.js         |    2 +-
 components/doc/speeddial/pt/ptdoc.js          |    2 +-
 components/doc/splitbutton/basicdoc.js        |    2 +-
 components/doc/splitbutton/disableddoc.js     |    2 +-
 components/doc/splitbutton/importdoc.js       |    2 +-
 components/doc/splitbutton/loadingdoc.js      |    2 +-
 components/doc/splitbutton/outlineddoc.js     |    2 +-
 components/doc/splitbutton/pt/ptdoc.js        |    2 +-
 components/doc/splitbutton/raiseddoc.js       |    2 +-
 components/doc/splitbutton/raisedtextdoc.js   |    2 +-
 components/doc/splitbutton/roundeddoc.js      |    2 +-
 components/doc/splitbutton/severitydoc.js     |    2 +-
 components/doc/splitbutton/sizesdoc.js        |    2 +-
 components/doc/splitbutton/templatedoc.js     |    2 +-
 components/doc/splitbutton/textdoc.js         |    2 +-
 components/doc/splitter/importdoc.js          |    2 +-
 components/doc/splitter/pt/ptdoc.js           |    2 +-
 components/doc/steps/importdoc.js             |    2 +-
 components/doc/steps/interactivedoc.js        |    2 +-
 components/doc/steps/pt/ptdoc.js              |    2 +-
 components/doc/styleclass/importdoc.js        |    2 +-
 components/doc/tabmenu/importdoc.js           |    2 +-
 components/doc/tabmenu/pt/ptdoc.js            |    2 +-
 components/doc/tabview/disableddoc.js         |    2 +-
 components/doc/tabview/importdoc.js           |    2 +-
 components/doc/tabview/pt/ptdoc.js            |    6 +-
 components/doc/tag/basicdoc.js                |    2 +-
 components/doc/tag/icondoc.js                 |   10 +-
 components/doc/tag/importdoc.js               |    2 +-
 components/doc/tag/pilldoc.js                 |   14 +-
 components/doc/tag/pt/ptdoc.js                |    4 +-
 components/doc/tag/severitydoc.js             |   14 +-
 components/doc/tag/templatedoc.js             |    2 +-
 .../doc/tailwind/unstyledmode/setupdoc.js     |   10 +-
 components/doc/terminal/basicdoc.js           |   37 +-
 components/doc/terminal/importdoc.js          |    2 +-
 components/doc/terminal/pt/ptdoc.js           |   39 +-
 components/doc/theming/builtinthemesdoc.js    |    2 +-
 components/doc/theming/primeflexdoc.js        |    6 +-
 components/doc/tieredmenu/importdoc.js        |    2 +-
 components/doc/tieredmenu/pt/ptdoc.js         |    2 +-
 components/doc/timeline/importdoc.js          |    2 +-
 components/doc/timeline/pt/ptdoc.js           |    2 +-
 components/doc/timeline/templatedoc.js        |    4 +-
 components/doc/toast/headlessdoc.js           |   10 +-
 components/doc/toast/importdoc.js             |    2 +-
 components/doc/toast/pt/ptdoc.js              |    2 +-
 components/doc/toast/templatedoc.js           |    2 +-
 components/doc/togglebutton/importdoc.js      |    2 +-
 components/doc/togglebutton/pt/ptdoc.js       |    2 +-
 components/doc/toolbar/basicdoc.js            |    2 +-
 components/doc/toolbar/customdoc.js           |    6 +-
 components/doc/toolbar/importdoc.js           |    2 +-
 components/doc/toolbar/pt/ptdoc.js            |    4 +-
 components/doc/tooltip/importdoc.js           |    2 +-
 components/doc/tooltip/pt/ptdoc.js            |    2 +-
 components/doc/tooltip/targetdoc.js           |    2 +-
 components/doc/tree/contextmenudoc.js         |    7 +-
 components/doc/tree/importdoc.js              |    2 +-
 components/doc/tree/pt/ptdoc.js               |    2 +-
 components/doc/tree/templatedoc.js            |    2 +-
 components/doc/treeselect/basicdoc.js         |    2 +-
 components/doc/treeselect/checkboxdoc.js      |    2 +-
 components/doc/treeselect/clearicondoc.js     |    2 +-
 components/doc/treeselect/controlleddoc.js    |    2 +-
 components/doc/treeselect/filterdoc.js        |    2 +-
 components/doc/treeselect/floatlabeldoc.js    |    2 +-
 components/doc/treeselect/importdoc.js        |    2 +-
 components/doc/treeselect/invaliddoc.js       |    2 +-
 components/doc/treeselect/multipledoc.js      |    2 +-
 components/doc/treeselect/pt/ptdoc.js         |    4 +-
 components/doc/treetable/basicdoc.js          |    6 +-
 .../doc/treetable/conditionalstyledoc.js      |    6 +-
 components/doc/treetable/contextmenudoc.js    |   13 +-
 components/doc/treetable/controlleddoc.js     |   13 +-
 components/doc/treetable/editdoc.js           |    6 +-
 components/doc/treetable/filterdoc.js         |    8 +-
 components/doc/treetable/importdoc.js         |    2 +-
 components/doc/treetable/lazyloaddoc.js       |    6 +-
 .../doc/treetable/paginator/basicdoc.js       |    6 +-
 .../doc/treetable/paginator/templatedoc.js    |    6 +-
 components/doc/treetable/pt/ptdoc.js          |    8 +-
 components/doc/treetable/reorderdoc.js        |    6 +-
 .../doc/treetable/resize/expandmodedoc.js     |    6 +-
 components/doc/treetable/resize/fitmodedoc.js |    6 +-
 .../doc/treetable/scroll/frozencolumnsdoc.js  |   14 +-
 .../doc/treetable/scroll/horizontaldoc.js     |   12 +-
 .../doc/treetable/scroll/verticaldoc.js       |    6 +-
 .../doc/treetable/selection/checkboxdoc.js    |    6 +-
 .../doc/treetable/selection/eventsdoc.js      |    6 +-
 .../doc/treetable/selection/multipledoc.js    |    6 +-
 .../doc/treetable/selection/singledoc.js      |    6 +-
 .../doc/treetable/sort/multiplecolumnsdoc.js  |    6 +-
 .../doc/treetable/sort/singlecolumndoc.js     |    6 +-
 components/doc/treetable/templatedoc.js       |   12 +-
 components/doc/tristatecheckbox/importdoc.js  |    2 +-
 components/doc/virtualscroller/importdoc.js   |    2 +-
 components/doc/virtualscroller/pt/ptdoc.js    |    2 +-
 components/landing/blocksection.js            |  258 ++--
 components/landing/footersection.js           |   10 +-
 components/landing/getstartedsection.js       |    4 +-
 components/landing/herosection.js             |   12 +-
 components/landing/templatesection.js         |  106 +-
 components/landing/themesection.js            |   28 +-
 components/landing/userssection.js            |    8 +-
 components/layout/config.js                   |   52 +-
 components/layout/layout.js                   |   26 +-
 components/layout/menuitem.js                 |   14 +-
 components/layout/topbar.js                   |   21 +-
 components/lib/accordion/Accordion.js         |   48 +-
 components/lib/api/FilterService.js           |   49 +-
 components/lib/api/Locale.js                  |    4 +-
 components/lib/autocomplete/AutoComplete.js   |  171 +--
 .../lib/autocomplete/AutoCompletePanel.js     |  102 +-
 components/lib/avatar/Avatar.js               |    2 +-
 components/lib/blockui/BlockUI.spec.js        |    2 +-
 components/lib/button/Button.js               |    2 +-
 components/lib/calendar/Calendar.js           | 1145 +++++++++--------
 components/lib/carousel/Carousel.js           |   62 +-
 components/lib/cascadeselect/CascadeSelect.js |   38 +-
 .../lib/cascadeselect/CascadeSelectSub.js     |   98 +-
 components/lib/chart/Chart.js                 |    4 +-
 components/lib/chip/Chip.js                   |    2 +-
 components/lib/chips/Chips.js                 |   81 +-
 components/lib/colorpicker/ColorPicker.js     |   84 +-
 components/lib/componentbase/ComponentBase.js |   36 +-
 components/lib/confirmpopup/ConfirmPopup.js   |    2 +-
 components/lib/contextmenu/ContextMenu.js     |  122 +-
 components/lib/contextmenu/ContextMenuSub.js  |    2 +-
 components/lib/csstransition/CSSTransition.js |   12 +-
 components/lib/datascroller/DataScroller.js   |   40 +-
 components/lib/datatable/BodyCell.js          |  114 +-
 components/lib/datatable/BodyRow.js           |   75 +-
 components/lib/datatable/ColumnFilter.js      |  100 +-
 components/lib/datatable/DataTable.js         |  129 +-
 components/lib/datatable/DataTableBase.js     |   20 +-
 components/lib/datatable/FooterCell.js        |    6 +-
 components/lib/datatable/HeaderCell.js        |   22 +-
 components/lib/datatable/TableBody.js         |  117 +-
 components/lib/datatable/TableHeader.js       |   32 +-
 .../lib/deferredcontent/DeferredContent.js    |   10 +-
 components/lib/dialog/Dialog.js               |   30 +-
 components/lib/dock/Dock.js                   |   90 +-
 components/lib/dropdown/Dropdown.js           |  231 ++--
 components/lib/dropdown/DropdownBase.js       |    6 +-
 components/lib/dropdown/DropdownItem.js       |   18 +-
 components/lib/dropdown/DropdownPanel.js      |   92 +-
 components/lib/editor/Editor.js               |  100 +-
 components/lib/editor/Editor.spec.js          |    2 +-
 components/lib/fileupload/FileUpload.js       |   32 +-
 components/lib/focustrap/FocusTrap.js         |    2 +-
 components/lib/focustrap/FocusTrapBase.js     |    2 +-
 components/lib/galleria/Galleria.js           |    2 +-
 components/lib/galleria/GalleriaItem.js       |   84 +-
 components/lib/galleria/GalleriaThumbnails.js |   60 +-
 components/lib/hooks/useDisplayOrder.js       |    4 +-
 components/lib/hooks/useFavicon.js            |    2 +-
 components/lib/hooks/useGlobalOnEscapeKey.js  |    8 +-
 .../lib/hooks/useIntersectionObserver.js      |    4 +-
 components/lib/hooks/useMouse.js              |    2 +-
 components/lib/hooks/useStyle.js              |   27 +-
 components/lib/image/Image.js                 |   28 +-
 components/lib/inplace/Inplace.js             |    2 +-
 components/lib/inputmask/InputMask.js         |   95 +-
 components/lib/inputnumber/InputNumber.js     |  281 ++--
 components/lib/inputswitch/InputSwitch.js     |    2 +-
 components/lib/inputtext/InputText.spec.js    |    2 +-
 components/lib/inputtextarea/InputTextarea.js |    2 +-
 .../lib/inputtextarea/InputTextarea.spec.js   |    2 +-
 components/lib/keyfilter/KeyFilter.js         |    4 +-
 components/lib/knob/Knob.js                   |   98 +-
 components/lib/listbox/ListBox.js             |  226 ++--
 components/lib/megamenu/MegaMenu.js           |  346 +++--
 components/lib/megamenu/MegaMenuBase.js       |   30 +-
 components/lib/mention/Mention.js             |  138 +-
 components/lib/menu/Menu.js                   |   82 +-
 components/lib/menubar/Menubar.js             |  132 +-
 components/lib/menubar/MenubarSub.js          |    2 +-
 components/lib/message/Message.js             |   28 +-
 components/lib/messages/UIMessage.js          |   28 +-
 components/lib/metergroup/MeterGroup.js       |    6 +-
 components/lib/multiselect/MultiSelect.js     |  124 +-
 .../lib/multiselect/MultiSelectPanel.js       |   58 +-
 .../multistatecheckbox/MultiStateCheckbox.js  |    6 +-
 components/lib/orderlist/OrderList.js         |   80 +-
 components/lib/orderlist/OrderListControls.js |    8 +-
 components/lib/orderlist/OrderListSubList.js  |   53 +-
 .../organizationchart/OrganizationChart.js    |    7 +-
 .../OrganizationChartNode.js                  |    4 +-
 components/lib/overlaypanel/OverlayPanel.js   |   20 +-
 components/lib/paginator/Paginator.js         |  340 ++---
 components/lib/panel/Panel.spec.js            |    2 +-
 components/lib/panelmenu/PanelMenu.js         |   59 +-
 components/lib/panelmenu/PanelMenuList.js     |  110 +-
 components/lib/panelmenu/PanelMenuSub.js      |    2 +-
 components/lib/passthrough/tailwind/index.js  |  102 +-
 components/lib/password/Password.js           |   88 +-
 components/lib/picklist/PickList.js           |  197 +--
 components/lib/picklist/PickListControls.js   |    8 +-
 .../lib/picklist/PickListTransferControls.js  |   28 +-
 components/lib/progressbar/ProgressBar.js     |   12 +-
 components/lib/rating/Rating.js               |   38 +-
 components/lib/ripple/Ripple.js               |    6 +-
 components/lib/scrollpanel/ScrollPanel.js     |   96 +-
 components/lib/scrolltop/ScrollTop.js         |   11 +-
 components/lib/selectbutton/SelectButton.js   |    6 +-
 .../lib/selectbutton/SelectButtonItem.js      |   56 +-
 components/lib/sidebar/Sidebar.js             |    2 +-
 components/lib/skeleton/Skeleton.js           |    2 +-
 components/lib/slidemenu/SlideMenu.js         |    2 +-
 components/lib/slidemenu/SlideMenuSub.js      |    2 +-
 components/lib/slider/Slider.js               |   64 +-
 components/lib/speeddial/SpeedDial.js         |  100 +-
 components/lib/splitter/Splitter.js           |  140 +-
 components/lib/splitter/Splitter.spec.js      |    2 +-
 components/lib/steps/Steps.js                 |   66 +-
 components/lib/styleclass/StyleClass.js       |   27 +-
 components/lib/tabmenu/TabMenu.js             |   68 +-
 components/lib/tabview/TabView.js             |   80 +-
 components/lib/tag/Tag.spec.js                |    2 +-
 components/lib/terminal/Terminal.js           |   44 +-
 components/lib/tieredmenu/TieredMenu.js       |  134 +-
 components/lib/tieredmenu/TieredMenuSub.js    |    2 +-
 components/lib/timeline/Timeline.js           |    4 +-
 components/lib/toast/Toast.js                 |    2 +-
 components/lib/toast/ToastMessage.js          |   28 +-
 components/lib/tooltip/Tooltip.js             |   63 +-
 components/lib/tree/Tree.js                   |   98 +-
 components/lib/tree/UITreeNode.js             |  186 +--
 components/lib/treeselect/TreeSelect.js       |  123 +-
 components/lib/treetable/TreeTable.js         |   66 +-
 components/lib/treetable/TreeTableBase.js     |   14 +-
 components/lib/treetable/TreeTableBody.js     |  132 +-
 components/lib/treetable/TreeTableBodyCell.js |   12 +-
 components/lib/treetable/TreeTableFooter.js   |    8 +-
 components/lib/treetable/TreeTableHeader.js   |  206 +--
 components/lib/treetable/TreeTableRow.js      |  123 +-
 .../lib/treetable/TreeTableScrollableView.js  |    8 +-
 .../lib/tristatecheckbox/TriStateCheckbox.js  |   10 +-
 components/lib/utils/ClassNames.js            |    6 +-
 components/lib/utils/DomHandler.js            |  178 +--
 components/lib/utils/EventBus.js              |    7 +-
 components/lib/utils/IconUtils.js             |    2 +-
 components/lib/utils/Mask.js                  |   87 +-
 components/lib/utils/MergeProps.js            |   22 +-
 components/lib/utils/ObjectUtils.js           |  119 +-
 .../lib/virtualscroller/VirtualScroller.js    |  103 +-
 components/news/newssection.js                |    8 +-
 components/templates/TemplateConfiguration.js |    6 +-
 components/templates/TemplateFeatures.js      |    4 +-
 components/templates/TemplateLicense.js       |    2 +-
 components/templates/TemplateYoutube.js       |    2 +-
 .../useAnimatedFeatures.js                    |   15 +-
 .../templates/templateHero/TemplateHero.js    |    4 +-
 pages/404.js                                  |    2 +-
 pages/_app.js                                 |   12 +-
 pages/api/data/customers.js                   |   81 +-
 pages/bootstrap/index.js                      |    2 +-
 pages/bulma/index.js                          |    2 +-
 pages/index.js                                |   10 +-
 pages/playground/index.js                     |    2 +-
 pages/roadmap/index.js                        |   56 +-
 pages/support/index.js                        |   28 +-
 pages/templates/sakai/index.js                |    2 +-
 pages/theming/index.js                        |    2 +-
 pages/uikit/index.js                          |   66 +-
 602 files changed, 6821 insertions(+), 6135 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 9f9ce3088e..ca204e42a6 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,235 +1,15 @@
 {
-    "env": {
-        "browser": true,
-        "node": true,
-        "es6": true
-    },
-
     "plugins": ["@typescript-eslint", "jest-dom"],
     "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
-
-    "ecmaFeatures": {
-        "arrowFunctions": true,
-        "binaryLiterals": true,
-        "blockBindings": true,
-        "classes": true,
-        "defaultParams": true,
-        "destructuring": true,
-        "forOf": true,
-        "generators": true,
-        "modules": true,
-        "objectLiteralComputedProperties": true,
-        "objectLiteralDuplicateProperties": true,
-        "objectLiteralShorthandMethods": true,
-        "objectLiteralShorthandProperties": true,
-        "octalLiterals": true,
-        "regexUFlag": true,
-        "regexYFlag": true,
-        "spread": true,
-        "superInFunctions": true,
-        "templateStrings": true,
-        "unicodeCodePointEscapes": true,
-        "globalReturn": true,
-        "jsx": true
-    },
-
     "rules": {
-        //
-        //Possible Errors
-        //
-        // The following rules point out areas where you might have made mistakes.
-        //
-        "no-cond-assign": 2, // disallow assignment in conditional expressions
-        "no-console": 1, // disallow use of console (off by default in the node environment)
-        "no-constant-condition": 2, // disallow use of constant expressions in conditions
-        "no-control-regex": 2, // disallow control characters in regular expressions
-        "no-debugger": 2, // disallow use of debugger
-        "no-dupe-args": 2, // disallow duplicate arguments in functions
-        "no-dupe-keys": 2, // disallow duplicate keys when creating object literals
-        "no-duplicate-case": 2, // disallow a duplicate case label.
-        "no-empty": 2, // disallow empty statements
-        "no-empty-class": 2, // disallow the use of empty character classes in regular expressions
-        "no-ex-assign": 2, // disallow assigning to the exception in a catch block
-        "no-extra-boolean-cast": 2, // disallow double-negation boolean casts in a boolean context
-        "no-extra-parens": 0, // disallow unnecessary parentheses (off by default)
-        "no-extra-semi": 2, // disallow unnecessary semicolons
-        "no-func-assign": 2, // disallow overwriting functions written as function declarations
-        "no-inner-declarations": 2, // disallow function or variable declarations in nested blocks
-        "no-invalid-regexp": 2, // disallow invalid regular expression strings in the RegExp constructor
-        "no-irregular-whitespace": 2, // disallow irregular whitespace outside of strings and comments
-        "no-negated-in-lhs": 2, // disallow negation of the left operand of an in expression
-        "no-obj-calls": 2, // disallow the use of object properties of the global object (Math and JSON) as functions
-        "no-regex-spaces": 2, // disallow multiple spaces in a regular expression literal
-        "no-reserved-keys": 2, // disallow reserved words being used as object literal keys (off by default)
-        "no-sparse-arrays": 2, // disallow sparse arrays
-        "no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement
-        "use-isnan": 2, // disallow comparisons with the value NaN
-        "valid-jsdoc": 2, // Ensure JSDoc comments are valid (off by default)
-        "valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string
-
-        //
-        // Best Practices
-        //
-        // These are rules designed to prevent you from making mistakes.
-        // They either prescribe a better way of doing something or help you avoid footguns.
-        //
-        "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default). 0: deep destructuring is not compatible https://github.com/eslint/eslint/issues/1863
-        "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
-        "consistent-return": 2, // require return statements to either always or never specify values
-        "curly": 2, // specify curly brace conventions for all control statements
-        "default-case": 2, // require default case in switch statements (off by default)
-        "dot-notation": 2, // encourages use of dot notation whenever possible
-        "eqeqeq": 2, // require the use of === and !==
-        "guard-for-in": 2, // make sure for-in loops have an if statement (off by default)
-        "no-alert": 2, // disallow the use of alert, confirm, and prompt
-        "no-caller": 2, // disallow use of arguments.caller or arguments.callee
-        "no-div-regex": 2, // disallow division operators explicitly at beginning of regular expression (off by default)
-        "no-else-return": 2, // disallow else after a return in an if (off by default)
-        "no-empty-label": 2, // disallow use of labels for anything other then loops and switches
-        "no-eq-null": 2, // disallow comparisons to null without a type-checking operator (off by default)
-        "no-eval": 2, // disallow use of eval()
-        "no-extend-native": 2, // disallow adding to native types
-        "no-extra-bind": 2, // disallow unnecessary function binding
-        "no-fallthrough": 2, // disallow fallthrough of case statements
-        "no-floating-decimal": 2, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
-        "no-implied-eval": 2, // disallow use of eval()-like methods
-        "no-iterator": 2, // disallow usage of __iterator__ property
-        "no-labels": 2, // disallow use of labeled statements
-        "no-lone-blocks": 2, // disallow unnecessary nested blocks
-        "no-loop-func": 2, // disallow creation of functions within loops
-        "no-multi-spaces": 2, // disallow use of multiple spaces
-        "no-multi-str": 2, // disallow use of multiline strings
-        "no-native-reassign": 2, // disallow reassignments of native objects
-        "no-new": 2, // disallow use of new operator when not part of the assignment or comparison
-        "no-new-func": 2, // disallow use of new operator for Function object
-        "no-new-wrappers": 2, // disallows creating new instances of String,Number, and Boolean
-        "no-octal": 2, // disallow use of octal literals
-        "no-octal-escape": 2, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
-        "no-param-reassign": 2, // disallow reassignment of function parameters (off by default)
-        "no-process-env": 2, // disallow use of process.env (off by default)
-        "no-proto": 2, // disallow usage of __proto__ property
-        "no-redeclare": 2, // disallow declaring the same variable more then once
-        "no-return-assign": 2, // disallow use of assignment in return statement
-        "no-script-url": 2, // disallow use of javascript: urls.
-        "no-self-compare": 2, // disallow comparisons where both sides are exactly the same (off by default)
-        "no-sequences": 2, // disallow use of comma operator
-        "no-throw-literal": 2, // restrict what can be thrown as an exception (off by default)
-        "no-void": 2, // disallow use of void operator (off by default)
-        "no-warning-comments": [0, { "terms": ["todo", "fixme"], "location": "start" }], // disallow usage of configurable warning terms in comments": 2, // e.g. TODO or FIXME (off by default)
-        "no-with": 2, // disallow use of the with statement
-        "radix": 2, // require use of the second argument for parseInt() (off by default)
-        "vars-on-top": 2, // requires to declare all vars on top of their containing scope (off by default)
-        "wrap-iife": 2, // require immediate function invocation to be wrapped in parentheses (off by default)
-        "yoda": 2, // require or disallow Yoda conditions
-
-        //
-        // Strict Mode
-        //
-        // These rules relate to using strict mode.
-        //
-        "strict": 0, // controls location of Use Strict Directives. 0: required by `babel-eslint`
-
-        //
-        // Variables
-        //
-        // These rules have to do with variable declarations.
-        //
-        "no-catch-shadow": 2, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
-        "no-delete-var": 2, // disallow deletion of variables
-        "no-label-var": 2, // disallow labels that share a name with a variable
-        "no-shadow": 2, // disallow declaration of variables already declared in the outer scope
-        "no-shadow-restricted-names": 2, // disallow shadowing of names such as arguments
-        "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
-        "no-undef-init": 2, // disallow use of undefined when initializing variables
-        "no-undefined": 2, // disallow use of undefined variable (off by default)
-        "no-unused-vars": 2, // disallow declaration of variables that are not used in the code
-        "no-use-before-define": 2, // disallow use of variables before they are defined
-
-        //
-        //Stylistic Issues
-        //
-        // These rules are purely matters of style and are quite subjective.
-        //
-        "indent": [1, 4], // this option sets a specific tab width for your code (off by default)
-        "brace-style": 1, // enforce one true brace style (off by default)
-        "camelcase": 1, // require camel case names
-        "comma-spacing": [1, { "before": false, "after": true }], // enforce spacing before and after comma
-        "comma-style": [1, "last"], // enforce one true comma style (off by default)
-        "consistent-this": [1, "_this"], // enforces consistent naming when capturing the current execution context (off by default)
-        "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines
-        "func-names": 0, // require function expressions to have a name (off by default)
-        "func-style": 0, // enforces use of function declarations or expressions (off by default)
-        "key-spacing": [1, { "beforeColon": false, "afterColon": true }], // enforces spacing between keys and values in object literal properties
-        "max-nested-callbacks": [1, 3], // specify the maximum depth callbacks can be nested (off by default)
-        "new-cap": [1, { "newIsCap": true, "capIsNew": false }], // require a capital letter for constructors
-        "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments
-        "newline-after-var": 0, // allow/disallow an empty newline after var statement (off by default)
-        "no-array-constructor": 1, // disallow use of the Array constructor
-        "no-inline-comments": 1, // disallow comments inline after code (off by default)
-        "no-lonely-if": 1, // disallow if as the only statement in an else block (off by default)
-        "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation
-        "no-multiple-empty-lines": [1, { "max": 2 }], // disallow multiple empty lines (off by default)
-        "no-new-object": 1, // disallow use of the Object constructor
-        "no-spaced-func": 1, // disallow space between function identifier and application
-        "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
-        "no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens
-        "one-var": [1, "never"], // allow just one var statement per function (off by default)
-        "operator-assignment": [1, "never"], // require assignment operator shorthand where possible or prohibit it entirely (off by default)
-        "padded-blocks": [1, "never"], // enforce padding within blocks (off by default)
-        "quote-props": [1, "as-needed"], // require quotes around object literal property names (off by default)
-        "quotes": [1, "single"], // specify whether double or single quotes should be used
-        "semi": [1, "always"], // require or disallow use of semicolons instead of ASI
-        "semi-spacing": [1, { "before": false, "after": true }], // enforce spacing before and after semicolons
-        "sort-vars": 0, // sort variables within the same declaration block (off by default)
-        "space-after-keywords": [1, "always"], // require a space after certain keywords (off by default)
-        "space-before-blocks": [1, "always"], // require or disallow space before blocks (off by default)
-        "space-before-function-paren": [1, { "anonymous": "always", "named": "never" }], // require or disallow space before function opening parenthesis (off by default)
-        "space-in-brackets": [1, "never"], // require or disallow spaces inside brackets (off by default)
-        "space-in-parens": [1, "never"], // require or disallow spaces inside parentheses (off by default)
-        "space-return-throw-case": [1, "always"], // require a space after return, throw, and case
-        "space-unary-ops": [1, { "words": true, "nonwords": false }], // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
-        "spaced-line-comment": [1, "always"], // require or disallow a space immediately following the // in a line comment (off by default)
-        "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default)
-
-        //
-        // ECMAScript 6
-        //
-        // These rules are only relevant to ES6 environments and are off by default.
-        //
-        "no-var": 2, // require let or const instead of var (off by default)
-        "generator-star-spacing": [2, "before"], // enforce the spacing around the * in generator functions (off by default)
-
-        //
-        // Legacy
-        //
-        // The following rules are included for compatibility with JSHint and JSLint.
-        // While the names of the rules may not match up with the JSHint/JSLint counterpart,
-        // the functionality is the same.
-        //
-        "max-depth": [2, 3], // specify the maximum depth that blocks can be nested (off by default)
-        "max-params": [2, 5], // limits the number of parameters that can be used in the function declaration. (off by default)
-        "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
-        "no-bitwise": 0, // disallow use of bitwise operators (off by default)
-        "no-plusplus": 2, // disallow use of unary operators, ++ and -- (off by default)
-
-        //
-        // eslint-plugin-react
-        //
-        // React specific linting rules for ESLint
-        //
-        "react/display-name": 0, // Prevent missing displayName in a React component definition
-        "react/jsx-quotes": [2, "double", "avoid-escape"], // Enforce quote style for JSX attributes
-        "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
-        "react/jsx-sort-props": 0, // Enforce props alphabetical sorting
-        "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
-        "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
-        "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
-        "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
-        "react/no-multi-comp": 0, // Prevent multiple component definition per file
-        "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
-        "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX
-        "react/self-closing-comp": 2, // Prevent extra closing tags for components without children
-        "react/wrap-multilines": 2, // Prevent missing parentheses around multilines JSX
+        "@next/next/no-img-element": "off",
+        "react/display-name": "off",
+        "react/no-unescaped-entities": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "no-console": 2,
         "padding-line-between-statements": [
             "error",
             { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
@@ -243,4 +23,251 @@
             { "blankLine": "always", "prev": "*", "next": "block-like" }
         ]
     }
-}
\ No newline at end of file
+}
+// USE THE CONFIG BELOW DURING THE DEVELOPMENT
+// {
+//     "env": {
+//         "browser": true,
+//         "node": true,
+//         "es6": true
+//     },
+
+//     "plugins": ["@typescript-eslint", "jest-dom"],
+//     "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+
+//     "ecmaFeatures": {
+//         "arrowFunctions": true,
+//         "binaryLiterals": true,
+//         "blockBindings": true,
+//         "classes": true,
+//         "defaultParams": true,
+//         "destructuring": true,
+//         "forOf": true,
+//         "generators": true,
+//         "modules": true,
+//         "objectLiteralComputedProperties": true,
+//         "objectLiteralDuplicateProperties": true,
+//         "objectLiteralShorthandMethods": true,
+//         "objectLiteralShorthandProperties": true,
+//         "octalLiterals": true,
+//         "regexUFlag": true,
+//         "regexYFlag": true,
+//         "spread": true,
+//         "superInFunctions": true,
+//         "templateStrings": true,
+//         "unicodeCodePointEscapes": true,
+//         "globalReturn": true,
+//         "jsx": true
+//     },
+
+//     "rules": {
+//         //
+//         //Possible Errors
+//         //
+//         // The following rules point out areas where you might have made mistakes.
+//         //
+//         "no-cond-assign": 2, // disallow assignment in conditional expressions
+//         "no-console": 1, // disallow use of console (off by default in the node environment)
+//         "no-constant-condition": 2, // disallow use of constant expressions in conditions
+//         "no-control-regex": 2, // disallow control characters in regular expressions
+//         "no-debugger": 2, // disallow use of debugger
+//         "no-dupe-args": 2, // disallow duplicate arguments in functions
+//         "no-dupe-keys": 2, // disallow duplicate keys when creating object literals
+//         "no-duplicate-case": 2, // disallow a duplicate case label.
+//         "no-empty": 2, // disallow empty statements
+//         "no-empty-class": 2, // disallow the use of empty character classes in regular expressions
+//         "no-ex-assign": 2, // disallow assigning to the exception in a catch block
+//         "no-extra-boolean-cast": 2, // disallow double-negation boolean casts in a boolean context
+//         "no-extra-parens": 0, // disallow unnecessary parentheses (off by default)
+//         "no-extra-semi": 2, // disallow unnecessary semicolons
+//         "no-func-assign": 2, // disallow overwriting functions written as function declarations
+//         "no-inner-declarations": 2, // disallow function or variable declarations in nested blocks
+//         "no-invalid-regexp": 2, // disallow invalid regular expression strings in the RegExp constructor
+//         "no-irregular-whitespace": 2, // disallow irregular whitespace outside of strings and comments
+//         "no-negated-in-lhs": 2, // disallow negation of the left operand of an in expression
+//         "no-obj-calls": 2, // disallow the use of object properties of the global object (Math and JSON) as functions
+//         "no-regex-spaces": 2, // disallow multiple spaces in a regular expression literal
+//         "no-reserved-keys": 2, // disallow reserved words being used as object literal keys (off by default)
+//         "no-sparse-arrays": 2, // disallow sparse arrays
+//         "no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement
+//         "use-isnan": 2, // disallow comparisons with the value NaN
+//         "valid-jsdoc": 2, // Ensure JSDoc comments are valid (off by default)
+//         "valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string
+
+//         //
+//         // Best Practices
+//         //
+//         // These are rules designed to prevent you from making mistakes.
+//         // They either prescribe a better way of doing something or help you avoid footguns.
+//         //
+//         "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default). 0: deep destructuring is not compatible https://github.com/eslint/eslint/issues/1863
+//         "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
+//         "consistent-return": 2, // require return statements to either always or never specify values
+//         "curly": 2, // specify curly brace conventions for all control statements
+//         "default-case": 2, // require default case in switch statements (off by default)
+//         "dot-notation": 2, // encourages use of dot notation whenever possible
+//         "eqeqeq": 2, // require the use of === and !==
+//         "guard-for-in": 2, // make sure for-in loops have an if statement (off by default)
+//         "no-alert": 2, // disallow the use of alert, confirm, and prompt
+//         "no-caller": 2, // disallow use of arguments.caller or arguments.callee
+//         "no-div-regex": 2, // disallow division operators explicitly at beginning of regular expression (off by default)
+//         "no-else-return": 2, // disallow else after a return in an if (off by default)
+//         "no-empty-label": 2, // disallow use of labels for anything other then loops and switches
+//         "no-eq-null": 2, // disallow comparisons to null without a type-checking operator (off by default)
+//         "no-eval": 2, // disallow use of eval()
+//         "no-extend-native": 2, // disallow adding to native types
+//         "no-extra-bind": 2, // disallow unnecessary function binding
+//         "no-fallthrough": 2, // disallow fallthrough of case statements
+//         "no-floating-decimal": 2, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
+//         "no-implied-eval": 2, // disallow use of eval()-like methods
+//         "no-iterator": 2, // disallow usage of __iterator__ property
+//         "no-labels": 2, // disallow use of labeled statements
+//         "no-lone-blocks": 2, // disallow unnecessary nested blocks
+//         "no-loop-func": 2, // disallow creation of functions within loops
+//         "no-multi-spaces": 2, // disallow use of multiple spaces
+//         "no-multi-str": 2, // disallow use of multiline strings
+//         "no-native-reassign": 2, // disallow reassignments of native objects
+//         "no-new": 2, // disallow use of new operator when not part of the assignment or comparison
+//         "no-new-func": 2, // disallow use of new operator for Function object
+//         "no-new-wrappers": 2, // disallows creating new instances of String,Number, and Boolean
+//         "no-octal": 2, // disallow use of octal literals
+//         "no-octal-escape": 2, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
+//         "no-param-reassign": 2, // disallow reassignment of function parameters (off by default)
+//         "no-process-env": 2, // disallow use of process.env (off by default)
+//         "no-proto": 2, // disallow usage of __proto__ property
+//         "no-redeclare": 2, // disallow declaring the same variable more then once
+//         "no-return-assign": 2, // disallow use of assignment in return statement
+//         "no-script-url": 2, // disallow use of javascript: urls.
+//         "no-self-compare": 2, // disallow comparisons where both sides are exactly the same (off by default)
+//         "no-sequences": 2, // disallow use of comma operator
+//         "no-throw-literal": 2, // restrict what can be thrown as an exception (off by default)
+//         "no-void": 2, // disallow use of void operator (off by default)
+//         "no-warning-comments": [0, { "terms": ["todo", "fixme"], "location": "start" }], // disallow usage of configurable warning terms in comments": 2, // e.g. TODO or FIXME (off by default)
+//         "no-with": 2, // disallow use of the with statement
+//         "radix": 2, // require use of the second argument for parseInt() (off by default)
+//         "vars-on-top": 2, // requires to declare all vars on top of their containing scope (off by default)
+//         "wrap-iife": 2, // require immediate function invocation to be wrapped in parentheses (off by default)
+//         "yoda": 2, // require or disallow Yoda conditions
+
+//         //
+//         // Strict Mode
+//         //
+//         // These rules relate to using strict mode.
+//         //
+//         "strict": 0, // controls location of Use Strict Directives. 0: required by `babel-eslint`
+
+//         //
+//         // Variables
+//         //
+//         // These rules have to do with variable declarations.
+//         //
+//         "no-catch-shadow": 2, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
+//         "no-delete-var": 2, // disallow deletion of variables
+//         "no-label-var": 2, // disallow labels that share a name with a variable
+//         "no-shadow": 2, // disallow declaration of variables already declared in the outer scope
+//         "no-shadow-restricted-names": 2, // disallow shadowing of names such as arguments
+//         "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
+//         "no-undef-init": 2, // disallow use of undefined when initializing variables
+//         "no-undefined": 2, // disallow use of undefined variable (off by default)
+//         "no-unused-vars": 2, // disallow declaration of variables that are not used in the code
+//         "no-use-before-define": 2, // disallow use of variables before they are defined
+
+//         //
+//         //Stylistic Issues
+//         //
+//         // These rules are purely matters of style and are quite subjective.
+//         //
+//         "indent": [1, 4], // this option sets a specific tab width for your code (off by default)
+//         "brace-style": 1, // enforce one true brace style (off by default)
+//         "camelcase": 1, // require camel case names
+//         "comma-spacing": [1, { "before": false, "after": true }], // enforce spacing before and after comma
+//         "comma-style": [1, "last"], // enforce one true comma style (off by default)
+//         "consistent-this": [1, "_this"], // enforces consistent naming when capturing the current execution context (off by default)
+//         "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines
+//         "func-names": 0, // require function expressions to have a name (off by default)
+//         "func-style": 0, // enforces use of function declarations or expressions (off by default)
+//         "key-spacing": [1, { "beforeColon": false, "afterColon": true }], // enforces spacing between keys and values in object literal properties
+//         "max-nested-callbacks": [1, 3], // specify the maximum depth callbacks can be nested (off by default)
+//         "new-cap": [1, { "newIsCap": true, "capIsNew": false }], // require a capital letter for constructors
+//         "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments
+//         "newline-after-var": 0, // allow/disallow an empty newline after var statement (off by default)
+//         "no-array-constructor": 1, // disallow use of the Array constructor
+//         "no-inline-comments": 1, // disallow comments inline after code (off by default)
+//         "no-lonely-if": 1, // disallow if as the only statement in an else block (off by default)
+//         "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation
+//         "no-multiple-empty-lines": [1, { "max": 2 }], // disallow multiple empty lines (off by default)
+//         "no-new-object": 1, // disallow use of the Object constructor
+//         "no-spaced-func": 1, // disallow space between function identifier and application
+//         "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
+//         "no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens
+//         "one-var": [1, "never"], // allow just one var statement per function (off by default)
+//         "operator-assignment": [1, "never"], // require assignment operator shorthand where possible or prohibit it entirely (off by default)
+//         "padded-blocks": [1, "never"], // enforce padding within blocks (off by default)
+//         "quote-props": [1, "as-needed"], // require quotes around object literal property names (off by default)
+//         "quotes": [1, "single"], // specify whether double or single quotes should be used
+//         "semi": [1, "always"], // require or disallow use of semicolons instead of ASI
+//         "semi-spacing": [1, { "before": false, "after": true }], // enforce spacing before and after semicolons
+//         "sort-vars": 0, // sort variables within the same declaration block (off by default)
+//         "space-after-keywords": [1, "always"], // require a space after certain keywords (off by default)
+//         "space-before-blocks": [1, "always"], // require or disallow space before blocks (off by default)
+//         "space-before-function-paren": [1, { "anonymous": "always", "named": "never" }], // require or disallow space before function opening parenthesis (off by default)
+//         "space-in-brackets": [1, "never"], // require or disallow spaces inside brackets (off by default)
+//         "space-in-parens": [1, "never"], // require or disallow spaces inside parentheses (off by default)
+//         "space-return-throw-case": [1, "always"], // require a space after return, throw, and case
+//         "space-unary-ops": [1, { "words": true, "nonwords": false }], // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
+//         "spaced-line-comment": [1, "always"], // require or disallow a space immediately following the // in a line comment (off by default)
+//         "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default)
+
+//         //
+//         // ECMAScript 6
+//         //
+//         // These rules are only relevant to ES6 environments and are off by default.
+//         //
+//         "no-var": 2, // require let or const instead of var (off by default)
+//         "generator-star-spacing": [2, "before"], // enforce the spacing around the * in generator functions (off by default)
+
+//         //
+//         // Legacy
+//         //
+//         // The following rules are included for compatibility with JSHint and JSLint.
+//         // While the names of the rules may not match up with the JSHint/JSLint counterpart,
+//         // the functionality is the same.
+//         //
+//         "max-depth": [2, 3], // specify the maximum depth that blocks can be nested (off by default)
+//         "max-params": [2, 5], // limits the number of parameters that can be used in the function declaration. (off by default)
+//         "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
+//         "no-bitwise": 0, // disallow use of bitwise operators (off by default)
+//         "no-plusplus": 2, // disallow use of unary operators, ++ and -- (off by default)
+
+//         //
+//         // eslint-plugin-react
+//         //
+//         // React specific linting rules for ESLint
+//         //
+//         "react/display-name": 0, // Prevent missing displayName in a React component definition
+//         "react/jsx-quotes": [2, "double", "avoid-escape"], // Enforce quote style for JSX attributes
+//         "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
+//         "react/jsx-sort-props": 0, // Enforce props alphabetical sorting
+//         "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
+//         "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
+//         "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
+//         "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
+//         "react/no-multi-comp": 0, // Prevent multiple component definition per file
+//         "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
+//         "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX
+//         "react/self-closing-comp": 2, // Prevent extra closing tags for components without children
+//         "react/wrap-multilines": 2, // Prevent missing parentheses around multilines JSX
+//         "padding-line-between-statements": [
+//             "error",
+//             { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+//             { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] },
+//             { "blankLine": "any", "prev": ["case", "default"], "next": "break" },
+//             { "blankLine": "any", "prev": "case", "next": "case" },
+//             { "blankLine": "always", "prev": "*", "next": "return" },
+//             { "blankLine": "always", "prev": "block", "next": "*" },
+//             { "blankLine": "always", "prev": "*", "next": "block" },
+//             { "blankLine": "always", "prev": "block-like", "next": "*" },
+//             { "blankLine": "always", "prev": "*", "next": "block-like" }
+//         ]
+//     }
+// }
diff --git a/components/demo/DeferredDemo.js b/components/demo/DeferredDemo.js
index d0d868e0d1..bcf4979e9f 100644
--- a/components/demo/DeferredDemo.js
+++ b/components/demo/DeferredDemo.js
@@ -39,7 +39,7 @@ const DeferredDemo = ({ options, children, onLoad }) => {
         <>
             {!visible && (
                 <div ref={elementRef} className="card">
-                    <div className="deferred-demo-loading"></div>
+                    <div className="deferred-demo-loading" />
                 </div>
             )}
             {visible && children}
diff --git a/components/doc/accessibility/colorsdoc.js b/components/doc/accessibility/colorsdoc.js
index 88aa4e76cf..ddc046e3b0 100644
--- a/components/doc/accessibility/colorsdoc.js
+++ b/components/doc/accessibility/colorsdoc.js
@@ -35,11 +35,11 @@ export function ColorsDoc(props) {
             <div className="flex">
                 <div className="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style={{ borderRadius: '10px' }}>
                     <span className="text-indigo-500">Indigo 500</span>
-                    <i className="text-indigo-500 pi pi-times-circle mt-3 text-xl"></i>
+                    <i className="text-indigo-500 pi pi-times-circle mt-3 text-xl" />
                 </div>
                 <div className="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style={{ borderRadius: '10px' }}>
                     <span className="text-indigo-200">Indigo 200</span>
-                    <i className="text-indigo-200 pi pi-check-circle mt-3 text-xl"></i>
+                    <i className="text-indigo-200 pi pi-check-circle mt-3 text-xl" />
                 </div>
             </div>
         </>
diff --git a/components/doc/accordion/disableddoc.js b/components/doc/accordion/disableddoc.js
index f1ad7678da..fe7bfb691c 100644
--- a/components/doc/accordion/disableddoc.js
+++ b/components/doc/accordion/disableddoc.js
@@ -139,7 +139,7 @@ export default function DisabledDemo() {
                             culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
                         </p>
                     </AccordionTab>
-                    <AccordionTab header="Header IV" disabled></AccordionTab>
+                    <AccordionTab header="Header IV" disabled />
                 </Accordion>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/accordion/importdoc.js b/components/doc/accordion/importdoc.js
index 5005e9a39c..21bc954346 100644
--- a/components/doc/accordion/importdoc.js
+++ b/components/doc/accordion/importdoc.js
@@ -10,7 +10,7 @@ import { Accordion, AccordionTab } from 'primereact/accordion';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/accordion/pt/ptdoc.js b/components/doc/accordion/pt/ptdoc.js
index 3a039db3fb..b3d7f826a8 100644
--- a/components/doc/accordion/pt/ptdoc.js
+++ b/components/doc/accordion/pt/ptdoc.js
@@ -10,7 +10,9 @@ export function PTDoc(props) {
     ];
 
     const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index) return 'bg-primary';
+        if (parent.state.activeIndex === index) {
+            return 'bg-primary';
+        }
     };
 
     const code = {
@@ -116,7 +118,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Accordion activeIndex={0}>
                     {tabs.map((tab, i) => {
diff --git a/components/doc/autocomplete/importdoc.js b/components/doc/autocomplete/importdoc.js
index 5d32d28d68..d10a63222a 100644
--- a/components/doc/autocomplete/importdoc.js
+++ b/components/doc/autocomplete/importdoc.js
@@ -10,7 +10,7 @@ import { AutoComplete } from 'primereact/autocomplete';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/autocomplete/pt/ptdoc.js b/components/doc/autocomplete/pt/ptdoc.js
index ad4d492be7..86bf17c447 100644
--- a/components/doc/autocomplete/pt/ptdoc.js
+++ b/components/doc/autocomplete/pt/ptdoc.js
@@ -90,7 +90,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <AutoComplete
                     value={value}
diff --git a/components/doc/autocomplete/templatedoc.js b/components/doc/autocomplete/templatedoc.js
index 57e06a4852..2925e87826 100644
--- a/components/doc/autocomplete/templatedoc.js
+++ b/components/doc/autocomplete/templatedoc.js
@@ -36,7 +36,7 @@ export function TemplateDoc(props) {
     };
 
     const panelFooterTemplate = () => {
-        const isCountrySelected = (filteredCountries || []).some((country) => country['name'] === selectedCountry);
+        const isCountrySelected = (filteredCountries || []).some((country) => country.name === selectedCountry);
 
         return (
             <div className="py-2 px-3">
diff --git a/components/doc/avatar/importdoc.js b/components/doc/avatar/importdoc.js
index 14c9c2dcd8..1dfec4cc32 100644
--- a/components/doc/avatar/importdoc.js
+++ b/components/doc/avatar/importdoc.js
@@ -11,7 +11,7 @@ import { AvatarGroup } from 'primereact/avatargroup';   //Optional for grouping
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/avatar/pt/ptdoc.js b/components/doc/avatar/pt/ptdoc.js
index 460a4f4478..084a005b27 100644
--- a/components/doc/avatar/pt/ptdoc.js
+++ b/components/doc/avatar/pt/ptdoc.js
@@ -38,7 +38,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" pt={{ image: { className: 'w-4rem h-4rem' } }} />
             </div>
diff --git a/components/doc/badge/basicdoc.js b/components/doc/badge/basicdoc.js
index f87aeceaba..eaab7af004 100644
--- a/components/doc/badge/basicdoc.js
+++ b/components/doc/badge/basicdoc.js
@@ -41,7 +41,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Badge value="2"></Badge>
+                <Badge value="2" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/badge/buttondoc.js b/components/doc/badge/buttondoc.js
index 98ea9f1575..8bcadfc398 100644
--- a/components/doc/badge/buttondoc.js
+++ b/components/doc/badge/buttondoc.js
@@ -58,10 +58,10 @@ export default function ButtonDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-2">
                 <Button type="button" label="Emails">
-                    <Badge value="8"></Badge>
+                    <Badge value="8" />
                 </Button>
                 <Button type="button" label="Messages" icon="pi pi-users" severity="secondary">
-                    <Badge value="8" severity="danger"></Badge>
+                    <Badge value="8" severity="danger" />
                 </Button>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/badge/importdoc.js b/components/doc/badge/importdoc.js
index ae3a910a1d..53b56ec03d 100644
--- a/components/doc/badge/importdoc.js
+++ b/components/doc/badge/importdoc.js
@@ -10,7 +10,7 @@ import { Badge } from 'primereact/badge';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/badge/positiondoc.js b/components/doc/badge/positiondoc.js
index 399a4ba21c..1b77a34dfd 100644
--- a/components/doc/badge/positiondoc.js
+++ b/components/doc/badge/positiondoc.js
@@ -66,13 +66,13 @@ export default function PositionDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-4">
                 <i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
-                    <Badge value="2"></Badge>
+                    <Badge value="2" />
                 </i>
                 <i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
-                    <Badge value="5+" severity="danger"></Badge>
+                    <Badge value="5+" severity="danger" />
                 </i>
                 <i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
-                    <Badge severity="danger"></Badge>
+                    <Badge severity="danger" />
                 </i>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/badge/pt/ptdoc.js b/components/doc/badge/pt/ptdoc.js
index fe6393819b..b678a439d6 100644
--- a/components/doc/badge/pt/ptdoc.js
+++ b/components/doc/badge/pt/ptdoc.js
@@ -36,7 +36,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Badge value="2" pt={{ root: { className: 'bg-primary border-round-sm' } }} />
             </div>
diff --git a/components/doc/badge/severitydoc.js b/components/doc/badge/severitydoc.js
index 65a31bf598..989b4137d8 100644
--- a/components/doc/badge/severitydoc.js
+++ b/components/doc/badge/severitydoc.js
@@ -59,13 +59,13 @@ export default function SeverityDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-2">
-                <Badge value="2"></Badge>
-                <Badge value="8" severity="success"></Badge>
-                <Badge value="4" severity="info"></Badge>
-                <Badge value="12" severity="warning"></Badge>
-                <Badge value="3" severity="danger"></Badge>
-                <Badge value="7" severity="secondary"></Badge>
-                <Badge value="5" severity="contrast"></Badge>
+                <Badge value="2" />
+                <Badge value="8" severity="success" />
+                <Badge value="4" severity="info" />
+                <Badge value="12" severity="warning" />
+                <Badge value="3" severity="danger" />
+                <Badge value="7" severity="secondary" />
+                <Badge value="5" severity="contrast" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/badge/sizedoc.js b/components/doc/badge/sizedoc.js
index 709c012ab0..ca52ec5659 100644
--- a/components/doc/badge/sizedoc.js
+++ b/components/doc/badge/sizedoc.js
@@ -47,9 +47,9 @@ export default function SizeDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center align-items-end gap-2">
-                <Badge value="6" size="xlarge" severity="success"></Badge>
-                <Badge value="4" size="large" severity="warning"></Badge>
-                <Badge value="2"></Badge>
+                <Badge value="6" size="xlarge" severity="success" />
+                <Badge value="4" size="large" severity="warning" />
+                <Badge value="2" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/blockui/basicdoc.js b/components/doc/blockui/basicdoc.js
index d545709517..8825c1ae98 100644
--- a/components/doc/blockui/basicdoc.js
+++ b/components/doc/blockui/basicdoc.js
@@ -91,8 +91,8 @@ export default function BasicDemo() {
             </DocSectionText>
             <div className="card">
                 <div className="mb-3">
-                    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
-                    <Button label="Unblock" onClick={() => setBlocked(false)} severity="secondary"></Button>
+                    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2" />
+                    <Button label="Unblock" onClick={() => setBlocked(false)} severity="secondary" />
                 </div>
                 <BlockUI blocked={blocked}>
                     <Panel header="Basic">
diff --git a/components/doc/blockui/importdoc.js b/components/doc/blockui/importdoc.js
index 8d1ab01b33..368e90ca34 100644
--- a/components/doc/blockui/importdoc.js
+++ b/components/doc/blockui/importdoc.js
@@ -10,7 +10,7 @@ import { BlockUI } from 'primereact/blockui';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/blockui/pt/ptdoc.js b/components/doc/blockui/pt/ptdoc.js
index ca81cc494c..2830a32db6 100644
--- a/components/doc/blockui/pt/ptdoc.js
+++ b/components/doc/blockui/pt/ptdoc.js
@@ -64,11 +64,11 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <div className="mb-3">
-                    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
-                    <Button label="Unblock" onClick={() => setBlocked(false)}></Button>
+                    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2" />
+                    <Button label="Unblock" onClick={() => setBlocked(false)} />
                 </div>
                 <BlockUI blocked={blocked} pt={{ root: { className: 'surface-ground p-2 border-round-sm' } }}>
                     <p className="m-0">
diff --git a/components/doc/blockui/templatedoc.js b/components/doc/blockui/templatedoc.js
index 258c705323..abc3d21e67 100644
--- a/components/doc/blockui/templatedoc.js
+++ b/components/doc/blockui/templatedoc.js
@@ -93,7 +93,7 @@ export default function TemplateDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <BlockUI blocked={blocked} template={<i className="pi pi-lock" style={{ fontSize: '3rem' }}></i>}>
+                <BlockUI blocked={blocked} template={<i className="pi pi-lock" style={{ fontSize: '3rem' }} />}>
                     <Panel header="Prime React News">
                         <p className="m-0">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -104,7 +104,7 @@ export default function TemplateDemo() {
                 </BlockUI>
                 <div className="mt-3 flex flex-column align-items-center">
                     <h3>Continue reading?</h3>
-                    <Button label={buttonText} onClick={() => setBlocked((oldState) => !oldState)}></Button>
+                    <Button label={buttonText} onClick={() => setBlocked((oldState) => !oldState)} />
                 </div>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/bootstrap/exampledoc.js b/components/doc/bootstrap/exampledoc.js
index f03e97c931..60b1859951 100644
--- a/components/doc/bootstrap/exampledoc.js
+++ b/components/doc/bootstrap/exampledoc.js
@@ -10,7 +10,7 @@ export function ExampleDoc(props) {
                 </p>
 
                 <div className="flex justify-content-center">
-                    <iframe className="w-full h-full" style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }} src="https://stackblitz.com/edit/stackblitz-starters-waigrp?file=src%2FApp.js" allowfullscreen></iframe>
+                    <iframe className="w-full h-full" style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }} src="https://stackblitz.com/edit/stackblitz-starters-waigrp?file=src%2FApp.js" allowfullscreen />
                 </div>
             </DocSectionText>
         </>
diff --git a/components/doc/breadcrumb/importdoc.js b/components/doc/breadcrumb/importdoc.js
index 9d34ccf089..c3bfd59890 100644
--- a/components/doc/breadcrumb/importdoc.js
+++ b/components/doc/breadcrumb/importdoc.js
@@ -10,7 +10,7 @@ import { BreadCrumb } from 'primereact/breadcrumb';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/breadcrumb/pt/ptdoc.js b/components/doc/breadcrumb/pt/ptdoc.js
index 42b78af47d..905c6202e4 100644
--- a/components/doc/breadcrumb/pt/ptdoc.js
+++ b/components/doc/breadcrumb/pt/ptdoc.js
@@ -72,7 +72,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <BreadCrumb
                     pt={{
diff --git a/components/doc/breadcrumb/templatedoc.js b/components/doc/breadcrumb/templatedoc.js
index 0fcbe4a38f..5c99f309b2 100644
--- a/components/doc/breadcrumb/templatedoc.js
+++ b/components/doc/breadcrumb/templatedoc.js
@@ -6,7 +6,7 @@ export function TemplateDoc(props) {
     const iconItemTemplate = (item, options) => {
         return (
             <a className={options.className}>
-                <span className={item.icon}></span>
+                <span className={item.icon} />
             </a>
         );
     };
diff --git a/components/doc/bulma/exampledoc.js b/components/doc/bulma/exampledoc.js
index 5614dc91d8..6f3e52272b 100644
--- a/components/doc/bulma/exampledoc.js
+++ b/components/doc/bulma/exampledoc.js
@@ -6,7 +6,7 @@ export function ExampleDoc(props) {
             <DocSectionText {...props}>
                 <p>Demonstration of various PrimeReact components like input field, button, table and panel styled with Bulma utilities.</p>
                 <div className="flex justify-content-center">
-                    <iframe className="w-full h-full" style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }} src="https://stackblitz.com/edit/react-w9xywf?file=src%2FApp.js" allowfullscreen></iframe>
+                    <iframe className="w-full h-full" style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }} src="https://stackblitz.com/edit/react-w9xywf?file=src%2FApp.js" allowfullscreen />
                 </div>
             </DocSectionText>
         </>
diff --git a/components/doc/button/importdoc.js b/components/doc/button/importdoc.js
index 7456537579..20fd2ee66e 100644
--- a/components/doc/button/importdoc.js
+++ b/components/doc/button/importdoc.js
@@ -10,7 +10,7 @@ import { Button } from 'primereact/button';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/button/pt/ptdoc.js b/components/doc/button/pt/ptdoc.js
index 3903fab953..2245eed621 100644
--- a/components/doc/button/pt/ptdoc.js
+++ b/components/doc/button/pt/ptdoc.js
@@ -51,7 +51,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex flex-wrap gap-3 justify-content-center">
                 <Button
                     label="Submit"
diff --git a/components/doc/button/templatedoc.js b/components/doc/button/templatedoc.js
index 796e4f9d2b..4a56a25c3c 100644
--- a/components/doc/button/templatedoc.js
+++ b/components/doc/button/templatedoc.js
@@ -46,7 +46,7 @@ export default function TemplateDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button className="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
-                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/primereact-logo-light.svg" className="h-2rem"></img>
+                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/primereact-logo-light.svg" className="h-2rem" />
                 </Button>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/calendar/importdoc.js b/components/doc/calendar/importdoc.js
index f60c3f195a..343b77b3ab 100644
--- a/components/doc/calendar/importdoc.js
+++ b/components/doc/calendar/importdoc.js
@@ -10,7 +10,7 @@ import { Calendar } from 'primereact/calendar';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/calendar/pt/ptdoc.js b/components/doc/calendar/pt/ptdoc.js
index 51cb451f8c..4929c3fd9a 100644
--- a/components/doc/calendar/pt/ptdoc.js
+++ b/components/doc/calendar/pt/ptdoc.js
@@ -78,7 +78,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Calendar
                     value={date}
diff --git a/components/doc/captcha/captchadoc.js b/components/doc/captcha/captchadoc.js
index fcc7dc152c..8236310e45 100644
--- a/components/doc/captcha/captchadoc.js
+++ b/components/doc/captcha/captchadoc.js
@@ -64,7 +64,7 @@ export default function CaptchaDoc() {
                 <p>Styling Demo Content.</p>
             </DocSectionText>
             <div className="card">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <Captcha siteKey="YOUR_SITE_KEY" onResponse={showResponse} />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/captcha/importdoc.js b/components/doc/captcha/importdoc.js
index f4d8063806..0d6e445c0c 100644
--- a/components/doc/captcha/importdoc.js
+++ b/components/doc/captcha/importdoc.js
@@ -10,7 +10,7 @@ import { Captcha } from 'primereact/captcha';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/card/importdoc.js b/components/doc/card/importdoc.js
index 329c855554..caadf1fde8 100644
--- a/components/doc/card/importdoc.js
+++ b/components/doc/card/importdoc.js
@@ -10,7 +10,7 @@ import { Card } from 'primereact/card';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/card/pt/ptdoc.js b/components/doc/card/pt/ptdoc.js
index c170c7be67..2bfb63cac0 100644
--- a/components/doc/card/pt/ptdoc.js
+++ b/components/doc/card/pt/ptdoc.js
@@ -65,7 +65,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Card
                     title="Simple Card"
diff --git a/components/doc/carousel/basicdoc.js b/components/doc/carousel/basicdoc.js
index ca2b185fab..5bb5164d60 100644
--- a/components/doc/carousel/basicdoc.js
+++ b/components/doc/carousel/basicdoc.js
@@ -33,17 +33,17 @@ export function BasicDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -60,7 +60,7 @@ export function BasicDoc(props) {
                 <div>
                     <h4 className="mb-1">{product.name}</h4>
                     <h6 className="mt-0 mb-3">${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
                         <Button icon="pi pi-search" rounded />
                         <Button icon="pi pi-star-fill" rounded severity="success" />
diff --git a/components/doc/carousel/circulardoc.js b/components/doc/carousel/circulardoc.js
index 3d36464a94..3a32670da8 100644
--- a/components/doc/carousel/circulardoc.js
+++ b/components/doc/carousel/circulardoc.js
@@ -33,17 +33,17 @@ export function CircularDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -60,7 +60,7 @@ export function CircularDoc(props) {
                 <div>
                     <h4 className="mb-1">{product.name}</h4>
                     <h6 className="mt-0 mb-3">${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
                         <Button icon="pi pi-search" className="p-button p-button-rounded" />
                         <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
diff --git a/components/doc/carousel/importdoc.js b/components/doc/carousel/importdoc.js
index 5127af9535..b7fffbb9d1 100644
--- a/components/doc/carousel/importdoc.js
+++ b/components/doc/carousel/importdoc.js
@@ -10,7 +10,7 @@ import { Carousel } from 'primereact/carousel';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/carousel/numscrolldoc.js b/components/doc/carousel/numscrolldoc.js
index 83513ee017..c7319b819f 100644
--- a/components/doc/carousel/numscrolldoc.js
+++ b/components/doc/carousel/numscrolldoc.js
@@ -33,17 +33,17 @@ export function NumScrollDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -60,7 +60,7 @@ export function NumScrollDoc(props) {
                 <div>
                     <h4 className="mb-1">{product.name}</h4>
                     <h6 className="mt-0 mb-3">${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
                         <Button icon="pi pi-search" className="p-button p-button-rounded" />
                         <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
diff --git a/components/doc/carousel/pt/ptdoc.js b/components/doc/carousel/pt/ptdoc.js
index e0cca2bbe5..a65eab836d 100644
--- a/components/doc/carousel/pt/ptdoc.js
+++ b/components/doc/carousel/pt/ptdoc.js
@@ -28,17 +28,17 @@ export function PTDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -55,7 +55,7 @@ export function PTDoc(props) {
                 <div>
                     <h4 className="mb-1">{product.name}</h4>
                     <h6 className="mt-0 mb-3">${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
                         <Button icon="pi pi-search" className="p-button p-button-rounded" />
                         <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
@@ -275,7 +275,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Carousel
                     value={products}
diff --git a/components/doc/carousel/responsivedoc.js b/components/doc/carousel/responsivedoc.js
index ad1e6d465b..e594bf5186 100644
--- a/components/doc/carousel/responsivedoc.js
+++ b/components/doc/carousel/responsivedoc.js
@@ -33,17 +33,17 @@ export function ResponsiveDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -60,7 +60,7 @@ export function ResponsiveDoc(props) {
                 <div>
                     <h4 className="mb-1">{product.name}</h4>
                     <h6 className="mt-0 mb-3">${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
                         <Button icon="pi pi-search" className="p-button p-button-rounded" />
                         <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
diff --git a/components/doc/carousel/verticaldoc.js b/components/doc/carousel/verticaldoc.js
index 4502035e62..d3106e1e0f 100644
--- a/components/doc/carousel/verticaldoc.js
+++ b/components/doc/carousel/verticaldoc.js
@@ -11,17 +11,17 @@ export function VerticalDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -38,7 +38,7 @@ export function VerticalDoc(props) {
                 <div>
                     <h4 className="mb-1">{product.name}</h4>
                     <h6 className="mt-0 mb-3">${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
                         <Button icon="pi pi-search" className="p-button p-button-rounded" />
                         <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
diff --git a/components/doc/cascadeselect/importdoc.js b/components/doc/cascadeselect/importdoc.js
index aa589848cf..1f14e679cd 100644
--- a/components/doc/cascadeselect/importdoc.js
+++ b/components/doc/cascadeselect/importdoc.js
@@ -10,7 +10,7 @@ import { CascadeSelect } from 'primereact/cascadeselect';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/cascadeselect/pt/ptdoc.js b/components/doc/cascadeselect/pt/ptdoc.js
index 2faccef81d..f94c1c86cc 100644
--- a/components/doc/cascadeselect/pt/ptdoc.js
+++ b/components/doc/cascadeselect/pt/ptdoc.js
@@ -321,7 +321,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <CascadeSelect
                     value={selectedCity}
diff --git a/components/doc/chart/importdoc.js b/components/doc/chart/importdoc.js
index ef1f445ef7..94f5925528 100644
--- a/components/doc/chart/importdoc.js
+++ b/components/doc/chart/importdoc.js
@@ -10,7 +10,7 @@ import { Chart } from 'primereact/chart';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/chart/pt/ptdoc.js b/components/doc/chart/pt/ptdoc.js
index 4ece4ac4ba..fdf46301ea 100644
--- a/components/doc/chart/pt/ptdoc.js
+++ b/components/doc/chart/pt/ptdoc.js
@@ -144,7 +144,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Chart
                     type="pie"
diff --git a/components/doc/checkbox/basicdoc.js b/components/doc/checkbox/basicdoc.js
index aad3c4ec79..08f8de0f33 100644
--- a/components/doc/checkbox/basicdoc.js
+++ b/components/doc/checkbox/basicdoc.js
@@ -48,7 +48,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Checkbox onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
+                <Checkbox onChange={(e) => setChecked(e.checked)} checked={checked} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/checkbox/disableddoc.js b/components/doc/checkbox/disableddoc.js
index 2728c4b236..4c6acfd0d0 100644
--- a/components/doc/checkbox/disableddoc.js
+++ b/components/doc/checkbox/disableddoc.js
@@ -41,7 +41,7 @@ export default function DisabledDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Checkbox checked disabled></Checkbox>
+                <Checkbox checked disabled />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/checkbox/dynamicdoc.js b/components/doc/checkbox/dynamicdoc.js
index c6feb8a734..2951288545 100644
--- a/components/doc/checkbox/dynamicdoc.js
+++ b/components/doc/checkbox/dynamicdoc.js
@@ -15,8 +15,11 @@ export function DynamicDoc(props) {
     const onCategoryChange = (e) => {
         let _selectedCategories = [...selectedCategories];
 
-        if (e.checked) _selectedCategories.push(e.value);
-        else _selectedCategories = _selectedCategories.filter((category) => category.key !== e.value.key);
+        if (e.checked) {
+            _selectedCategories.push(e.value);
+        } else {
+            _selectedCategories = _selectedCategories.filter((category) => category.key !== e.value.key);
+        }
 
         setSelectedCategories(_selectedCategories);
     };
diff --git a/components/doc/checkbox/form/formikdoc.js b/components/doc/checkbox/form/formikdoc.js
index bfa3c80b45..dfe2d57770 100644
--- a/components/doc/checkbox/form/formikdoc.js
+++ b/components/doc/checkbox/form/formikdoc.js
@@ -197,7 +197,7 @@ export default function FormikDoc() {
                         onChange={(e) => {
                             formik.setFieldValue('checked', e.checked);
                         }}
-                    ></Checkbox>
+                    />
                     {getFormErrorMessage('checked')}
                     <Button type="submit" label="Submit" />
                 </form>
diff --git a/components/doc/checkbox/form/hookformdoc.js b/components/doc/checkbox/form/hookformdoc.js
index f347e2278f..25bbb9560f 100644
--- a/components/doc/checkbox/form/hookformdoc.js
+++ b/components/doc/checkbox/form/hookformdoc.js
@@ -189,7 +189,7 @@ export default function HookFormDoc() {
                         rules={{ required: 'Accept is required.' }}
                         render={({ field, fieldState }) => (
                             <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
+                                <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)}
                             </>
diff --git a/components/doc/checkbox/groupdoc.js b/components/doc/checkbox/groupdoc.js
index a4dbe28ed4..5cf5d5fb73 100644
--- a/components/doc/checkbox/groupdoc.js
+++ b/components/doc/checkbox/groupdoc.js
@@ -9,8 +9,11 @@ export function GroupDoc(props) {
     const onIngredientsChange = (e) => {
         let _ingredients = [...ingredients];
 
-        if (e.checked) _ingredients.push(e.value);
-        else _ingredients.splice(_ingredients.indexOf(e.value), 1);
+        if (e.checked) {
+            _ingredients.push(e.value);
+        } else {
+            _ingredients.splice(_ingredients.indexOf(e.value), 1);
+        }
 
         setIngredients(_ingredients);
     };
diff --git a/components/doc/checkbox/importdoc.js b/components/doc/checkbox/importdoc.js
index b8f638a5d2..3d6e114518 100644
--- a/components/doc/checkbox/importdoc.js
+++ b/components/doc/checkbox/importdoc.js
@@ -10,7 +10,7 @@ import { Checkbox } from 'primereact/checkbox';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/checkbox/invaliddoc.js b/components/doc/checkbox/invaliddoc.js
index e1c6a1d590..95b8ec8b46 100644
--- a/components/doc/checkbox/invaliddoc.js
+++ b/components/doc/checkbox/invaliddoc.js
@@ -41,7 +41,7 @@ export default function InvalidDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Checkbox className="p-invalid"></Checkbox>
+                <Checkbox className="p-invalid" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/checkbox/pt/ptdoc.js b/components/doc/checkbox/pt/ptdoc.js
index ab4cd05c98..c127dd1102 100644
--- a/components/doc/checkbox/pt/ptdoc.js
+++ b/components/doc/checkbox/pt/ptdoc.js
@@ -66,7 +66,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Checkbox
                     checked={checked}
@@ -76,7 +76,7 @@ export default function PTDemo() {
                             className: state.focused ? 'border-orange-400' : undefined
                         })
                     }}
-                ></Checkbox>
+                />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/chip/importdoc.js b/components/doc/chip/importdoc.js
index e32938fe39..cca7b13838 100644
--- a/components/doc/chip/importdoc.js
+++ b/components/doc/chip/importdoc.js
@@ -10,7 +10,7 @@ import { Chip } from 'primereact/chip';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/chip/pt/ptdoc.js b/components/doc/chip/pt/ptdoc.js
index 0056f2c08c..0be031c322 100644
--- a/components/doc/chip/pt/ptdoc.js
+++ b/components/doc/chip/pt/ptdoc.js
@@ -56,7 +56,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Chip
                     label="Amy Elsner"
diff --git a/components/doc/chips/importdoc.js b/components/doc/chips/importdoc.js
index 78ee99c3e6..1188b8a6f0 100644
--- a/components/doc/chips/importdoc.js
+++ b/components/doc/chips/importdoc.js
@@ -10,7 +10,7 @@ import { Chips } from 'primereact/chips';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/chips/pt/ptdoc.js b/components/doc/chips/pt/ptdoc.js
index 952a1718eb..22dc5ef130 100644
--- a/components/doc/chips/pt/ptdoc.js
+++ b/components/doc/chips/pt/ptdoc.js
@@ -66,7 +66,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card p-fluid">
                 <Chips
                     value={value}
diff --git a/components/doc/chips/templatedoc.js b/components/doc/chips/templatedoc.js
index 2a97ca77cf..9f77ee7b9d 100644
--- a/components/doc/chips/templatedoc.js
+++ b/components/doc/chips/templatedoc.js
@@ -10,7 +10,7 @@ export function TemplateDoc(props) {
         return (
             <div>
                 <span>{item} - (active)</span>
-                <i className="pi pi-user-plus"></i>
+                <i className="pi pi-user-plus" />
             </div>
         );
     };
diff --git a/components/doc/colorpicker/importdoc.js b/components/doc/colorpicker/importdoc.js
index 1299c85497..b042a7cd57 100644
--- a/components/doc/colorpicker/importdoc.js
+++ b/components/doc/colorpicker/importdoc.js
@@ -10,7 +10,7 @@ import { ColorPicker } from 'primereact/colorpicker';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/colorpicker/pt/ptdoc.js b/components/doc/colorpicker/pt/ptdoc.js
index 703bcdacc2..eddd3c11e4 100644
--- a/components/doc/colorpicker/pt/ptdoc.js
+++ b/components/doc/colorpicker/pt/ptdoc.js
@@ -64,7 +64,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <ColorPicker
                     value={color}
diff --git a/components/doc/common/codeeditor/index.js b/components/doc/common/codeeditor/index.js
index 2820cac576..b47eb30383 100644
--- a/components/doc/common/codeeditor/index.js
+++ b/components/doc/common/codeeditor/index.js
@@ -63,7 +63,7 @@ export const useStackBlitz = (props) => {
             title: props.title || 'PrimeReact Demo',
             template: 'node',
             description: props.embedded
-                ? "This example demonstrates how to style components with Tailwind CSS using PrimeReact's unstyled property. As mentioned in the PrimeReact documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
+                ? 'This example demonstrates how to style components with Tailwind CSS using PrimeReact\'s unstyled property. As mentioned in the PrimeReact documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS.'
                 : '**' +
                   (props.description || '') +
                   '**\n PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.',
diff --git a/components/doc/common/codeeditor/templates.js b/components/doc/common/codeeditor/templates.js
index 1b67c9a223..b10a791a97 100644
--- a/components/doc/common/codeeditor/templates.js
+++ b/components/doc/common/codeeditor/templates.js
@@ -64,11 +64,11 @@ const typeScriptFiles = {
 const getConfiguredDependencies = (isUnstyled, isTypeScript) => {
     const defaultDependencies = {
         '@types/react': '^18.2.38', // For stackblitz
-        react: app_dependencies['react'] || 'latest',
+        react: app_dependencies.react || 'latest',
         'react-dom': app_dependencies['react-dom'] || 'latest',
         'react-transition-group': app_dependencies['react-transition-group'] || 'latest',
         primereact: PrimeReact.version || 'latest', // latest
-        primeicons: app_dependencies['primeicons'] || 'latest',
+        primeicons: app_dependencies.primeicons || 'latest',
         vite: 'latest',
         '@vitejs/plugin-react': 'latest',
         ...(isTypeScript ? typeScriptDependencies : '')
@@ -77,16 +77,16 @@ const getConfiguredDependencies = (isUnstyled, isTypeScript) => {
     if (isUnstyled) {
         return {
             ...defaultDependencies,
-            tailwindcss: app_dependencies['tailwindcss'] || 'latest',
-            postcss: app_dependencies['postcss'] || 'latest',
-            autoprefixer: app_dependencies['autoprefixer'] || 'latest'
-        };
-    } else {
-        return {
-            ...defaultDependencies,
-            primeflex: app_dependencies['primeflex'] || 'latest'
+            tailwindcss: app_dependencies.tailwindcss || 'latest',
+            postcss: app_dependencies.postcss || 'latest',
+            autoprefixer: app_dependencies.autoprefixer || 'latest'
         };
     }
+
+    return {
+        ...defaultDependencies,
+        primeflex: app_dependencies.primeflex || 'latest'
+    };
 };
 
 const getUnstyledFiles = (path, isTypeScript) => {
diff --git a/components/doc/common/developmentsection.js b/components/doc/common/developmentsection.js
index 6ffa8cc9bb..b99567e5b3 100644
--- a/components/doc/common/developmentsection.js
+++ b/components/doc/common/developmentsection.js
@@ -4,7 +4,7 @@ export const DevelopmentSection = React.memo((props) => {
     return (
         <>
             <div className="flex align-items-center line-height-3 bg-primary-600 text-white p-3 text-lg border-round">
-                <i className="pi pi-info-circle text-lg text-white mr-2"></i>
+                <i className="pi pi-info-circle text-lg text-white mr-2" />
                 Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.
             </div>
             {props.children}
diff --git a/components/doc/common/docapisection.js b/components/doc/common/docapisection.js
index 34386d9925..b66dfc1cfe 100644
--- a/components/doc/common/docapisection.js
+++ b/components/doc/common/docapisection.js
@@ -36,7 +36,9 @@ export function DocApiSection(props) {
                     Object.entries(mod.events.values).forEach(([eKey, eValue]) => {
                         const [id, label] = [`api.${componentName}.${eKey}`, eKey];
 
-                        if (isExcluded('event', eKey)) return;
+                        if (isExcluded('event', eKey)) {
+                            return;
+                        }
 
                         eMap.children.push({
                             id,
@@ -70,7 +72,9 @@ export function DocApiSection(props) {
                     Object.entries(mod.interfaces.values).forEach(([iKey, iValue]) => {
                         const [id, label] = [`api.${componentName}.${iKey}`, iKey];
 
-                        if (isExcluded('interfaces', iKey)) return;
+                        if (isExcluded('interfaces', iKey)) {
+                            return;
+                        }
 
                         iMap.children.push({
                             id,
@@ -109,7 +113,9 @@ export function DocApiSection(props) {
                     Object.entries(mod.types.values).forEach(([tKey, tValue]) => {
                         const [id, label] = [`api.${componentName}.${tKey}`, tKey];
 
-                        if (isExcluded('types', tKey)) return;
+                        if (isExcluded('types', tKey)) {
+                            return;
+                        }
 
                         tMap.children.push({
                             id,
@@ -217,7 +223,9 @@ export function DocApiSection(props) {
                         if (ObjectUtils.isNotEmpty(cValue.props) && ObjectUtils.isNotEmpty(cValue.props.values) && !isExcludedAll('props')) {
                             const [id, label] = [`api.${cKey}.props`, 'Props'];
 
-                            if (isExcluded('props', cKey)) return;
+                            if (isExcluded('props', cKey)) {
+                                return;
+                            }
 
                             cMap.children.push({
                                 id,
@@ -229,7 +237,9 @@ export function DocApiSection(props) {
                         if (ObjectUtils.isNotEmpty(cValue.callbacks) && ObjectUtils.isNotEmpty(cValue.callbacks.values) && !isExcludedAll('callbacks')) {
                             const [id, label] = [`api.${cKey}.callbacks`, 'Callbacks'];
 
-                            if (isExcluded('callbacks', cKey)) return;
+                            if (isExcluded('callbacks', cKey)) {
+                                return;
+                            }
 
                             cMap.children.push({
                                 id,
@@ -241,7 +251,9 @@ export function DocApiSection(props) {
                         if (ObjectUtils.isNotEmpty(cValue.methods) && ObjectUtils.isNotEmpty(cValue.methods.values) && !isExcludedAll('methods')) {
                             const [id, label] = [`api.${cKey}.methods`, 'Methods'];
 
-                            if (isExcluded('methods', cKey)) return;
+                            if (isExcluded('methods', cKey)) {
+                                return;
+                            }
 
                             cMap.children.push({
                                 id,
@@ -269,7 +281,9 @@ export function DocApiSection(props) {
                         if (ObjectUtils.isNotEmpty(mValue.props) && ObjectUtils.isNotEmpty(mValue.props.values) && !isExcludedAll('props')) {
                             const [id, label] = [`api.${mKey}.props`, 'Props'];
 
-                            if (isExcluded('props', mKey)) return;
+                            if (isExcluded('props', mKey)) {
+                                return;
+                            }
 
                             mMap.children.push({
                                 id,
diff --git a/components/doc/common/docapitable.js b/components/doc/common/docapitable.js
index 3bbe9754c9..42f094bfab 100644
--- a/components/doc/common/docapitable.js
+++ b/components/doc/common/docapitable.js
@@ -54,7 +54,7 @@ const DocApiTable = (props) => {
                                     {sValue}
                                     <Link href={router.basePath + router.pathname + `#${id + '.' + sValue}`} target="_self">
                                         <a onClick={() => onClick(id + '.' + sValue)} className="doc-option-link">
-                                            <i className="pi pi-link"></i>
+                                            <i className="pi pi-link" />
                                         </a>
                                     </Link>
                                 </span>
@@ -73,7 +73,7 @@ const DocApiTable = (props) => {
                     {val}
                     <Link href={router.basePath + router.pathname + `#${id + '.' + val}`} target="_self">
                         <a onClick={() => onClick(id + '.' + val)} className="doc-option-link">
-                            <i className="pi pi-link"></i>
+                            <i className="pi pi-link" />
                         </a>
                     </Link>
                 </span>
@@ -96,46 +96,46 @@ const DocApiTable = (props) => {
                                     <td>{description}</td>
                                 </tr>
                             );
-                        } else {
-                            return (
-                                <tr key={i}>
-                                    {Object.entries(d).map(
-                                        ([k, v], index) =>
-                                            k !== 'readonly' &&
+                        }
+
+                        return (
+                            <tr key={i}>
+                                {Object.entries(d).map(
+                                    ([k, v], index) =>
+                                        k !== 'readonly' &&
                                             k !== 'optional' &&
                                             k !== 'deprecated' && (
-                                                <td key={index}>
-                                                    {k === 'parameters' ? (
-                                                        v.map((_v, i) => {
-                                                            return (
-                                                                <div className="doc-option-params" key={i}>
-                                                                    <span className="doc-option-parameter-name">{_v.name}: </span>
-                                                                    <span className="doc-option-parameter-type">{createContent(_v.type)}</span>
-                                                                    <br />
-                                                                </div>
-                                                            );
-                                                        })
-                                                    ) : k === 'default' ? (
-                                                        <div className={classNames('doc-option-default', { 'doc-option-dark': appContentContext.darkMode, 'doc-option-light': !appContentContext.darkMode })}>
-                                                            {ObjectUtils.isEmpty(v) ? 'null' : createContent(v, k === 'name', d['deprecated'])}
-                                                        </div>
-                                                    ) : k === 'type' ? (
-                                                        <span className="doc-option-type">{createContent(v, k === 'name', d['deprecated'])}</span>
-                                                    ) : k === 'returnType' ? (
-                                                        <div className={classNames('doc-option-returnType', { 'doc-option-dark': appContentContext.darkMode, 'doc-option-light': !appContentContext.darkMode })}>
-                                                            {createContent(v, k === 'name', d['deprecated'])}
-                                                        </div>
-                                                    ) : k === 'description' || k === 'values' ? (
-                                                        <span className="doc-option-description">{v}</span>
-                                                    ) : (
-                                                        createContent(v, k === 'name', d['deprecated'])
-                                                    )}
-                                                </td>
-                                            )
-                                    )}
-                                </tr>
-                            );
-                        }
+                                            <td key={index}>
+                                                {k === 'parameters' ? (
+                                                    v.map((_v, i) => {
+                                                        return (
+                                                            <div className="doc-option-params" key={i}>
+                                                                <span className="doc-option-parameter-name">{_v.name}: </span>
+                                                                <span className="doc-option-parameter-type">{createContent(_v.type)}</span>
+                                                                <br />
+                                                            </div>
+                                                        );
+                                                    })
+                                                ) : k === 'default' ? (
+                                                    <div className={classNames('doc-option-default', { 'doc-option-dark': appContentContext.darkMode, 'doc-option-light': !appContentContext.darkMode })}>
+                                                        {ObjectUtils.isEmpty(v) ? 'null' : createContent(v, k === 'name', d.deprecated)}
+                                                    </div>
+                                                ) : k === 'type' ? (
+                                                    <span className="doc-option-type">{createContent(v, k === 'name', d.deprecated)}</span>
+                                                ) : k === 'returnType' ? (
+                                                    <div className={classNames('doc-option-returnType', { 'doc-option-dark': appContentContext.darkMode, 'doc-option-light': !appContentContext.darkMode })}>
+                                                        {createContent(v, k === 'name', d.deprecated)}
+                                                    </div>
+                                                ) : k === 'description' || k === 'values' ? (
+                                                    <span className="doc-option-description">{v}</span>
+                                                ) : (
+                                                    createContent(v, k === 'name', d.deprecated)
+                                                )}
+                                            </td>
+                                        )
+                                )}
+                            </tr>
+                        );
                     })}
                 </React.Fragment>
             );
diff --git a/components/doc/common/doccomponent.js b/components/doc/common/doccomponent.js
index c479a6cde0..0cee2d5c1c 100644
--- a/components/doc/common/doccomponent.js
+++ b/components/doc/common/doccomponent.js
@@ -11,9 +11,13 @@ export function DocComponent(props) {
     const router = useRouter();
     let header;
 
-    if (props.header.startsWith('use')) header = 'HOOK';
-    else if (props.header === 'PassThrough' || props.header === 'Configuration') header = 'OVERVIEW';
-    else header = 'FEATURES';
+    if (props.header.startsWith('use')) {
+        header = 'HOOK';
+    } else if (props.header === 'PassThrough' || props.header === 'Configuration') {
+        header = 'OVERVIEW';
+    } else {
+        header = 'FEATURES';
+    }
 
     const activateTab = (i) => {
         setTab(i);
@@ -21,8 +25,13 @@ export function DocComponent(props) {
     };
 
     useEffect(() => {
-        if (router.asPath.includes('#api')) setTab(1);
-        if (router.asPath.includes('#pt')) setTab(3);
+        if (router.asPath.includes('#api')) {
+            setTab(1);
+        }
+
+        if (router.asPath.includes('#pt')) {
+            setTab(3);
+        }
     }, [router.asPath]);
 
     return (
@@ -65,7 +74,7 @@ export function DocComponent(props) {
                         <div className="doc-main">
                             <div className="doc-intro">
                                 <h1>{props.header}</h1>
-                                <p dangerouslySetInnerHTML={{ __html: props.description }}></p>
+                                <p dangerouslySetInnerHTML={{ __html: props.description }} />
                             </div>
                             <DocSections docs={props.componentDocs} />
                         </div>
diff --git a/components/doc/common/docsectioncode.js b/components/doc/common/docsectioncode.js
index 5fcbacff81..34e210ded5 100644
--- a/components/doc/common/docsectioncode.js
+++ b/components/doc/common/docsectioncode.js
@@ -6,7 +6,7 @@ import { CodeHighlight } from './codehighlight';
 
 export function DocSectionCode(props) {
     const [codeMode, setCodeMode] = useState('basic');
-    const [codeLang, setCodeLang] = useState(props.code['javascript'] ? 'javascript' : 'basic');
+    const [codeLang, setCodeLang] = useState(props.code.javascript ? 'javascript' : 'basic');
     const codeEditor = useCodeEditor({ ...props, template: 'vite' });
 
     useEffect(() => {
@@ -44,14 +44,14 @@ export function DocSectionCode(props) {
                                     onClick={() => setCodeLang('javascript')}
                                     tooltip="JavaScript Code"
                                     tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
-                                ></Button>
+                                />
                                 <Button
                                     className={classNames('py-0 px-2 border-round h-2rem shadow-none', { 'code-active': codeLang === 'typescript' })}
                                     label="TS"
                                     onClick={() => setCodeLang('typescript')}
                                     tooltip="TypeScript Code"
                                     tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
-                                ></Button>
+                                />
                             </>
                         )}
 
@@ -63,7 +63,7 @@ export function DocSectionCode(props) {
                                 tooltip="Toggle Full Code"
                                 tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
                             >
-                                <i className="pi pi-code"></i>
+                                <i className="pi pi-code" />
                             </Button>
                         )}
                         {!props.hideToggleCode && props.code.data ? (
@@ -74,7 +74,7 @@ export function DocSectionCode(props) {
                                 tooltip="View Data"
                                 tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
                             >
-                                <i className="pi pi-database"></i>
+                                <i className="pi pi-database" />
                             </Button>
                         ) : null}
                         {!props.hideStackBlitz && (
@@ -97,7 +97,7 @@ export function DocSectionCode(props) {
                             tooltip="Copy Code"
                             tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
                         >
-                            <i className="pi pi-copy"></i>
+                            <i className="pi pi-copy" />
                         </Button>
                     </div>
 
@@ -129,7 +129,7 @@ export function DocSectionCode(props) {
                     )}
                 </div>
             )}
-            {props.embedded && <div id="embed"></div>}
+            {props.embedded && <div id="embed" />}
         </>
     );
 }
diff --git a/components/doc/common/docsections.js b/components/doc/common/docsections.js
index 58e1252e68..f2c79d53a4 100644
--- a/components/doc/common/docsections.js
+++ b/components/doc/common/docsections.js
@@ -12,7 +12,10 @@ export function DocSections({ docs }) {
             for (const parentKey in APIDocs) {
                 if (APIDocs[parentKey]?.interfaces?.values[`${name}PassThroughOptions`]) {
                     values = APIDocs[parentKey]?.interfaces?.values[`${name}PassThroughOptions`] || null;
-                    if (values) break;
+
+                    if (values) {
+                        break;
+                    }
                 }
             }
         }
diff --git a/components/doc/confirmdialog/basicdoc.js b/components/doc/confirmdialog/basicdoc.js
index ed78ea587e..cc057dbe14 100644
--- a/components/doc/confirmdialog/basicdoc.js
+++ b/components/doc/confirmdialog/basicdoc.js
@@ -161,8 +161,8 @@ export default function BasicDemo() {
             </DocSectionText>
             <Toast ref={toast} />
             <div className="card flex flex-wrap gap-2 justify-content-center">
-                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
-                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger p-button-outlined"></Button>
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger p-button-outlined" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/confirmdialog/headlessdoc.js b/components/doc/confirmdialog/headlessdoc.js
index cd276e60f0..64845bdb4f 100644
--- a/components/doc/confirmdialog/headlessdoc.js
+++ b/components/doc/confirmdialog/headlessdoc.js
@@ -233,7 +233,7 @@ export default function HeadlessDemo() {
                 content={({ headerRef, contentRef, footerRef, hide, message }) => (
                     <div className="flex flex-column align-items-center p-5 surface-overlay border-round">
                         <div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
-                            <i className="pi pi-question text-5xl"></i>
+                            <i className="pi pi-question text-5xl" />
                         </div>
                         <span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
                             {message.header}
@@ -249,7 +249,7 @@ export default function HeadlessDemo() {
                                     accept();
                                 }}
                                 className="w-8rem"
-                            ></Button>
+                            />
                             <Button
                                 label="Cancel"
                                 outlined
@@ -258,13 +258,13 @@ export default function HeadlessDemo() {
                                     reject();
                                 }}
                                 className="w-8rem"
-                            ></Button>
+                            />
                         </div>
                     </div>
                 )}
             />
             <div className="card flex flex-wrap gap-2 justify-content-center">
-                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
             </div>
             <DocSectionCode code={code} />
         </div>
diff --git a/components/doc/confirmdialog/importdoc.js b/components/doc/confirmdialog/importdoc.js
index 302f1083e0..ded7489e7d 100644
--- a/components/doc/confirmdialog/importdoc.js
+++ b/components/doc/confirmdialog/importdoc.js
@@ -11,7 +11,7 @@ import { confirmDialog } from 'primereact/confirmdialog'; // For confirmDialog m
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/confirmdialog/pt/ptdoc.js b/components/doc/confirmdialog/pt/ptdoc.js
index 1b68e228a1..4eadbb6077 100644
--- a/components/doc/confirmdialog/pt/ptdoc.js
+++ b/components/doc/confirmdialog/pt/ptdoc.js
@@ -80,7 +80,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <ConfirmDialog pt={{ headerTitle: { className: 'text-primary' } }} visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" header="Confirmation" icon="pi pi-exclamation-triangle" />
             <div className="card flex justify-content-center">
                 <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
diff --git a/components/doc/confirmdialog/templatedoc.js b/components/doc/confirmdialog/templatedoc.js
index e618086aeb..a71391a02c 100644
--- a/components/doc/confirmdialog/templatedoc.js
+++ b/components/doc/confirmdialog/templatedoc.js
@@ -22,7 +22,7 @@ export function TemplateDoc(props) {
             header: 'Confirmation',
             message: (
                 <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-                    <i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500" />
                     <span>Please confirm to proceed moving forward.</span>
                 </div>
             ),
@@ -135,7 +135,7 @@ export default function TemplateDemo() {
             <Toast ref={toast} />
             <ConfirmDialog group="templating" />
             <div className="card flex justify-content-center">
-                <Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/confirmpopup/basicdoc.js b/components/doc/confirmpopup/basicdoc.js
index 104921c8dd..3e906a9120 100644
--- a/components/doc/confirmpopup/basicdoc.js
+++ b/components/doc/confirmpopup/basicdoc.js
@@ -164,8 +164,8 @@ export default function BasicDemo() {
             </DocSectionText>
             <Toast ref={toast} />
             <div className="card flex flex-wrap gap-2 justify-content-center">
-                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
-                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/confirmpopup/headlessdoc.js b/components/doc/confirmpopup/headlessdoc.js
index 829758768b..48d305e5ac 100644
--- a/components/doc/confirmpopup/headlessdoc.js
+++ b/components/doc/confirmpopup/headlessdoc.js
@@ -215,7 +215,7 @@ export default function HeadlessDemo() {
                                     hide();
                                 }}
                                 className="p-button-sm p-button-outlined"
-                            ></Button>
+                            />
                             <Button
                                 ref={rejectBtnRef}
                                 label="Cancel"
@@ -225,14 +225,14 @@ export default function HeadlessDemo() {
                                     hide();
                                 }}
                                 className="p-button-sm p-button-text"
-                            ></Button>
+                            />
                         </div>
                     </div>
                 )}
             />
             <div className="card flex flex-wrap gap-2 justify-content-center">
-                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
-                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/confirmpopup/importdoc.js b/components/doc/confirmpopup/importdoc.js
index b5dd63a933..8192c4030e 100644
--- a/components/doc/confirmpopup/importdoc.js
+++ b/components/doc/confirmpopup/importdoc.js
@@ -11,7 +11,7 @@ import { confirmPopup } from 'primereact/confirmpopup'; // To use confirmPopup m
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/confirmpopup/pt/ptdoc.js b/components/doc/confirmpopup/pt/ptdoc.js
index d75b1ce686..e03eb9d3dc 100644
--- a/components/doc/confirmpopup/pt/ptdoc.js
+++ b/components/doc/confirmpopup/pt/ptdoc.js
@@ -81,7 +81,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <>
                 <ConfirmPopup
                     pt={{
diff --git a/components/doc/confirmpopup/templatedoc.js b/components/doc/confirmpopup/templatedoc.js
index 0016568780..792ab98cb5 100644
--- a/components/doc/confirmpopup/templatedoc.js
+++ b/components/doc/confirmpopup/templatedoc.js
@@ -23,7 +23,7 @@ export function TemplateDoc(props) {
             header: 'Confirmation',
             message: (
                 <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-                    <i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500" />
                     <span>Please confirm to proceed moving forward.</span>
                 </div>
             ),
@@ -150,7 +150,7 @@ export default function TemplateDemo() {
             <Toast ref={toast} />
             <ConfirmPopup group="templating" />
             <div className="card flex justify-content-center">
-                <Button onClick={showTemplate} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={showTemplate} icon="pi pi-check" label="Confirm" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/contextmenu/commanddoc.js b/components/doc/contextmenu/commanddoc.js
index 65d3227661..d22e937bc9 100644
--- a/components/doc/contextmenu/commanddoc.js
+++ b/components/doc/contextmenu/commanddoc.js
@@ -67,9 +67,13 @@ export function CommandDoc(props) {
     };
 
     const getBadge = (user) => {
-        if (user.role === 'Member') return 'info';
-        else if (user.role === 'Guest') return 'warning';
-        else return null;
+        if (user.role === 'Member') {
+            return 'info';
+        } else if (user.role === 'Guest') {
+            return 'warning';
+        }
+
+        return null;
     };
 
     const code = {
diff --git a/components/doc/contextmenu/importdoc.js b/components/doc/contextmenu/importdoc.js
index 5137f8c625..c35f0e5bec 100644
--- a/components/doc/contextmenu/importdoc.js
+++ b/components/doc/contextmenu/importdoc.js
@@ -10,7 +10,7 @@ import { ContextMenu } from 'primereact/contextmenu';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/contextmenu/pt/ptdoc.js b/components/doc/contextmenu/pt/ptdoc.js
index 41973d74de..cff4b4eea5 100644
--- a/components/doc/contextmenu/pt/ptdoc.js
+++ b/components/doc/contextmenu/pt/ptdoc.js
@@ -445,7 +445,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex md:justify-content-center">
                 <ContextMenu
                     model={items}
diff --git a/components/doc/contextmenu/routerdoc.js b/components/doc/contextmenu/routerdoc.js
index a259f09ba2..96cb87e245 100644
--- a/components/doc/contextmenu/routerdoc.js
+++ b/components/doc/contextmenu/routerdoc.js
@@ -132,7 +132,7 @@ export function RouterDemo(props: any) {
             </DocSectionText>
             <div className="card flex md:justify-content-center">
                 <span className="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" onContextMenu={(event) => onRightClick(event)} aria-haspopup="true">
-                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40"></img>
+                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" />
                 </span>
                 <ContextMenu model={items} ref={cm} />
             </div>
diff --git a/components/doc/contextmenu/templatedoc.js b/components/doc/contextmenu/templatedoc.js
index 83880ebcac..c5618a8605 100644
--- a/components/doc/contextmenu/templatedoc.js
+++ b/components/doc/contextmenu/templatedoc.js
@@ -284,7 +284,7 @@ export default function TemplateDemo() {
                                 <div className="flex-1 flex flex-column gap-1">
                                     <span className="font-bold">{product.name}</span>
                                     <div className="flex align-items-center gap-2">
-                                        <i className="pi pi-tag text-sm"></i>
+                                        <i className="pi pi-tag text-sm" />
                                         <span>{product.category}</span>
                                     </div>
                                 </div>
diff --git a/components/doc/datascroller/basicdoc.js b/components/doc/datascroller/basicdoc.js
index dce5c4280c..d5817b6991 100644
--- a/components/doc/datascroller/basicdoc.js
+++ b/components/doc/datascroller/basicdoc.js
@@ -16,17 +16,17 @@ export function BasicDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -42,17 +42,17 @@ export function BasicDoc(props) {
                                 <div className="text-700">{data.description}</div>
                             </div>
                             <div className="flex flex-column gap-2">
-                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <Rating value={data.rating} readOnly cancel={false} />
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <i className="pi pi-tag product-category-icon" />
                                     <span className="font-semibold">{data.category}</span>
                                 </span>
                             </div>
                         </div>
                         <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
                             <span className="text-2xl font-semibold">${data.price}</span>
-                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
                         </div>
                     </div>
                 </div>
diff --git a/components/doc/datascroller/importdoc.js b/components/doc/datascroller/importdoc.js
index 28729c9114..e09a3dea8c 100644
--- a/components/doc/datascroller/importdoc.js
+++ b/components/doc/datascroller/importdoc.js
@@ -10,7 +10,7 @@ import { DataScroller } from 'primereact/datascroller';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/datascroller/inlinedoc.js b/components/doc/datascroller/inlinedoc.js
index 0ab8a63b50..c3a4ebe895 100644
--- a/components/doc/datascroller/inlinedoc.js
+++ b/components/doc/datascroller/inlinedoc.js
@@ -16,17 +16,17 @@ export function InlineDataScrollerDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -42,17 +42,17 @@ export function InlineDataScrollerDoc(props) {
                                 <div className="text-700">{data.description}</div>
                             </div>
                             <div className="flex flex-column gap-2">
-                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <Rating value={data.rating} readOnly cancel={false} />
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <i className="pi pi-tag product-category-icon" />
                                     <span className="font-semibold">{data.category}</span>
                                 </span>
                             </div>
                         </div>
                         <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
                             <span className="text-2xl font-semibold">${data.price}</span>
-                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
                         </div>
                     </div>
                 </div>
diff --git a/components/doc/datascroller/loaderdoc.js b/components/doc/datascroller/loaderdoc.js
index 1fb74eada4..e44942420a 100644
--- a/components/doc/datascroller/loaderdoc.js
+++ b/components/doc/datascroller/loaderdoc.js
@@ -17,17 +17,17 @@ export function LoaderDataScrollerDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -43,17 +43,17 @@ export function LoaderDataScrollerDoc(props) {
                                 <div className="text-700">{data.description}</div>
                             </div>
                             <div className="flex flex-column gap-2">
-                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <Rating value={data.rating} readOnly cancel={false} />
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <i className="pi pi-tag product-category-icon" />
                                     <span className="font-semibold">{data.category}</span>
                                 </span>
                             </div>
                         </div>
                         <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
                             <span className="text-2xl font-semibold">${data.price}</span>
-                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
                         </div>
                     </div>
                 </div>
diff --git a/components/doc/datascroller/pt/ptdoc.js b/components/doc/datascroller/pt/ptdoc.js
index fd981764b5..8be4b1803d 100644
--- a/components/doc/datascroller/pt/ptdoc.js
+++ b/components/doc/datascroller/pt/ptdoc.js
@@ -16,17 +16,17 @@ export function PTDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -42,17 +42,17 @@ export function PTDoc(props) {
                                 <div className="text-700">{data.description}</div>
                             </div>
                             <div className="flex flex-column gap-2">
-                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <Rating value={data.rating} readOnly cancel={false} />
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <i className="pi pi-tag product-category-icon" />
                                     <span className="font-semibold">{data.category}</span>
                                 </span>
                             </div>
                         </div>
                         <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
                             <span className="text-2xl font-semibold">${data.price}</span>
-                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
                         </div>
                     </div>
                 </div>
@@ -244,7 +244,7 @@ export default function BasicDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <DataScroller
                     value={products}
diff --git a/components/doc/datatable/basicdoc.js b/components/doc/datatable/basicdoc.js
index 0a905be972..062c67f00d 100644
--- a/components/doc/datatable/basicdoc.js
+++ b/components/doc/datatable/basicdoc.js
@@ -112,10 +112,10 @@ export default function BasicDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/cellselection/disableddoc.js b/components/doc/datatable/cellselection/disableddoc.js
index 46d1a2a58c..2a5aed9b21 100644
--- a/components/doc/datatable/cellselection/disableddoc.js
+++ b/components/doc/datatable/cellselection/disableddoc.js
@@ -169,10 +169,10 @@ export default function DisabledCellSelectionDemo() {
                         cellClassName={cellClassName}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/cellselection/eventsdoc.js b/components/doc/datatable/cellselection/eventsdoc.js
index 1dd1ca65ca..f31bfd3cba 100644
--- a/components/doc/datatable/cellselection/eventsdoc.js
+++ b/components/doc/datatable/cellselection/eventsdoc.js
@@ -171,10 +171,10 @@ export default function CellSelectEventsDemo() {
                         onCellUnselect={onCellUnselect}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/cellselection/multipledoc.js b/components/doc/datatable/cellselection/multipledoc.js
index 32694c07be..7d852948d0 100644
--- a/components/doc/datatable/cellselection/multipledoc.js
+++ b/components/doc/datatable/cellselection/multipledoc.js
@@ -156,10 +156,10 @@ export default function MultipleCellsSelectionDemo() {
                         dragSelection
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/cellselection/singledoc.js b/components/doc/datatable/cellselection/singledoc.js
index 4206aa07d3..b7343a2827 100644
--- a/components/doc/datatable/cellselection/singledoc.js
+++ b/components/doc/datatable/cellselection/singledoc.js
@@ -154,10 +154,10 @@ export default function SingleCellSelectionDemo() {
                         metaKeySelection={metaKey}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/colresize/expandmodedoc.js b/components/doc/datatable/colresize/expandmodedoc.js
index 62ff1cb578..4ea2e39a88 100644
--- a/components/doc/datatable/colresize/expandmodedoc.js
+++ b/components/doc/datatable/colresize/expandmodedoc.js
@@ -112,10 +112,10 @@ export default function ExpandModeDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} columnResizeMode="expand" resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/colresize/fitmodedoc.js b/components/doc/datatable/colresize/fitmodedoc.js
index c5763cac79..cf5f765061 100644
--- a/components/doc/datatable/colresize/fitmodedoc.js
+++ b/components/doc/datatable/colresize/fitmodedoc.js
@@ -113,10 +113,10 @@ export default function FitModeDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/columngroupdoc.js b/components/doc/datatable/columngroupdoc.js
index 048c7292fb..40431e28de 100644
--- a/components/doc/datatable/columngroupdoc.js
+++ b/components/doc/datatable/columngroupdoc.js
@@ -49,7 +49,7 @@ export function ColumnGroupDoc(props) {
         let total = 0;
 
         for (let sale of sales) {
-            total += sale.lastYearProfit;
+            total = total + sale.lastYearProfit;
         }
 
         return formatCurrency(total);
@@ -59,7 +59,7 @@ export function ColumnGroupDoc(props) {
         let total = 0;
 
         for (let sale of sales) {
-            total += sale.thisYearProfit;
+            total = total + sale.thisYearProfit;
         }
 
         return formatCurrency(total);
diff --git a/components/doc/datatable/conditionalstyledoc.js b/components/doc/datatable/conditionalstyledoc.js
index 20bce15fb0..a6330bd88c 100644
--- a/components/doc/datatable/conditionalstyledoc.js
+++ b/components/doc/datatable/conditionalstyledoc.js
@@ -159,10 +159,10 @@ export default function ConditionalStyleDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} rowClassName={rowClass} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity" body={stockBodyTemplate}></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" body={stockBodyTemplate} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/contextmenudoc.js b/components/doc/datatable/contextmenudoc.js
index 2b81d7ca89..b513d6beba 100644
--- a/components/doc/datatable/contextmenudoc.js
+++ b/components/doc/datatable/contextmenudoc.js
@@ -216,9 +216,9 @@ export default function ContextMenuDemo() {
 
                     <ContextMenu model={menuModel} ref={cm} onHide={() => setSelectedProduct(null)} />
                     <DataTable value={products} onContextMenu={(e) => cm.current.show(e.originalEvent)} contextMenuSelection={selectedProduct} onContextMenuSelectionChange={(e) => setSelectedProduct(e.value)} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
                         <Column field="price" header="Price" body={priceBodyTemplate} />
                     </DataTable>
                 </div>
diff --git a/components/doc/datatable/edit/celleditdoc.js b/components/doc/datatable/edit/celleditdoc.js
index b19c78bd80..4164617971 100644
--- a/components/doc/datatable/edit/celleditdoc.js
+++ b/components/doc/datatable/edit/celleditdoc.js
@@ -41,22 +41,33 @@ export function CellEditDoc(props) {
         let { rowData, newValue, field, originalEvent: event } = e;
 
         switch (field) {
-            case 'quantity':
-            case 'price':
-                if (isPositiveInteger(newValue)) rowData[field] = newValue;
-                else event.preventDefault();
-                break;
-
-            default:
-                if (newValue.trim().length > 0) rowData[field] = newValue;
-                else event.preventDefault();
-                break;
+        case 'quantity':
+        case 'price':
+            if (isPositiveInteger(newValue)) {
+                rowData[field] = newValue;
+            } else {
+                event.preventDefault();
+            }
+
+            break;
+
+        default:
+            if (newValue.trim().length > 0) {
+                rowData[field] = newValue;
+            } else {
+                event.preventDefault();
+            }
+
+            break;
         }
     };
 
     const cellEditor = (options) => {
-        if (options.field === 'price') return priceEditor(options);
-        else return textEditor(options);
+        if (options.field === 'price') {
+            return priceEditor(options);
+        }
+
+        return textEditor(options);
     };
 
     const textEditor = (options) => {
diff --git a/components/doc/datatable/edit/roweditdoc.js b/components/doc/datatable/edit/roweditdoc.js
index c3558b6b17..cf658bb613 100644
--- a/components/doc/datatable/edit/roweditdoc.js
+++ b/components/doc/datatable/edit/roweditdoc.js
@@ -20,17 +20,17 @@ export function RowEditDoc(props) {
 
     const getSeverity = (value) => {
         switch (value) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -55,7 +55,7 @@ export function RowEditDoc(props) {
                 onChange={(e) => options.editorCallback(e.value)}
                 placeholder="Select a Status"
                 itemTemplate={(option) => {
-                    return <Tag value={option} severity={getSeverity(option)}></Tag>;
+                    return <Tag value={option} severity={getSeverity(option)} />;
                 }}
             />
         );
@@ -66,7 +66,7 @@ export function RowEditDoc(props) {
     };
 
     const statusBodyTemplate = (rowData) => {
-        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData.inventoryStatus)}></Tag>;
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData.inventoryStatus)} />;
     };
 
     const priceBodyTemplate = (rowData) => {
@@ -308,11 +308,11 @@ export default function RowEditingDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card p-fluid">
                     <DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
-                        <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
-                        <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
-                        <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
-                        <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+                        <Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }} />
+                        <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }} />
+                        <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }} />
+                        <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/filter/advanceddoc.js b/components/doc/datatable/filter/advanceddoc.js
index 7996b024a4..ba0fbbb0b3 100644
--- a/components/doc/datatable/filter/advanceddoc.js
+++ b/components/doc/datatable/filter/advanceddoc.js
@@ -39,20 +39,20 @@ export function AdvancedFilterDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -92,7 +92,7 @@ export function AdvancedFilterDoc(props) {
         const value = e.target.value;
         let _filters = { ...filters };
 
-        _filters['global'].value = value;
+        _filters.global.value = value;
 
         setFilters(_filters);
         setGlobalFilterValue(value);
@@ -135,11 +135,11 @@ export function AdvancedFilterDoc(props) {
     };
 
     const filterClearTemplate = (options) => {
-        return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary"></Button>;
+        return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary" />;
     };
 
     const filterApplyTemplate = (options) => {
-        return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success"></Button>;
+        return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success" />;
     };
 
     const filterFooterTemplate = () => {
@@ -199,13 +199,13 @@ export function AdvancedFilterDoc(props) {
     };
 
     const activityBodyTemplate = (rowData) => {
-        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }} />;
     };
 
     const activityFilterTemplate = (options) => {
         return (
             <React.Fragment>
-                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
+                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3" />
                 <div className="flex align-items-center justify-content-between px-2">
                     <span>{options.value ? options.value[0] : 0}</span>
                     <span>{options.value ? options.value[1] : 100}</span>
@@ -215,7 +215,7 @@ export function AdvancedFilterDoc(props) {
     };
 
     const verifiedBodyTemplate = (rowData) => {
-        return <i className={classNames('pi', { 'text-green-500 pi-check-circle': rowData.verified, 'text-red-500 pi-times-circle': !rowData.verified })}></i>;
+        return <i className={classNames('pi', { 'text-green-500 pi-check-circle': rowData.verified, 'text-red-500 pi-times-circle': !rowData.verified })} />;
     };
 
     const verifiedFilterTemplate = (options) => {
diff --git a/components/doc/datatable/filter/basicdoc.js b/components/doc/datatable/filter/basicdoc.js
index 76fa3b8eb7..87102f391e 100644
--- a/components/doc/datatable/filter/basicdoc.js
+++ b/components/doc/datatable/filter/basicdoc.js
@@ -41,20 +41,20 @@ export function BasicFilterDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -77,7 +77,7 @@ export function BasicFilterDoc(props) {
         const value = e.target.value;
         let _filters = { ...filters };
 
-        _filters['global'].value = value;
+        _filters.global.value = value;
 
         setFilters(_filters);
         setGlobalFilterValue(value);
@@ -132,7 +132,7 @@ export function BasicFilterDoc(props) {
     };
 
     const verifiedBodyTemplate = (rowData) => {
-        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })} />;
     };
 
     const representativeRowFilterTemplate = (options) => {
diff --git a/components/doc/datatable/filter/customdoc.js b/components/doc/datatable/filter/customdoc.js
index 1581286bba..c62747f5a2 100644
--- a/components/doc/datatable/filter/customdoc.js
+++ b/components/doc/datatable/filter/customdoc.js
@@ -18,9 +18,17 @@ import { CustomerService } from '../../../../service/CustomerService';
 FilterService.register('custom_activity', (value, filters) => {
     const [from, to] = filters ?? [null, null];
 
-    if (from === null && to === null) return true;
-    if (from !== null && to === null) return from <= value;
-    if (from === null && to !== null) return value <= to;
+    if (from === null && to === null) {
+        return true;
+    }
+
+    if (from !== null && to === null) {
+        return from <= value;
+    }
+
+    if (from === null && to !== null) {
+        return value <= to;
+    }
 
     return from <= value && value <= to;
 });
@@ -55,20 +63,20 @@ export function CustomFilterDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -91,7 +99,7 @@ export function CustomFilterDoc(props) {
         const value = e.target.value;
         let _filters = { ...filters };
 
-        _filters['global'].value = value;
+        _filters.global.value = value;
 
         setFilters(_filters);
         setGlobalFilterValue(value);
@@ -146,7 +154,7 @@ export function CustomFilterDoc(props) {
     };
 
     const verifiedBodyTemplate = (rowData) => {
-        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })} />;
     };
 
     const representativeRowFilterTemplate = (options) => {
diff --git a/components/doc/datatable/gridlinesdoc.js b/components/doc/datatable/gridlinesdoc.js
index 4fb17280c8..c460c12732 100644
--- a/components/doc/datatable/gridlinesdoc.js
+++ b/components/doc/datatable/gridlinesdoc.js
@@ -112,10 +112,10 @@ export default function GridLinesDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} showGridlines tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/importdoc.js b/components/doc/datatable/importdoc.js
index 09f4a7f768..1a857db4c1 100644
--- a/components/doc/datatable/importdoc.js
+++ b/components/doc/datatable/importdoc.js
@@ -11,7 +11,7 @@ import { Column } from 'primereact/column';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/datatable/lazyloaddoc.js b/components/doc/datatable/lazyloaddoc.js
index d1dbc7bd04..f566adc5e7 100644
--- a/components/doc/datatable/lazyloaddoc.js
+++ b/components/doc/datatable/lazyloaddoc.js
@@ -60,7 +60,7 @@ export function LazyLoadDoc(props) {
     };
 
     const onFilter = (event) => {
-        event['first'] = 0;
+        event.first = 0;
         setlazyState(event);
     };
 
diff --git a/components/doc/datatable/paginator/basicdoc.js b/components/doc/datatable/paginator/basicdoc.js
index 69ee659b45..34b6f846e0 100644
--- a/components/doc/datatable/paginator/basicdoc.js
+++ b/components/doc/datatable/paginator/basicdoc.js
@@ -128,10 +128,10 @@ export default function PaginatorBasicDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="name" header="Name" style={{ width: '25%' }}></Column>
-                        <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
-                        <Column field="company" header="Company" style={{ width: '25%' }}></Column>
-                        <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+                        <Column field="name" header="Name" style={{ width: '25%' }} />
+                        <Column field="country.name" header="Country" style={{ width: '25%' }} />
+                        <Column field="company" header="Company" style={{ width: '25%' }} />
+                        <Column field="representative.name" header="Representative" style={{ width: '25%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/paginator/templatedoc.js b/components/doc/datatable/paginator/templatedoc.js
index e0416a2f09..718f051e6a 100644
--- a/components/doc/datatable/paginator/templatedoc.js
+++ b/components/doc/datatable/paginator/templatedoc.js
@@ -158,10 +158,10 @@ export default function PaginatorTemplateDemo() {
                         paginatorRight={paginatorRight}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="name" header="Name" style={{ width: '25%' }}></Column>
-                        <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
-                        <Column field="company" header="Company" style={{ width: '25%' }}></Column>
-                        <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+                        <Column field="name" header="Name" style={{ width: '25%' }} />
+                        <Column field="country.name" header="Country" style={{ width: '25%' }} />
+                        <Column field="company" header="Company" style={{ width: '25%' }} />
+                        <Column field="representative.name" header="Representative" style={{ width: '25%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/pt/ptdoc.js b/components/doc/datatable/pt/ptdoc.js
index f6dc556ee1..120f5a8eb7 100644
--- a/components/doc/datatable/pt/ptdoc.js
+++ b/components/doc/datatable/pt/ptdoc.js
@@ -215,7 +215,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable
@@ -233,7 +233,7 @@ export default function PTDemo() {
                                 sortBadge: { className: 'bg-primary' },
                                 headerCell: { style: { width: '25%' } }
                             }}
-                        ></Column>
+                        />
                         <Column
                             field="name"
                             header="Name"
@@ -242,7 +242,7 @@ export default function PTDemo() {
                                 sortBadge: { className: 'bg-primary' },
                                 headerCell: { style: { width: '25%' } }
                             }}
-                        ></Column>
+                        />
                         <Column
                             field="category"
                             header="Category"
@@ -251,7 +251,7 @@ export default function PTDemo() {
                                 sortBadge: { className: 'bg-primary' },
                                 headerCell: { style: { width: '25%' } }
                             }}
-                        ></Column>
+                        />
                         <Column
                             field="quantity"
                             header="Quantity"
@@ -260,7 +260,7 @@ export default function PTDemo() {
                                 sortBadge: { className: 'bg-primary' },
                                 headerCell: { style: { width: '25%' } }
                             }}
-                        ></Column>
+                        />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowexpansiondoc.js b/components/doc/datatable/rowexpansiondoc.js
index 91dfd52c41..f8c1056e91 100644
--- a/components/doc/datatable/rowexpansiondoc.js
+++ b/components/doc/datatable/rowexpansiondoc.js
@@ -48,7 +48,7 @@ export function RowExpansionDoc(props) {
     };
 
     const statusOrderBodyTemplate = (rowData) => {
-        return <Tag value={rowData.status.toLowerCase()} severity={getOrderSeverity(rowData)}></Tag>;
+        return <Tag value={rowData.status.toLowerCase()} severity={getOrderSeverity(rowData)} />;
     };
 
     const searchBodyTemplate = () => {
@@ -68,41 +68,41 @@ export function RowExpansionDoc(props) {
     };
 
     const statusBodyTemplate = (rowData) => {
-        return <Tag value={rowData.inventoryStatus} severity={getProductSeverity(rowData)}></Tag>;
+        return <Tag value={rowData.inventoryStatus} severity={getProductSeverity(rowData)} />;
     };
 
     const getProductSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
     const getOrderSeverity = (order) => {
         switch (order.status) {
-            case 'DELIVERED':
-                return 'success';
+        case 'DELIVERED':
+            return 'success';
 
-            case 'CANCELLED':
-                return 'danger';
+        case 'CANCELLED':
+            return 'danger';
 
-            case 'PENDING':
-                return 'warning';
+        case 'PENDING':
+            return 'warning';
 
-            case 'RETURNED':
-                return 'info';
+        case 'RETURNED':
+            return 'info';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -115,12 +115,12 @@ export function RowExpansionDoc(props) {
             <div className="p-3">
                 <h5>Orders for {data.name}</h5>
                 <DataTable value={data.orders}>
-                    <Column field="id" header="Id" sortable></Column>
-                    <Column field="customer" header="Customer" sortable></Column>
-                    <Column field="date" header="Date" sortable></Column>
-                    <Column field="amount" header="Amount" body={amountBodyTemplate} sortable></Column>
-                    <Column field="status" header="Status" body={statusOrderBodyTemplate} sortable></Column>
-                    <Column headerStyle={{ width: '4rem' }} body={searchBodyTemplate}></Column>
+                    <Column field="id" header="Id" sortable />
+                    <Column field="customer" header="Customer" sortable />
+                    <Column field="date" header="Date" sortable />
+                    <Column field="amount" header="Amount" body={amountBodyTemplate} sortable />
+                    <Column field="status" header="Status" body={statusOrderBodyTemplate} sortable />
+                    <Column headerStyle={{ width: '4rem' }} body={searchBodyTemplate} />
                 </DataTable>
             </div>
         );
diff --git a/components/doc/datatable/rowgroup/expandabledoc.js b/components/doc/datatable/rowgroup/expandabledoc.js
index 9d44f1fe95..6f9c948007 100644
--- a/components/doc/datatable/rowgroup/expandabledoc.js
+++ b/components/doc/datatable/rowgroup/expandabledoc.js
@@ -63,20 +63,20 @@ export function ExpandableRowGroupDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -354,11 +354,11 @@ export default function ExpandableRowGroupDemo() {
                         rowGroupFooterTemplate={footerTemplate}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="name" header="Name" style={{ width: '20%' }}></Column>
-                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ width: '20%' }}></Column>
-                        <Column field="company" header="Company" style={{ width: '20%' }}></Column>
-                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: '20%' }}></Column>
-                        <Column field="date" header="Date" style={{ width: '20%' }}></Column>
+                        <Column field="name" header="Name" style={{ width: '20%' }} />
+                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ width: '20%' }} />
+                        <Column field="company" header="Company" style={{ width: '20%' }} />
+                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: '20%' }} />
+                        <Column field="date" header="Date" style={{ width: '20%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowgroup/rowspandoc.js b/components/doc/datatable/rowgroup/rowspandoc.js
index 944e2dac62..634021b646 100644
--- a/components/doc/datatable/rowgroup/rowspandoc.js
+++ b/components/doc/datatable/rowgroup/rowspandoc.js
@@ -38,20 +38,20 @@ export function RowSpanRowGroupDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -266,13 +266,13 @@ export default function RowSpanGroupingDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={customers} rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" sortOrder={1} tableStyle={{ minWidth: '50rem' }}>
-                        <Column header="#" headerStyle={{ width: '3rem' }} body={(data, options) => options.rowIndex + 1}></Column>
-                        <Column field="representative.name" header="Representative" body={representativeBodyTemplate} style={{ minWidth: '200px' }}></Column>
-                        <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
-                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '150px' }}></Column>
-                        <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
-                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '100px' }}></Column>
-                        <Column field="date" header="Date" style={{ minWidth: '100px' }}></Column>
+                        <Column header="#" headerStyle={{ width: '3rem' }} body={(data, options) => options.rowIndex + 1} />
+                        <Column field="representative.name" header="Representative" body={representativeBodyTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '150px' }} />
+                        <Column field="company" header="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '100px' }} />
+                        <Column field="date" header="Date" style={{ minWidth: '100px' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowgroup/subheaderdoc.js b/components/doc/datatable/rowgroup/subheaderdoc.js
index 42780c29e0..bcf9ce55e3 100644
--- a/components/doc/datatable/rowgroup/subheaderdoc.js
+++ b/components/doc/datatable/rowgroup/subheaderdoc.js
@@ -62,20 +62,20 @@ export function SubHeaderRowGroupDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -345,11 +345,11 @@ export default function SubHeaderRowGroupDemo() {
                         rowGroupFooterTemplate={footerTemplate}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
-                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }}></Column>
-                        <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
-                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }}></Column>
-                        <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="company" header="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="date" header="Date" style={{ minWidth: '200px' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowselection/checkboxdoc.js b/components/doc/datatable/rowselection/checkboxdoc.js
index 1fb0e6ddd5..c9689397be 100644
--- a/components/doc/datatable/rowselection/checkboxdoc.js
+++ b/components/doc/datatable/rowselection/checkboxdoc.js
@@ -143,11 +143,11 @@ export default function CheckboxRowSelectionDemo() {
                         <label htmlFor="input-rowclick">Row Click</label>
                     </div>
                     <DataTable value={products} selectionMode={rowClick ? null : 'checkbox'} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
-                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowselection/disableddoc.js b/components/doc/datatable/rowselection/disableddoc.js
index 0702855096..fa42f109ce 100644
--- a/components/doc/datatable/rowselection/disableddoc.js
+++ b/components/doc/datatable/rowselection/disableddoc.js
@@ -145,10 +145,10 @@ export default function DisabledRowSelectionDemo() {
                         rowClassName={rowClassName}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowselection/eventsdoc.js b/components/doc/datatable/rowselection/eventsdoc.js
index 59d8f50312..1765860543 100644
--- a/components/doc/datatable/rowselection/eventsdoc.js
+++ b/components/doc/datatable/rowselection/eventsdoc.js
@@ -161,10 +161,10 @@ export default function RowSelectEventsDemo() {
                         metaKeySelection={false}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowselection/multipledoc.js b/components/doc/datatable/rowselection/multipledoc.js
index 01dfecee03..729db8d02b 100644
--- a/components/doc/datatable/rowselection/multipledoc.js
+++ b/components/doc/datatable/rowselection/multipledoc.js
@@ -143,10 +143,10 @@ export default function MultipleRowsSelectionDemo() {
                         <label htmlFor="input-metakey">MetaKey</label>
                     </div>
                     <DataTable value={products} selectionMode="multiple" selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowselection/radiobuttondoc.js b/components/doc/datatable/rowselection/radiobuttondoc.js
index 64590f0cdf..b9081df4e4 100644
--- a/components/doc/datatable/rowselection/radiobuttondoc.js
+++ b/components/doc/datatable/rowselection/radiobuttondoc.js
@@ -140,11 +140,11 @@ export default function RadioButtonRowSelectionDemo() {
                         <label htmlFor="input-rowclick">Row Click</label>
                     </div>
                     <DataTable value={products} selectionMode={rowClick ? null : 'radiobutton'} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
-                        <Column selectionMode="single" headerStyle={{ width: '3rem' }}></Column>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column selectionMode="single" headerStyle={{ width: '3rem' }} />
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/rowselection/singledoc.js b/components/doc/datatable/rowselection/singledoc.js
index a45543b447..c8c0ad0dd0 100644
--- a/components/doc/datatable/rowselection/singledoc.js
+++ b/components/doc/datatable/rowselection/singledoc.js
@@ -142,10 +142,10 @@ export default function SingleRowSelectionDemo() {
                         <label htmlFor="input-metakey">MetaKey</label>
                     </div>
                     <DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/samples/customersdoc.js b/components/doc/datatable/samples/customersdoc.js
index 8802e64a2e..6706b08608 100644
--- a/components/doc/datatable/samples/customersdoc.js
+++ b/components/doc/datatable/samples/customersdoc.js
@@ -46,20 +46,20 @@ export const CustomersDoc = (props) => {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -91,7 +91,7 @@ export const CustomersDoc = (props) => {
         const value = e.target.value;
         let _filters = { ...filters };
 
-        _filters['global'].value = value;
+        _filters.global.value = value;
 
         setFilters(_filters);
         setGlobalFilterValue(value);
@@ -176,13 +176,13 @@ export const CustomersDoc = (props) => {
     };
 
     const activityBodyTemplate = (rowData) => {
-        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }} />;
     };
 
     const activityFilterTemplate = (options) => {
         return (
             <>
-                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
+                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3" />
                 <div className="flex align-items-center justify-content-between px-2">
                     <span>{options.value ? options.value[0] : 0}</span>
                     <span>{options.value ? options.value[1] : 100}</span>
@@ -192,7 +192,7 @@ export const CustomersDoc = (props) => {
     };
 
     const actionBodyTemplate = () => {
-        return <Button type="button" icon="pi pi-cog" rounded></Button>;
+        return <Button type="button" icon="pi pi-cog" rounded />;
     };
 
     const header = renderHeader();
@@ -728,7 +728,7 @@ export default function CustomersDemo() {
                         emptyMessage="No customers found."
                         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                     >
-                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
                         <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" style={{ minWidth: '14rem' }} />
                         <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
                         <Column
diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js
index 39b3b85565..79a63659c6 100644
--- a/components/doc/datatable/samples/productsdoc.js
+++ b/components/doc/datatable/samples/productsdoc.js
@@ -130,7 +130,7 @@ export function ProductsDoc(props) {
         let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
         for (let i = 0; i < 5; i++) {
-            id += chars.charAt(Math.floor(Math.random() * chars.length));
+            id = id + chars.charAt(Math.floor(Math.random() * chars.length));
         }
 
         return id;
@@ -156,7 +156,7 @@ export function ProductsDoc(props) {
     const onCategoryChange = (e) => {
         let _product = { ...product };
 
-        _product['category'] = e.value;
+        _product.category = e.value;
         setProduct(_product);
     };
 
@@ -204,7 +204,7 @@ export function ProductsDoc(props) {
     };
 
     const statusBodyTemplate = (rowData) => {
-        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData)}></Tag>;
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData)} />;
     };
 
     const actionBodyTemplate = (rowData) => {
@@ -218,17 +218,17 @@ export function ProductsDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -1053,7 +1053,7 @@ export default function ProductsDemo() {
             <Toast ref={toast} />
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
-                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
 
                     <DataTable
                         ref={dt}
@@ -1069,15 +1069,15 @@ export default function ProductsDemo() {
                         globalFilter={globalFilter}
                         header={header}
                     >
-                        <Column selectionMode="multiple" exportable={false}></Column>
-                        <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }}></Column>
-                        <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }}></Column>
-                        <Column field="image" header="Image" body={imageBodyTemplate}></Column>
-                        <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ minWidth: '8rem' }}></Column>
-                        <Column field="category" header="Category" sortable style={{ minWidth: '10rem' }}></Column>
-                        <Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
-                        <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
-                        <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '12rem' }}></Column>
+                        <Column selectionMode="multiple" exportable={false} />
+                        <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }} />
+                        <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }} />
+                        <Column field="image" header="Image" body={imageBodyTemplate} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ minWidth: '8rem' }} />
+                        <Column field="category" header="Category" sortable style={{ minWidth: '10rem' }} />
+                        <Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable style={{ minWidth: '12rem' }} />
+                        <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable style={{ minWidth: '12rem' }} />
+                        <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '12rem' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/scroll/flexibledoc.js b/components/doc/datatable/scroll/flexibledoc.js
index e1d4f05b8d..4a082a0ff4 100644
--- a/components/doc/datatable/scroll/flexibledoc.js
+++ b/components/doc/datatable/scroll/flexibledoc.js
@@ -154,10 +154,10 @@ export default function FlexibleScrollDemo() {
                     <Button label="Show" icon="pi pi-external-link" onClick={() => setDialogVisible(true)} />
                     <Dialog header="Flex Scroll" visible={dialogVisible} style={{ width: '75vw' }} maximizable modal contentStyle={{ height: '300px' }} onHide={() => setDialogVisible(false)} footer={dialogFooterTemplate}>
                         <DataTable value={customers} scrollable scrollHeight="flex" tableStyle={{ minWidth: '50rem' }}>
-                            <Column field="name" header="Name"></Column>
-                            <Column field="country.name" header="Country"></Column>
-                            <Column field="representative.name" header="Representative"></Column>
-                            <Column field="company" header="Company"></Column>
+                            <Column field="name" header="Name" />
+                            <Column field="country.name" header="Country" />
+                            <Column field="representative.name" header="Representative" />
+                            <Column field="company" header="Company" />
                         </DataTable>
                     </Dialog>
                 </div>
diff --git a/components/doc/datatable/scroll/frozencolumnsdoc.js b/components/doc/datatable/scroll/frozencolumnsdoc.js
index 83edd47f84..e3e01faced 100644
--- a/components/doc/datatable/scroll/frozencolumnsdoc.js
+++ b/components/doc/datatable/scroll/frozencolumnsdoc.js
@@ -171,16 +171,16 @@ export default function FrozenColumnsDemo() {
                 <div className="card">
                     <ToggleButton checked={balanceFrozen} onChange={(e) => setBalanceFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
                     <DataTable value={customers} scrollable scrollHeight="400px" className="mt-4">
-                        <Column field="name" header="Name" style={{ minWidth: '200px' }} frozen className="font-bold"></Column>
-                        <Column field="id" header="Id" style={{ minWidth: '100px' }}></Column>
-                        <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
-                        <Column field="country.name" header="Country" style={{ minWidth: '200px' }}></Column>
-                        <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
-                        <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
-                        <Column field="status" header="Status" style={{ minWidth: '200px' }}></Column>
-                        <Column field="activity" header="Activity" style={{ minWidth: '200px' }}></Column>
-                        <Column field="representative.name" header="Representative" style={{ minWidth: '200px' }}></Column>
-                        <Column field="balance" header="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} alignFrozen="right" frozen={balanceFrozen}></Column>
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} frozen className="font-bold" />
+                        <Column field="id" header="Id" style={{ minWidth: '100px' }} />
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country.name" header="Country" style={{ minWidth: '200px' }} />
+                        <Column field="date" header="Date" style={{ minWidth: '200px' }} />
+                        <Column field="company" header="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" style={{ minWidth: '200px' }} />
+                        <Column field="activity" header="Activity" style={{ minWidth: '200px' }} />
+                        <Column field="representative.name" header="Representative" style={{ minWidth: '200px' }} />
+                        <Column field="balance" header="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} alignFrozen="right" frozen={balanceFrozen} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/scroll/frozenrowsdoc.js b/components/doc/datatable/scroll/frozenrowsdoc.js
index 9d6a44e527..75230108b5 100644
--- a/components/doc/datatable/scroll/frozenrowsdoc.js
+++ b/components/doc/datatable/scroll/frozenrowsdoc.js
@@ -42,7 +42,7 @@ export function FrozenRowsDoc(props) {
     };
 
     const toggleLock = (data, frozen, index) => {
-        let _lockedCustomers, _unlockedCustomers;
+        let _lockedCustomers; let _unlockedCustomers;
 
         if (frozen) {
             _lockedCustomers = lockedCustomers.filter((c, i) => i !== index);
@@ -262,11 +262,11 @@ export default function FrozenRowsDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={customers} frozenValue={lockedCustomers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="country.name" header="Country"></Column>
-                        <Column field="representative.name" header="Representative"></Column>
-                        <Column field="status" header="Status"></Column>
-                        <Column style={{ flex: '0 0 4rem' }} body={lockTemplate}></Column>
+                        <Column field="name" header="Name" />
+                        <Column field="country.name" header="Country" />
+                        <Column field="representative.name" header="Representative" />
+                        <Column field="status" header="Status" />
+                        <Column style={{ flex: '0 0 4rem' }} body={lockTemplate} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/scroll/horizontaldoc.js b/components/doc/datatable/scroll/horizontaldoc.js
index f9463af247..e0b8d76998 100644
--- a/components/doc/datatable/scroll/horizontaldoc.js
+++ b/components/doc/datatable/scroll/horizontaldoc.js
@@ -155,15 +155,15 @@ export default function HorizontalScrollDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={customers} scrollable scrollHeight="400px">
-                        <Column field="id" header="Id" footer="Id" style={{ minWidth: '100px' }}></Column>
-                        <Column field="name" header="Name" footer="Name" style={{ minWidth: '200px' }}></Column>
-                        <Column field="country.name" header="Country" footer="Country" style={{ minWidth: '200px' }}></Column>
-                        <Column field="date" header="Date" footer="Date" style={{ minWidth: '200px' }}></Column>
-                        <Column field="balance" header="Balance" footer="Balance" body={balanceTemplate} style={{ minWidth: '200px' }}></Column>
-                        <Column field="company" header="Company" footer="Company" style={{ minWidth: '200px' }}></Column>
-                        <Column field="status" header="Status" footer="Status" style={{ minWidth: '200px' }}></Column>
-                        <Column field="activity" header="Activity" footer="Activity" style={{ minWidth: '200px' }}></Column>
-                        <Column field="representative.name" header="Representative" footer="Representative" style={{ minWidth: '200px' }}></Column>
+                        <Column field="id" header="Id" footer="Id" style={{ minWidth: '100px' }} />
+                        <Column field="name" header="Name" footer="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country.name" header="Country" footer="Country" style={{ minWidth: '200px' }} />
+                        <Column field="date" header="Date" footer="Date" style={{ minWidth: '200px' }} />
+                        <Column field="balance" header="Balance" footer="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="company" header="Company" footer="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" footer="Status" style={{ minWidth: '200px' }} />
+                        <Column field="activity" header="Activity" footer="Activity" style={{ minWidth: '200px' }} />
+                        <Column field="representative.name" header="Representative" footer="Representative" style={{ minWidth: '200px' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/scroll/verticaldoc.js b/components/doc/datatable/scroll/verticaldoc.js
index 0becfe8060..23044059a7 100644
--- a/components/doc/datatable/scroll/verticaldoc.js
+++ b/components/doc/datatable/scroll/verticaldoc.js
@@ -118,10 +118,10 @@ export default function VerticalScrollDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={customers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="country.name" header="Country"></Column>
-                        <Column field="representative.name" header="Representative"></Column>
-                        <Column field="company" header="Company"></Column>
+                        <Column field="name" header="Name" />
+                        <Column field="country.name" header="Country" />
+                        <Column field="representative.name" header="Representative" />
+                        <Column field="company" header="Company" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/sizedoc.js b/components/doc/datatable/sizedoc.js
index 8782330f8c..20a74d113b 100644
--- a/components/doc/datatable/sizedoc.js
+++ b/components/doc/datatable/sizedoc.js
@@ -146,10 +146,10 @@ export default function SizeDemo() {
                         <SelectButton value={size} onChange={(e) => setSize(e.value)} options={sizeOptions} />
                     </div>
                     <DataTable value={products} size={size} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/sort/multiplecolumnsdoc.js b/components/doc/datatable/sort/multiplecolumnsdoc.js
index c6808b77b4..93a3284b58 100644
--- a/components/doc/datatable/sort/multiplecolumnsdoc.js
+++ b/components/doc/datatable/sort/multiplecolumnsdoc.js
@@ -112,10 +112,10 @@ export default function MultipleColumnsDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
-                        <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
-                        <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
-                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+                        <Column field="code" header="Code" sortable style={{ width: '25%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '25%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '25%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/sort/presortdoc.js b/components/doc/datatable/sort/presortdoc.js
index d27f71e52d..9aea500d15 100644
--- a/components/doc/datatable/sort/presortdoc.js
+++ b/components/doc/datatable/sort/presortdoc.js
@@ -140,11 +140,11 @@ export default function PresortDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} sortField="price" sortOrder={-1} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code" sortable style={{ width: '20%' }}></Column>
-                        <Column field="name" header="Name" sortable style={{ width: '20%' }}></Column>
-                        <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ width: '20%' }}></Column>
-                        <Column field="category" header="Category" sortable style={{ width: '20%' }}></Column>
-                        <Column field="quantity" header="Quantity" sortable style={{ width: '20%' }}></Column>
+                        <Column field="code" header="Code" sortable style={{ width: '20%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '20%' }} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ width: '20%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '20%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '20%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/sort/removablesortdoc.js b/components/doc/datatable/sort/removablesortdoc.js
index 588d62e848..264f42af62 100644
--- a/components/doc/datatable/sort/removablesortdoc.js
+++ b/components/doc/datatable/sort/removablesortdoc.js
@@ -112,10 +112,10 @@ export default function RemovableSortDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} removableSort tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
-                        <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
-                        <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
-                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+                        <Column field="code" header="Code" sortable style={{ width: '25%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '25%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '25%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/sort/singlecolumndoc.js b/components/doc/datatable/sort/singlecolumndoc.js
index 65ace9f531..2ae31dedcd 100644
--- a/components/doc/datatable/sort/singlecolumndoc.js
+++ b/components/doc/datatable/sort/singlecolumndoc.js
@@ -112,10 +112,10 @@ export default function SingleColumnDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
-                        <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
-                        <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
-                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+                        <Column field="code" header="Code" sortable style={{ width: '25%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '25%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '25%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/statefuldoc.js b/components/doc/datatable/statefuldoc.js
index e53c8b468c..b6b550a917 100644
--- a/components/doc/datatable/statefuldoc.js
+++ b/components/doc/datatable/statefuldoc.js
@@ -38,20 +38,20 @@ export function StatefulDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -108,13 +108,13 @@ export function StatefulDoc(props) {
         const value = event.target.value;
         let _filters = { ...filters };
 
-        _filters['global'].value = value;
+        _filters.global.value = value;
 
         setFilters(_filters);
     };
 
     const renderHeader = () => {
-        const value = filters['global'] ? filters['global'].value : '';
+        const value = filters.global ? filters.global.value : '';
 
         return (
             <span className="p-input-icon-left">
@@ -489,8 +489,8 @@ export default function BasicDemo() {
                         emptyMessage="No customers found."
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '25%' }}></Column>
-                        <Column header="Country" body={countryBodyTemplate} sortable sortField="country.name" filter filterField="country.name" filterPlaceholder="Search" style={{ width: '25%' }}></Column>
+                        <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '25%' }} />
+                        <Column header="Country" body={countryBodyTemplate} sortable sortField="country.name" filter filterField="country.name" filterPlaceholder="Search" style={{ width: '25%' }} />
                         <Column
                             header="Agent"
                             body={representativeBodyTemplate}
@@ -502,8 +502,8 @@ export default function BasicDemo() {
                             filterElement={representativeFilterTemplate}
                             filterMenuStyle={{ width: '14rem' }}
                             style={{ width: '25%' }}
-                        ></Column>
-                        <Column field="status" header="Status" body={statusBodyTemplate} sortable filter filterElement={statusFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }}></Column>
+                        />
+                        <Column field="status" header="Status" body={statusBodyTemplate} sortable filter filterElement={statusFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/stripedrowsdoc.js b/components/doc/datatable/stripedrowsdoc.js
index a9a0d803a5..730f3612a8 100644
--- a/components/doc/datatable/stripedrowsdoc.js
+++ b/components/doc/datatable/stripedrowsdoc.js
@@ -112,10 +112,10 @@ export default function StripedRowsDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} stripedRows tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/templatedoc.js b/components/doc/datatable/templatedoc.js
index d7d873edf3..bd1634287f 100644
--- a/components/doc/datatable/templatedoc.js
+++ b/components/doc/datatable/templatedoc.js
@@ -33,22 +33,22 @@ export function TemplateDoc(props) {
     };
 
     const statusBodyTemplate = (product) => {
-        return <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>;
+        return <Tag value={product.inventoryStatus} severity={getSeverity(product)} />;
     };
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -259,12 +259,12 @@ export default function TemplateDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={products} header={header} footer={footer} tableStyle={{ minWidth: '60rem' }}>
-                        <Column field="name" header="Name"></Column>
-                        <Column header="Image" body={imageBodyTemplate}></Column>
-                        <Column field="price" header="Price" body={priceBodyTemplate}></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="rating" header="Reviews" body={ratingBodyTemplate}></Column>
-                        <Column header="Status" body={statusBodyTemplate}></Column>
+                        <Column field="name" header="Name" />
+                        <Column header="Image" body={imageBodyTemplate} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} />
+                        <Column field="category" header="Category" />
+                        <Column field="rating" header="Reviews" body={ratingBodyTemplate} />
+                        <Column header="Status" body={statusBodyTemplate} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/virtualscroll/lazydoc.js b/components/doc/datatable/virtualscroll/lazydoc.js
index a716ed372a..89d02ac9da 100644
--- a/components/doc/datatable/virtualscroll/lazydoc.js
+++ b/components/doc/datatable/virtualscroll/lazydoc.js
@@ -221,11 +221,11 @@ export default function LazyVirtualScrollDemo() {
                         virtualScrollerOptions={{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, loadingTemplate }}
                         tableStyle={{ minWidth: '50rem' }}
                     >
-                        <Column field="id" header="Id" style={{ width: '20%' }}></Column>
-                        <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
-                        <Column field="year" header="Year" style={{ width: '20%' }}></Column>
-                        <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
-                        <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+                        <Column field="id" header="Id" style={{ width: '20%' }} />
+                        <Column field="vin" header="Vin" style={{ width: '20%' }} />
+                        <Column field="year" header="Year" style={{ width: '20%' }} />
+                        <Column field="brand" header="Brand" style={{ width: '20%' }} />
+                        <Column field="color" header="Color" style={{ width: '20%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/datatable/virtualscroll/preloaddoc.js b/components/doc/datatable/virtualscroll/preloaddoc.js
index 8d29376fee..a635b0ca03 100644
--- a/components/doc/datatable/virtualscroll/preloaddoc.js
+++ b/components/doc/datatable/virtualscroll/preloaddoc.js
@@ -101,11 +101,11 @@ export default function PreloadVirtualScrollDemo() {
             <DeferredDemo onLoad={loadDemoData}>
                 <div className="card">
                     <DataTable value={cars} scrollable scrollHeight="400px" virtualScrollerOptions={{ itemSize: 46 }} tableStyle={{ minWidth: '50rem' }}>
-                        <Column field="id" header="Id" style={{ width: '20%' }}></Column>
-                        <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
-                        <Column field="year" header="Year" style={{ width: '20%' }}></Column>
-                        <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
-                        <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+                        <Column field="id" header="Id" style={{ width: '20%' }} />
+                        <Column field="vin" header="Vin" style={{ width: '20%' }} />
+                        <Column field="year" header="Year" style={{ width: '20%' }} />
+                        <Column field="brand" header="Brand" style={{ width: '20%' }} />
+                        <Column field="color" header="Color" style={{ width: '20%' }} />
                     </DataTable>
                 </div>
             </DeferredDemo>
diff --git a/components/doc/dataview/basicdoc.js b/components/doc/dataview/basicdoc.js
index 2b45221bb8..2de9c0d064 100644
--- a/components/doc/dataview/basicdoc.js
+++ b/components/doc/dataview/basicdoc.js
@@ -17,17 +17,17 @@ export function BasicDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -39,18 +39,18 @@ export function BasicDoc(props) {
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
                             <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <Rating value={product.rating} readOnly cancel={false} />
                             <div className="flex align-items-center gap-3">
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag"></i>
+                                    <i className="pi pi-tag" />
                                     <span className="font-semibold">{product.category}</span>
                                 </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                             </div>
                         </div>
                         <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                             <span className="text-2xl font-semibold">${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
                         </div>
                     </div>
                 </div>
@@ -59,7 +59,9 @@ export function BasicDoc(props) {
     };
 
     const listTemplate = (items) => {
-        if (!items || items.length === 0) return null;
+        if (!items || items.length === 0) {
+            return null;
+        }
 
         let list = items.map((product, index) => {
             return itemTemplate(product, index);
diff --git a/components/doc/dataview/importdoc.js b/components/doc/dataview/importdoc.js
index 81ea7a36a0..11d97c9a17 100644
--- a/components/doc/dataview/importdoc.js
+++ b/components/doc/dataview/importdoc.js
@@ -10,7 +10,7 @@ import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/dataview/layoutdoc.js b/components/doc/dataview/layoutdoc.js
index ee3d9db393..967e13e6c5 100644
--- a/components/doc/dataview/layoutdoc.js
+++ b/components/doc/dataview/layoutdoc.js
@@ -18,17 +18,17 @@ export function LayoutDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -40,18 +40,18 @@ export function LayoutDoc(props) {
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
                             <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <Rating value={product.rating} readOnly cancel={false} />
                             <div className="flex align-items-center gap-3">
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag"></i>
+                                    <i className="pi pi-tag" />
                                     <span className="font-semibold">{product.category}</span>
                                 </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                             </div>
                         </div>
                         <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                             <span className="text-2xl font-semibold">${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
                         </div>
                     </div>
                 </div>
@@ -65,19 +65,19 @@ export function LayoutDoc(props) {
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
-                            <i className="pi pi-tag"></i>
+                            <i className="pi pi-tag" />
                             <span className="font-semibold">{product.category}</span>
                         </div>
-                        <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                        <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     </div>
                     <div className="flex flex-column align-items-center gap-3 py-5">
                         <img className="w-9 shadow-2 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                         <div className="text-2xl font-bold">{product.name}</div>
-                        <Rating value={product.rating} readOnly cancel={false}></Rating>
+                        <Rating value={product.rating} readOnly cancel={false} />
                     </div>
                     <div className="flex align-items-center justify-content-between">
                         <span className="text-2xl font-semibold">${product.price}</span>
-                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
                     </div>
                 </div>
             </div>
@@ -89,8 +89,11 @@ export function LayoutDoc(props) {
             return;
         }
 
-        if (layout === 'list') return listItem(product, index);
-        else if (layout === 'grid') return gridItem(product);
+        if (layout === 'list') {
+            return listItem(product, index);
+        } else if (layout === 'grid') {
+            return gridItem(product);
+        }
     };
 
     const listTemplate = (products, layout) => {
diff --git a/components/doc/dataview/loadingdoc.js b/components/doc/dataview/loadingdoc.js
index cadc49124c..2dab9c1437 100644
--- a/components/doc/dataview/loadingdoc.js
+++ b/components/doc/dataview/loadingdoc.js
@@ -66,8 +66,11 @@ export function LoadingDoc(props) {
             return;
         }
 
-        if (layout === 'list') return listItem(product, index);
-        else if (layout === 'grid') return gridItem(product);
+        if (layout === 'list') {
+            return listItem(product, index);
+        } else if (layout === 'grid') {
+            return gridItem(product);
+        }
     };
 
     const listTemplate = (products, layout) => {
diff --git a/components/doc/dataview/paginationdoc.js b/components/doc/dataview/paginationdoc.js
index 378c724d9e..4f14d10bd9 100644
--- a/components/doc/dataview/paginationdoc.js
+++ b/components/doc/dataview/paginationdoc.js
@@ -18,17 +18,17 @@ export function PaginationDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -40,18 +40,18 @@ export function PaginationDoc(props) {
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
                             <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <Rating value={product.rating} readOnly cancel={false} />
                             <div className="flex align-items-center gap-3">
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag"></i>
+                                    <i className="pi pi-tag" />
                                     <span className="font-semibold">{product.category}</span>
                                 </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                             </div>
                         </div>
                         <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                             <span className="text-2xl font-semibold">${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
                         </div>
                     </div>
                 </div>
@@ -60,7 +60,9 @@ export function PaginationDoc(props) {
     };
 
     const listTemplate = (items) => {
-        if (!items || items.length === 0) return null;
+        if (!items || items.length === 0) {
+            return null;
+        }
 
         let list = items.map((product, index) => {
             return itemTemplate(product, index);
diff --git a/components/doc/dataview/pt/ptdoc.js b/components/doc/dataview/pt/ptdoc.js
index 03c73090b8..445894c99a 100644
--- a/components/doc/dataview/pt/ptdoc.js
+++ b/components/doc/dataview/pt/ptdoc.js
@@ -17,17 +17,17 @@ export function PTDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -39,18 +39,18 @@ export function PTDoc(props) {
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
                             <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <Rating value={product.rating} readOnly cancel={false} />
                             <div className="flex align-items-center gap-3">
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag"></i>
+                                    <i className="pi pi-tag" />
                                     <span className="font-semibold">{product.category}</span>
                                 </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                             </div>
                         </div>
                         <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                             <span className="text-2xl font-semibold">${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
                         </div>
                     </div>
                 </div>
@@ -64,19 +64,19 @@ export function PTDoc(props) {
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
-                            <i className="pi pi-tag"></i>
+                            <i className="pi pi-tag" />
                             <span className="font-semibold">{product.category}</span>
                         </div>
-                        <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                        <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                     </div>
                     <div className="flex flex-column align-items-center gap-3 py-5">
                         <img className="w-9 shadow-2 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                         <div className="text-2xl font-bold">{product.name}</div>
-                        <Rating value={product.rating} readOnly cancel={false}></Rating>
+                        <Rating value={product.rating} readOnly cancel={false} />
                     </div>
                     <div className="flex align-items-center justify-content-between">
                         <span className="text-2xl font-semibold">${product.price}</span>
-                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
                     </div>
                 </div>
             </div>
@@ -88,8 +88,11 @@ export function PTDoc(props) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
-        else if (layout === 'grid') return gridItem(product);
+        if (layout === 'list') {
+            return listItem(product);
+        } else if (layout === 'grid') {
+            return gridItem(product);
+        }
     };
 
     const header = () => {
@@ -398,7 +401,7 @@ export default function BasicDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <DataView
                     value={products}
diff --git a/components/doc/dataview/sortingdoc.js b/components/doc/dataview/sortingdoc.js
index 72aca0af70..4da0283c68 100644
--- a/components/doc/dataview/sortingdoc.js
+++ b/components/doc/dataview/sortingdoc.js
@@ -25,17 +25,17 @@ export function SortingDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
+        case 'INSTOCK':
+            return 'success';
 
-            case 'LOWSTOCK':
-                return 'warning';
+        case 'LOWSTOCK':
+            return 'warning';
 
-            case 'OUTOFSTOCK':
-                return 'danger';
+        case 'OUTOFSTOCK':
+            return 'danger';
 
-            default:
-                return null;
+        default:
+            return null;
         }
     };
 
@@ -65,18 +65,18 @@ export function SortingDoc(props) {
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
                             <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <Rating value={product.rating} readOnly cancel={false} />
                             <div className="flex align-items-center gap-3">
                                 <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag"></i>
+                                    <i className="pi pi-tag" />
                                     <span className="font-semibold">{product.category}</span>
                                 </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
                             </div>
                         </div>
                         <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                             <span className="text-2xl font-semibold">${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
                         </div>
                     </div>
                 </div>
@@ -85,7 +85,9 @@ export function SortingDoc(props) {
     };
 
     const listTemplate = (items) => {
-        if (!items || items.length === 0) return null;
+        if (!items || items.length === 0) {
+            return null;
+        }
 
         let list = items.map((product, index) => {
             return itemTemplate(product, index);
diff --git a/components/doc/deferredcontent/datatabledoc.js b/components/doc/deferredcontent/datatabledoc.js
index ba1d701ef1..d0dd74b163 100644
--- a/components/doc/deferredcontent/datatabledoc.js
+++ b/components/doc/deferredcontent/datatabledoc.js
@@ -121,10 +121,10 @@ export default function DataTableDemo() {
                 <Toast ref={toast} />
                 <DeferredContent onLoad={onDataLoad}>
                     <DataTable value={products}>
-                        <Column field="code" header="Code"></Column>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="category" header="Category"></Column>
-                        <Column field="quantity" header="Quantity"></Column>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
                     </DataTable>
                 </DeferredContent>
             </div>
diff --git a/components/doc/deferredcontent/importdoc.js b/components/doc/deferredcontent/importdoc.js
index 3d2defd0cd..40c5014b77 100644
--- a/components/doc/deferredcontent/importdoc.js
+++ b/components/doc/deferredcontent/importdoc.js
@@ -10,7 +10,7 @@ import { DeferredContent } from 'primereact/deferredcontent';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/dialog/headlessdoc.js b/components/doc/dialog/headlessdoc.js
index 7ab563901f..c5c142261d 100644
--- a/components/doc/dialog/headlessdoc.js
+++ b/components/doc/dialog/headlessdoc.js
@@ -183,21 +183,21 @@ export default function HeadlessDemo() {
                                 <label htmlFor="username" className="text-primary-50 font-semibold">
                                     Username
                                 </label>
-                                <InputText id="username" label="Username" className="bg-white-alpha-20 border-none p-3 text-primary-50"></InputText>
+                                <InputText id="username" label="Username" className="bg-white-alpha-20 border-none p-3 text-primary-50" />
                             </div>
                             <div className="inline-flex flex-column gap-2">
                                 <label htmlFor="username" className="text-primary-50 font-semibold">
                                     Username
                                 </label>
-                                <InputText id="password" label="Password" className="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
+                                <InputText id="password" label="Password" className="bg-white-alpha-20 border-none p-3 text-primary-50" type="password" />
                             </div>
                             <div className="flex align-items-center gap-2">
-                                <Button label="Sign-In" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                                <Button label="Cancel" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                                <Button label="Sign-In" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" />
+                                <Button label="Cancel" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" />
                             </div>
                         </div>
                     )}
-                ></Dialog>
+                />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/dialog/importdoc.js b/components/doc/dialog/importdoc.js
index 77a1fb1326..156b95a0bb 100644
--- a/components/doc/dialog/importdoc.js
+++ b/components/doc/dialog/importdoc.js
@@ -10,7 +10,7 @@ import { Dialog } from 'primereact/dialog';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/dialog/pt/ptdoc.js b/components/doc/dialog/pt/ptdoc.js
index 30edd10552..941f7a701c 100644
--- a/components/doc/dialog/pt/ptdoc.js
+++ b/components/doc/dialog/pt/ptdoc.js
@@ -84,7 +84,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
 
diff --git a/components/doc/divider/contentdoc.js b/components/doc/divider/contentdoc.js
index d4f11e379a..118c27445d 100644
--- a/components/doc/divider/contentdoc.js
+++ b/components/doc/divider/contentdoc.js
@@ -132,7 +132,7 @@ export default function ContentDemo() {
                 </p>
                 <Divider align="left">
                     <div className="inline-flex align-items-center">
-                        <i className="pi pi-user mr-2"></i>
+                        <i className="pi pi-user mr-2" />
                         <b>Text</b>
                     </div>
                 </Divider>
@@ -148,7 +148,7 @@ export default function ContentDemo() {
                     officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
                 </p>
                 <Divider align="right">
-                    <Button label="Button" icon="pi pi-search" className="p-button-outlined"></Button>
+                    <Button label="Button" icon="pi pi-search" className="p-button-outlined" />
                 </Divider>
                 <p>
                     Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
diff --git a/components/doc/divider/importdoc.js b/components/doc/divider/importdoc.js
index fd0df38057..e74de32097 100644
--- a/components/doc/divider/importdoc.js
+++ b/components/doc/divider/importdoc.js
@@ -10,7 +10,7 @@ import { Divider } from 'primereact/divider';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/divider/logindoc.js b/components/doc/divider/logindoc.js
index f81d634718..6d92b58680 100644
--- a/components/doc/divider/logindoc.js
+++ b/components/doc/divider/logindoc.js
@@ -126,7 +126,7 @@ export default function LoginDemo() {
                             <label className="w-6rem">Password</label>
                             <InputText id="password" type="password" className="w-12rem" />
                         </div>
-                        <Button label="Login" icon="pi pi-user" className="w-10rem mx-auto"></Button>
+                        <Button label="Login" icon="pi pi-user" className="w-10rem mx-auto" />
                     </div>
                     <div className="w-full md:w-2">
                         <Divider layout="vertical" className="hidden md:flex">
@@ -137,7 +137,7 @@ export default function LoginDemo() {
                         </Divider>
                     </div>
                     <div className="w-full md:w-5 flex align-items-center justify-content-center py-5">
-                        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" className="w-10rem"></Button>
+                        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" className="w-10rem" />
                     </div>
                 </div>
             </div>
diff --git a/components/doc/divider/pt/ptdoc.js b/components/doc/divider/pt/ptdoc.js
index 31ca916039..5199fdcbcc 100644
--- a/components/doc/divider/pt/ptdoc.js
+++ b/components/doc/divider/pt/ptdoc.js
@@ -63,7 +63,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/components/doc/dock/advanceddoc.js b/components/doc/dock/advanceddoc.js
index 5a32f5a6df..c893d0cb4e 100644
--- a/components/doc/dock/advanceddoc.js
+++ b/components/doc/dock/advanceddoc.js
@@ -221,25 +221,25 @@ export function AdvancedDoc(props) {
         let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
         switch (command) {
-            case 'date':
-                response = 'Today is ' + new Date().toDateString();
-                break;
+        case 'date':
+            response = 'Today is ' + new Date().toDateString();
+            break;
 
-            case 'greet':
-                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-                break;
+        case 'greet':
+            response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+            break;
 
-            case 'random':
-                response = Math.floor(Math.random() * 100);
-                break;
+        case 'random':
+            response = Math.floor(Math.random() * 100);
+            break;
 
-            case 'clear':
-                response = null;
-                break;
+        case 'clear':
+            response = null;
+            break;
 
-            default:
-                response = 'Unknown command: ' + command;
-                break;
+        default:
+            response = 'Unknown command: ' + command;
+            break;
         }
 
         if (response) {
@@ -254,19 +254,26 @@ export function AdvancedDoc(props) {
 
         PhotoService.getImages().then((data) => setImages(data));
         NodeService.getTreeNodes().then((data) => setNodes(data));
-        if (context) context.setAppendTo('self');
-        else PrimeReact.appendTo = 'self';
+
+        if (context) {
+            context.setAppendTo('self');
+        } else {
+            PrimeReact.appendTo = 'self';
+        }
 
         return () => {
             TerminalService.off('command', commandHandler);
 
             // reset
-            if (context) context.setAppendTo(null);
-            else PrimeReact.appendTo = null;
+            if (context) {
+                context.setAppendTo(null);
+            } else {
+                PrimeReact.appendTo = null;
+            }
         };
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const start = <i className="pi pi-apple"></i>;
+    const start = <i className="pi pi-apple" />;
     const end = (
         <React.Fragment>
             <i className="pi pi-video" />
diff --git a/components/doc/dock/importdoc.js b/components/doc/dock/importdoc.js
index 3d8a6daf5e..bfb8730cb8 100644
--- a/components/doc/dock/importdoc.js
+++ b/components/doc/dock/importdoc.js
@@ -10,7 +10,7 @@ import { Dock } from 'primereact/dock';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/dropdown/importdoc.js b/components/doc/dropdown/importdoc.js
index 7a5c87f673..ed6a0bca4b 100644
--- a/components/doc/dropdown/importdoc.js
+++ b/components/doc/dropdown/importdoc.js
@@ -10,7 +10,7 @@ import { Dropdown } from 'primereact/dropdown';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/dropdown/lazyvirtualscrolldoc.js b/components/doc/dropdown/lazyvirtualscrolldoc.js
index d73bcdeae2..16c04c9438 100644
--- a/components/doc/dropdown/lazyvirtualscrolldoc.js
+++ b/components/doc/dropdown/lazyvirtualscrolldoc.js
@@ -141,7 +141,7 @@ export default function LazyVirtualScrollDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p></p>
+                <p />
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Dropdown
diff --git a/components/doc/dropdown/pt/ptdoc.js b/components/doc/dropdown/pt/ptdoc.js
index 33ebccfab5..e5a2d68b02 100644
--- a/components/doc/dropdown/pt/ptdoc.js
+++ b/components/doc/dropdown/pt/ptdoc.js
@@ -104,7 +104,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Dropdown
                     value={selectedCity}
diff --git a/components/doc/editor/form/formikdoc.js b/components/doc/editor/form/formikdoc.js
index 8ac64f375b..88ba7579b7 100644
--- a/components/doc/editor/form/formikdoc.js
+++ b/components/doc/editor/form/formikdoc.js
@@ -16,9 +16,9 @@ export function FormikDoc(props) {
     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>
+                <button className="ql-bold" aria-label="Bold" />
+                <button className="ql-italic" aria-label="Italic" />
+                <button className="ql-underline" aria-label="Underline" />
             </span>
         );
     };
diff --git a/components/doc/editor/form/hookformdoc.js b/components/doc/editor/form/hookformdoc.js
index e2a69fdcf5..00cc88f458 100644
--- a/components/doc/editor/form/hookformdoc.js
+++ b/components/doc/editor/form/hookformdoc.js
@@ -16,9 +16,9 @@ export function HookFormDoc(props) {
     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>
+                <button className="ql-bold" aria-label="Bold" />
+                <button className="ql-italic" aria-label="Italic" />
+                <button className="ql-underline" aria-label="Underline" />
             </span>
         );
     };
diff --git a/components/doc/editor/importdoc.js b/components/doc/editor/importdoc.js
index 8c8563db6d..628f5c7073 100644
--- a/components/doc/editor/importdoc.js
+++ b/components/doc/editor/importdoc.js
@@ -10,7 +10,7 @@ import { Editor } from 'primereact/editor';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/editor/pt/ptdoc.js b/components/doc/editor/pt/ptdoc.js
index c56bf1a324..4a5536977e 100644
--- a/components/doc/editor/pt/ptdoc.js
+++ b/components/doc/editor/pt/ptdoc.js
@@ -63,7 +63,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Editor
                     value={text}
diff --git a/components/doc/editor/templatedoc.js b/components/doc/editor/templatedoc.js
index 11245cdc4c..4ca34b3d6c 100644
--- a/components/doc/editor/templatedoc.js
+++ b/components/doc/editor/templatedoc.js
@@ -9,9 +9,9 @@ export function TemplateDoc(props) {
     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>
+                <button className="ql-bold" aria-label="Bold" />
+                <button className="ql-italic" aria-label="Italic" />
+                <button className="ql-underline" aria-label="Underline" />
             </span>
         );
     };
diff --git a/components/doc/fieldset/importdoc.js b/components/doc/fieldset/importdoc.js
index b991233c3b..e1f0677197 100644
--- a/components/doc/fieldset/importdoc.js
+++ b/components/doc/fieldset/importdoc.js
@@ -10,7 +10,7 @@ import { Fieldset } from 'primereact/fieldset';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/fieldset/pt/ptdoc.js b/components/doc/fieldset/pt/ptdoc.js
index 6bd5eb3284..f7d64e559e 100644
--- a/components/doc/fieldset/pt/ptdoc.js
+++ b/components/doc/fieldset/pt/ptdoc.js
@@ -73,7 +73,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Fieldset
                     legend="Header"
diff --git a/components/doc/fileupload/autodoc.js b/components/doc/fileupload/autodoc.js
index 9fae9f2183..898dd5650a 100644
--- a/components/doc/fileupload/autodoc.js
+++ b/components/doc/fileupload/autodoc.js
@@ -66,7 +66,7 @@ export default function AutoDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} auto chooseLabel="Browse" />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/fileupload/basicdoc.js b/components/doc/fileupload/basicdoc.js
index af88455552..9d8f3dfd4b 100644
--- a/components/doc/fileupload/basicdoc.js
+++ b/components/doc/fileupload/basicdoc.js
@@ -66,7 +66,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/fileupload/importdoc.js b/components/doc/fileupload/importdoc.js
index 0ad6837071..6b7030b857 100644
--- a/components/doc/fileupload/importdoc.js
+++ b/components/doc/fileupload/importdoc.js
@@ -10,7 +10,7 @@ import { FileUpload } from 'primereact/fileupload';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/fileupload/pt/ptdoc.js b/components/doc/fileupload/pt/ptdoc.js
index 5956284134..5389c59d5e 100644
--- a/components/doc/fileupload/pt/ptdoc.js
+++ b/components/doc/fileupload/pt/ptdoc.js
@@ -83,7 +83,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <FileUpload
                     name="demo[]"
diff --git a/components/doc/fileupload/templatedoc.js b/components/doc/fileupload/templatedoc.js
index 8075929966..e1a3eae483 100644
--- a/components/doc/fileupload/templatedoc.js
+++ b/components/doc/fileupload/templatedoc.js
@@ -18,7 +18,7 @@ export function TemplateDoc(props) {
         let files = e.files;
 
         for (let i = 0; i < e.files.length; i++) {
-            _totalSize += files[i].size || 0;
+            _totalSize = _totalSize + (files[i].size || 0);
         }
 
         setTotalSize(_totalSize);
@@ -28,7 +28,7 @@ export function TemplateDoc(props) {
         let _totalSize = 0;
 
         e.files.forEach((file) => {
-            _totalSize += file.size || 0;
+            _totalSize = _totalSize + (file.size || 0);
         });
 
         setTotalSize(_totalSize);
@@ -56,7 +56,7 @@ export function TemplateDoc(props) {
                 {cancelButton}
                 <div className="flex align-items-center gap-3 ml-auto">
                     <span>{formatedValue} / 1 MB</span>
-                    <ProgressBar value={value} showValue={false} style={{ width: '10rem', height: '12px' }}></ProgressBar>
+                    <ProgressBar value={value} showValue={false} style={{ width: '10rem', height: '12px' }} />
                 </div>
             </div>
         );
@@ -81,7 +81,7 @@ export function TemplateDoc(props) {
     const emptyTemplate = () => {
         return (
             <div className="flex align-items-center flex-column">
-                <i className="pi pi-image mt-3 p-5" style={{ fontSize: '5em', borderRadius: '50%', backgroundColor: 'var(--surface-b)', color: 'var(--surface-d)' }}></i>
+                <i className="pi pi-image mt-3 p-5" style={{ fontSize: '5em', borderRadius: '50%', backgroundColor: 'var(--surface-b)', color: 'var(--surface-d)' }} />
                 <span style={{ fontSize: '1.2em', color: 'var(--text-color-secondary)' }} className="my-5">
                     Drag and Drop Image Here
                 </span>
@@ -343,7 +343,7 @@ echo '<p>Fake Upload Process</p>'; ?>
                 <p>Uploader UI can be customized with templating.</p>
             </DocSectionText>
             <div className="card">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
 
                 <Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
                 <Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
diff --git a/components/doc/floatlabel/basicdoc.js b/components/doc/floatlabel/basicdoc.js
index cfc640e666..1386cb1d0a 100644
--- a/components/doc/floatlabel/basicdoc.js
+++ b/components/doc/floatlabel/basicdoc.js
@@ -60,7 +60,7 @@ export default function BasicDemo() {
             <div className="card flex justify-content-center">
                 <FloatLabel>
                     <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
-                    <label for="username">Username</label>
+                    <label htmlFor="username">Username</label>
                 </FloatLabel>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/floatlabel/importdoc.js b/components/doc/floatlabel/importdoc.js
index dc14784b97..86f5b12847 100644
--- a/components/doc/floatlabel/importdoc.js
+++ b/components/doc/floatlabel/importdoc.js
@@ -10,7 +10,7 @@ import { FloatLabel } from 'primereact/floatlabel';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/galleria/importdoc.js b/components/doc/galleria/importdoc.js
index 75eceedf26..124d10afc4 100644
--- a/components/doc/galleria/importdoc.js
+++ b/components/doc/galleria/importdoc.js
@@ -10,7 +10,7 @@ import { Galleria } from 'primereact/galleria';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/galleria/indicator/positiondoc.js b/components/doc/galleria/indicator/positiondoc.js
index d14a4dceed..a08090ec56 100644
--- a/components/doc/galleria/indicator/positiondoc.js
+++ b/components/doc/galleria/indicator/positiondoc.js
@@ -200,7 +200,7 @@ export default function PositionDemo() {
                     })}
                 </div>
                 <div className="flex align-items-center mb-5">
-                    <Checkbox inputId="inside_cbox" onChange={(e) => setInside(e.checked)} checked={inside}></Checkbox>
+                    <Checkbox inputId="inside_cbox" onChange={(e) => setInside(e.checked)} checked={inside} />
                     <label htmlFor="inside_cbox" className="ml-2">
                         Inside
                     </label>
diff --git a/components/doc/galleria/pt/ptdoc.js b/components/doc/galleria/pt/ptdoc.js
index 3f110a9482..4569135141 100644
--- a/components/doc/galleria/pt/ptdoc.js
+++ b/components/doc/galleria/pt/ptdoc.js
@@ -164,7 +164,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Galleria
                     value={images}
diff --git a/components/doc/gmap/gmapdoc.js b/components/doc/gmap/gmapdoc.js
index 421bd2aed1..9a946b06a6 100644
--- a/components/doc/gmap/gmapdoc.js
+++ b/components/doc/gmap/gmapdoc.js
@@ -131,11 +131,15 @@ export function GMapDoc(props) {
             document.body.appendChild(script);
 
             script.onload = () => {
-                if (callback) callback();
+                if (callback) {
+                    callback();
+                }
             };
         }
 
-        if (existingScript && callback) callback();
+        if (existingScript && callback) {
+            callback();
+        }
     };
 
     const removeGoogleMaps = () => {
@@ -577,7 +581,7 @@ export default function GMapDoc() {
                     Applying <i>p-invalid</i> class to an input element indicates a failed validation.
                 </p>
             </DocSectionText>
-            <Toast ref={toast}></Toast>
+            <Toast ref={toast} />
 
             {googleMapsReady && (
                 <div className="card">
diff --git a/components/doc/gmap/importdoc.js b/components/doc/gmap/importdoc.js
index 2475e6f134..e6acd42bbe 100644
--- a/components/doc/gmap/importdoc.js
+++ b/components/doc/gmap/importdoc.js
@@ -10,7 +10,7 @@ import { GMap } from 'primereact/gmap';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useclickoutside/importdoc.js b/components/doc/hooks/useclickoutside/importdoc.js
index e68e6a182a..1da4f57e20 100644
--- a/components/doc/hooks/useclickoutside/importdoc.js
+++ b/components/doc/hooks/useclickoutside/importdoc.js
@@ -10,7 +10,7 @@ import { useClickOutside } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usecounter/basicdoc.js b/components/doc/hooks/usecounter/basicdoc.js
index bc79129dd9..fe76ca4b12 100644
--- a/components/doc/hooks/usecounter/basicdoc.js
+++ b/components/doc/hooks/usecounter/basicdoc.js
@@ -67,9 +67,9 @@ export default function BasicDemo() {
             <div className="card flex flex-column align-items-center">
                 <span className="font-bold text-4xl mb-5">{count}</span>
                 <div className="flex flex-wrap gap-3">
-                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
-                    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
-                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment} />
+                    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset} />
                 </div>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/hooks/usecounter/importdoc.js b/components/doc/hooks/usecounter/importdoc.js
index e7ed9dc6fc..d4e45c37e3 100644
--- a/components/doc/hooks/usecounter/importdoc.js
+++ b/components/doc/hooks/usecounter/importdoc.js
@@ -10,7 +10,7 @@ import { useCounter } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usecounter/optionsdoc.js b/components/doc/hooks/usecounter/optionsdoc.js
index ecddd4b983..6a5f40c483 100644
--- a/components/doc/hooks/usecounter/optionsdoc.js
+++ b/components/doc/hooks/usecounter/optionsdoc.js
@@ -67,9 +67,9 @@ export default function OptionsDemo() {
             <div className="card flex flex-column align-items-center">
                 <span className="font-bold text-4xl mb-5">{count}</span>
                 <div className="flex flex-wrap gap-3">
-                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
-                    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
-                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment} />
+                    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset} />
                 </div>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/hooks/usedebounce/importdoc.js b/components/doc/hooks/usedebounce/importdoc.js
index cce68227b8..42d9eb4ca6 100644
--- a/components/doc/hooks/usedebounce/importdoc.js
+++ b/components/doc/hooks/usedebounce/importdoc.js
@@ -10,7 +10,7 @@ import { useDebounce } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useeventlistener/importdoc.js b/components/doc/hooks/useeventlistener/importdoc.js
index 0f8d3bc158..64e6262a78 100644
--- a/components/doc/hooks/useeventlistener/importdoc.js
+++ b/components/doc/hooks/useeventlistener/importdoc.js
@@ -10,7 +10,7 @@ import { useEventListener } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usefavicon/importdoc.js b/components/doc/hooks/usefavicon/importdoc.js
index 13bfe0922a..b359e42cc7 100644
--- a/components/doc/hooks/usefavicon/importdoc.js
+++ b/components/doc/hooks/usefavicon/importdoc.js
@@ -10,7 +10,7 @@ import { useFavicon } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useintersectionobserver/basicdoc.js b/components/doc/hooks/useintersectionobserver/basicdoc.js
index 6b117215ae..db06b4ba48 100644
--- a/components/doc/hooks/useintersectionobserver/basicdoc.js
+++ b/components/doc/hooks/useintersectionobserver/basicdoc.js
@@ -71,7 +71,7 @@ export default function BasicDemo() {
                 <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
                     <div className="flex align-items-center" style={{ height: '900px' }}>
                         <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 text-white font-bold bg-primary flex align-items-center justify-content-center')}>
-                            <i className="pi pi-prime text-4xl"></i>
+                            <i className="pi pi-prime text-4xl" />
                         </div>
                     </div>
                 </div>
diff --git a/components/doc/hooks/useintersectionobserver/importdoc.js b/components/doc/hooks/useintersectionobserver/importdoc.js
index d2c5e11400..49078b71ba 100644
--- a/components/doc/hooks/useintersectionobserver/importdoc.js
+++ b/components/doc/hooks/useintersectionobserver/importdoc.js
@@ -10,7 +10,7 @@ import { useIntersectionObserver } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useintersectionobserver/thresholddoc.js b/components/doc/hooks/useintersectionobserver/thresholddoc.js
index f7fbbb0e1e..46ee79fc15 100644
--- a/components/doc/hooks/useintersectionobserver/thresholddoc.js
+++ b/components/doc/hooks/useintersectionobserver/thresholddoc.js
@@ -73,7 +73,7 @@ export default function ThresholdDemo() {
                 <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
                     <div className="flex align-items-center" style={{ height: '900px' }}>
                         <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 font-bold border-1 border-primary flex align-items-center justify-content-center transition-all transition-duration-300', { 'bg-primary': visible })}>
-                            <i className="pi pi-prime text-4xl"></i>
+                            <i className="pi pi-prime text-4xl" />
                         </div>
                     </div>
                 </div>
diff --git a/components/doc/hooks/useinterval/importdoc.js b/components/doc/hooks/useinterval/importdoc.js
index b56bb3217c..0e5a0c03e2 100644
--- a/components/doc/hooks/useinterval/importdoc.js
+++ b/components/doc/hooks/useinterval/importdoc.js
@@ -10,7 +10,7 @@ import { useInterval } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usemounteffect/importdoc.js b/components/doc/hooks/usemounteffect/importdoc.js
index 006fb6cca0..bf7867f6d5 100644
--- a/components/doc/hooks/usemounteffect/importdoc.js
+++ b/components/doc/hooks/usemounteffect/importdoc.js
@@ -10,7 +10,7 @@ import { useMountEffect } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usemouse/importdoc.js b/components/doc/hooks/usemouse/importdoc.js
index 7daaddf0ea..2db86f5506 100644
--- a/components/doc/hooks/usemouse/importdoc.js
+++ b/components/doc/hooks/usemouse/importdoc.js
@@ -10,7 +10,7 @@ import { useMouse } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usemove/basicdoc.js b/components/doc/hooks/usemove/basicdoc.js
index 32b3e3eb3a..568beea6ad 100644
--- a/components/doc/hooks/usemove/basicdoc.js
+++ b/components/doc/hooks/usemove/basicdoc.js
@@ -104,10 +104,10 @@ export default function BasicDemo() {
                             cursor: 'grab'
                         }}
                     >
-                        <i className="pi pi-arrows-alt"></i>
+                        <i className="pi pi-arrows-alt" />
                     </div>
                 </div>
-                <Button onClick={reset} label="Reset" className="p-button-outlined"></Button>
+                <Button onClick={reset} label="Reset" className="p-button-outlined" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/hooks/usemove/horizontaldoc.js b/components/doc/hooks/usemove/horizontaldoc.js
index e9a8dda812..11deed1e28 100644
--- a/components/doc/hooks/usemove/horizontaldoc.js
+++ b/components/doc/hooks/usemove/horizontaldoc.js
@@ -91,7 +91,7 @@ export default function HorizontalDemo() {
                             width: `${x * 100}%`,
                             height: '8px'
                         }}
-                    ></div>
+                    />
                     <div
                         className="absolute block border-circle border-solid border-2 border-teal-500 -ml-2 surface-overlay z-3"
                         style={{
@@ -100,7 +100,7 @@ export default function HorizontalDemo() {
                             left: `calc(${x * 100}%)`,
                             cursor: 'grab'
                         }}
-                    ></div>
+                    />
                 </div>
                 <span className="text-xl">
                     Value: <strong>{Math.round(x * 100)}</strong>
diff --git a/components/doc/hooks/usemove/importdoc.js b/components/doc/hooks/usemove/importdoc.js
index a87b24fbd0..2de49e2ea9 100644
--- a/components/doc/hooks/usemove/importdoc.js
+++ b/components/doc/hooks/usemove/importdoc.js
@@ -10,7 +10,7 @@ import { useMove } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usemove/verticaldoc.js b/components/doc/hooks/usemove/verticaldoc.js
index d074e38515..20d64a40b5 100644
--- a/components/doc/hooks/usemove/verticaldoc.js
+++ b/components/doc/hooks/usemove/verticaldoc.js
@@ -91,7 +91,7 @@ export default function VerticalDemo() {
                             width: '8px',
                             height: `${y * 100}%`
                         }}
-                    ></div>
+                    />
                     <div
                         className="absolute block border-circle border-solid border-2 border-purple-500 -mb-2 surface-overlay z-3"
                         style={{
@@ -100,7 +100,7 @@ export default function VerticalDemo() {
                             bottom: `calc(${y * 100}%)`,
                             cursor: 'grab'
                         }}
-                    ></div>
+                    />
                 </div>
                 <span className="text-xl">
                     Value: <strong>{Math.round(y * 100)}</strong>
diff --git a/components/doc/hooks/useoverlaylistener/basicdoc.js b/components/doc/hooks/useoverlaylistener/basicdoc.js
index d0d3860be7..c9d568409c 100644
--- a/components/doc/hooks/useoverlaylistener/basicdoc.js
+++ b/components/doc/hooks/useoverlaylistener/basicdoc.js
@@ -11,7 +11,9 @@ export function BasicDoc(props) {
     const overlayRef = useRef(null);
 
     const handleEvents = (event, options) => {
-        if (options.valid) setVisible(false);
+        if (options.valid) {
+            setVisible(false);
+        }
     };
 
     const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
diff --git a/components/doc/hooks/useoverlaylistener/importdoc.js b/components/doc/hooks/useoverlaylistener/importdoc.js
index 5b3f51c154..4fe27aa55d 100644
--- a/components/doc/hooks/useoverlaylistener/importdoc.js
+++ b/components/doc/hooks/useoverlaylistener/importdoc.js
@@ -10,7 +10,7 @@ import { useOverlayListener } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useoverlayscrolllistener/importdoc.js b/components/doc/hooks/useoverlayscrolllistener/importdoc.js
index f3a9a93234..afcaeb7083 100644
--- a/components/doc/hooks/useoverlayscrolllistener/importdoc.js
+++ b/components/doc/hooks/useoverlayscrolllistener/importdoc.js
@@ -10,7 +10,7 @@ import { useOverlayScrollListener } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useprevious/importdoc.js b/components/doc/hooks/useprevious/importdoc.js
index ba99ac9737..bfa99b1600 100644
--- a/components/doc/hooks/useprevious/importdoc.js
+++ b/components/doc/hooks/useprevious/importdoc.js
@@ -10,7 +10,7 @@ import { usePrevious } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useresizelistener/importdoc.js b/components/doc/hooks/useresizelistener/importdoc.js
index d4ad9e634a..8a1c9bf641 100644
--- a/components/doc/hooks/useresizelistener/importdoc.js
+++ b/components/doc/hooks/useresizelistener/importdoc.js
@@ -10,7 +10,7 @@ import { useResizeListener } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usestorage/importdoc.js b/components/doc/hooks/usestorage/importdoc.js
index a1f6881305..c8f146d986 100644
--- a/components/doc/hooks/usestorage/importdoc.js
+++ b/components/doc/hooks/usestorage/importdoc.js
@@ -11,7 +11,7 @@ import { useSessionStorage } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/usestorage/localdoc.js b/components/doc/hooks/usestorage/localdoc.js
index 5c396cf623..776c85558e 100644
--- a/components/doc/hooks/usestorage/localdoc.js
+++ b/components/doc/hooks/usestorage/localdoc.js
@@ -58,8 +58,8 @@ export default function LocalDemo() {
             <div className="card flex flex-column align-items-center">
                 <span className="font-bold text-4xl mb-5">{count}</span>
                 <div className="flex flex-wrap gap-3">
-                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)}></Button>
-                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)}></Button>
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)} />
                 </div>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/hooks/usestorage/sessiondoc.js b/components/doc/hooks/usestorage/sessiondoc.js
index a6a919bd1c..02a5af6451 100644
--- a/components/doc/hooks/usestorage/sessiondoc.js
+++ b/components/doc/hooks/usestorage/sessiondoc.js
@@ -58,8 +58,8 @@ export default function SessionDoc() {
             <div className="card flex flex-column align-items-center">
                 <span className="font-bold text-4xl mb-5">{count}</span>
                 <div className="flex flex-wrap gap-3">
-                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)}></Button>
-                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)}></Button>
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)} />
                 </div>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/hooks/usetimeout/importdoc.js b/components/doc/hooks/usetimeout/importdoc.js
index 36e35fb00b..d0b065ba84 100644
--- a/components/doc/hooks/usetimeout/importdoc.js
+++ b/components/doc/hooks/usetimeout/importdoc.js
@@ -10,7 +10,7 @@ import { useTimout } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useunmounteffect/importdoc.js b/components/doc/hooks/useunmounteffect/importdoc.js
index ec8e67ffaf..3941322682 100644
--- a/components/doc/hooks/useunmounteffect/importdoc.js
+++ b/components/doc/hooks/useunmounteffect/importdoc.js
@@ -10,7 +10,7 @@ import { useUnmountEffect } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/hooks/useupdateeffect/importdoc.js b/components/doc/hooks/useupdateeffect/importdoc.js
index 0b7d8fb1fe..00aabd6774 100644
--- a/components/doc/hooks/useupdateeffect/importdoc.js
+++ b/components/doc/hooks/useupdateeffect/importdoc.js
@@ -10,7 +10,7 @@ import { useUpdateEffect } from 'primereact/hooks';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/iconfield/importdoc.js b/components/doc/iconfield/importdoc.js
index bd5a1a51a4..f0bc9f05d6 100644
--- a/components/doc/iconfield/importdoc.js
+++ b/components/doc/iconfield/importdoc.js
@@ -11,7 +11,7 @@ import { InputIcon } from 'primereact/inputicon';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/icons/basicdoc.js b/components/doc/icons/basicdoc.js
index 7edb9255ce..44e920a546 100644
--- a/components/doc/icons/basicdoc.js
+++ b/components/doc/icons/basicdoc.js
@@ -19,10 +19,10 @@ export function BasicDoc(props) {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center gap-3">
-                <i className="pi pi-check"></i>
-                <i className="pi pi-times"></i>
-                <span className="pi pi-search"></span>
-                <span className="pi pi-user"></span>
+                <i className="pi pi-check" />
+                <i className="pi pi-times" />
+                <span className="pi pi-search" />
+                <span className="pi pi-user" />
             </div>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
diff --git a/components/doc/icons/colordoc.js b/components/doc/icons/colordoc.js
index f3e73d34f4..ee33ef4225 100644
--- a/components/doc/icons/colordoc.js
+++ b/components/doc/icons/colordoc.js
@@ -19,10 +19,10 @@ export function ColorDoc(props) {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center align-items-center gap-3">
-                <i className="pi pi-check" style={{ color: 'slateblue' }}></i>
-                <i className="pi pi-times" style={{ color: 'green' }}></i>
-                <i className="pi pi-search" style={{ color: 'var(--primary-color)' }}></i>
-                <i className="pi pi-user" style={{ color: '#708090' }}></i>
+                <i className="pi pi-check" style={{ color: 'slateblue' }} />
+                <i className="pi pi-times" style={{ color: 'green' }} />
+                <i className="pi pi-search" style={{ color: 'var(--primary-color)' }} />
+                <i className="pi pi-user" style={{ color: '#708090' }} />
             </div>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
diff --git a/components/doc/icons/figmadoc.js b/components/doc/icons/figmadoc.js
index 7e554d9b7f..80f7d3f627 100644
--- a/components/doc/icons/figmadoc.js
+++ b/components/doc/icons/figmadoc.js
@@ -8,7 +8,7 @@ export function FigmaDoc(props) {
                 <p>
                   PrimeIcons library is now available on <a href="https://www.figma.com/community/file/1354343849355792252/primeicons" target="_blank" rel="noopener noreferrer">Figma Community</a>. By adding them as a library, you can easily use these
                   icons in your designs.
-              </p>
+                </p>
             </DocSectionText>
         </>
     );
diff --git a/components/doc/icons/listdoc.js b/components/doc/icons/listdoc.js
index f46258e321..b22e005c5a 100644
--- a/components/doc/icons/listdoc.js
+++ b/components/doc/icons/listdoc.js
@@ -19,7 +19,7 @@ export function ListDoc(props) {
         if (event.target.value && icons) {
             let sanitizedInput = event.target.value.replace(/[^\w\s]/gi, '').replace(/\s/g, '');
 
-            var newFilteredIcons = icons.filter((icon) => {
+            let newFilteredIcons = icons.filter((icon) => {
                 return (
                     icon.icon.tags.some((tag) =>
                         tag
@@ -33,7 +33,7 @@ export function ListDoc(props) {
                         .toLowerCase()
                         .includes(sanitizedInput.toLowerCase())
                 );
-            })
+            });
 
             setFilteredIcons(newFilteredIcons);
         }
@@ -42,9 +42,13 @@ export function ListDoc(props) {
     useEffect(() => {
         IconService.getIcons().then((data) => {
             data.sort((icon1, icon2) => {
-                if (icon1.properties.name < icon2.properties.name) return -1;
-                else if (icon1.properties.name < icon2.properties.name) return 1;
-                else return 0;
+                if (icon1.properties.name < icon2.properties.name) {
+                    return -1;
+                } else if (icon1.properties.name < icon2.properties.name) {
+                    return 1;
+                }
+
+                return 0;
             });
 
             setIcons(data);
@@ -71,7 +75,7 @@ export function ListDoc(props) {
                             return (
                                 icon.tags.indexOf('deprecate') === -1 && (
                                     <div className="col-12 md:col-2 mb-5" key={properties.name}>
-                                        <i className={'text-2xl mb-3 text-color-secondary pi pi-' + properties.name}></i>
+                                        <i className={'text-2xl mb-3 text-color-secondary pi pi-' + properties.name} />
                                         <div>pi-{properties.name}</div>
                                     </div>
                                 )
diff --git a/components/doc/icons/sizedoc.js b/components/doc/icons/sizedoc.js
index 4d91098893..61cb0c2d26 100644
--- a/components/doc/icons/sizedoc.js
+++ b/components/doc/icons/sizedoc.js
@@ -17,10 +17,10 @@ export function SizeDoc(props) {
                 <p>Size of an icon is controlled with the fontSize property of the element.</p>
             </DocSectionText>
             <div className="card flex justify-content-center align-items-center gap-3">
-                <i className="pi pi-check" style={{ fontSize: '1rem' }}></i>
-                <i className="pi pi-times" style={{ fontSize: '1.5rem' }}></i>
-                <i className="pi pi-search" style={{ fontSize: '2rem' }}></i>
-                <i className="pi pi-user" style={{ fontSize: '2.5rem' }}></i>
+                <i className="pi pi-check" style={{ fontSize: '1rem' }} />
+                <i className="pi pi-times" style={{ fontSize: '1.5rem' }} />
+                <i className="pi pi-search" style={{ fontSize: '2rem' }} />
+                <i className="pi pi-user" style={{ fontSize: '2.5rem' }} />
             </div>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
diff --git a/components/doc/icons/spindoc.js b/components/doc/icons/spindoc.js
index b03a91a67b..b54d122e3f 100644
--- a/components/doc/icons/spindoc.js
+++ b/components/doc/icons/spindoc.js
@@ -17,8 +17,8 @@ export function SpinDoc(props) {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center gap-3">
-                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
-                <i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }}></i>
+                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }} />
+                <i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }} />
             </div>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
diff --git a/components/doc/image/importdoc.js b/components/doc/image/importdoc.js
index 603b81db1c..d55f23d8a9 100644
--- a/components/doc/image/importdoc.js
+++ b/components/doc/image/importdoc.js
@@ -10,7 +10,7 @@ import { Image } from 'primereact/image';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/image/pt/ptdoc.js b/components/doc/image/pt/ptdoc.js
index c689477d34..958e41c63a 100644
--- a/components/doc/image/pt/ptdoc.js
+++ b/components/doc/image/pt/ptdoc.js
@@ -59,7 +59,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Image
                     src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg"
diff --git a/components/doc/image/templatedoc.js b/components/doc/image/templatedoc.js
index 0a320b1bed..a9f20446d4 100644
--- a/components/doc/image/templatedoc.js
+++ b/components/doc/image/templatedoc.js
@@ -3,7 +3,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { Image } from '@/components/lib/image/Image';
 
 export function TemplateDoc(props) {
-    const icon = <i className="pi pi-search"></i>;
+    const icon = <i className="pi pi-search" />;
 
     const code = {
         basic: `
diff --git a/components/doc/inplace/imagedoc.js b/components/doc/inplace/imagedoc.js
index e3aec0431c..a3b2def575 100644
--- a/components/doc/inplace/imagedoc.js
+++ b/components/doc/inplace/imagedoc.js
@@ -68,7 +68,7 @@ export default function ImageDemo() {
                 <Inplace>
                     <InplaceDisplay>
                         <span className="inline-flex align-items-center">
-                            <span className="pi pi-image"></span>
+                            <span className="pi pi-image" />
                             <span className="ml-2">View Picture</span>
                         </span>
                     </InplaceDisplay>
diff --git a/components/doc/inplace/importdoc.js b/components/doc/inplace/importdoc.js
index a8a1cb5442..cf73bd311a 100644
--- a/components/doc/inplace/importdoc.js
+++ b/components/doc/inplace/importdoc.js
@@ -10,7 +10,7 @@ import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/inplace/lazydoc.js b/components/doc/inplace/lazydoc.js
index adca4f1a30..0ce6123655 100644
--- a/components/doc/inplace/lazydoc.js
+++ b/components/doc/inplace/lazydoc.js
@@ -121,10 +121,10 @@ export default function LazyDemo() {
                     <InplaceDisplay>View Data</InplaceDisplay>
                     <InplaceContent>
                         <DataTable value={products}>
-                            <Column field="code" header="Code"></Column>
-                            <Column field="name" header="Name"></Column>
-                            <Column field="category" header="Category"></Column>
-                            <Column field="quantity" header="Quantity"></Column>
+                            <Column field="code" header="Code" />
+                            <Column field="name" header="Name" />
+                            <Column field="category" header="Category" />
+                            <Column field="quantity" header="Quantity" />
                         </DataTable>
                     </InplaceContent>
                 </Inplace>
diff --git a/components/doc/inplace/pt/ptdoc.js b/components/doc/inplace/pt/ptdoc.js
index 5500a9646d..6f7e45121a 100644
--- a/components/doc/inplace/pt/ptdoc.js
+++ b/components/doc/inplace/pt/ptdoc.js
@@ -70,7 +70,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Inplace
                     pt={{
diff --git a/components/doc/inputgroup/basicdoc.js b/components/doc/inputgroup/basicdoc.js
index c818c9728c..2ba33b0c0d 100644
--- a/components/doc/inputgroup/basicdoc.js
+++ b/components/doc/inputgroup/basicdoc.js
@@ -94,7 +94,7 @@ export default function BasicDemo() {
             <div className="card flex flex-column md:flex-row gap-3">
                 <div className="p-inputgroup flex-1">
                     <span className="p-inputgroup-addon">
-                        <i className="pi pi-user"></i>
+                        <i className="pi pi-user" />
                     </span>
                     <InputText placeholder="Username" />
                 </div>
diff --git a/components/doc/inputgroup/multipledoc.js b/components/doc/inputgroup/multipledoc.js
index ab34cb27a8..839c0c0382 100644
--- a/components/doc/inputgroup/multipledoc.js
+++ b/components/doc/inputgroup/multipledoc.js
@@ -71,10 +71,10 @@ export default function MultipleDemo() {
             <div className="card flex justify-content-center">
                 <div className="p-inputgroup w-full md:w-30rem">
                     <span className="p-inputgroup-addon">
-                        <i className="pi pi-clock"></i>
+                        <i className="pi pi-clock" />
                     </span>
                     <span className="p-inputgroup-addon">
-                        <i className="pi pi-star-fill"></i>
+                        <i className="pi pi-star-fill" />
                     </span>
                     <InputNumber placeholder="Price" />
                     <span className="p-inputgroup-addon">$</span>
diff --git a/components/doc/inputmask/form/hookformdoc.js b/components/doc/inputmask/form/hookformdoc.js
index 599906a5b7..19f969655d 100644
--- a/components/doc/inputmask/form/hookformdoc.js
+++ b/components/doc/inputmask/form/hookformdoc.js
@@ -210,7 +210,7 @@ export default function HookFormDoc() {
                         rules={{ required: 'Phone is required.' }}
                         render={({ field, fieldState }) => (
                             <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
+                                <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)}
                             </>
diff --git a/components/doc/inputmask/importdoc.js b/components/doc/inputmask/importdoc.js
index 1f5a764bd5..b28e882e20 100644
--- a/components/doc/inputmask/importdoc.js
+++ b/components/doc/inputmask/importdoc.js
@@ -10,7 +10,7 @@ import { InputMask } from 'primereact/inputmask';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/inputmask/maskdoc.js b/components/doc/inputmask/maskdoc.js
index 6be68f32cd..80c0dc8304 100644
--- a/components/doc/inputmask/maskdoc.js
+++ b/components/doc/inputmask/maskdoc.js
@@ -79,21 +79,21 @@ export default function MaskDemo() {
                     <label htmlFor="ssn" className="font-bold block mb-2">
                         SSN
                     </label>
-                    <InputMask id="ssn" mask="999-99-9999" placeholder="999-99-9999"></InputMask>
+                    <InputMask id="ssn" mask="999-99-9999" placeholder="999-99-9999" />
                 </div>
 
                 <div className="flex-auto">
                     <label htmlFor="phone" className="font-bold block mb-2">
                         Phone
                     </label>
-                    <InputMask id="phone" mask="(999) 999-9999" placeholder="(999) 999-9999"></InputMask>
+                    <InputMask id="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" />
                 </div>
 
                 <div className="flex-auto">
                     <label htmlFor="serial" className="font-bold block mb-2">
                         Serial
                     </label>
-                    <InputMask id="serial" mask="a*-999-a999" placeholder="a*-999-a999"></InputMask>
+                    <InputMask id="serial" mask="a*-999-a999" placeholder="a*-999-a999" />
                 </div>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/inputmask/pt/ptdoc.js b/components/doc/inputmask/pt/ptdoc.js
index 6bd6b26630..b74edd3049 100644
--- a/components/doc/inputmask/pt/ptdoc.js
+++ b/components/doc/inputmask/pt/ptdoc.js
@@ -78,7 +78,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <InputMask
                     value={value}
diff --git a/components/doc/inputnumber/form/formikdoc.js b/components/doc/inputnumber/form/formikdoc.js
index a08ec920c3..d9dd801e39 100644
--- a/components/doc/inputnumber/form/formikdoc.js
+++ b/components/doc/inputnumber/form/formikdoc.js
@@ -26,11 +26,11 @@ export function FormikDoc(props) {
             }
 
             if (data.year < 1960) {
-                errors.year = `Enter a valid year.`;
+                errors.year = 'Enter a valid year.';
             }
 
             if (data.year > 2050) {
-                errors.year = `Enter a valid year.`;
+                errors.year = 'Enter a valid year.';
             }
 
             return errors;
diff --git a/components/doc/inputnumber/importdoc.js b/components/doc/inputnumber/importdoc.js
index e1a21a5ec7..cfc6613731 100644
--- a/components/doc/inputnumber/importdoc.js
+++ b/components/doc/inputnumber/importdoc.js
@@ -10,7 +10,7 @@ import { InputNumber } from 'primereact/inputnumber';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/inputnumber/pt/ptdoc.js b/components/doc/inputnumber/pt/ptdoc.js
index 49042980ed..a3ea33023b 100644
--- a/components/doc/inputnumber/pt/ptdoc.js
+++ b/components/doc/inputnumber/pt/ptdoc.js
@@ -93,7 +93,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <InputNumber
                     inputId="horizontal-buttons"
diff --git a/components/doc/inputswitch/form/hookformdoc.js b/components/doc/inputswitch/form/hookformdoc.js
index 205879bbda..722cda04aa 100644
--- a/components/doc/inputswitch/form/hookformdoc.js
+++ b/components/doc/inputswitch/form/hookformdoc.js
@@ -188,7 +188,7 @@ export default function HookFormDoc() {
                         rules={{ required: 'Accept is required.' }}
                         render={({ field, fieldState }) => (
                             <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
+                                <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)}
                             </>
diff --git a/components/doc/inputswitch/importdoc.js b/components/doc/inputswitch/importdoc.js
index 25238bf246..193ff907b3 100644
--- a/components/doc/inputswitch/importdoc.js
+++ b/components/doc/inputswitch/importdoc.js
@@ -10,7 +10,7 @@ import { InputSwitch } from 'primereact/inputswitch';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/inputswitch/pt/ptdoc.js b/components/doc/inputswitch/pt/ptdoc.js
index 54518ef23c..fe808de53e 100644
--- a/components/doc/inputswitch/pt/ptdoc.js
+++ b/components/doc/inputswitch/pt/ptdoc.js
@@ -66,7 +66,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <InputSwitch
                     checked={checked}
diff --git a/components/doc/inputtext/form/hookformdoc.js b/components/doc/inputtext/form/hookformdoc.js
index 2d0105d08f..70f7d62725 100644
--- a/components/doc/inputtext/form/hookformdoc.js
+++ b/components/doc/inputtext/form/hookformdoc.js
@@ -197,7 +197,7 @@ export default function HookFormDoc() {
                         rules={{ required: 'Name - Surname is required.' }}
                         render={({ field, fieldState }) => (
                             <>
-                                <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
+                                <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>
diff --git a/components/doc/inputtext/importdoc.js b/components/doc/inputtext/importdoc.js
index 37e8b905d2..75bb0a4059 100644
--- a/components/doc/inputtext/importdoc.js
+++ b/components/doc/inputtext/importdoc.js
@@ -10,7 +10,7 @@ import { InputText } from 'primereact/inputtext';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/inputtextarea/importdoc.js b/components/doc/inputtextarea/importdoc.js
index 1e0a45b7ed..747fe0f710 100644
--- a/components/doc/inputtextarea/importdoc.js
+++ b/components/doc/inputtextarea/importdoc.js
@@ -10,7 +10,7 @@ import { InputTextarea } from 'primereact/inputtextarea';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/inputtextarea/pt/ptdoc.js b/components/doc/inputtextarea/pt/ptdoc.js
index a7d006f0f0..492f002661 100644
--- a/components/doc/inputtextarea/pt/ptdoc.js
+++ b/components/doc/inputtextarea/pt/ptdoc.js
@@ -69,7 +69,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <InputTextarea
                     value={value}
diff --git a/components/doc/installation/examplesdoc.js b/components/doc/installation/examplesdoc.js
index 33a65aebb4..c6025de847 100644
--- a/components/doc/installation/examplesdoc.js
+++ b/components/doc/installation/examplesdoc.js
@@ -8,19 +8,19 @@ export function ExamplesDoc(props) {
             </DocSectionText>
             <div className="flex flex-wrap card justify-content-between gap-3">
                 <a href="https://github.com/primefaces/primereact-examples/tree/main/cra-basic">
-                    <img src="https://primefaces.org/cdn/primereact/images/logos/cra.svg" alt="Create React App" className="w-8rem h-8rem"></img>
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/cra.svg" alt="Create React App" className="w-8rem h-8rem" />
                 </a>
                 <a href="https://github.com/primefaces/primereact-examples/tree/main/nextjs-basic">
-                    <img src="https://primefaces.org/cdn/primereact/images/logos/next-js.svg" alt="Next.JS" className="w-8rem h-8rem"></img>
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/next-js.svg" alt="Next.JS" className="w-8rem h-8rem" />
                 </a>
                 <a href="https://github.com/primefaces/primereact-examples/tree/main/remix-run-basic">
-                    <img src="https://primefaces.org/cdn/primereact/images/logos/remix.png" alt="Create React App" className="w-8rem h-8rem"></img>
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/remix.png" alt="Create React App" className="w-8rem h-8rem" />
                 </a>
                 <a href="https://github.com/primefaces/primereact-examples/tree/main/vite-basic-ts">
-                    <img src="https://primefaces.org/cdn/primereact/images/logos/vite.png" alt="Vite" className="w-8rem h-8rem"></img>
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/vite.png" alt="Vite" className="w-8rem h-8rem" />
                 </a>
                 <a href="https://github.com/refinedev/refine/tree/master/examples/blog-refine-primereact">
-                    <img src="https://primefaces.org/cdn/primereact/images/logos/refine.svg" alt="Refine" className="w-8rem h-8rem"></img>
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/refine.svg" alt="Refine" className="w-8rem h-8rem" />
                 </a>
             </div>
         </>
diff --git a/components/doc/installation/videos/nextjsdoc.js b/components/doc/installation/videos/nextjsdoc.js
index a746d4278c..280d2f6dfb 100644
--- a/components/doc/installation/videos/nextjsdoc.js
+++ b/components/doc/installation/videos/nextjsdoc.js
@@ -13,7 +13,7 @@ export function NextJSDoc(props) {
                 </p>
             </DocSectionText>
             <div className="video-container">
-                <iframe width="560" height="315" src="https://www.youtube.com/embed/OrRffCobuts" frameBorder="0" allowFullScreen title="Getting Started With NextJs"></iframe>
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/OrRffCobuts" frameBorder="0" allowFullScreen title="Getting Started With NextJs" />
             </div>
         </>
     );
diff --git a/components/doc/keyfilter/importdoc.js b/components/doc/keyfilter/importdoc.js
index 37e8b905d2..75bb0a4059 100644
--- a/components/doc/keyfilter/importdoc.js
+++ b/components/doc/keyfilter/importdoc.js
@@ -10,7 +10,7 @@ import { InputText } from 'primereact/inputtext';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/keyfilter/regexdoc.js b/components/doc/keyfilter/regexdoc.js
index a21d8b9ec3..f10ad47c80 100644
--- a/components/doc/keyfilter/regexdoc.js
+++ b/components/doc/keyfilter/regexdoc.js
@@ -70,7 +70,7 @@ export default function RegexDemo() {
                 </div>
                 <div className="flex-auto">
                     <label htmlFor="chars" className="font-bold block mb-2">
-                        Block {`< > * !`}
+                        Block {'< > * !'}
                     </label>
                     <InputText id="chars" keyfilter={/^[^<>*!]+$/} className="w-full" />
                 </div>
diff --git a/components/doc/knob/form/hookformdoc.js b/components/doc/knob/form/hookformdoc.js
index c56c806c4e..4f9252ba51 100644
--- a/components/doc/knob/form/hookformdoc.js
+++ b/components/doc/knob/form/hookformdoc.js
@@ -164,7 +164,7 @@ export default function HookFormDoc() {
         <>
             <DocSectionText {...props}>
                 {/* TO DO: Add demo content. */}
-                <p></p>
+                <p />
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <form onSubmit={handleSubmit(onSubmit)}>
diff --git a/components/doc/knob/importdoc.js b/components/doc/knob/importdoc.js
index d99c28c1d7..7d966656af 100644
--- a/components/doc/knob/importdoc.js
+++ b/components/doc/knob/importdoc.js
@@ -10,7 +10,7 @@ import { Knob } from 'primereact/knob';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/knob/pt/ptdoc.js b/components/doc/knob/pt/ptdoc.js
index 745e11ebdb..ffe01af20c 100644
--- a/components/doc/knob/pt/ptdoc.js
+++ b/components/doc/knob/pt/ptdoc.js
@@ -60,7 +60,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Knob
                     value={value}
diff --git a/components/doc/listbox/form/hookformdoc.js b/components/doc/listbox/form/hookformdoc.js
index 5e6dd45f60..70945f9fef 100644
--- a/components/doc/listbox/form/hookformdoc.js
+++ b/components/doc/listbox/form/hookformdoc.js
@@ -183,7 +183,7 @@ export default function HookFormDoc() {
         <>
             <DocSectionText {...props}>
                 {/* TO DO: Add demo content. */}
-                <p></p>
+                <p />
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
diff --git a/components/doc/listbox/importdoc.js b/components/doc/listbox/importdoc.js
index 61314dd422..4bd1acb0c1 100644
--- a/components/doc/listbox/importdoc.js
+++ b/components/doc/listbox/importdoc.js
@@ -10,7 +10,7 @@ import { ListBox } from 'primereact/listbox';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/listbox/pt/ptdoc.js b/components/doc/listbox/pt/ptdoc.js
index e213c2cfca..3ecfaca9c9 100644
--- a/components/doc/listbox/pt/ptdoc.js
+++ b/components/doc/listbox/pt/ptdoc.js
@@ -101,7 +101,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <ListBox
                     value={selectedCity}
diff --git a/components/doc/megamenu/importdoc.js b/components/doc/megamenu/importdoc.js
index 397c7509a9..fb6e78e212 100644
--- a/components/doc/megamenu/importdoc.js
+++ b/components/doc/megamenu/importdoc.js
@@ -10,7 +10,7 @@ import { MegaMenu } from 'primereact/megamenu';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/megamenu/pt/ptdoc.js b/components/doc/megamenu/pt/ptdoc.js
index 18ca8c38e6..854fcd0260 100644
--- a/components/doc/megamenu/pt/ptdoc.js
+++ b/components/doc/megamenu/pt/ptdoc.js
@@ -393,7 +393,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <MegaMenu
                     model={items}
diff --git a/components/doc/megamenu/templatedoc.js b/components/doc/megamenu/templatedoc.js
index 53a91f8770..3dedb319f7 100644
--- a/components/doc/megamenu/templatedoc.js
+++ b/components/doc/megamenu/templatedoc.js
@@ -19,7 +19,7 @@ export function TemplateDoc(props) {
             return (
                 <a className="flex align-items-center p-3 cursor-pointer mb-2 gap-2 ">
                     <span className="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
-                        <i className={`${item.icon} text-lg`}></i>
+                        <i className={`${item.icon} text-lg`} />
                     </span>
                     <span className="inline-flex flex-column gap-1">
                         <span className="font-medium text-lg text-900">{item.label}</span>
@@ -27,15 +27,15 @@ export function TemplateDoc(props) {
                     </span>
                 </a>
             );
-        } else {
-            return (
-                <div className="flex flex-column align-items-start gap-3">
-                    <img alt="megamenu-demo" src={item.image} className="w-full" />
-                    <span>{item.subtext}</span>
-                    <Button className="p-button p-component p-button-outlined" label={item.label} />
-                </div>
-            );
         }
+
+        return (
+            <div className="flex flex-column align-items-start gap-3">
+                <img alt="megamenu-demo" src={item.image} className="w-full" />
+                <span>{item.subtext}</span>
+                <Button className="p-button p-component p-button-outlined" label={item.label} />
+            </div>
+        );
     };
 
     const items = [
diff --git a/components/doc/mention/autoresizedoc.js b/components/doc/mention/autoresizedoc.js
index bae1d0cd12..011e9bbc97 100644
--- a/components/doc/mention/autoresizedoc.js
+++ b/components/doc/mention/autoresizedoc.js
@@ -12,7 +12,7 @@ export function AutoResizeDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
diff --git a/components/doc/mention/basicdoc.js b/components/doc/mention/basicdoc.js
index 56279b45cf..adbd893dc8 100644
--- a/components/doc/mention/basicdoc.js
+++ b/components/doc/mention/basicdoc.js
@@ -12,7 +12,7 @@ export function BasicDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
diff --git a/components/doc/mention/floatlabeldoc.js b/components/doc/mention/floatlabeldoc.js
index 2a2a9f6ffc..a83d3be4ae 100644
--- a/components/doc/mention/floatlabeldoc.js
+++ b/components/doc/mention/floatlabeldoc.js
@@ -12,7 +12,7 @@ export function FloatLabelDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
diff --git a/components/doc/mention/form/formikdoc.js b/components/doc/mention/form/formikdoc.js
index fca163f9cb..d7f4c8775a 100644
--- a/components/doc/mention/form/formikdoc.js
+++ b/components/doc/mention/form/formikdoc.js
@@ -15,7 +15,7 @@ export function FormikDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
@@ -349,7 +349,7 @@ export default function FormikDoc() {
         <>
             <DocSectionText {...props}>
                 {/* TO DO: Add demo content. */}
-                <p></p>
+                <p />
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <form onSubmit={formik.handleSubmit} className="flex flex-column">
diff --git a/components/doc/mention/form/hookformdoc.js b/components/doc/mention/form/hookformdoc.js
index e099a17216..bcb0a6f06c 100644
--- a/components/doc/mention/form/hookformdoc.js
+++ b/components/doc/mention/form/hookformdoc.js
@@ -33,7 +33,7 @@ export function HookFormDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
diff --git a/components/doc/mention/importdoc.js b/components/doc/mention/importdoc.js
index 2478d89ef4..68c30cad60 100644
--- a/components/doc/mention/importdoc.js
+++ b/components/doc/mention/importdoc.js
@@ -10,7 +10,7 @@ import { Mention } from 'primereact/mention';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/mention/invaliddoc.js b/components/doc/mention/invaliddoc.js
index f7b2161f01..d162d3719a 100644
--- a/components/doc/mention/invaliddoc.js
+++ b/components/doc/mention/invaliddoc.js
@@ -12,7 +12,7 @@ export function InvalidDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
diff --git a/components/doc/mention/pt/ptdoc.js b/components/doc/mention/pt/ptdoc.js
index ad5b6c738f..592204ddeb 100644
--- a/components/doc/mention/pt/ptdoc.js
+++ b/components/doc/mention/pt/ptdoc.js
@@ -12,7 +12,7 @@ export function PTDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
@@ -238,7 +238,7 @@ export default function BasicDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Mention
                     value={value}
diff --git a/components/doc/mention/triggersdoc.js b/components/doc/mention/triggersdoc.js
index 7e65d2dd43..6dcff755dd 100644
--- a/components/doc/mention/triggersdoc.js
+++ b/components/doc/mention/triggersdoc.js
@@ -13,7 +13,7 @@ export function TriggersDoc(props) {
 
     useEffect(() => {
         CustomerService.getCustomersSmall().then((data) => {
-            data.forEach((d) => (d['nickname'] = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
             setCustomers(data);
         });
     }, []);
diff --git a/components/doc/menu/groupdoc.js b/components/doc/menu/groupdoc.js
index 52163546f1..aff5050fc6 100644
--- a/components/doc/menu/groupdoc.js
+++ b/components/doc/menu/groupdoc.js
@@ -139,7 +139,7 @@ export default function GroupDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Toast ref={toast} />
                 <Menu model={items} />
diff --git a/components/doc/menu/importdoc.js b/components/doc/menu/importdoc.js
index 7c89480b05..a9b3cf641d 100644
--- a/components/doc/menu/importdoc.js
+++ b/components/doc/menu/importdoc.js
@@ -10,7 +10,7 @@ import { Menu } from 'primereact/menu';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/menu/popupdoc.js b/components/doc/menu/popupdoc.js
index b0f8c72acc..4b8e20e898 100644
--- a/components/doc/menu/popupdoc.js
+++ b/components/doc/menu/popupdoc.js
@@ -120,7 +120,7 @@ export default function PopupDoc() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
                 <Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
                 <Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
diff --git a/components/doc/menu/pt/ptdoc.js b/components/doc/menu/pt/ptdoc.js
index b5d427352b..623828401a 100644
--- a/components/doc/menu/pt/ptdoc.js
+++ b/components/doc/menu/pt/ptdoc.js
@@ -179,7 +179,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Toast ref={toast} />
                 <Menu
diff --git a/components/doc/menubar/importdoc.js b/components/doc/menubar/importdoc.js
index ebabffb8a9..8690f069fc 100644
--- a/components/doc/menubar/importdoc.js
+++ b/components/doc/menubar/importdoc.js
@@ -10,7 +10,7 @@ import { Menubar } from 'primereact/menubar';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/menubar/pt/ptdoc.js b/components/doc/menubar/pt/ptdoc.js
index 69c8a26d96..1632dad44f 100644
--- a/components/doc/menubar/pt/ptdoc.js
+++ b/components/doc/menubar/pt/ptdoc.js
@@ -437,7 +437,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card relative z-2">
                 <Menubar
                     model={items}
diff --git a/components/doc/menubar/templatedoc.js b/components/doc/menubar/templatedoc.js
index b070134181..9ca7086996 100644
--- a/components/doc/menubar/templatedoc.js
+++ b/components/doc/menubar/templatedoc.js
@@ -76,7 +76,7 @@ export function TemplateDoc(props) {
         }
     ];
 
-    const start = <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" className="mr-2"></img>;
+    const start = <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" className="mr-2" />;
     const end = (
         <div className="flex align-items-center gap-2">
             <InputText placeholder="Search" type="text" className="w-8rem sm:w-auto" />
diff --git a/components/doc/message/importdoc.js b/components/doc/message/importdoc.js
index b8368acafe..a6fdad6e7f 100644
--- a/components/doc/message/importdoc.js
+++ b/components/doc/message/importdoc.js
@@ -10,7 +10,7 @@ import { Message } from 'primereact/message';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/message/pt/ptdoc.js b/components/doc/message/pt/ptdoc.js
index 36887d4147..9797959510 100644
--- a/components/doc/message/pt/ptdoc.js
+++ b/components/doc/message/pt/ptdoc.js
@@ -53,7 +53,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Message
                     text="Message Content"
diff --git a/components/doc/messages/importdoc.js b/components/doc/messages/importdoc.js
index 977cd0c128..bf5f37247a 100644
--- a/components/doc/messages/importdoc.js
+++ b/components/doc/messages/importdoc.js
@@ -10,7 +10,7 @@ import { Messages } from 'primereact/messages';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/messages/pt/ptdoc.js b/components/doc/messages/pt/ptdoc.js
index b675b0167b..6c3bc12177 100644
--- a/components/doc/messages/pt/ptdoc.js
+++ b/components/doc/messages/pt/ptdoc.js
@@ -76,7 +76,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Messages
                     ref={msgs}
diff --git a/components/doc/metergroup/importdoc.js b/components/doc/metergroup/importdoc.js
index 56bae31fe2..e5e2b19cdd 100644
--- a/components/doc/metergroup/importdoc.js
+++ b/components/doc/metergroup/importdoc.js
@@ -10,7 +10,7 @@ import { MeterGroup } from 'primereact/metergroup';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
         </>
     );
diff --git a/components/doc/metergroup/pt/ptdoc.js b/components/doc/metergroup/pt/ptdoc.js
index 69c8a26d96..1632dad44f 100644
--- a/components/doc/metergroup/pt/ptdoc.js
+++ b/components/doc/metergroup/pt/ptdoc.js
@@ -437,7 +437,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card relative z-2">
                 <Menubar
                     model={items}
diff --git a/components/doc/multiselect/form/hookformdoc.js b/components/doc/multiselect/form/hookformdoc.js
index 3a494ad464..fe0b5083f1 100644
--- a/components/doc/multiselect/form/hookformdoc.js
+++ b/components/doc/multiselect/form/hookformdoc.js
@@ -195,7 +195,7 @@ export default function HookFormDoc() {
         <>
             <DocSectionText {...props}>
                 {/* TO DO: Add demo content. */}
-                <p></p>
+                <p />
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-column align-items-center gap-2">
diff --git a/components/doc/multiselect/importdoc.js b/components/doc/multiselect/importdoc.js
index b14e4c6475..c52198a789 100644
--- a/components/doc/multiselect/importdoc.js
+++ b/components/doc/multiselect/importdoc.js
@@ -10,7 +10,7 @@ import { MultiSelect } from 'primereact/multiselect';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/multiselect/pt/ptdoc.js b/components/doc/multiselect/pt/ptdoc.js
index f51d2fc4d6..b9bca8f1cd 100644
--- a/components/doc/multiselect/pt/ptdoc.js
+++ b/components/doc/multiselect/pt/ptdoc.js
@@ -137,7 +137,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <MultiSelect
                     value={selectedCities}
@@ -154,10 +154,10 @@ export default function PTDemo() {
                         item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
                         token: ({ context }) => {
                             switch (context.value.code) {
-                                case 'NY':
-                                    return 'bg-red-300';
-                                case 'RM':
-                                    return 'bg-green-300';
+                            case 'NY':
+                                return 'bg-red-300';
+                            case 'RM':
+                                return 'bg-green-300';
                             }
 
                             return 'bg-gray-100';
diff --git a/components/doc/multistatecheckbox/importdoc.js b/components/doc/multistatecheckbox/importdoc.js
index 9c0bfc6bb0..36b6ad6fc0 100644
--- a/components/doc/multistatecheckbox/importdoc.js
+++ b/components/doc/multistatecheckbox/importdoc.js
@@ -10,7 +10,7 @@ import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/multistatecheckbox/pt/ptdoc.js b/components/doc/multistatecheckbox/pt/ptdoc.js
index 16fa6608ed..b025875313 100644
--- a/components/doc/multistatecheckbox/pt/ptdoc.js
+++ b/components/doc/multistatecheckbox/pt/ptdoc.js
@@ -94,7 +94,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex flex-column align-items-center gap-3">
                 <MultiStateCheckbox
                     value={value}
diff --git a/components/doc/orderlist/basicdoc.js b/components/doc/orderlist/basicdoc.js
index ce435ab957..e32aecf732 100644
--- a/components/doc/orderlist/basicdoc.js
+++ b/components/doc/orderlist/basicdoc.js
@@ -18,7 +18,7 @@ export function BasicDoc(props) {
                 <div className="flex-1 flex flex-column gap-2 xl:mr-8">
                     <span className="font-bold">{item.name}</span>
                     <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
+                        <i className="pi pi-tag text-sm" />
                         <span>{item.category}</span>
                     </div>
                 </div>
@@ -140,7 +140,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
-                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/orderlist/dragdropdoc.js b/components/doc/orderlist/dragdropdoc.js
index 7fb036db13..09d5482f7c 100644
--- a/components/doc/orderlist/dragdropdoc.js
+++ b/components/doc/orderlist/dragdropdoc.js
@@ -18,7 +18,7 @@ export function DragDropDoc(props) {
                 <div className="flex-1 flex flex-column gap-2 xl:mr-8">
                     <span className="font-bold">{item.name}</span>
                     <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
+                        <i className="pi pi-tag text-sm" />
                         <span>{item.category}</span>
                     </div>
                 </div>
@@ -141,7 +141,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
-                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/orderlist/filterdoc.js b/components/doc/orderlist/filterdoc.js
index ebbd729688..592d67e31a 100644
--- a/components/doc/orderlist/filterdoc.js
+++ b/components/doc/orderlist/filterdoc.js
@@ -18,7 +18,7 @@ export function FilterDoc(props) {
                 <div className="flex-1 flex flex-column gap-2 xl:mr-8">
                     <span className="font-bold">{item.name}</span>
                     <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
+                        <i className="pi pi-tag text-sm" />
                         <span>{item.category}</span>
                     </div>
                 </div>
@@ -141,7 +141,7 @@ export default function FilterDemo() {
                 </p>
             </DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
-                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/orderlist/importdoc.js b/components/doc/orderlist/importdoc.js
index 2e92133f3c..06fe60c725 100644
--- a/components/doc/orderlist/importdoc.js
+++ b/components/doc/orderlist/importdoc.js
@@ -10,7 +10,7 @@ import { OrderList } from 'primereact/orderlist';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/orderlist/pt/ptdoc.js b/components/doc/orderlist/pt/ptdoc.js
index a3f71dc847..1dd8ae5ea7 100644
--- a/components/doc/orderlist/pt/ptdoc.js
+++ b/components/doc/orderlist/pt/ptdoc.js
@@ -18,7 +18,7 @@ export function PTDoc(props) {
                 <div className="flex-1 flex flex-column gap-2 xl:mr-8">
                     <span className="font-bold">{item.name}</span>
                     <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
+                        <i className="pi pi-tag text-sm" />
                         <span>{item.category}</span>
                     </div>
                 </div>
@@ -173,7 +173,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card xl:flex xl:justify-content-center">
                 <OrderList
                     dataKey="id"
@@ -188,7 +188,7 @@ export default function PTDemo() {
                         },
                         item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
                     }}
-                ></OrderList>
+                />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/organizationchart/importdoc.js b/components/doc/organizationchart/importdoc.js
index e569200c5a..9c5d074b37 100644
--- a/components/doc/organizationchart/importdoc.js
+++ b/components/doc/organizationchart/importdoc.js
@@ -10,7 +10,7 @@ import { OrganizationChart } from 'primereact/organizationchart';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/organizationchart/pt/ptdoc.js b/components/doc/organizationchart/pt/ptdoc.js
index 3d13edc645..f93fd6b9a6 100644
--- a/components/doc/organizationchart/pt/ptdoc.js
+++ b/components/doc/organizationchart/pt/ptdoc.js
@@ -169,7 +169,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card overflow-x-auto">
                 <OrganizationChart
                     value={data}
diff --git a/components/doc/overlaypanel/basicdoc.js b/components/doc/overlaypanel/basicdoc.js
index a47c526713..97e393e2a1 100644
--- a/components/doc/overlaypanel/basicdoc.js
+++ b/components/doc/overlaypanel/basicdoc.js
@@ -62,7 +62,7 @@ export default function BasicDemo() {
             <div className="card flex justify-content-center">
                 <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
                 <OverlayPanel ref={op}>
-                    <img src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg" alt="Bamboo Watch"></img>
+                    <img src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
                 </OverlayPanel>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/overlaypanel/datatabledoc.js b/components/doc/overlaypanel/datatabledoc.js
index 636c2f0bf8..ce3abdc748 100644
--- a/components/doc/overlaypanel/datatabledoc.js
+++ b/components/doc/overlaypanel/datatabledoc.js
@@ -15,7 +15,7 @@ export function DataTableDoc(props) {
     const selectedProductContent = selectedProduct && (
         <div className="p-5 surface-card shadow-2 border-round">
             <div className="relative">
-                <img src={'https://primefaces.org/cdn/primereact/images/product/' + selectedProduct.image} alt={selectedProduct.name}></img>
+                <img src={'https://primefaces.org/cdn/primereact/images/product/' + selectedProduct.image} alt={selectedProduct.name} />
             </div>
             <div className="flex align-items-center justify-content-between mt-3 mb-2">
                 <span className="text-900 font-medium text-xl">{selectedProduct.name}</span>
diff --git a/components/doc/overlaypanel/importdoc.js b/components/doc/overlaypanel/importdoc.js
index b586ca12d0..13149a1c74 100644
--- a/components/doc/overlaypanel/importdoc.js
+++ b/components/doc/overlaypanel/importdoc.js
@@ -10,7 +10,7 @@ import { OverlayPanel } from 'primereact/overlaypanel';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/overlaypanel/pt/ptdoc.js b/components/doc/overlaypanel/pt/ptdoc.js
index 9b739bb301..cf8e10bbf7 100644
--- a/components/doc/overlaypanel/pt/ptdoc.js
+++ b/components/doc/overlaypanel/pt/ptdoc.js
@@ -67,7 +67,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
 
diff --git a/components/doc/paginator/importdoc.js b/components/doc/paginator/importdoc.js
index fcd84bc9fc..a5e3031e46 100644
--- a/components/doc/paginator/importdoc.js
+++ b/components/doc/paginator/importdoc.js
@@ -10,7 +10,7 @@ import { Paginator } from 'primereact/paginator';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/paginator/pt/ptdoc.js b/components/doc/paginator/pt/ptdoc.js
index 4186dacf39..9ec891171d 100644
--- a/components/doc/paginator/pt/ptdoc.js
+++ b/components/doc/paginator/pt/ptdoc.js
@@ -93,7 +93,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Paginator
                     first={first}
diff --git a/components/doc/paginator/templatedoc.js b/components/doc/paginator/templatedoc.js
index 8dc34faaac..6db2ff8bed 100644
--- a/components/doc/paginator/templatedoc.js
+++ b/components/doc/paginator/templatedoc.js
@@ -16,7 +16,7 @@ export function TemplateDoc(props) {
     const [rows, setRows] = useState([10, 10, 10]);
 
     const [currentPage, setCurrentPage] = useState(1);
-    const [pageInputTooltip, setPageInputTooltip] = useState("Press 'Enter' key to go to this page.");
+    const [pageInputTooltip, setPageInputTooltip] = useState('Press \'Enter\' key to go to this page.');
 
     const onPageChange = (e, index) => {
         setFirst(first.map((f, i) => (index === i ? e.first : f)));
@@ -39,7 +39,7 @@ export function TemplateDoc(props) {
                 _first[0] = currentPage ? options.rows * (page - 1) : 0;
 
                 setFirst(_first);
-                setPageInputTooltip("Press 'Enter' key to go to this page.");
+                setPageInputTooltip('Press \'Enter\' key to go to this page.');
             }
         }
     };
diff --git a/components/doc/panel/importdoc.js b/components/doc/panel/importdoc.js
index fdfe930ff4..8b91952d77 100644
--- a/components/doc/panel/importdoc.js
+++ b/components/doc/panel/importdoc.js
@@ -10,7 +10,7 @@ import { Panel } from 'primereact/panel';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/panel/pt/ptdoc.js b/components/doc/panel/pt/ptdoc.js
index 66914bb2e4..18ae0d2aee 100644
--- a/components/doc/panel/pt/ptdoc.js
+++ b/components/doc/panel/pt/ptdoc.js
@@ -71,7 +71,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Panel
                     header="Header"
diff --git a/components/doc/panel/templatedoc.js b/components/doc/panel/templatedoc.js
index cec4534e35..c343e7c883 100644
--- a/components/doc/panel/templatedoc.js
+++ b/components/doc/panel/templatedoc.js
@@ -38,7 +38,7 @@ export function TemplateDoc(props) {
                 <div>
                     <Menu model={items} popup ref={configMenu} id="config_menu" />
                     <button className="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
-                        <span className="pi pi-cog"></span>
+                        <span className="pi pi-cog" />
                     </button>
                     {options.togglerElement}
                 </div>
@@ -52,8 +52,8 @@ export function TemplateDoc(props) {
         return (
             <div className={className}>
                 <div className="flex align-items-center gap-2">
-                    <Button icon="pi pi-user" rounded text></Button>
-                    <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
+                    <Button icon="pi pi-user" rounded text />
+                    <Button icon="pi pi-bookmark" severity="secondary" rounded text />
                 </div>
                 <span className="p-text-secondary">Updated 2 hours ago</span>
             </div>
diff --git a/components/doc/panelmenu/importdoc.js b/components/doc/panelmenu/importdoc.js
index 9c98375525..8cf4099294 100644
--- a/components/doc/panelmenu/importdoc.js
+++ b/components/doc/panelmenu/importdoc.js
@@ -10,7 +10,7 @@ import { PanelMenu } from 'primereact/panelmenu';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/panelmenu/pt/ptdoc.js b/components/doc/panelmenu/pt/ptdoc.js
index ae4a31ee36..888aa68939 100644
--- a/components/doc/panelmenu/pt/ptdoc.js
+++ b/components/doc/panelmenu/pt/ptdoc.js
@@ -406,7 +406,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <PanelMenu
                     model={items}
diff --git a/components/doc/password/importdoc.js b/components/doc/password/importdoc.js
index e62579b635..4e8dee2aa6 100644
--- a/components/doc/password/importdoc.js
+++ b/components/doc/password/importdoc.js
@@ -10,7 +10,7 @@ import { Password } from 'primereact/password';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/password/pt/ptdoc.js b/components/doc/password/pt/ptdoc.js
index f46e4ae927..b9c44faed8 100644
--- a/components/doc/password/pt/ptdoc.js
+++ b/components/doc/password/pt/ptdoc.js
@@ -60,7 +60,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Password
                     value={value}
diff --git a/components/doc/picklist/basicdoc.js b/components/doc/picklist/basicdoc.js
index fa73e86b8f..eb611115df 100644
--- a/components/doc/picklist/basicdoc.js
+++ b/components/doc/picklist/basicdoc.js
@@ -24,7 +24,7 @@ export function BasicDoc(props) {
                 <div className="flex-1 flex flex-column gap-2">
                     <span className="font-bold">{item.name}</span>
                     <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
+                        <i className="pi pi-tag text-sm" />
                         <span>{item.category}</span>
                     </div>
                 </div>
diff --git a/components/doc/picklist/filterdoc.js b/components/doc/picklist/filterdoc.js
index f340ee105d..b3a303a26a 100644
--- a/components/doc/picklist/filterdoc.js
+++ b/components/doc/picklist/filterdoc.js
@@ -24,7 +24,7 @@ export function FilterDoc(props) {
                 <div className="flex-1 flex flex-column gap-2">
                     <span className="font-bold">{item.name}</span>
                     <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
+                        <i className="pi pi-tag text-sm" />
                         <span>{item.category}</span>
                     </div>
                 </div>
diff --git a/components/doc/picklist/importdoc.js b/components/doc/picklist/importdoc.js
index 86b430f21a..e98d714fa4 100644
--- a/components/doc/picklist/importdoc.js
+++ b/components/doc/picklist/importdoc.js
@@ -10,7 +10,7 @@ import { PickList } from 'primereact/picklist';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/picklist/pt/ptdoc.js b/components/doc/picklist/pt/ptdoc.js
index 5cb21a5fce..54ff0572cc 100644
--- a/components/doc/picklist/pt/ptdoc.js
+++ b/components/doc/picklist/pt/ptdoc.js
@@ -24,7 +24,7 @@ export function PTDoc(props) {
                 <div className="flex-1 flex flex-column gap-2">
                     <span className="font-bold">{item.name}</span>
                     <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
+                        <i className="pi pi-tag text-sm" />
                         <span>{item.category}</span>
                     </div>
                 </div>
@@ -215,7 +215,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <PickList
                     dataKey="id"
diff --git a/components/doc/progressbar/basicdoc.js b/components/doc/progressbar/basicdoc.js
index 5427d6ca38..d968fecb56 100644
--- a/components/doc/progressbar/basicdoc.js
+++ b/components/doc/progressbar/basicdoc.js
@@ -41,7 +41,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <ProgressBar value={50}></ProgressBar>
+                <ProgressBar value={50} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/progressbar/dynamicdoc.js b/components/doc/progressbar/dynamicdoc.js
index e9be170dec..191745b54e 100644
--- a/components/doc/progressbar/dynamicdoc.js
+++ b/components/doc/progressbar/dynamicdoc.js
@@ -13,7 +13,7 @@ export function DynamicDoc(props) {
         let _val = value;
 
         interval.current = setInterval(() => {
-            _val += Math.floor(Math.random() * 10) + 1;
+            _val = _val + (Math.floor(Math.random() * 10) + 1);
 
             if (_val >= 100) {
                 _val = 100;
@@ -126,8 +126,8 @@ export default function DynamicDemo() {
                 <p>Value is reactive so updating it dynamically changes the bar as well.</p>
             </DocSectionText>
             <div className="card">
-                <Toast ref={toast}></Toast>
-                <ProgressBar value={value}></ProgressBar>
+                <Toast ref={toast} />
+                <ProgressBar value={value} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/progressbar/importdoc.js b/components/doc/progressbar/importdoc.js
index 42ff7bfe70..7986bbcb51 100644
--- a/components/doc/progressbar/importdoc.js
+++ b/components/doc/progressbar/importdoc.js
@@ -10,7 +10,7 @@ import { ProgressBar } from 'primereact/progressbar';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/progressbar/indeterminatedoc.js b/components/doc/progressbar/indeterminatedoc.js
index 440e673beb..f1bd827de3 100644
--- a/components/doc/progressbar/indeterminatedoc.js
+++ b/components/doc/progressbar/indeterminatedoc.js
@@ -41,7 +41,7 @@ export default function IndeterminateDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
+                <ProgressBar mode="indeterminate" style={{ height: '6px' }} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/progressbar/pt/ptdoc.js b/components/doc/progressbar/pt/ptdoc.js
index 72ab194bdf..cdf47c9ca2 100644
--- a/components/doc/progressbar/pt/ptdoc.js
+++ b/components/doc/progressbar/pt/ptdoc.js
@@ -50,14 +50,14 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <ProgressBar
                     value={50}
                     pt={{
                         value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
                     }}
-                ></ProgressBar>
+                />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/progressbar/templatedoc.js b/components/doc/progressbar/templatedoc.js
index ff8635a360..162f6ad508 100644
--- a/components/doc/progressbar/templatedoc.js
+++ b/components/doc/progressbar/templatedoc.js
@@ -66,7 +66,7 @@ export default function TemplateDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <ProgressBar value={40} displayValueTemplate={valueTemplate}></ProgressBar>
+                <ProgressBar value={40} displayValueTemplate={valueTemplate} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/progressspinner/importdoc.js b/components/doc/progressspinner/importdoc.js
index 56b2d91b7a..4b73f36378 100644
--- a/components/doc/progressspinner/importdoc.js
+++ b/components/doc/progressspinner/importdoc.js
@@ -10,7 +10,7 @@ import { ProgressSpinner } from 'primereact/progressspinner';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/progressspinner/pt/ptdoc.js b/components/doc/progressspinner/pt/ptdoc.js
index 9beb627e84..4b1a93a44e 100644
--- a/components/doc/progressspinner/pt/ptdoc.js
+++ b/components/doc/progressspinner/pt/ptdoc.js
@@ -50,14 +50,14 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <ProgressSpinner
                     pt={{
                         spinner: { style: { animationDuration: '0s' } },
                         circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
                     }}
-                ></ProgressSpinner>
+                />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/radiobutton/disableddoc.js b/components/doc/radiobutton/disableddoc.js
index 5d3d2209d9..3e2e5b8741 100644
--- a/components/doc/radiobutton/disableddoc.js
+++ b/components/doc/radiobutton/disableddoc.js
@@ -41,7 +41,7 @@ export default function DisabledDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <RadioButton checked disabled></RadioButton>
+                <RadioButton checked disabled />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/radiobutton/importdoc.js b/components/doc/radiobutton/importdoc.js
index 67b1b9d25d..0c243a87a2 100644
--- a/components/doc/radiobutton/importdoc.js
+++ b/components/doc/radiobutton/importdoc.js
@@ -10,7 +10,7 @@ import { RadioButton } from 'primereact/radiobutton';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/radiobutton/pt/ptdoc.js b/components/doc/radiobutton/pt/ptdoc.js
index 46e58e28a9..899a0b08f5 100644
--- a/components/doc/radiobutton/pt/ptdoc.js
+++ b/components/doc/radiobutton/pt/ptdoc.js
@@ -123,7 +123,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <div className="flex flex-column gap-3">
                     {categories.map((category) => {
diff --git a/components/doc/rating/importdoc.js b/components/doc/rating/importdoc.js
index 4fc1e4e51b..eb35bea5bd 100644
--- a/components/doc/rating/importdoc.js
+++ b/components/doc/rating/importdoc.js
@@ -10,7 +10,7 @@ import { Rating } from 'primereact/rating';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/rating/pt/ptdoc.js b/components/doc/rating/pt/ptdoc.js
index df9f479a53..469453e0b4 100644
--- a/components/doc/rating/pt/ptdoc.js
+++ b/components/doc/rating/pt/ptdoc.js
@@ -60,7 +60,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Rating
                     value={value}
diff --git a/components/doc/ripple/importdoc.js b/components/doc/ripple/importdoc.js
index ef53f717e7..b8a4b31626 100644
--- a/components/doc/ripple/importdoc.js
+++ b/components/doc/ripple/importdoc.js
@@ -10,7 +10,7 @@ import { Ripple } from 'primereact/ripple';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/scrollpanel/importdoc.js b/components/doc/scrollpanel/importdoc.js
index 2d2f29dbd6..48e6d590c3 100644
--- a/components/doc/scrollpanel/importdoc.js
+++ b/components/doc/scrollpanel/importdoc.js
@@ -10,7 +10,7 @@ import { ScrollPanel } from 'primereact/scrollpanel';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/scrollpanel/pt/ptdoc.js b/components/doc/scrollpanel/pt/ptdoc.js
index 4a7bebaa2f..b352fa9268 100644
--- a/components/doc/scrollpanel/pt/ptdoc.js
+++ b/components/doc/scrollpanel/pt/ptdoc.js
@@ -95,7 +95,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <ScrollPanel pt={{ root: { style: { width: '100%', height: '200px' } }, bary: { className: 'bg-primary' } }}>
                     <p>
diff --git a/components/doc/scrolltop/basicdoc.js b/components/doc/scrolltop/basicdoc.js
index 45d12a8c38..e1e0ebf327 100644
--- a/components/doc/scrolltop/basicdoc.js
+++ b/components/doc/scrolltop/basicdoc.js
@@ -44,7 +44,7 @@ export default function BasicDemo() {
             </DocSectionText>
             <div className="card flex flex-column align-items-center">
                 <p>Scroll down the page to display the ScrollTo component.</p>
-                <i className="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite text-2xl" style={{ fontSize: '2rem', marginBottom: '30rem' }}></i>
+                <i className="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite text-2xl" style={{ fontSize: '2rem', marginBottom: '30rem' }} />
                 <ScrollTop />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/scrolltop/importdoc.js b/components/doc/scrolltop/importdoc.js
index fe2b513ea8..b51120b535 100644
--- a/components/doc/scrolltop/importdoc.js
+++ b/components/doc/scrolltop/importdoc.js
@@ -10,7 +10,7 @@ import { ScrollTop } from 'primereact/scrolltop';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/scrolltop/pt/ptdoc.js b/components/doc/scrolltop/pt/ptdoc.js
index 5b5fe75311..921483e84d 100644
--- a/components/doc/scrolltop/pt/ptdoc.js
+++ b/components/doc/scrolltop/pt/ptdoc.js
@@ -72,7 +72,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <div style={{ width: '250px', height: '200px', overflow: 'auto' }}>
                     <p>
diff --git a/components/doc/selectbutton/importdoc.js b/components/doc/selectbutton/importdoc.js
index 4e0fab102a..e3cd0d89ae 100644
--- a/components/doc/selectbutton/importdoc.js
+++ b/components/doc/selectbutton/importdoc.js
@@ -10,7 +10,7 @@ import { SelectButton } from 'primereact/selectbutton';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/selectbutton/pt/ptdoc.js b/components/doc/selectbutton/pt/ptdoc.js
index 874318aadd..454b1a8930 100644
--- a/components/doc/selectbutton/pt/ptdoc.js
+++ b/components/doc/selectbutton/pt/ptdoc.js
@@ -66,7 +66,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <SelectButton
                     value={value}
diff --git a/components/doc/selectbutton/templatedoc.js b/components/doc/selectbutton/templatedoc.js
index f443637b29..a3dee71799 100644
--- a/components/doc/selectbutton/templatedoc.js
+++ b/components/doc/selectbutton/templatedoc.js
@@ -13,7 +13,7 @@ export function TemplateDoc(props) {
     ];
 
     const justifyTemplate = (option) => {
-        return <i className={option.icon}></i>;
+        return <i className={option.icon} />;
     };
 
     const code = {
diff --git a/components/doc/selectbutton/theming/styleddoc.js b/components/doc/selectbutton/theming/styleddoc.js
index 51c3fdf25d..c881af9065 100644
--- a/components/doc/selectbutton/theming/styleddoc.js
+++ b/components/doc/selectbutton/theming/styleddoc.js
@@ -6,7 +6,7 @@ export function StyledDoc(props) {
             <DocSectionText {...props}>
                 <p>List of class names used in the styled mode.</p>
             </DocSectionText>
-            <div className="doc-tablewrapper"></div>
+            <div className="doc-tablewrapper" />
         </>
     );
 }
diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index 70a7522f80..1e7095e0fa 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -659,7 +659,7 @@ export default function HeadlessDemo() {
                                             <span className="font-semibold text-2xl text-primary">Your Logo</span>
                                         </span>
                                         <span>
-                                            <Button type="button" ref={closeIconRef} onClick={(e) => hide(e)} icon="pi pi-times" rounded outlined className="h-2rem w-2rem"></Button>
+                                            <Button type="button" ref={closeIconRef} onClick={(e) => hide(e)} icon="pi pi-times" rounded outlined className="h-2rem w-2rem" />
                                         </span>
                                     </div>
                                     <div className="overflow-y-auto">
@@ -668,21 +668,21 @@ export default function HeadlessDemo() {
                                                 <StyleClass nodeRef={btnRef1} selector="@next" enterClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
                                                     <div ref={btnRef1} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
                                                         <span className="font-medium">FAVORITES</span>
-                                                        <i className="pi pi-chevron-down"></i>
+                                                        <i className="pi pi-chevron-down" />
                                                         <Ripple />
                                                     </div>
                                                 </StyleClass>
                                                 <ul className="list-none p-0 m-0 overflow-hidden">
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-home mr-2"></i>
+                                                            <i className="pi pi-home mr-2" />
                                                             <span className="font-medium">Dashboard</span>
                                                             <Ripple />
                                                         </a>
                                                     </li>
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-bookmark mr-2"></i>
+                                                            <i className="pi pi-bookmark mr-2" />
                                                             <span className="font-medium">Bookmarks</span>
                                                             <Ripple />
                                                         </a>
@@ -690,9 +690,9 @@ export default function HeadlessDemo() {
                                                     <li>
                                                         <StyleClass nodeRef={btnRef2} selector="@next" enterClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
                                                             <a ref={btnRef2} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                                <i className="pi pi-chart-line mr-2"></i>
+                                                                <i className="pi pi-chart-line mr-2" />
                                                                 <span className="font-medium">Reports</span>
-                                                                <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                                <i className="pi pi-chevron-down ml-auto mr-1" />
                                                                 <Ripple />
                                                             </a>
                                                         </StyleClass>
@@ -700,23 +700,23 @@ export default function HeadlessDemo() {
                                                             <li>
                                                                 <StyleClass nodeRef={btnRef3} selector="@next" enterClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
                                                                     <a ref={btnRef3} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                                        <i className="pi pi-chart-line mr-2"></i>
+                                                                        <i className="pi pi-chart-line mr-2" />
                                                                         <span className="font-medium">Revenue</span>
-                                                                        <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                                        <i className="pi pi-chevron-down ml-auto mr-1" />
                                                                         <Ripple />
                                                                     </a>
                                                                 </StyleClass>
                                                                 <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
                                                                     <li>
                                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                                            <i className="pi pi-table mr-2"></i>
+                                                                            <i className="pi pi-table mr-2" />
                                                                             <span className="font-medium">View</span>
                                                                             <Ripple />
                                                                         </a>
                                                                     </li>
                                                                     <li>
                                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                                            <i className="pi pi-search mr-2"></i>
+                                                                            <i className="pi pi-search mr-2" />
                                                                             <span className="font-medium">Search</span>
                                                                             <Ripple />
                                                                         </a>
@@ -725,7 +725,7 @@ export default function HeadlessDemo() {
                                                             </li>
                                                             <li>
                                                                 <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                                    <i className="pi pi-chart-line mr-2"></i>
+                                                                    <i className="pi pi-chart-line mr-2" />
                                                                     <span className="font-medium">Expenses</span>
                                                                     <Ripple />
                                                                 </a>
@@ -734,14 +734,14 @@ export default function HeadlessDemo() {
                                                     </li>
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-users mr-2"></i>
+                                                            <i className="pi pi-users mr-2" />
                                                             <span className="font-medium">Team</span>
                                                             <Ripple />
                                                         </a>
                                                     </li>
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-comments mr-2"></i>
+                                                            <i className="pi pi-comments mr-2" />
                                                             <span className="font-medium">Messages</span>
                                                             <span className="inline-flex align-items-center justify-content-center ml-auto bg-blue-500 text-0 border-circle" style={{ minWidth: '1.5rem', height: '1.5rem' }}>
                                                                 3
@@ -751,14 +751,14 @@ export default function HeadlessDemo() {
                                                     </li>
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-calendar mr-2"></i>
+                                                            <i className="pi pi-calendar mr-2" />
                                                             <span className="font-medium">Calendar</span>
                                                             <Ripple />
                                                         </a>
                                                     </li>
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-cog mr-2"></i>
+                                                            <i className="pi pi-cog mr-2" />
                                                             <span className="font-medium">Settings</span>
                                                             <Ripple />
                                                         </a>
@@ -771,28 +771,28 @@ export default function HeadlessDemo() {
                                                 <StyleClass nodeRef={btnRef4} selector="@next" enterClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
                                                     <div ref={btnRef4} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
                                                         <span className="font-medium">APPLICATION</span>
-                                                        <i className="pi pi-chevron-down"></i>
+                                                        <i className="pi pi-chevron-down" />
                                                         <Ripple />
                                                     </div>
                                                 </StyleClass>
                                                 <ul className="list-none p-0 m-0 overflow-hidden">
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-folder mr-2"></i>
+                                                            <i className="pi pi-folder mr-2" />
                                                             <span className="font-medium">Projects</span>
                                                             <Ripple />
                                                         </a>
                                                     </li>
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-chart-bar mr-2"></i>
+                                                            <i className="pi pi-chart-bar mr-2" />
                                                             <span className="font-medium">Performance</span>
                                                             <Ripple />
                                                         </a>
                                                     </li>
                                                     <li>
                                                         <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
-                                                            <i className="pi pi-cog mr-2"></i>
+                                                            <i className="pi pi-cog mr-2" />
                                                             <span className="font-medium">Settings</span>
                                                             <Ripple />
                                                         </a>
@@ -812,7 +812,7 @@ export default function HeadlessDemo() {
                             </div>
                         </div>
                     )}
-                ></Sidebar>
+                />
                 <Button icon="pi pi-bars" onClick={() => setVisible(true)} />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/sidebar/importdoc.js b/components/doc/sidebar/importdoc.js
index c967446f7e..ff9a810b58 100644
--- a/components/doc/sidebar/importdoc.js
+++ b/components/doc/sidebar/importdoc.js
@@ -10,7 +10,7 @@ import { Sidebar } from 'primereact/sidebar';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/sidebar/pt/ptdoc.js b/components/doc/sidebar/pt/ptdoc.js
index 62ba728535..f9655970f3 100644
--- a/components/doc/sidebar/pt/ptdoc.js
+++ b/components/doc/sidebar/pt/ptdoc.js
@@ -82,7 +82,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Sidebar
                     pt={{
diff --git a/components/doc/skeleton/carddoc.js b/components/doc/skeleton/carddoc.js
index 556a0bf084..a4df881003 100644
--- a/components/doc/skeleton/carddoc.js
+++ b/components/doc/skeleton/carddoc.js
@@ -83,17 +83,17 @@ export default function CardDemo() {
             <div className="card">
                 <div className="border-round border-1 surface-border p-4 surface-card">
                     <div className="flex mb-3">
-                        <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="4rem" className="mr-2" />
                         <div>
-                            <Skeleton width="10rem" className="mb-2"></Skeleton>
-                            <Skeleton width="5rem" className="mb-2"></Skeleton>
-                            <Skeleton height=".5rem"></Skeleton>
+                            <Skeleton width="10rem" className="mb-2" />
+                            <Skeleton width="5rem" className="mb-2" />
+                            <Skeleton height=".5rem" />
                         </div>
                     </div>
-                    <Skeleton width="100%" height="150px"></Skeleton>
+                    <Skeleton width="100%" height="150px" />
                     <div className="flex justify-content-between mt-3">
-                        <Skeleton width="4rem" height="2rem"></Skeleton>
-                        <Skeleton width="4rem" height="2rem"></Skeleton>
+                        <Skeleton width="4rem" height="2rem" />
+                        <Skeleton width="4rem" height="2rem" />
                     </div>
                 </div>
             </div>
diff --git a/components/doc/skeleton/datatabledoc.js b/components/doc/skeleton/datatabledoc.js
index 090d646289..39b535a802 100644
--- a/components/doc/skeleton/datatabledoc.js
+++ b/components/doc/skeleton/datatabledoc.js
@@ -67,10 +67,10 @@ export default function DataTableDemo() {
             </DocSectionText>
             <div className="card">
                 <DataTable value={items} className="p-datatable-striped">
-                    <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />}></Column>
-                    <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />}></Column>
-                    <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />}></Column>
-                    <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />}></Column>
+                    <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />} />
+                    <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />} />
+                    <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />} />
+                    <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />} />
                 </DataTable>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/skeleton/importdoc.js b/components/doc/skeleton/importdoc.js
index efc4d99933..ee3dd17adc 100644
--- a/components/doc/skeleton/importdoc.js
+++ b/components/doc/skeleton/importdoc.js
@@ -10,7 +10,7 @@ import { Skeleton } from 'primereact/skeleton';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/skeleton/listdoc.js b/components/doc/skeleton/listdoc.js
index a68ffe494b..2f9307bffe 100644
--- a/components/doc/skeleton/listdoc.js
+++ b/components/doc/skeleton/listdoc.js
@@ -160,37 +160,37 @@ export default function ListDemo() {
                     <ul className="m-0 p-0 list-none">
                         <li className="mb-3">
                             <div className="flex">
-                                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
                                 <div style={{ flex: '1' }}>
-                                    <Skeleton width="100%" className="mb-2"></Skeleton>
-                                    <Skeleton width="75%"></Skeleton>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
                                 </div>
                             </div>
                         </li>
                         <li className="mb-3">
                             <div className="flex">
-                                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
                                 <div style={{ flex: '1' }}>
-                                    <Skeleton width="100%" className="mb-2"></Skeleton>
-                                    <Skeleton width="75%"></Skeleton>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
                                 </div>
                             </div>
                         </li>
                         <li className="mb-3">
                             <div className="flex">
-                                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
                                 <div style={{ flex: '1' }}>
-                                    <Skeleton width="100%" className="mb-2"></Skeleton>
-                                    <Skeleton width="75%"></Skeleton>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
                                 </div>
                             </div>
                         </li>
                         <li>
                             <div className="flex">
-                                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
                                 <div style={{ flex: '1' }}>
-                                    <Skeleton width="100%" className="mb-2"></Skeleton>
-                                    <Skeleton width="75%"></Skeleton>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
                                 </div>
                             </div>
                         </li>
diff --git a/components/doc/skeleton/pt/ptdoc.js b/components/doc/skeleton/pt/ptdoc.js
index 13e24ff54e..82328a9e97 100644
--- a/components/doc/skeleton/pt/ptdoc.js
+++ b/components/doc/skeleton/pt/ptdoc.js
@@ -47,7 +47,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Skeleton
                     pt={{
diff --git a/components/doc/skeleton/shapesdoc.js b/components/doc/skeleton/shapesdoc.js
index 0451790464..3046a212cf 100644
--- a/components/doc/skeleton/shapesdoc.js
+++ b/components/doc/skeleton/shapesdoc.js
@@ -138,36 +138,36 @@ export default function ShapesDemo() {
                 <div className="flex flex-wrap">
                     <div className="w-full md:w-6 p-3">
                         <h5>Rectangle</h5>
-                        <Skeleton className="mb-2"></Skeleton>
-                        <Skeleton width="10rem" className="mb-2"></Skeleton>
-                        <Skeleton width="5rem" className="mb-2"></Skeleton>
-                        <Skeleton height="2rem" className="mb-2"></Skeleton>
-                        <Skeleton width="10rem" height="4rem"></Skeleton>
+                        <Skeleton className="mb-2" />
+                        <Skeleton width="10rem" className="mb-2" />
+                        <Skeleton width="5rem" className="mb-2" />
+                        <Skeleton height="2rem" className="mb-2" />
+                        <Skeleton width="10rem" height="4rem" />
                     </div>
                     <div className="w-full md:w-6 p-3">
                         <h5>Rounded</h5>
-                        <Skeleton className="mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="10rem" className="mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="5rem" borderRadius="16px" className="mb-2"></Skeleton>
-                        <Skeleton height="2rem" className="mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                        <Skeleton className="mb-2" borderRadius="16px" />
+                        <Skeleton width="10rem" className="mb-2" borderRadius="16px" />
+                        <Skeleton width="5rem" borderRadius="16px" className="mb-2" />
+                        <Skeleton height="2rem" className="mb-2" borderRadius="16px" />
+                        <Skeleton width="10rem" height="4rem" borderRadius="16px" />
                     </div>
                     <div className="w-full md:w-6 p-3">
                         <h5>Square</h5>
                         <div className="flex align-items-end">
-                            <Skeleton size="2rem" className="mr-2"></Skeleton>
-                            <Skeleton size="3rem" className="mr-2"></Skeleton>
-                            <Skeleton size="4rem" className="mr-2"></Skeleton>
-                            <Skeleton size="5rem"></Skeleton>
+                            <Skeleton size="2rem" className="mr-2" />
+                            <Skeleton size="3rem" className="mr-2" />
+                            <Skeleton size="4rem" className="mr-2" />
+                            <Skeleton size="5rem" />
                         </div>
                     </div>
                     <div className="w-full md:w-6 p-3">
                         <h5>Circle</h5>
                         <div className="flex align-items-end">
-                            <Skeleton shape="circle" size="2rem" className="mr-2"></Skeleton>
-                            <Skeleton shape="circle" size="3rem" className="mr-2"></Skeleton>
-                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
-                            <Skeleton shape="circle" size="5rem"></Skeleton>
+                            <Skeleton shape="circle" size="2rem" className="mr-2" />
+                            <Skeleton shape="circle" size="3rem" className="mr-2" />
+                            <Skeleton shape="circle" size="4rem" className="mr-2" />
+                            <Skeleton shape="circle" size="5rem" />
                         </div>
                     </div>
                 </div>
diff --git a/components/doc/slider/importdoc.js b/components/doc/slider/importdoc.js
index 3ce256e2e8..ff4c29979d 100644
--- a/components/doc/slider/importdoc.js
+++ b/components/doc/slider/importdoc.js
@@ -10,7 +10,7 @@ import { Slider } from 'primereact/slider';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/slider/pt/ptdoc.js b/components/doc/slider/pt/ptdoc.js
index ac68b385d1..2dcdd49498 100644
--- a/components/doc/slider/pt/ptdoc.js
+++ b/components/doc/slider/pt/ptdoc.js
@@ -66,7 +66,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Slider
                     value={value}
diff --git a/components/doc/speeddial/importdoc.js b/components/doc/speeddial/importdoc.js
index bf97297146..5823f5cb83 100644
--- a/components/doc/speeddial/importdoc.js
+++ b/components/doc/speeddial/importdoc.js
@@ -10,7 +10,7 @@ import { SpeedDial } from 'primereact/speeddial';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/speeddial/pt/ptdoc.js b/components/doc/speeddial/pt/ptdoc.js
index 0f861b0b3d..480a9203f9 100644
--- a/components/doc/speeddial/pt/ptdoc.js
+++ b/components/doc/speeddial/pt/ptdoc.js
@@ -127,7 +127,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <div style={{ height: '500px' }} className="flex align-items-center justify-content-center">
                     <SpeedDial
diff --git a/components/doc/splitbutton/basicdoc.js b/components/doc/splitbutton/basicdoc.js
index 7ce70d5056..cc0c349ac9 100644
--- a/components/doc/splitbutton/basicdoc.js
+++ b/components/doc/splitbutton/basicdoc.js
@@ -163,7 +163,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/splitbutton/disableddoc.js b/components/doc/splitbutton/disableddoc.js
index 0f3e769ee1..1751286b4e 100644
--- a/components/doc/splitbutton/disableddoc.js
+++ b/components/doc/splitbutton/disableddoc.js
@@ -163,7 +163,7 @@ export default function DisabledDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} disabled />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/splitbutton/importdoc.js b/components/doc/splitbutton/importdoc.js
index 12b52e7afa..69b04b524c 100644
--- a/components/doc/splitbutton/importdoc.js
+++ b/components/doc/splitbutton/importdoc.js
@@ -10,7 +10,7 @@ import { SplitButton } from 'primereact/splitbutton';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/splitbutton/loadingdoc.js b/components/doc/splitbutton/loadingdoc.js
index c9399ef2d6..a05a18aa38 100644
--- a/components/doc/splitbutton/loadingdoc.js
+++ b/components/doc/splitbutton/loadingdoc.js
@@ -183,7 +183,7 @@ export default function LoadingDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} loading={loading} />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/splitbutton/outlineddoc.js b/components/doc/splitbutton/outlineddoc.js
index 0945e31d34..8a2559d535 100644
--- a/components/doc/splitbutton/outlineddoc.js
+++ b/components/doc/splitbutton/outlineddoc.js
@@ -182,7 +182,7 @@ export default function OutlinedDemo() {
                 <p>Outlined buttons display a border without a background initially.</p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
diff --git a/components/doc/splitbutton/pt/ptdoc.js b/components/doc/splitbutton/pt/ptdoc.js
index c197d64278..c087f0486c 100644
--- a/components/doc/splitbutton/pt/ptdoc.js
+++ b/components/doc/splitbutton/pt/ptdoc.js
@@ -120,7 +120,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <SplitButton
                     pt={{
diff --git a/components/doc/splitbutton/raiseddoc.js b/components/doc/splitbutton/raiseddoc.js
index b8ae8bc513..4547e57cd6 100644
--- a/components/doc/splitbutton/raiseddoc.js
+++ b/components/doc/splitbutton/raiseddoc.js
@@ -182,7 +182,7 @@ export default function RaisedDemo() {
                 <p>Raised buttons display a shadow to indicate elevation.</p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
diff --git a/components/doc/splitbutton/raisedtextdoc.js b/components/doc/splitbutton/raisedtextdoc.js
index 4ef3075f20..7897cbcdcf 100644
--- a/components/doc/splitbutton/raisedtextdoc.js
+++ b/components/doc/splitbutton/raisedtextdoc.js
@@ -179,7 +179,7 @@ export default function RaisedTextDemo() {
                 <p>Text buttons can be displayed as raised as well for elevation.</p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
diff --git a/components/doc/splitbutton/roundeddoc.js b/components/doc/splitbutton/roundeddoc.js
index 5cf4d48ba0..a5684656e2 100644
--- a/components/doc/splitbutton/roundeddoc.js
+++ b/components/doc/splitbutton/roundeddoc.js
@@ -182,7 +182,7 @@ export default function RoundedDemo() {
                 <p>Rounded buttons have a circular border radius.</p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
diff --git a/components/doc/splitbutton/severitydoc.js b/components/doc/splitbutton/severitydoc.js
index 379863e402..43d2e700d2 100644
--- a/components/doc/splitbutton/severitydoc.js
+++ b/components/doc/splitbutton/severitydoc.js
@@ -182,7 +182,7 @@ export default function SeverityDemo() {
                 <p>Severity defines the type of button.</p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
diff --git a/components/doc/splitbutton/sizesdoc.js b/components/doc/splitbutton/sizesdoc.js
index 745abcb22b..7eae98a21e 100644
--- a/components/doc/splitbutton/sizesdoc.js
+++ b/components/doc/splitbutton/sizesdoc.js
@@ -169,7 +169,7 @@ export default function SizesDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
diff --git a/components/doc/splitbutton/templatedoc.js b/components/doc/splitbutton/templatedoc.js
index 8cb1a13bba..2ed120cf78 100644
--- a/components/doc/splitbutton/templatedoc.js
+++ b/components/doc/splitbutton/templatedoc.js
@@ -151,7 +151,7 @@ export default function TemplateDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/splitbutton/textdoc.js b/components/doc/splitbutton/textdoc.js
index 61760b7915..3044e6f8a2 100644
--- a/components/doc/splitbutton/textdoc.js
+++ b/components/doc/splitbutton/textdoc.js
@@ -179,7 +179,7 @@ export default function TextDemo() {
                 <p>Text buttons are displayed as textual elements.</p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
diff --git a/components/doc/splitter/importdoc.js b/components/doc/splitter/importdoc.js
index 4ba8a30cbc..94499cdaa1 100644
--- a/components/doc/splitter/importdoc.js
+++ b/components/doc/splitter/importdoc.js
@@ -10,7 +10,7 @@ import { Splitter, SplitterPanel } from 'primereact/splitter';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/splitter/pt/ptdoc.js b/components/doc/splitter/pt/ptdoc.js
index 197885a492..412b5c9f1d 100644
--- a/components/doc/splitter/pt/ptdoc.js
+++ b/components/doc/splitter/pt/ptdoc.js
@@ -46,7 +46,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Splitter pt={{ root: { style: { height: '300px' } }, gutterHandler: { className: 'bg-primary' } }}>
                     <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 1 </SplitterPanel>
diff --git a/components/doc/steps/importdoc.js b/components/doc/steps/importdoc.js
index 23e3a15543..763b1ff067 100644
--- a/components/doc/steps/importdoc.js
+++ b/components/doc/steps/importdoc.js
@@ -10,7 +10,7 @@ import { Steps } from 'primereact/steps';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/steps/interactivedoc.js b/components/doc/steps/interactivedoc.js
index ffee5860ec..38281bfe50 100644
--- a/components/doc/steps/interactivedoc.js
+++ b/components/doc/steps/interactivedoc.js
@@ -135,7 +135,7 @@ export default function InteractiveDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <Toast ref={toast}></Toast>
+                <Toast ref={toast} />
                 <Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/steps/pt/ptdoc.js b/components/doc/steps/pt/ptdoc.js
index 76e99ed144..542ed5ea1c 100644
--- a/components/doc/steps/pt/ptdoc.js
+++ b/components/doc/steps/pt/ptdoc.js
@@ -96,7 +96,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Steps
                     model={items}
diff --git a/components/doc/styleclass/importdoc.js b/components/doc/styleclass/importdoc.js
index c389a6dd49..8c15cec019 100644
--- a/components/doc/styleclass/importdoc.js
+++ b/components/doc/styleclass/importdoc.js
@@ -10,7 +10,7 @@ import { StyleClass } from 'primereact/styleclass';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/tabmenu/importdoc.js b/components/doc/tabmenu/importdoc.js
index cd688b972d..c73e185d3d 100644
--- a/components/doc/tabmenu/importdoc.js
+++ b/components/doc/tabmenu/importdoc.js
@@ -10,7 +10,7 @@ import { TabMenu } from 'primereact/tabmenu';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/tabmenu/pt/ptdoc.js b/components/doc/tabmenu/pt/ptdoc.js
index dbd170cdf6..ba71017513 100644
--- a/components/doc/tabmenu/pt/ptdoc.js
+++ b/components/doc/tabmenu/pt/ptdoc.js
@@ -95,7 +95,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <TabMenu
                     model={items}
diff --git a/components/doc/tabview/disableddoc.js b/components/doc/tabview/disableddoc.js
index 2885222fce..3ea804d98d 100644
--- a/components/doc/tabview/disableddoc.js
+++ b/components/doc/tabview/disableddoc.js
@@ -139,7 +139,7 @@ export default function DisabledDemo() {
                             culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
                         </p>
                     </TabPanel>
-                    <TabPanel header="Header IV" disabled></TabPanel>
+                    <TabPanel header="Header IV" disabled />
                 </TabView>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/tabview/importdoc.js b/components/doc/tabview/importdoc.js
index 5fb37db0ee..9220ca63a3 100644
--- a/components/doc/tabview/importdoc.js
+++ b/components/doc/tabview/importdoc.js
@@ -10,7 +10,7 @@ import { TabView, TabPanel } from 'primereact/tabview';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/tabview/pt/ptdoc.js b/components/doc/tabview/pt/ptdoc.js
index 740f4472e9..6eb0887d50 100644
--- a/components/doc/tabview/pt/ptdoc.js
+++ b/components/doc/tabview/pt/ptdoc.js
@@ -10,7 +10,9 @@ export function PTDoc(props) {
     ];
 
     const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index) return 'bg-primary';
+        if (parent.state.activeIndex === index) {
+            return 'bg-primary';
+        }
     };
 
     const code = {
@@ -109,7 +111,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <TabView>
                     {tabs.map((tab, i) => {
diff --git a/components/doc/tag/basicdoc.js b/components/doc/tag/basicdoc.js
index 1fbc8c0bab..860bdcc373 100644
--- a/components/doc/tag/basicdoc.js
+++ b/components/doc/tag/basicdoc.js
@@ -41,7 +41,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Tag value="New"></Tag>
+                <Tag value="New" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/tag/icondoc.js b/components/doc/tag/icondoc.js
index 1b0c4db8db..99b95c1432 100644
--- a/components/doc/tag/icondoc.js
+++ b/components/doc/tag/icondoc.js
@@ -53,11 +53,11 @@ export default function IconDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-2">
-                <Tag icon="pi pi-user" value="Primary"></Tag>
-                <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
-                <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-                <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
-                <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+                <Tag icon="pi pi-user" value="Primary" />
+                <Tag icon="pi pi-check" severity="success" value="Success" />
+                <Tag icon="pi pi-info-circle" severity="info" value="Info" />
+                <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning" />
+                <Tag icon="pi pi-times" severity="danger" value="Danger" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/tag/importdoc.js b/components/doc/tag/importdoc.js
index 45f7ee18a2..01e73eb1a8 100644
--- a/components/doc/tag/importdoc.js
+++ b/components/doc/tag/importdoc.js
@@ -10,7 +10,7 @@ import { Tag } from 'primereact/tag';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/tag/pilldoc.js b/components/doc/tag/pilldoc.js
index bd6d8d746f..782634fb1f 100644
--- a/components/doc/tag/pilldoc.js
+++ b/components/doc/tag/pilldoc.js
@@ -59,13 +59,13 @@ export default function PillDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-2">
-                <Tag value="Primary" rounded></Tag>
-                <Tag severity="success" value="Success" rounded></Tag>
-                <Tag severity="info" value="Info" rounded></Tag>
-                <Tag severity="warning" value="Warning" rounded></Tag>
-                <Tag severity="danger" value="Danger" rounded></Tag>
-                <Tag severity="secondary" value="Secondary" rounded></Tag>
-                <Tag severity="contrast" value="Contrast" rounded></Tag>
+                <Tag value="Primary" rounded />
+                <Tag severity="success" value="Success" rounded />
+                <Tag severity="info" value="Info" rounded />
+                <Tag severity="warning" value="Warning" rounded />
+                <Tag severity="danger" value="Danger" rounded />
+                <Tag severity="secondary" value="Secondary" rounded />
+                <Tag severity="contrast" value="Contrast" rounded />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/tag/pt/ptdoc.js b/components/doc/tag/pt/ptdoc.js
index 2c415bc4b2..a9209a367c 100644
--- a/components/doc/tag/pt/ptdoc.js
+++ b/components/doc/tag/pt/ptdoc.js
@@ -48,14 +48,14 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Tag
                     value="New"
                     pt={{
                         root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
                     }}
-                ></Tag>
+                />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/tag/severitydoc.js b/components/doc/tag/severitydoc.js
index e9583334c3..7f242966f4 100644
--- a/components/doc/tag/severitydoc.js
+++ b/components/doc/tag/severitydoc.js
@@ -59,13 +59,13 @@ export default function SeverityDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-2">
-                <Tag value="Primary"></Tag>
-                <Tag severity="success" value="Success"></Tag>
-                <Tag severity="info" value="Info"></Tag>
-                <Tag severity="warning" value="Warning"></Tag>
-                <Tag severity="danger" value="Danger"></Tag>
-                <Tag severity="secondary" value="Secondary"></Tag>
-                <Tag severity="contrast" value="Contrast"></Tag>
+                <Tag value="Primary" />
+                <Tag severity="success" value="Success" />
+                <Tag severity="info" value="Info" />
+                <Tag severity="warning" value="Warning" />
+                <Tag severity="danger" value="Danger" />
+                <Tag severity="secondary" value="Secondary" />
+                <Tag severity="contrast" value="Contrast" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/tag/templatedoc.js b/components/doc/tag/templatedoc.js
index 057ceced76..003c9c2e04 100644
--- a/components/doc/tag/templatedoc.js
+++ b/components/doc/tag/templatedoc.js
@@ -59,7 +59,7 @@ export default function TemplateDemo() {
                     <div className="flex align-items-center gap-2">
                         <img alt="Country" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className="flag flag-it" style={{ width: '18px' }} />
                         <span className="text-base">Italy</span>
-                        <i className="pi pi-times text-xs"></i>
+                        <i className="pi pi-times text-xs" />
                     </div>
                 </Tag>
             </div>
diff --git a/components/doc/tailwind/unstyledmode/setupdoc.js b/components/doc/tailwind/unstyledmode/setupdoc.js
index 22f963326b..35efcd698e 100644
--- a/components/doc/tailwind/unstyledmode/setupdoc.js
+++ b/components/doc/tailwind/unstyledmode/setupdoc.js
@@ -137,7 +137,7 @@ export default function MyApp({ Component, pageProps }) {
                     and make sure to apply the CSS layer configuration above when including the styles of Tailwind as well.
                 </p>
                 <p className="flex align-items-start gap-2">
-                    <Badge value="1"></Badge>
+                    <Badge value="1" />
                     <span>
                         Tailwind uses PurgeCSS internally to remove unused classes, as PrimeReact components are loaded from <i>node_modules</i> the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeReact, otherwise the
                         classes utilized in the theme will be removed as well.
@@ -145,7 +145,7 @@ export default function MyApp({ Component, pageProps }) {
                 </p>
                 <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
-                    <Badge value="2"></Badge>
+                    <Badge value="2" />
                     <span>
                         Next step is enabling the <i>unstyled</i> option to remove the default style classes from the components and adding an empty <i>pt</i> so that they can be styled with Tailwind in the next section. Note that if you run your
                         application at this stage, functionality and accessibility of the components will still work but everything will be transparent as there is no style.
@@ -153,14 +153,14 @@ export default function MyApp({ Component, pageProps }) {
                 </p>
                 <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
-                    <Badge value="3"></Badge>
+                    <Badge value="3" />
                     <span>
                         <b>Optional:</b> specify the built in <i>Tailwind</i> style of pre-configured Tailwind settings.
                     </span>
                 </p>
                 <DocSectionCode code={code3} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
-                    <Badge value="4"></Badge>
+                    <Badge value="4" />
                     <span>
                         <b>Optional:</b> specify the classNameMergeFunction as <i>twMerge</i> to resolve className conflicts via <a href="https://www.npmjs.com/package/tailwind-merge">tailwind-merge</a>. This will prevent classNames specified in the
                         global pass through from overriding those specified via pass through in your application.
@@ -168,7 +168,7 @@ export default function MyApp({ Component, pageProps }) {
                 </p>
                 <DocSectionCode code={code4} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
-                    <Badge value="5"></Badge>
+                    <Badge value="5" />
                     <span>
                         At the final step, component styles are provided via a pass through configuration that utilizes Tailwind CSS. The default preset of each component is available at the Tailwind part under theming section of each component so
                         you'll able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;
diff --git a/components/doc/terminal/basicdoc.js b/components/doc/terminal/basicdoc.js
index 3ad9b7560e..ece78267d3 100644
--- a/components/doc/terminal/basicdoc.js
+++ b/components/doc/terminal/basicdoc.js
@@ -11,29 +11,32 @@ export function BasicDoc(props) {
         let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
         switch (command) {
-            case 'date':
-                response = 'Today is ' + new Date().toDateString();
-                break;
+        case 'date':
+            response = 'Today is ' + new Date().toDateString();
+            break;
 
-            case 'greet':
-                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-                break;
+        case 'greet':
+            response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+            break;
 
-            case 'random':
-                response = Math.floor(Math.random() * 100);
-                break;
+        case 'random':
+            response = Math.floor(Math.random() * 100);
+            break;
 
-            case 'clear':
-                response = null;
-                break;
+        case 'clear':
+            response = null;
+            break;
 
-            default:
-                response = 'Unknown command: ' + command;
-                break;
+        default:
+            response = 'Unknown command: ' + command;
+            break;
         }
 
-        if (response) TerminalService.emit('response', response);
-        else TerminalService.emit('clear');
+        if (response) {
+            TerminalService.emit('response', response);
+        } else {
+            TerminalService.emit('clear');
+        }
     };
 
     useEffect(() => {
diff --git a/components/doc/terminal/importdoc.js b/components/doc/terminal/importdoc.js
index f042348591..4f20218972 100644
--- a/components/doc/terminal/importdoc.js
+++ b/components/doc/terminal/importdoc.js
@@ -11,7 +11,7 @@ import { TerminalService } from 'primereact/terminalservice';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/terminal/pt/ptdoc.js b/components/doc/terminal/pt/ptdoc.js
index b80860cbb9..7b4cd5868a 100644
--- a/components/doc/terminal/pt/ptdoc.js
+++ b/components/doc/terminal/pt/ptdoc.js
@@ -11,29 +11,32 @@ export function PTDoc(props) {
         let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
         switch (command) {
-            case 'date':
-                response = 'Today is ' + new Date().toDateString();
-                break;
+        case 'date':
+            response = 'Today is ' + new Date().toDateString();
+            break;
 
-            case 'greet':
-                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-                break;
+        case 'greet':
+            response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+            break;
 
-            case 'random':
-                response = Math.floor(Math.random() * 100);
-                break;
+        case 'random':
+            response = Math.floor(Math.random() * 100);
+            break;
 
-            case 'clear':
-                response = null;
-                break;
+        case 'clear':
+            response = null;
+            break;
 
-            default:
-                response = 'Unknown command: ' + command;
-                break;
+        default:
+            response = 'Unknown command: ' + command;
+            break;
         }
 
-        if (response) TerminalService.emit('response', response);
-        else TerminalService.emit('clear');
+        if (response) {
+            TerminalService.emit('response', response);
+        } else {
+            TerminalService.emit('clear');
+        }
     };
 
     useEffect(() => {
@@ -191,7 +194,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <p>
                     Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
diff --git a/components/doc/theming/builtinthemesdoc.js b/components/doc/theming/builtinthemesdoc.js
index d7bed03356..6ba7e0b982 100644
--- a/components/doc/theming/builtinthemesdoc.js
+++ b/components/doc/theming/builtinthemesdoc.js
@@ -53,7 +53,7 @@ primereact/resources/themes/arya-purple/theme.css
                 <p>
                     PrimeReact ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths. For a live preview, use the configurator{' '}
                     <span className="border-round inline-flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center bg-primary">
-                        <span className="pi pi-cog"></span>
+                        <span className="pi pi-cog" />
                     </span>{' '}
                     at the topbar to switch themes.
                 </p>
diff --git a/components/doc/theming/primeflexdoc.js b/components/doc/theming/primeflexdoc.js
index d1225c10d9..946adce8e7 100644
--- a/components/doc/theming/primeflexdoc.js
+++ b/components/doc/theming/primeflexdoc.js
@@ -25,9 +25,9 @@ export function PrimeFlexDoc(props) {
                 <p>Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.</p>
             </DocSectionText>
             <div className="card flex flex-column md:flex-row justify-content-between my-5">
-                <Button type="button" label="Button 1" className="mb-3 md:mb-0"></Button>
-                <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0"></Button>
-                <Button type="button" label="Button 3" className="p-button-help"></Button>
+                <Button type="button" label="Button 1" className="mb-3 md:mb-0" />
+                <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0" />
+                <Button type="button" label="Button 3" className="p-button-help" />
             </div>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
diff --git a/components/doc/tieredmenu/importdoc.js b/components/doc/tieredmenu/importdoc.js
index b80fd498f1..aa9831da9f 100644
--- a/components/doc/tieredmenu/importdoc.js
+++ b/components/doc/tieredmenu/importdoc.js
@@ -10,7 +10,7 @@ import { TieredMenu } from 'primereact/tieredmenu';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/tieredmenu/pt/ptdoc.js b/components/doc/tieredmenu/pt/ptdoc.js
index f6aca016ae..b5b7efadea 100644
--- a/components/doc/tieredmenu/pt/ptdoc.js
+++ b/components/doc/tieredmenu/pt/ptdoc.js
@@ -435,7 +435,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <TieredMenu
                     model={items}
diff --git a/components/doc/timeline/importdoc.js b/components/doc/timeline/importdoc.js
index ba43ecb966..399e7e7fec 100644
--- a/components/doc/timeline/importdoc.js
+++ b/components/doc/timeline/importdoc.js
@@ -10,7 +10,7 @@ import { Timeline } from 'primereact/timeline';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/timeline/pt/ptdoc.js b/components/doc/timeline/pt/ptdoc.js
index 39ea1524b9..4e01f6042b 100644
--- a/components/doc/timeline/pt/ptdoc.js
+++ b/components/doc/timeline/pt/ptdoc.js
@@ -82,7 +82,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Timeline
                     value={events}
diff --git a/components/doc/timeline/templatedoc.js b/components/doc/timeline/templatedoc.js
index 963e4d95fa..bbebf08470 100644
--- a/components/doc/timeline/templatedoc.js
+++ b/components/doc/timeline/templatedoc.js
@@ -15,7 +15,7 @@ export function TemplateDoc(props) {
     const customizedMarker = (item) => {
         return (
             <span className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" style={{ backgroundColor: item.color }}>
-                <i className={item.icon}></i>
+                <i className={item.icon} />
             </span>
         );
     };
@@ -28,7 +28,7 @@ export function TemplateDoc(props) {
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
                     quas!
                 </p>
-                <Button label="Read more" className="p-button-text"></Button>
+                <Button label="Read more" className="p-button-text" />
             </Card>
         );
     };
diff --git a/components/doc/toast/headlessdoc.js b/components/doc/toast/headlessdoc.js
index 6b78d8d852..91005cdeec 100644
--- a/components/doc/toast/headlessdoc.js
+++ b/components/doc/toast/headlessdoc.js
@@ -227,22 +227,22 @@ export default function HeadlessDemo() {
                     position="top-center"
                     content={({ message }) => (
                         <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
-                            <i className="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+                            <i className="pi pi-cloud-upload text-primary-500 text-2xl" />
                             <div className="flex flex-column gap-3 w-full">
                                 <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
                                 <p className="m-0 text-base text-700">{message.detail}</p>
                                 <div className="flex flex-column gap-2">
-                                    <ProgressBar value={progress} showValue={false} style={{ height: '4px' }}></ProgressBar>
+                                    <ProgressBar value={progress} showValue={false} style={{ height: '4px' }} />
                                     <label className="text-right text-xs text-white">{progress}% uploaded...</label>
                                 </div>
                                 <div className="flex gap-3 mb-3">
-                                    <Button label="Another Upload?" text className="p-0" onClick={clear}></Button>
-                                    <Button label="Cancel" text className="text-white p-0" onClick={clear}></Button>
+                                    <Button label="Another Upload?" text className="p-0" onClick={clear} />
+                                    <Button label="Cancel" text className="text-white p-0" onClick={clear} />
                                 </div>
                             </div>
                         </section>
                     )}
-                ></Toast>
+                />
                 <Button onClick={show} label="View" />
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/toast/importdoc.js b/components/doc/toast/importdoc.js
index f61e49a643..d18c894074 100644
--- a/components/doc/toast/importdoc.js
+++ b/components/doc/toast/importdoc.js
@@ -10,7 +10,7 @@ import { Toast } from 'primereact/toast';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/toast/pt/ptdoc.js b/components/doc/toast/pt/ptdoc.js
index 049badb914..e88cee172c 100644
--- a/components/doc/toast/pt/ptdoc.js
+++ b/components/doc/toast/pt/ptdoc.js
@@ -82,7 +82,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Toast
                     ref={toast}
diff --git a/components/doc/toast/templatedoc.js b/components/doc/toast/templatedoc.js
index 2391a891b8..ffde2b066e 100644
--- a/components/doc/toast/templatedoc.js
+++ b/components/doc/toast/templatedoc.js
@@ -29,7 +29,7 @@ export function TemplateDoc(props) {
                             <span className="font-bold text-900">Amy Elsner</span>
                         </div>
                         <div className="font-medium text-lg my-3 text-900">{props.message.summary}</div>
-                        <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear}></Button>
+                        <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear} />
                     </div>
                 )
             });
diff --git a/components/doc/togglebutton/importdoc.js b/components/doc/togglebutton/importdoc.js
index e23b8c98fd..b89a247e0f 100644
--- a/components/doc/togglebutton/importdoc.js
+++ b/components/doc/togglebutton/importdoc.js
@@ -10,7 +10,7 @@ import { ToggleButton } from 'primereact/togglebutton';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/togglebutton/pt/ptdoc.js b/components/doc/togglebutton/pt/ptdoc.js
index 9948611111..ba8b090691 100644
--- a/components/doc/togglebutton/pt/ptdoc.js
+++ b/components/doc/togglebutton/pt/ptdoc.js
@@ -66,7 +66,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <ToggleButton
                     checked={checked}
diff --git a/components/doc/toolbar/basicdoc.js b/components/doc/toolbar/basicdoc.js
index 5fa1611a3c..04cc867043 100644
--- a/components/doc/toolbar/basicdoc.js
+++ b/components/doc/toolbar/basicdoc.js
@@ -35,7 +35,7 @@ export function BasicDoc(props) {
 
     const endContent = (
         <React.Fragment>
-            <SplitButton label="Save" model={items} icon="pi pi-check"></SplitButton>
+            <SplitButton label="Save" model={items} icon="pi pi-check" />
         </React.Fragment>
     );
 
diff --git a/components/doc/toolbar/customdoc.js b/components/doc/toolbar/customdoc.js
index 979e99d1ed..0d38c567a4 100644
--- a/components/doc/toolbar/customdoc.js
+++ b/components/doc/toolbar/customdoc.js
@@ -33,13 +33,13 @@ export function CustomDoc(props) {
     const centerContent = (
         <div className="flex flex-wrap align-items-center gap-3">
             <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
-                <i className="pi pi-home text-2xl"></i>
+                <i className="pi pi-home text-2xl" />
             </button>
             <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
-                <i className="pi pi-user text-2xl"></i>
+                <i className="pi pi-user text-2xl" />
             </button>
             <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
-                <i className="pi pi-search text-2xl"></i>
+                <i className="pi pi-search text-2xl" />
             </button>
         </div>
     );
diff --git a/components/doc/toolbar/importdoc.js b/components/doc/toolbar/importdoc.js
index 2a1785fe3f..cb27d00328 100644
--- a/components/doc/toolbar/importdoc.js
+++ b/components/doc/toolbar/importdoc.js
@@ -10,7 +10,7 @@ import { Toolbar } from 'primereact/toolbar';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/toolbar/pt/ptdoc.js b/components/doc/toolbar/pt/ptdoc.js
index b898f24d1b..3fe406dcdf 100644
--- a/components/doc/toolbar/pt/ptdoc.js
+++ b/components/doc/toolbar/pt/ptdoc.js
@@ -96,7 +96,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <Toolbar
                     pt={{
@@ -104,7 +104,7 @@ export default function PTDemo() {
                     }}
                     start={startContent}
                     end={endContent}
-                ></Toolbar>
+                />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/tooltip/importdoc.js b/components/doc/tooltip/importdoc.js
index eb8d3a15db..bfedcf3790 100644
--- a/components/doc/tooltip/importdoc.js
+++ b/components/doc/tooltip/importdoc.js
@@ -10,7 +10,7 @@ import { Tooltip } from 'primereact/tooltip';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/tooltip/pt/ptdoc.js b/components/doc/tooltip/pt/ptdoc.js
index a0325ccbe2..d224fdf0f4 100644
--- a/components/doc/tooltip/pt/ptdoc.js
+++ b/components/doc/tooltip/pt/ptdoc.js
@@ -67,7 +67,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex flex-wrap align-items-center justify-content-center gap-2">
                 <InputText
                     type="text"
diff --git a/components/doc/tooltip/targetdoc.js b/components/doc/tooltip/targetdoc.js
index dd03f8c209..3d96c77e10 100644
--- a/components/doc/tooltip/targetdoc.js
+++ b/components/doc/tooltip/targetdoc.js
@@ -81,7 +81,7 @@ export default function TargetDemo() {
                     data-pr-my="left center-2"
                     style={{ fontSize: '2rem', cursor: 'pointer' }}
                 >
-                    <Badge severity="danger"></Badge>
+                    <Badge severity="danger" />
                 </i>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/tree/contextmenudoc.js b/components/doc/tree/contextmenudoc.js
index 9bb31b756c..f28e7694b3 100644
--- a/components/doc/tree/contextmenudoc.js
+++ b/components/doc/tree/contextmenudoc.js
@@ -27,8 +27,11 @@ export function ContextMenuDoc(props) {
             command: () => {
                 let _expandedKeys = { ...expandedKeys };
 
-                if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
-                else _expandedKeys[selectedNodeKey] = true;
+                if (_expandedKeys[selectedNodeKey]) {
+                    delete _expandedKeys[selectedNodeKey];
+                } else {
+                    _expandedKeys[selectedNodeKey] = true;
+                }
 
                 setExpandedKeys(_expandedKeys);
             }
diff --git a/components/doc/tree/importdoc.js b/components/doc/tree/importdoc.js
index d7ac22855e..015aad027f 100644
--- a/components/doc/tree/importdoc.js
+++ b/components/doc/tree/importdoc.js
@@ -10,7 +10,7 @@ import { Tree } from 'primereact/tree';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/tree/pt/ptdoc.js b/components/doc/tree/pt/ptdoc.js
index 5e9d013705..a6dfc11bb7 100644
--- a/components/doc/tree/pt/ptdoc.js
+++ b/components/doc/tree/pt/ptdoc.js
@@ -110,7 +110,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <Tree
                     value={nodes}
diff --git a/components/doc/tree/templatedoc.js b/components/doc/tree/templatedoc.js
index 8d5cf47b61..38489fa023 100644
--- a/components/doc/tree/templatedoc.js
+++ b/components/doc/tree/templatedoc.js
@@ -56,7 +56,7 @@ export function TemplateDoc(props) {
 
         return (
             <button type="button" className="p-tree-toggler p-link" tabIndex={-1} onClick={options.onClick}>
-                <span className={iconClassName} aria-hidden="true"></span>
+                <span className={iconClassName} aria-hidden="true" />
             </button>
         );
     };
diff --git a/components/doc/treeselect/basicdoc.js b/components/doc/treeselect/basicdoc.js
index f5c5896b70..30ccb2eca0 100644
--- a/components/doc/treeselect/basicdoc.js
+++ b/components/doc/treeselect/basicdoc.js
@@ -104,7 +104,7 @@ export default function BasicDemo() {
                 </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" placeholder="Select Item"></TreeSelect>
+                <TreeSelect 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/checkboxdoc.js b/components/doc/treeselect/checkboxdoc.js
index cc1db3286b..b436cd8aae 100644
--- a/components/doc/treeselect/checkboxdoc.js
+++ b/components/doc/treeselect/checkboxdoc.js
@@ -124,7 +124,7 @@ export default function CheckboxDemo() {
                     selectionMode="checkbox"
                     display="chip"
                     placeholder="Select Items"
-                ></TreeSelect>
+                />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/treeselect/clearicondoc.js b/components/doc/treeselect/clearicondoc.js
index ba3b5b2271..881f505b36 100644
--- a/components/doc/treeselect/clearicondoc.js
+++ b/components/doc/treeselect/clearicondoc.js
@@ -99,7 +99,7 @@ export default function BasicDemo() {
                 </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" placeholder="Select Item" showClear></TreeSelect>
+                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" showClear />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/treeselect/controlleddoc.js b/components/doc/treeselect/controlleddoc.js
index 3cb30fd630..593ee48b3f 100644
--- a/components/doc/treeselect/controlleddoc.js
+++ b/components/doc/treeselect/controlleddoc.js
@@ -214,7 +214,7 @@ export default function ControlledDemo() {
                     expandedKeys={expandedKeys}
                     onToggle={(e) => setExpandedKeys(e.value)}
                     panelHeaderTemplate={headerTemplate}
-                ></TreeSelect>
+                />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/treeselect/filterdoc.js b/components/doc/treeselect/filterdoc.js
index 20527874f1..74c72302f9 100644
--- a/components/doc/treeselect/filterdoc.js
+++ b/components/doc/treeselect/filterdoc.js
@@ -101,7 +101,7 @@ export default function FilterDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} filter className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} filter 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 4ee9ed3d8a..701b96d910 100644
--- a/components/doc/treeselect/floatlabeldoc.js
+++ b/components/doc/treeselect/floatlabeldoc.js
@@ -107,7 +107,7 @@ export default function FloatLabelDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <span className=" p-float-label w-full md:w-20rem">
-                    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="w-full"></TreeSelect>
+                    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="w-full" />
                     <label htmlFor="treeselect">TreeSelect</label>
                 </span>
             </div>
diff --git a/components/doc/treeselect/importdoc.js b/components/doc/treeselect/importdoc.js
index edf59e8cf8..21f30def73 100644
--- a/components/doc/treeselect/importdoc.js
+++ b/components/doc/treeselect/importdoc.js
@@ -10,7 +10,7 @@ import { TreeSelect } from 'primereact/treeselect';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/treeselect/invaliddoc.js b/components/doc/treeselect/invaliddoc.js
index 4441892fde..1e08fdec52 100644
--- a/components/doc/treeselect/invaliddoc.js
+++ b/components/doc/treeselect/invaliddoc.js
@@ -99,7 +99,7 @@ export default function InvalidDemo() {
                 </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>
+                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full p-invalid" placeholder="Select Item" />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/treeselect/multipledoc.js b/components/doc/treeselect/multipledoc.js
index 851858c489..3570ed7c7a 100644
--- a/components/doc/treeselect/multipledoc.js
+++ b/components/doc/treeselect/multipledoc.js
@@ -111,7 +111,7 @@ export default function MultipleDemo() {
             </DocSectionText>
             <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card flex justify-content-center">
-                <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false} className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items"></TreeSelect>
+                <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false} className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items" />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/treeselect/pt/ptdoc.js b/components/doc/treeselect/pt/ptdoc.js
index aeb77b4f1d..ad270aeaf2 100644
--- a/components/doc/treeselect/pt/ptdoc.js
+++ b/components/doc/treeselect/pt/ptdoc.js
@@ -129,7 +129,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <TreeSelect
                     value={selectedNodeKey}
@@ -144,7 +144,7 @@ export default function PTDemo() {
                             })
                         }
                     }}
-                ></TreeSelect>
+                />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/doc/treetable/basicdoc.js b/components/doc/treetable/basicdoc.js
index 38dc9ed436..b983424ea1 100644
--- a/components/doc/treetable/basicdoc.js
+++ b/components/doc/treetable/basicdoc.js
@@ -108,9 +108,9 @@ export default function BasicDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/conditionalstyledoc.js b/components/doc/treetable/conditionalstyledoc.js
index 98a980307a..aaf0567259 100644
--- a/components/doc/treetable/conditionalstyledoc.js
+++ b/components/doc/treetable/conditionalstyledoc.js
@@ -141,9 +141,9 @@ export default function ConditionalStyleDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size" body={sizeTemplate}></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" body={sizeTemplate} />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/contextmenudoc.js b/components/doc/treetable/contextmenudoc.js
index f39340863a..c6104fc0e9 100644
--- a/components/doc/treetable/contextmenudoc.js
+++ b/components/doc/treetable/contextmenudoc.js
@@ -27,8 +27,11 @@ export function ContextMenuDoc(props) {
             command: () => {
                 let _expandedKeys = { ...expandedKeys };
 
-                if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
-                else _expandedKeys[selectedNodeKey] = true;
+                if (_expandedKeys[selectedNodeKey]) {
+                    delete _expandedKeys[selectedNodeKey];
+                } else {
+                    _expandedKeys[selectedNodeKey] = true;
+                }
 
                 setExpandedKeys(_expandedKeys);
             }
@@ -210,9 +213,9 @@ export default function ContextMenuDemo() {
                     onContextMenu={(event) => cm.current.show(event.originalEvent)}
                     tableStyle={{ minWidth: '50rem' }}
                 >
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/controlleddoc.js b/components/doc/treetable/controlleddoc.js
index 3bbb16f64c..809869155c 100644
--- a/components/doc/treetable/controlleddoc.js
+++ b/components/doc/treetable/controlleddoc.js
@@ -13,8 +13,11 @@ export function ControlledDoc(props) {
     const toggleApplications = () => {
         let _expandedKeys = { ...expandedKeys };
 
-        if (_expandedKeys['0']) delete _expandedKeys['0'];
-        else _expandedKeys['0'] = true;
+        if (_expandedKeys['0']) {
+            delete _expandedKeys['0'];
+        } else {
+            _expandedKeys['0'] = true;
+        }
 
         setExpandedKeys(_expandedKeys);
     };
@@ -146,9 +149,9 @@ export default function ControlledDemo() {
             <div className="card">
                 <Button onClick={toggleApplications} label="Toggle Applications" />
                 <TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="mt-4" tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/editdoc.js b/components/doc/treetable/editdoc.js
index 8adf370f39..868dcce060 100644
--- a/components/doc/treetable/editdoc.js
+++ b/components/doc/treetable/editdoc.js
@@ -237,9 +237,9 @@ export default function EditDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander style={{ height: '3.5rem' }}></Column>
-                    <Column field="size" header="Size" editor={sizeEditor} cellEditValidator={requiredValidator} style={{ height: '3.5rem' }}></Column>
-                    <Column field="type" header="Type" editor={typeEditor} style={{ height: '3.5rem' }}></Column>
+                    <Column field="name" header="Name" expander style={{ height: '3.5rem' }} />
+                    <Column field="size" header="Size" editor={sizeEditor} cellEditValidator={requiredValidator} style={{ height: '3.5rem' }} />
+                    <Column field="type" header="Type" editor={typeEditor} style={{ height: '3.5rem' }} />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/filterdoc.js b/components/doc/treetable/filterdoc.js
index 4108534b1a..f3e5830893 100644
--- a/components/doc/treetable/filterdoc.js
+++ b/components/doc/treetable/filterdoc.js
@@ -24,7 +24,7 @@ export function FilterDoc(props) {
         return (
             <div className="flex justify-content-end">
                 <div className="p-input-icon-left">
-                    <i className="pi pi-search"></i>
+                    <i className="pi pi-search" />
                     <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Global Search" />
                 </div>
             </div>
@@ -189,9 +189,9 @@ export default function FilterDemo() {
                     <SelectButton value={filterMode} onChange={(e) => setFilterMode(e.value)} options={filterOptions} />
                 </div>
                 <TreeTable value={nodes} globalFilter={globalFilter} header={header} filterMode={filterMode} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
-                    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
-                    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+                    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name" />
+                    <Column field="size" header="Size" filter filterPlaceholder="Filter by size" />
+                    <Column field="type" header="Type" filter filterPlaceholder="Filter by type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/importdoc.js b/components/doc/treetable/importdoc.js
index 2746b49cf9..22bd196c7e 100644
--- a/components/doc/treetable/importdoc.js
+++ b/components/doc/treetable/importdoc.js
@@ -11,7 +11,7 @@ import { Column } from 'primereact/column';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/treetable/lazyloaddoc.js b/components/doc/treetable/lazyloaddoc.js
index c0d750a240..5d15cb4c1b 100644
--- a/components/doc/treetable/lazyloaddoc.js
+++ b/components/doc/treetable/lazyloaddoc.js
@@ -325,9 +325,9 @@ export default function LazyLoadDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} lazy paginator totalRecords={totalRecords} first={first} rows={rows} onPage={onPage} onExpand={onExpand} loading={loading} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/treetable/paginator/basicdoc.js b/components/doc/treetable/paginator/basicdoc.js
index 4b2ed98689..ec79bd21bf 100644
--- a/components/doc/treetable/paginator/basicdoc.js
+++ b/components/doc/treetable/paginator/basicdoc.js
@@ -152,9 +152,9 @@ export default function PaginatorBasicDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25]} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/treetable/paginator/templatedoc.js b/components/doc/treetable/paginator/templatedoc.js
index 703ea85644..865af66ca9 100644
--- a/components/doc/treetable/paginator/templatedoc.js
+++ b/components/doc/treetable/paginator/templatedoc.js
@@ -185,9 +185,9 @@ export default function PaginatorTemplateDemo() {
                     paginatorRight={paginatorRight}
                     tableStyle={{ minWidth: '50rem' }}
                 >
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/treetable/pt/ptdoc.js b/components/doc/treetable/pt/ptdoc.js
index 010f41c8e0..98f66217f5 100644
--- a/components/doc/treetable/pt/ptdoc.js
+++ b/components/doc/treetable/pt/ptdoc.js
@@ -167,7 +167,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card">
                 <TreeTable sortMode="multiple" value={nodes} tableStyle={{ minWidth: '50rem' }}>
                     <Column
@@ -178,7 +178,7 @@ export default function PTDemo() {
                         pt={{
                             sortBadge: { className: 'text-orange-400' }
                         }}
-                    ></Column>
+                    />
                     <Column
                         field="size"
                         header="Size"
@@ -186,7 +186,7 @@ export default function PTDemo() {
                         pt={{
                             sortBadge: { className: 'text-orange-400' }
                         }}
-                    ></Column>
+                    />
                     <Column
                         field="type"
                         header="Type"
@@ -194,7 +194,7 @@ export default function PTDemo() {
                         pt={{
                             sortBadge: { className: 'text-orange-400' }
                         }}
-                    ></Column>
+                    />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/reorderdoc.js b/components/doc/treetable/reorderdoc.js
index f1d59536b8..218f2a3d52 100644
--- a/components/doc/treetable/reorderdoc.js
+++ b/components/doc/treetable/reorderdoc.js
@@ -108,9 +108,9 @@ export default function ReorderDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} reorderableColumns tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/resize/expandmodedoc.js b/components/doc/treetable/resize/expandmodedoc.js
index 2af97c4f3c..c8702813c7 100644
--- a/components/doc/treetable/resize/expandmodedoc.js
+++ b/components/doc/treetable/resize/expandmodedoc.js
@@ -108,9 +108,9 @@ export default function ExpandModeDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} resizableColumns showGridlines columnResizeMode="expand" tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/resize/fitmodedoc.js b/components/doc/treetable/resize/fitmodedoc.js
index 5a9a1ddecc..5ac5076ac6 100644
--- a/components/doc/treetable/resize/fitmodedoc.js
+++ b/components/doc/treetable/resize/fitmodedoc.js
@@ -109,9 +109,9 @@ export default function FitModeDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/scroll/frozencolumnsdoc.js b/components/doc/treetable/scroll/frozencolumnsdoc.js
index f02d898bd0..c8b7f16058 100644
--- a/components/doc/treetable/scroll/frozencolumnsdoc.js
+++ b/components/doc/treetable/scroll/frozencolumnsdoc.js
@@ -120,13 +120,13 @@ export default function FrozenColumnsDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} scrollable frozenWidth="200px" scrollHeight="250px">
-                    <Column field="name" header="Name" expander frozen style={{ width: '250px', height: '57px' }}></Column>
-                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_0"></Column>
-                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_0"></Column>
-                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_1"></Column>
-                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_1"></Column>
-                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_2"></Column>
-                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_2"></Column>
+                    <Column field="name" header="Name" expander frozen style={{ width: '250px', height: '57px' }} />
+                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_0" />
+                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_0" />
+                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_1" />
+                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_1" />
+                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_2" />
+                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_2" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/scroll/horizontaldoc.js b/components/doc/treetable/scroll/horizontaldoc.js
index 64b760a908..60ce828569 100644
--- a/components/doc/treetable/scroll/horizontaldoc.js
+++ b/components/doc/treetable/scroll/horizontaldoc.js
@@ -115,12 +115,12 @@ export default function HorizontalScrollDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} scrollable scrollHeight="200px">
-                    <Column field="name" header="Name" expander style={{ width: '250px' }}></Column>
-                    <Column field="size" header="Size" style={{ width: '250px' }}></Column>
-                    <Column field="type" header="Type 2" style={{ width: '250px' }}></Column>
-                    <Column field="size" header="Size 2" style={{ width: '250px' }}></Column>
-                    <Column field="type" header="Type 3" style={{ width: '250px' }}></Column>
-                    <Column field="size" header="Size 3" style={{ width: '250px' }}></Column>
+                    <Column field="name" header="Name" expander style={{ width: '250px' }} />
+                    <Column field="size" header="Size" style={{ width: '250px' }} />
+                    <Column field="type" header="Type 2" style={{ width: '250px' }} />
+                    <Column field="size" header="Size 2" style={{ width: '250px' }} />
+                    <Column field="type" header="Type 3" style={{ width: '250px' }} />
+                    <Column field="size" header="Size 3" style={{ width: '250px' }} />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/scroll/verticaldoc.js b/components/doc/treetable/scroll/verticaldoc.js
index e20e8f350b..0cc0cb14a0 100644
--- a/components/doc/treetable/scroll/verticaldoc.js
+++ b/components/doc/treetable/scroll/verticaldoc.js
@@ -108,9 +108,9 @@ export default function VerticalScrollDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} scrollable scrollHeight="200px">
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/selection/checkboxdoc.js b/components/doc/treetable/selection/checkboxdoc.js
index b54d2ae460..b45095a132 100644
--- a/components/doc/treetable/selection/checkboxdoc.js
+++ b/components/doc/treetable/selection/checkboxdoc.js
@@ -127,9 +127,9 @@ export default function CheckboxRowSelectionDemo() {
             <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card">
                 <TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/selection/eventsdoc.js b/components/doc/treetable/selection/eventsdoc.js
index d2c7bb1336..823ecc6d11 100644
--- a/components/doc/treetable/selection/eventsdoc.js
+++ b/components/doc/treetable/selection/eventsdoc.js
@@ -157,9 +157,9 @@ export default function SingleRowSelectionDemo() {
                     onUnselect={onUnselect}
                     tableStyle={{ minWidth: '50rem' }}
                 >
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/selection/multipledoc.js b/components/doc/treetable/selection/multipledoc.js
index b19b6924c9..2470a45032 100644
--- a/components/doc/treetable/selection/multipledoc.js
+++ b/components/doc/treetable/selection/multipledoc.js
@@ -144,9 +144,9 @@ export default function MultipleRowsSelectionDemo() {
                     <label htmlFor="input-metakey">MetaKey</label>
                 </div>
                 <TreeTable value={nodes} selectionMode="multiple" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/selection/singledoc.js b/components/doc/treetable/selection/singledoc.js
index eb3878ea93..d5c7111121 100644
--- a/components/doc/treetable/selection/singledoc.js
+++ b/components/doc/treetable/selection/singledoc.js
@@ -136,9 +136,9 @@ export default function SingleRowSelectionDemo() {
                     <label htmlFor="input-metakey">MetaKey</label>
                 </div>
                 <TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/sort/multiplecolumnsdoc.js b/components/doc/treetable/sort/multiplecolumnsdoc.js
index fef4689158..e0134de3c2 100644
--- a/components/doc/treetable/sort/multiplecolumnsdoc.js
+++ b/components/doc/treetable/sort/multiplecolumnsdoc.js
@@ -114,9 +114,9 @@ export default function MultipleColumnsDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander sortable></Column>
-                    <Column field="size" header="Size" sortable></Column>
-                    <Column field="type" header="Type" sortable></Column>
+                    <Column field="name" header="Name" expander sortable />
+                    <Column field="size" header="Size" sortable />
+                    <Column field="type" header="Type" sortable />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/sort/singlecolumndoc.js b/components/doc/treetable/sort/singlecolumndoc.js
index 8b680d9db6..a361392ab1 100644
--- a/components/doc/treetable/sort/singlecolumndoc.js
+++ b/components/doc/treetable/sort/singlecolumndoc.js
@@ -114,9 +114,9 @@ export default function SingleColumnDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander sortable></Column>
-                    <Column field="size" header="Size" sortable></Column>
-                    <Column field="type" header="Type" sortable></Column>
+                    <Column field="name" header="Name" expander sortable />
+                    <Column field="size" header="Size" sortable />
+                    <Column field="type" header="Type" sortable />
                 </TreeTable>
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
diff --git a/components/doc/treetable/templatedoc.js b/components/doc/treetable/templatedoc.js
index e327e44cfa..47c179df82 100644
--- a/components/doc/treetable/templatedoc.js
+++ b/components/doc/treetable/templatedoc.js
@@ -17,8 +17,8 @@ export function TemplateDoc(props) {
     const actionTemplate = () => {
         return (
             <div className="flex flex-wrap gap-2">
-                <Button type="button" icon="pi pi-search" rounded></Button>
-                <Button type="button" icon="pi pi-pencil" severity="success" rounded></Button>
+                <Button type="button" icon="pi pi-search" rounded />
+                <Button type="button" icon="pi pi-pencil" severity="success" rounded />
             </div>
         );
     };
@@ -36,7 +36,7 @@ export function TemplateDoc(props) {
 
         return (
             <button type="button" className="p-treetable-toggler p-link" style={options.buttonStyle} tabIndex={-1} onClick={options.onClick}>
-                <span className={iconClassName} aria-hidden="true"></span>
+                <span className={iconClassName} aria-hidden="true" />
             </button>
         );
     };
@@ -217,9 +217,9 @@ export default function TemplateDemo() {
             </DocSectionText>
             <div className="card">
                 <TreeTable value={nodes} header={header} footer={footer} togglerTemplate={togglerTemplate} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
                     <Column body={actionTemplate} headerClassName="w-10rem" />
                 </TreeTable>
             </div>
diff --git a/components/doc/tristatecheckbox/importdoc.js b/components/doc/tristatecheckbox/importdoc.js
index 24f864c184..b103a07d37 100644
--- a/components/doc/tristatecheckbox/importdoc.js
+++ b/components/doc/tristatecheckbox/importdoc.js
@@ -10,7 +10,7 @@ import { TriStateCheckbox } from 'primereact/tristatecheckbox';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/virtualscroller/importdoc.js b/components/doc/virtualscroller/importdoc.js
index 586de09ec1..1ab82d3d7a 100644
--- a/components/doc/virtualscroller/importdoc.js
+++ b/components/doc/virtualscroller/importdoc.js
@@ -10,7 +10,7 @@ import { VirtualScroller } from 'primereact/virtualscroller';
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
diff --git a/components/doc/virtualscroller/pt/ptdoc.js b/components/doc/virtualscroller/pt/ptdoc.js
index 4d3fd8e03b..9ca0e68f8e 100644
--- a/components/doc/virtualscroller/pt/ptdoc.js
+++ b/components/doc/virtualscroller/pt/ptdoc.js
@@ -111,7 +111,7 @@ export default function PTDemo() {
 
     return (
         <>
-            <DocSectionText {...props}></DocSectionText>
+            <DocSectionText {...props} />
             <div className="card flex justify-content-center">
                 <VirtualScroller
                     items={items}
diff --git a/components/landing/blocksection.js b/components/landing/blocksection.js
index a947015794..13251f751b 100644
--- a/components/landing/blocksection.js
+++ b/components/landing/blocksection.js
@@ -15,7 +15,7 @@ const BlockSection = () => {
             <div className="flex justify-content-center mt-4">
                 <a href="https://blocks.primereact.org" className="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
                     <span>Explore All</span>
-                    <i className="pi pi-arrow-right ml-2"></i>
+                    <i className="pi pi-arrow-right ml-2" />
                 </a>
             </div>
             <section className={classNames('prime-blocks flex justify-content-center align-items-center flex-column z-1', { 'blocks-animation': animation })}>
@@ -26,26 +26,26 @@ const BlockSection = () => {
                                 <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
                             </div>
                             <div className="sidebar-menu mt-5">
-                                <div className="bar w-8 my-3"></div>
-                                <div className="bar w-9 my-3"></div>
-                                <div className="bar w-7 my-3"></div>
-                                <div className="bar w-6 my-3"></div>
-                                <div className="bar w-9 my-3"></div>
+                                <div className="bar w-8 my-3" />
+                                <div className="bar w-9 my-3" />
+                                <div className="bar w-7 my-3" />
+                                <div className="bar w-6 my-3" />
+                                <div className="bar w-9 my-3" />
                             </div>
                         </div>
                         <div className="block-content flex-1 p-4 flex flex-column">
-                            <div className="bar w-1"></div>
+                            <div className="bar w-1" />
                             <div className="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
                                 <div className="flex justify-content-between">
                                     <div className="block-item w-6rem">
                                         <div className="flex justify-content-between">
                                             <div>
-                                                <div className="bar w-2rem mt-2"></div>
-                                                <div className="bar w-4rem mt-3"></div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
                                             </div>
                                             <div>
                                                 <div className="flex-1">
-                                                    <div className="circle circle-highlight"></div>
+                                                    <div className="circle circle-highlight" />
                                                 </div>
                                             </div>
                                         </div>
@@ -53,22 +53,22 @@ const BlockSection = () => {
                                     <div className="block-item block-item-active animation-1 mx-3 w-6rem">
                                         <div className="flex justify-content-between">
                                             <div>
-                                                <div className="bar w-2rem mt-2"></div>
-                                                <div className="bar w-4rem mt-3"></div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
                                             </div>
                                             <div>
-                                                <div className="circle"></div>
+                                                <div className="circle" />
                                             </div>
                                         </div>
                                     </div>
                                     <div className="block-item w-6rem">
                                         <div className="flex justify-content-between">
                                             <div>
-                                                <div className="bar w-2rem mt-2"></div>
-                                                <div className="bar w-4rem mt-3"></div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
                                             </div>
                                             <div>
-                                                <div className="circle circle-highligh"></div>
+                                                <div className="circle circle-highligh" />
                                             </div>
                                         </div>
                                     </div>
@@ -77,33 +77,33 @@ const BlockSection = () => {
                                     <div className="block-item w-6rem">
                                         <div className="flex justify-content-between">
                                             <div>
-                                                <div className="bar w-2rem mt-2"></div>
-                                                <div className="bar w-4rem mt-3"></div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
                                             </div>
                                             <div>
-                                                <div className="circle circle-highligh"></div>
+                                                <div className="circle circle-highligh" />
                                             </div>
                                         </div>
                                     </div>
                                     <div className="block-item mx-3 w-6rem">
                                         <div className="flex justify-content-between">
                                             <div>
-                                                <div className="bar w-2rem mt-2"></div>
-                                                <div className="bar w-4rem mt-3"></div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
                                             </div>
                                             <div>
-                                                <div className="circle circle-highligh"></div>
+                                                <div className="circle circle-highligh" />
                                             </div>
                                         </div>
                                     </div>
                                     <div className="block-item w-6rem">
                                         <div className="flex justify-content-between">
                                             <div>
-                                                <div className="bar w-2rem mt-2"></div>
-                                                <div className="bar w-4rem mt-3"></div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
                                             </div>
                                             <div>
-                                                <div className="circle circle-highligh"></div>
+                                                <div className="circle circle-highligh" />
                                             </div>
                                         </div>
                                     </div>
@@ -119,37 +119,37 @@ const BlockSection = () => {
                                 <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
                             </div>
                             <div className="flex-auto sidebar-menu flex">
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
                             </div>
-                            <div className="circle circle-highlight"></div>
+                            <div className="circle circle-highlight" />
                         </div>
                         <div className="block-content flex-1 p-4 flex flex-column">
-                            <div className="bar w-1"></div>
+                            <div className="bar w-1" />
                             <div className="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
                                 <div className="flex justify-content-between">
                                     <div className="block-item w-4rem">
-                                        <div className="bar w-2rem"></div>
+                                        <div className="bar w-2rem" />
                                         <span className="text my-2">26 %</span>
-                                        <div className="box box-orange"></div>
+                                        <div className="box box-orange" />
                                     </div>
                                     <div className="block-item block-item-active animation-2 ml-3 mr-3 w-4rem">
-                                        <div className="bar w-1rem"></div>
+                                        <div className="bar w-1rem" />
                                         <span className="text my-2">6 %</span>
-                                        <div className="box box-pink"></div>
+                                        <div className="box box-pink" />
                                     </div>
                                     <div className="block-item mr-3 w-4rem">
-                                        <div className="bar w-4rem"></div>
+                                        <div className="bar w-4rem" />
                                         <span className="text my-2">62 %</span>
-                                        <div className="box box-green"></div>
+                                        <div className="box box-green" />
                                     </div>
                                     <div className="block-item w-4rem">
-                                        <div className="bar w-2rem"></div>
+                                        <div className="bar w-2rem" />
                                         <span className="text my-2">39 %</span>
-                                        <div className="box box-blue"></div>
+                                        <div className="box box-blue" />
                                     </div>
                                 </div>
                             </div>
@@ -161,59 +161,59 @@ const BlockSection = () => {
                                 <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-2.svg" alt="block logo" />
                             </div>
                             <div className="sidebar-menu mt-5">
-                                <div className="circle my-3"></div>
-                                <div className="circle my-3"></div>
-                                <div className="circle my-3"></div>
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
                             </div>
                         </div>
                         <div className="block-sidebar-list px-4">
-                            <div className="bar w-2rem my-3"></div>
-                            <div className="bar w-3rem my-3"></div>
-                            <div className="bar w-2rem my-3"></div>
-                            <div className="bar w-2rem my-3"></div>
-                            <div className="bar w-1rem my-3"></div>
-                            <div className="bar w-3rem my-3"></div>
-                            <div className="bar w-3rem my-3"></div>
-                            <div className="bar w-2rem my-3"></div>
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-1rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
                         </div>
                         <div className="block-content flex-1 my-5 mx-4 flex flex-column">
                             <div className="block-main h-full flex justify-content-center align-items-center flex-column px-2">
                                 <div className="flex justify-content-between">
                                     <div className="block-item w-3 flex justify-content-between flex-column">
-                                        <div className="bar w-full"></div>
+                                        <div className="bar w-full" />
                                         <div className="flex align-items-center mt-3">
-                                            <div className="circle circle-small circle-highlight mr-2"></div>
-                                            <div className="bar w-2rem"></div>
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
                                         </div>
-                                        <div className="bar bar-button w-4rem mt-4"></div>
+                                        <div className="bar bar-button w-4rem mt-4" />
                                     </div>
                                     <div className="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
-                                        <div className="bar w-full"></div>
+                                        <div className="bar w-full" />
                                         <div className="flex align-items-center mt-3">
-                                            <div className="circle circle-small circle-highlight mr-2"></div>
-                                            <div className="bar w-2rem"></div>
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
                                         </div>
                                         <div className="flex align-items-center mt-3">
-                                            <div className="circle circle-small circle-highlight mr-2"></div>
-                                            <div className="bar w-3rem"></div>
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-3rem" />
                                         </div>
-                                        <div className="bar bar-button w-4rem mt-4"></div>
+                                        <div className="bar bar-button w-4rem mt-4" />
                                     </div>
                                     <div className="block-item w-3 flex justify-content-between flex-column">
-                                        <div className="bar w-full"></div>
+                                        <div className="bar w-full" />
                                         <div className="flex align-items-center mt-3">
-                                            <div className="circle circle-small circle-highlight mr-2"></div>
-                                            <div className="bar w-2rem"></div>
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
                                         </div>
                                         <div className="flex align-items-center mt-3">
-                                            <div className="circle circle-small circle-highlight mr-2"></div>
-                                            <div className="bar w-2rem"></div>
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
                                         </div>
                                         <div className="flex align-items-center mt-3">
-                                            <div className="circle circle-small circle-highlight mr-2"></div>
-                                            <div className="bar w-2rem"></div>
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
                                         </div>
-                                        <div className="bar bar-button w-4rem mt-4"></div>
+                                        <div className="bar bar-button w-4rem mt-4" />
                                     </div>
                                 </div>
                             </div>
@@ -227,56 +227,56 @@ const BlockSection = () => {
                                 <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
                             </div>
                             <div className="sidebar-menu mt-5">
-                                <div className="bar w-8 my-3"></div>
-                                <div className="bar w-9 my-3"></div>
-                                <div className="bar w-7 my-3"></div>
-                                <div className="bar w-6 my-3"></div>
-                                <div className="bar w-9 my-3"></div>
+                                <div className="bar w-8 my-3" />
+                                <div className="bar w-9 my-3" />
+                                <div className="bar w-7 my-3" />
+                                <div className="bar w-6 my-3" />
+                                <div className="bar w-9 my-3" />
                             </div>
                         </div>
                         <div className="block-content flex-1 p-4 flex flex-column">
                             <div className="block-main h-full flex justify-content-center align-items-center flex-column">
-                                <div className="bar w-3 mb-3"></div>
-                                <div className="bar w-4 mb-5"></div>
+                                <div className="bar w-3 mb-3" />
+                                <div className="bar w-4 mb-5" />
                                 <div className="flex justify-content-between">
                                     <div className="block-item w-6rem p-0">
-                                        <div className="block-image"></div>
+                                        <div className="block-image" />
                                         <div className="p-2">
                                             <div>
-                                                <div className="bar w-4rem my-2"></div>
-                                                <div className="bar w-2rem mb-2"></div>
+                                                <div className="bar w-4rem my-2" />
+                                                <div className="bar w-2rem mb-2" />
                                             </div>
                                             <div>
                                                 <div className="flex-1">
-                                                    <div className="circle circle-highlight circle-medium"></div>
+                                                    <div className="circle circle-highlight circle-medium" />
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     <div className="block-item block-item-active mx-3 animation-1 w-6rem p-0">
-                                        <div className="block-image"></div>
+                                        <div className="block-image" />
                                         <div className="p-2">
                                             <div>
-                                                <div className="bar w-4rem my-2"></div>
-                                                <div className="bar w-2rem mb-2"></div>
+                                                <div className="bar w-4rem my-2" />
+                                                <div className="bar w-2rem mb-2" />
                                             </div>
                                             <div>
                                                 <div className="flex-1">
-                                                    <div className="circle circle-highlight circle-medium"></div>
+                                                    <div className="circle circle-highlight circle-medium" />
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     <div className="block-item w-6rem p-0">
-                                        <div className="block-image"></div>
+                                        <div className="block-image" />
                                         <div className="p-2">
                                             <div>
-                                                <div className="bar w-4rem my-2"></div>
-                                                <div className="bar w-2rem mb-2"></div>
+                                                <div className="bar w-4rem my-2" />
+                                                <div className="bar w-2rem mb-2" />
                                             </div>
                                             <div>
                                                 <div className="flex-1">
-                                                    <div className="circle circle-highlight circle-medium"></div>
+                                                    <div className="circle circle-highlight circle-medium" />
                                                 </div>
                                             </div>
                                         </div>
@@ -291,57 +291,57 @@ const BlockSection = () => {
                                 <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-2.svg" alt="block logo" />
                             </div>
                             <div className="sidebar-menu mt-5">
-                                <div className="circle my-3"></div>
-                                <div className="circle my-3"></div>
-                                <div className="circle my-3"></div>
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
                             </div>
                         </div>
                         <div className="block-sidebar-list px-4">
-                            <div className="bar w-2rem my-3"></div>
-                            <div className="bar w-3rem my-3"></div>
-                            <div className="bar w-2rem my-3"></div>
-                            <div className="bar w-2rem my-3"></div>
-                            <div className="bar w-1rem my-3"></div>
-                            <div className="bar w-3rem my-3"></div>
-                            <div className="bar w-3rem my-3"></div>
-                            <div className="bar w-2rem my-3"></div>
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-1rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
                         </div>
                         <div className="block-content flex-1 my-5 mx-4 flex flex-column">
                             <div className="block-main h-full flex justify-content-center align-items-center flex-column px-2">
                                 <div className="flex justify-content-between">
                                     <div className="block-item block-item-table block-item-active animation-1 flex">
-                                        <div className="bar w-3rem mx-3"></div>
-                                        <div className="bar w-3rem mx-3"></div>
-                                        <div className="bar w-3rem mx-3"></div>
-                                        <div className="bar w-3rem mx-3"></div>
+                                        <div className="bar w-3rem mx-3" />
+                                        <div className="bar w-3rem mx-3" />
+                                        <div className="bar w-3rem mx-3" />
+                                        <div className="bar w-3rem mx-3" />
                                     </div>
                                 </div>
                                 <div className="block-item block-item-col flex">
                                     <div className="flex">
-                                        <div className="circle circle-small circle-highlight -mr-1"></div>
-                                        <div className="bar w-3rem mx-3"></div>
+                                        <div className="circle circle-small circle-highlight -mr-1" />
+                                        <div className="bar w-3rem mx-3" />
                                     </div>
-                                    <div className="bar w-3rem mx-3"></div>
-                                    <div className="bar w-3rem mx-3"></div>
-                                    <div className="bar w-3rem mx-3"></div>
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
                                 </div>
                                 <div className="block-item block-item-col flex">
                                     <div className="flex">
-                                        <div className="circle circle-small circle-highlight -mr-1"></div>
-                                        <div className="bar w-3rem mx-3"></div>
+                                        <div className="circle circle-small circle-highlight -mr-1" />
+                                        <div className="bar w-3rem mx-3" />
                                     </div>
-                                    <div className="bar w-3rem mx-3"></div>
-                                    <div className="bar w-3rem mx-3"></div>
-                                    <div className="bar w-3rem mx-3"></div>
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
                                 </div>
                                 <div className="block-item block-item-col flex">
                                     <div className="flex">
-                                        <div className="circle circle-small circle-highlight -mr-1"></div>
-                                        <div className="bar w-3rem mx-3"></div>
+                                        <div className="circle circle-small circle-highlight -mr-1" />
+                                        <div className="bar w-3rem mx-3" />
                                     </div>
-                                    <div className="bar w-3rem mx-3"></div>
-                                    <div className="bar w-3rem mx-3"></div>
-                                    <div className="bar w-3rem mx-3"></div>
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
                                 </div>
                             </div>
                         </div>
@@ -354,13 +354,13 @@ const BlockSection = () => {
                                 <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
                             </div>
                             <div className="flex-auto sidebar-menu flex">
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
-                                <div className="bar w-2rem mx-2"></div>
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
                             </div>
-                            <div className="circle"></div>
+                            <div className="circle" />
                         </div>
                         <div className="block-content flex-1 p-4 flex flex-column">
                             <div className="block-main h-full flex justify-content-center align-items-center flex-column">
@@ -368,12 +368,12 @@ const BlockSection = () => {
                                     <div className="-mt-4">
                                         <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/question.svg" alt="question mark" />
                                     </div>
-                                    <div className="bar w-2rem mt-2"></div>
-                                    <div className="bar w-6rem mt-2"></div>
-                                    <div className="bar w-4rem mt-2"></div>
+                                    <div className="bar w-2rem mt-2" />
+                                    <div className="bar w-6rem mt-2" />
+                                    <div className="bar w-4rem mt-2" />
                                     <div className="flex">
-                                        <div className="bar bar-highlight bar-button w-4rem mr-2 mt-4"></div>
-                                        <div className="bar bar-button w-4rem mr-2 mt-4"></div>
+                                        <div className="bar bar-highlight bar-button w-4rem mr-2 mt-4" />
+                                        <div className="bar bar-button w-4rem mr-2 mt-4" />
                                     </div>
                                 </div>
                             </div>
diff --git a/components/landing/footersection.js b/components/landing/footersection.js
index feeeadc95b..fb63add9a9 100644
--- a/components/landing/footersection.js
+++ b/components/landing/footersection.js
@@ -97,7 +97,7 @@ const FooterSection = () => {
                     </div>
                 </div>
 
-                <hr className="section-divider mt-8"></hr>
+                <hr className="section-divider mt-8" />
 
                 <div className="flex flex-wrap justify-content-between py-6 gap-5">
                     <span>
@@ -144,16 +144,16 @@ const FooterSection = () => {
                     </span>
                     <div className="flex align-items-center">
                         <a href="https://twitter.com/primereact" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
-                            <i className="pi pi-twitter"></i>
+                            <i className="pi pi-twitter" />
                         </a>
                         <a href="https://github.com/primefaces/primereact" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
-                            <i className="pi pi-github"></i>
+                            <i className="pi pi-github" />
                         </a>
                         <a href="https://discord.gg/gzKFYnpmCY" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
-                            <i className="pi pi-discord"></i>
+                            <i className="pi pi-discord" />
                         </a>
                         <a href="https://github.com/orgs/primefaces/discussions" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
-                            <i className="pi pi-comments"></i>
+                            <i className="pi pi-comments" />
                         </a>
                     </div>
                 </div>
diff --git a/components/landing/getstartedsection.js b/components/landing/getstartedsection.js
index 910ba03066..a01e69756a 100644
--- a/components/landing/getstartedsection.js
+++ b/components/landing/getstartedsection.js
@@ -10,7 +10,7 @@ const GetStartedSection = () => {
             <div className="flex flex-column md:flex-row align-items-center justify-content-center">
                 <Link href="/installation">
                     <a className="linkbox active font-semibold py-3 px-4 fadeinleft animation-duration-2000 animation-ease-out">
-                        Get Started <i className="pi pi-arrow-right ml-3"></i>
+                        Get Started <i className="pi pi-arrow-right ml-3" />
                     </a>
                 </Link>
                 <div
@@ -25,7 +25,7 @@ const GetStartedSection = () => {
                         }, 2000);
                     }}
                 >
-                    <i className={downloadIcon}></i>
+                    <i className={downloadIcon} />
                     <span className="font-bold select-all" style={{ fontFamily: 'monaco, monospace' }}>
                         {npmText}
                     </span>
diff --git a/components/landing/herosection.js b/components/landing/herosection.js
index ef3eed6ab6..dbf2ab7e6c 100644
--- a/components/landing/herosection.js
+++ b/components/landing/herosection.js
@@ -117,12 +117,12 @@ const HeroSection = () => {
                         <Link href="/installation">
                             <a className="linkbox active font-semibold py-3 px-4">
                                 <span>Get Started</span>
-                                <i className="pi pi-arrow-right ml-3"></i>
+                                <i className="pi pi-arrow-right ml-3" />
                             </a>
                         </Link>
                         <a href="https://github.com/primefaces/primereact" target="_blank" rel="noopener noreferrer" className="linkbox font-semibold py-3 px-4">
                             <span>Give a Star</span>
-                            <i className="pi pi-star-fill ml-3 text-yellow-500"></i>
+                            <i className="pi pi-star-fill ml-3 text-yellow-500" />
                         </a>
                     </div>
                 </div>
@@ -188,7 +188,7 @@ const HeroSection = () => {
                                     </div>
                                     <span className="font-medium text-xl ml-auto">$990</span>
                                 </div>
-                                <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined className="w-full"></Button>
+                                <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined className="w-full" />
                             </div>
                             <div className="box p-4 fadein animation-duration-500">
                                 <ul className="list-none p-0 m-0">
@@ -203,7 +203,7 @@ const HeroSection = () => {
                                     </li>
                                     <li className="flex">
                                         <a className="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style={{ borderRadius: '10px' }}>
-                                            <i className="pi pi-home text-xl mr-3"></i>
+                                            <i className="pi pi-home text-xl mr-3" />
                                             <span className="flex flex-column">
                                                 <span className="font-bold mb-1">Dashboard</span>
                                                 <span className="m-0 text-secondary">Control Panel</span>
@@ -212,12 +212,12 @@ const HeroSection = () => {
                                     </li>
                                     <li className="flex">
                                         <a className="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style={{ borderRadius: '10px' }}>
-                                            <i className="pi pi-envelope text-xl mr-3"></i>
+                                            <i className="pi pi-envelope text-xl mr-3" />
                                             <span className="flex flex-column">
                                                 <span className="font-bold mb-1">Inbox</span>
                                                 <span className="m-0 text-secondary">View Messages</span>
                                             </span>
-                                            <Badge value="3" className="ml-auto"></Badge>
+                                            <Badge value="3" className="ml-auto" />
                                         </a>
                                     </li>
                                 </ul>
diff --git a/components/landing/templatesection.js b/components/landing/templatesection.js
index 469fc17d40..acb03387d5 100644
--- a/components/landing/templatesection.js
+++ b/components/landing/templatesection.js
@@ -27,7 +27,7 @@ const TemplateSection = () => {
             <div className="flex justify-content-center relative mt-4 z-3">
                 <a href="https://www.primefaces.org/store" className="font-semibold p-3 border-round flex align-items-center linkbox active">
                     <span>Explore All</span>
-                    <i className="pi pi-arrow-right ml-2"></i>
+                    <i className="pi pi-arrow-right ml-2" />
                 </a>
             </div>
             <section className={classNames('templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': animation })}>
@@ -72,60 +72,60 @@ const TemplateSection = () => {
                 </div>
                 <div className="lines">
                     <div className="top">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
                     </div>
                     <div className="left">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                        <span></span>
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
                     </div>
                 </div>
             </section>
diff --git a/components/landing/themesection.js b/components/landing/themesection.js
index 615d8ce74b..b448eeaccf 100644
--- a/components/landing/themesection.js
+++ b/components/landing/themesection.js
@@ -95,7 +95,7 @@ const ThemeSection = () => {
         const value = e.target.value;
         let _filters = { ...filters };
 
-        _filters['global'].value = value;
+        _filters.global.value = value;
 
         setFilters(_filters);
         setGlobalFilterValue(value);
@@ -146,29 +146,29 @@ const ThemeSection = () => {
     };
 
     const activityBodyTemplate = (rowData) => {
-        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }} />;
     };
 
     const actionBodyTemplate = () => {
-        return <Button type="button" icon="pi pi-cog" className="p-button-text"></Button>;
+        return <Button type="button" icon="pi pi-cog" className="p-button-text" />;
     };
 
     const getSeverity = (status) => {
         switch (status) {
-            case 'unqualified':
-                return 'danger';
+        case 'unqualified':
+            return 'danger';
 
-            case 'qualified':
-                return 'success';
+        case 'qualified':
+            return 'success';
 
-            case 'new':
-                return 'info';
+        case 'new':
+            return 'info';
 
-            case 'negotiation':
-                return 'warning';
+        case 'negotiation':
+            return 'warning';
 
-            case 'renewal':
-                return null;
+        case 'renewal':
+            return null;
         }
     };
 
@@ -212,7 +212,7 @@ const ThemeSection = () => {
                         emptyMessage="No customers found."
                         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                     >
-                        <Column selectionMode="multiple" style={{ width: '3rem' }}></Column>
+                        <Column selectionMode="multiple" style={{ width: '3rem' }} />
                         <Column field="name" header="Name" sortable style={{ minWidth: '14rem' }} />
                         <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filterPlaceholder="Search by country" />
                         <Column sortable header="Agent" sortField="representative.name" filterField="representative" style={{ minWidth: '14rem' }} body={representativeBodyTemplate} />
diff --git a/components/landing/userssection.js b/components/landing/userssection.js
index 3aff0afe34..cad9d43a97 100644
--- a/components/landing/userssection.js
+++ b/components/landing/userssection.js
@@ -47,14 +47,14 @@ const UsersSection = () => {
                 <span className="ml-2"> </span>
             </div>
             <div className="logo-section relative w-full md:w-8 mt-6 users-container">
-                <div className="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"></div>
+                <div className="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" />
                 <Marquee users={users1} />
-                <div className="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div>
+                <div className="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" />
             </div>
             <div className="logo-section relative w-full md:w-8 mt-2 users-container">
-                <div className="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"></div>
+                <div className="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" />
                 <Marquee users={users2} reverse />
-                <div className="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div>
+                <div className="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" />
             </div>
         </section>
     );
diff --git a/components/layout/config.js b/components/layout/config.js
index 16c4a8e25a..cec542f4f4 100644
--- a/components/layout/config.js
+++ b/components/layout/config.js
@@ -39,7 +39,7 @@ export default function Config(props) {
             let newTheme = themeName + '-' + (darkMode ? 'dark' : 'light');
 
             if (color) {
-                newTheme += '-' + color;
+                newTheme = newTheme + ('-' + color);
             }
 
             if (newTheme.startsWith('md-') && compactMaterial) {
@@ -61,7 +61,7 @@ export default function Config(props) {
         }
 
         if (color) {
-            themeName += '-' + color;
+            themeName = themeName + ('-' + color);
         }
 
         return theme === themeName;
@@ -125,7 +125,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'cyan')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -135,7 +135,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'green')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -145,7 +145,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'blue')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -155,7 +155,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'indigo')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)' }} />
                         </button>
                     </div>
                     <div className="flex align-items-center justify-content-between gap-3">
@@ -167,7 +167,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'purple')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -177,7 +177,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'amber')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -187,7 +187,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'teal')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -197,7 +197,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('lara', 'pink')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)' }} />
                         </button>
                     </div>
                 </section>
@@ -222,7 +222,7 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('md', 'indigo')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: '30px', background: 'linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: '30px', background: 'linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -232,10 +232,10 @@ export default function Config(props) {
                             style={{ borderRadius: '30px' }}
                             onClick={() => switchTheme('md', 'deeppurple')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: '30px', background: 'linear-gradient(180deg, #702f92 0%, rgba(112, 47, 146, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: '30px', background: 'linear-gradient(180deg, #702f92 0%, rgba(112, 47, 146, 0.5) 100%)' }} />
                         </button>
-                        <div className="w-3"></div>
-                        <div className="w-3"></div>
+                        <div className="w-3" />
+                        <div className="w-3" />
                     </div>
                 </section>
 
@@ -253,7 +253,7 @@ export default function Config(props) {
                             style={{ borderRadius: 30 }}
                             onClick={() => switchTheme('bootstrap4', 'blue')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)' }} />
                         </button>
                         <button
                             className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
@@ -263,10 +263,10 @@ export default function Config(props) {
                             style={{ borderRadius: 30 }}
                             onClick={() => switchTheme('bootstrap4', 'purple')}
                         >
-                            <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #893cae 0%, rgba(137, 60, 174, 0.5) 100%)' }}></span>
+                            <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #893cae 0%, rgba(137, 60, 174, 0.5) 100%)' }} />
                         </button>
-                        <div className="w-3"></div>
-                        <div className="w-3"></div>
+                        <div className="w-3" />
+                        <div className="w-3" />
                     </div>
                 </section>
 
@@ -285,7 +285,7 @@ export default function Config(props) {
                                 style={{ borderRadius: 30 }}
                                 onClick={() => switchTheme('soho')}
                             >
-                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #664beb 0%, rgba(102, 75, 235, 0.5) 100%)' }}></span>
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #664beb 0%, rgba(102, 75, 235, 0.5) 100%)' }} />
                             </button>
                         </div>
                         <div className="w-3">
@@ -301,11 +301,11 @@ export default function Config(props) {
                                 style={{ borderRadius: 30 }}
                                 onClick={() => switchTheme('viva')}
                             >
-                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #4a67c9 0%, rgba(74, 103, 201, 0.5) 100%)' }}></span>
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #4a67c9 0%, rgba(74, 103, 201, 0.5) 100%)' }} />
                             </button>
                         </div>
-                        <div className="w-3"></div>
-                        <div className="w-3"></div>
+                        <div className="w-3" />
+                        <div className="w-3" />
                     </div>
                 </section>
 
@@ -324,7 +324,7 @@ export default function Config(props) {
                                 style={{ borderRadius: 30 }}
                                 onClick={() => switchTheme('fluent-light')}
                             >
-                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #0078d4 0%, rgba(0, 120, 212, 0.5) 100%)' }}></span>
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #0078d4 0%, rgba(0, 120, 212, 0.5) 100%)' }} />
                             </button>
                         </div>
                         <div className="w-3">
@@ -340,7 +340,7 @@ export default function Config(props) {
                                 style={{ borderRadius: 30 }}
                                 onClick={() => switchTheme('mira')}
                             >
-                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #81a1c1 0%, rgba(129, 161, 193, 0.5) 100%)' }}></span>
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #81a1c1 0%, rgba(129, 161, 193, 0.5) 100%)' }} />
                             </button>
                         </div>
                         <div className="w-3">
@@ -356,10 +356,10 @@ export default function Config(props) {
                                 style={{ borderRadius: 30 }}
                                 onClick={() => switchTheme('nano')}
                             >
-                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #1469b4 0%, rgba(20, 105, 180, 0.5) 100%)' }}></span>
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #1469b4 0%, rgba(20, 105, 180, 0.5) 100%)' }} />
                             </button>
                         </div>
-                        <div className="w-3"></div>
+                        <div className="w-3" />
                     </div>
                 </section>
             </div>
diff --git a/components/layout/layout.js b/components/layout/layout.js
index f9ec1ddf3a..c86ff6daa0 100644
--- a/components/layout/layout.js
+++ b/components/layout/layout.js
@@ -30,17 +30,21 @@ export default function Layout({ children }) {
 
         if (darkMode) {
             newTheme = theme.replace('dark', 'light');
+        } else if (theme.includes('light') && theme !== 'fluent-light') {
+            newTheme = theme.replace('light', 'dark');
         } else {
-            if (theme.includes('light') && theme !== 'fluent-light') newTheme = theme.replace('light', 'dark');
-            else newTheme = 'lara-dark-cyan';
+            newTheme = 'lara-dark-cyan';
         }
 
         changeTheme(newTheme, !darkMode);
     };
 
     useEffect(() => {
-        if (sidebarActive) DomHandler.blockBodyScroll('blocked-scroll');
-        else DomHandler.unblockBodyScroll('blocked-scroll');
+        if (sidebarActive) {
+            DomHandler.blockBodyScroll('blocked-scroll');
+        } else {
+            DomHandler.unblockBodyScroll('blocked-scroll');
+        }
     }, [sidebarActive]); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
@@ -67,17 +71,17 @@ export default function Layout({ children }) {
                 <meta name="twitter:site" content="@primereact" />
                 <meta name="twitter:title" content="PrimeReact | React UI Component Library" />
                 <meta name="twitter:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
-                <meta property="og:type" content="website"></meta>
-                <meta property="og:title" content="PrimeReact | React UI Component Library"></meta>
-                <meta property="og:url" content="https://primereact.org"></meta>
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content="PrimeReact | React UI Component Library" />
+                <meta property="og:url" content="https://primereact.org" />
                 <meta property="og:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
-                <meta property="og:image" content="https://www.primefaces.org/static/social/primereact-preview.jpg"></meta>
-                <meta property="og:ttl" content="604800"></meta>
-                <link rel="icon" href="https://primefaces.org/cdn/primereact/images/favicon.ico" type="image/x-icon"></link>
+                <meta property="og:image" content="https://www.primefaces.org/static/social/primereact-preview.jpg" />
+                <meta property="og:ttl" content="604800" />
+                <link rel="icon" href="https://primefaces.org/cdn/primereact/images/favicon.ico" type="image/x-icon" />
             </Head>
             <NewsSection />
             <Topbar showConfigurator showMenuButton onMenuButtonClick={() => setSidebarActive(true)} onConfigButtonClick={() => setConfigActive(true)} onDarkSwitchClick={toggleDarkMode} />
-            <div className={classNames('layout-mask', { 'layout-mask-active': sidebarActive })} onClick={() => setSidebarActive(false)}></div>
+            <div className={classNames('layout-mask', { 'layout-mask-active': sidebarActive })} onClick={() => setSidebarActive(false)} />
             <Config active={configActive} onHide={() => setConfigActive(false)} onDarkSwitchClick={toggleDarkMode} />
             <div className="layout-content">
                 <Menu active={sidebarActive} />
diff --git a/components/layout/menuitem.js b/components/layout/menuitem.js
index 3e90e98e66..41b78937ed 100644
--- a/components/layout/menuitem.js
+++ b/components/layout/menuitem.js
@@ -21,10 +21,10 @@ function MenuItem(props) {
                 <StyleClass nodeRef={btnRef} selector="@next" enterClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
                     <button ref={btnRef} type="button" className="px-link">
                         <span className="menu-icon">
-                            <i className={menuItem.icon}></i>
+                            <i className={menuItem.icon} />
                         </span>
                         <span>{menuItem.name}</span>
-                        <i className="menu-toggle-icon pi pi-angle-down"></i>
+                        <i className="menu-toggle-icon pi pi-angle-down" />
                     </button>
                 </StyleClass>
             )}
@@ -33,11 +33,11 @@ function MenuItem(props) {
                     <a target="_blank" rel="noopener noreferrer">
                         {menuItem?.icon && root && (
                             <span className="menu-icon">
-                                <i className={menuItem?.icon}></i>
+                                <i className={menuItem?.icon} />
                             </span>
                         )}
                         <span>{menuItem?.name}</span>
-                        {menuItem?.badge && <Badge value={menuItem?.badge} className="ml-auto"></Badge>}
+                        {menuItem?.badge && <Badge value={menuItem?.badge} className="ml-auto" />}
                     </a>
                 </Link>
             )}
@@ -46,11 +46,11 @@ function MenuItem(props) {
                     <a className={classNames({ 'router-link-active': menuItem.to === router.pathname })}>
                         {menuItem?.icon && root && (
                             <span className="menu-icon">
-                                <i className={menuItem.icon}></i>
+                                <i className={menuItem.icon} />
                             </span>
                         )}
                         <span>{menuItem?.name}</span>
-                        {menuItem?.badge && <Badge value={menuItem.badge} className="ml-auto"></Badge>}
+                        {menuItem?.badge && <Badge value={menuItem.badge} className="ml-auto" />}
                     </a>
                 </Link>
             )}
@@ -59,7 +59,7 @@ function MenuItem(props) {
                 <div className={classNames('overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out', { hidden: menuItem.children && root && isActiveRootmenuItem(menuItem) })}>
                     <ol>
                         {menuItem.children.map((item, index) => (
-                            <MenuItem root={false} menuItem={item} key={`_root${index}`}></MenuItem>
+                            <MenuItem root={false} menuItem={item} key={`_root${index}`} />
                         ))}
                     </ol>
                 </div>
diff --git a/components/layout/topbar.js b/components/layout/topbar.js
index aa6526d8c9..564959a3f2 100644
--- a/components/layout/topbar.js
+++ b/components/layout/topbar.js
@@ -55,8 +55,11 @@ export default function Topbar(props) {
     const bindScrollListener = () => {
         scrollListener.current = () => {
             if (containerElement && containerElement.current) {
-                if (window.scrollY > 0) containerElement.current.classList.add('layout-topbar-sticky');
-                else containerElement.current.classList.remove('layout-topbar-sticky');
+                if (window.scrollY > 0) {
+                    containerElement.current.classList.add('layout-topbar-sticky');
+                } else {
+                    containerElement.current.classList.remove('layout-topbar-sticky');
+                }
             }
         };
 
@@ -175,7 +178,7 @@ export default function Topbar(props) {
                             rel="noopener noreferrer"
                             className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
                         >
-                            <i className="pi pi-github text-700"></i>
+                            <i className="pi pi-github text-700" />
                         </a>
                     </li>
                     <li>
@@ -185,7 +188,7 @@ export default function Topbar(props) {
                             rel="noopener noreferrer"
                             className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
                         >
-                            <i className="pi pi-discord text-700"></i>
+                            <i className="pi pi-discord text-700" />
                         </a>
                     </li>
                     <li>
@@ -195,7 +198,7 @@ export default function Topbar(props) {
                             rel="noopener noreferrer"
                             className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
                         >
-                            <i className="pi pi-comments text-700"></i>
+                            <i className="pi pi-comments text-700" />
                         </a>
                     </li>
                     <li>
@@ -204,13 +207,13 @@ export default function Topbar(props) {
                             className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
                             onClick={toggleDarkMode}
                         >
-                            <i className={classNames('pi text-700', { 'pi-moon': props.dark, 'pi-sun': !props.dark })}></i>
+                            <i className={classNames('pi text-700', { 'pi-moon': props.dark, 'pi-sun': !props.dark })} />
                         </button>
                     </li>
                     {props.showConfigurator && (
                         <li>
                             <button type="button" className="p-button flex-shrink-0 flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" onClick={onConfigButtonClick}>
-                                <i className="pi pi-palette"></i>
+                                <i className="pi pi-palette" />
                             </button>
                         </li>
                     )}
@@ -224,7 +227,7 @@ export default function Topbar(props) {
                                 className="px-link flex align-items-center surface-card h-2rem px-2 border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
                             >
                                 <span className="text-900 block white-space-nowrap overflow-hidden">{versions && versions.length ? versions[0].version : ''}</span>
-                                <span className="ml-2 pi pi-angle-down text-600"></span>
+                                <span className="ml-2 pi pi-angle-down text-600" />
                             </button>
                         </StyleClass>
                         <div className="p-3 surface-overlay hidden absolute right-0 top-auto border-round shadow-2 origin-top w-8rem">
@@ -251,7 +254,7 @@ export default function Topbar(props) {
                                 aria-haspopup
                                 aria-label="Menu"
                             >
-                                <i className="pi pi-bars text-700"></i>
+                                <i className="pi pi-bars text-700" />
                             </button>
                         </li>
                     )}
diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
index 37eb772670..e7f4b42cd9 100644
--- a/components/lib/accordion/Accordion.js
+++ b/components/lib/accordion/Accordion.js
@@ -89,30 +89,30 @@ export const Accordion = React.forwardRef((inProps, ref) => {
 
     const onTabHeaderKeyDown = (event, tab, index) => {
         switch (event.code) {
-            case 'ArrowDown':
-                onTabArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onTabArrowUpKey(event);
-                break;
-
-            case 'Home':
-                onTabHomeKey(event);
-                break;
-
-            case 'End':
-                onTabEndKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                onTabEnterKey(event, tab, index);
-                break;
-
-            default:
-                break;
+        case 'ArrowDown':
+            onTabArrowDownKey(event);
+            break;
+
+        case 'ArrowUp':
+            onTabArrowUpKey(event);
+            break;
+
+        case 'Home':
+            onTabHomeKey(event);
+            break;
+
+        case 'End':
+            onTabEndKey(event);
+            break;
+
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+            onTabEnterKey(event, tab, index);
+            break;
+
+        default:
+            break;
         }
     };
 
diff --git a/components/lib/api/FilterService.js b/components/lib/api/FilterService.js
index bedf45bb59..8505e2fb42 100644
--- a/components/lib/api/FilterService.js
+++ b/components/lib/api/FilterService.js
@@ -94,8 +94,11 @@ export const FilterService = {
                 return false;
             }
 
-            if (value.getTime && filter.getTime) return value.getTime() === filter.getTime();
-            else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            if (value.getTime && filter.getTime) {
+                return value.getTime() === filter.getTime();
+            }
+
+            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
         },
         notEquals(value, filter, filterLocale) {
             if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
@@ -106,8 +109,11 @@ export const FilterService = {
                 return true;
             }
 
-            if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime();
-            else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            if (value.getTime && filter.getTime) {
+                return value.getTime() !== filter.getTime();
+            }
+
+            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
         },
         in(value, filter) {
             if (filter === undefined || filter === null || filter.length === 0) {
@@ -144,8 +150,11 @@ export const FilterService = {
                 return false;
             }
 
-            if (value.getTime) return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
-            else return filter[0] <= value && value <= filter[1];
+            if (value.getTime) {
+                return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
+            }
+
+            return filter[0] <= value && value <= filter[1];
         },
         lt(value, filter) {
             if (filter === undefined || filter === null) {
@@ -156,8 +165,11 @@ export const FilterService = {
                 return false;
             }
 
-            if (value.getTime && filter.getTime) return value.getTime() < filter.getTime();
-            else return value < filter;
+            if (value.getTime && filter.getTime) {
+                return value.getTime() < filter.getTime();
+            }
+
+            return value < filter;
         },
         lte(value, filter) {
             if (filter === undefined || filter === null) {
@@ -168,8 +180,11 @@ export const FilterService = {
                 return false;
             }
 
-            if (value.getTime && filter.getTime) return value.getTime() <= filter.getTime();
-            else return value <= filter;
+            if (value.getTime && filter.getTime) {
+                return value.getTime() <= filter.getTime();
+            }
+
+            return value <= filter;
         },
         gt(value, filter) {
             if (filter === undefined || filter === null) {
@@ -180,8 +195,11 @@ export const FilterService = {
                 return false;
             }
 
-            if (value.getTime && filter.getTime) return value.getTime() > filter.getTime();
-            else return value > filter;
+            if (value.getTime && filter.getTime) {
+                return value.getTime() > filter.getTime();
+            }
+
+            return value > filter;
         },
         gte(value, filter) {
             if (filter === undefined || filter === null) {
@@ -192,8 +210,11 @@ export const FilterService = {
                 return false;
             }
 
-            if (value.getTime && filter.getTime) return value.getTime() >= filter.getTime();
-            else return value >= filter;
+            if (value.getTime && filter.getTime) {
+                return value.getTime() >= filter.getTime();
+            }
+
+            return value >= filter;
         },
         dateIs(value, filter) {
             if (filter === undefined || filter === null) {
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
index 18a20cdddc..7939b25a36 100644
--- a/components/lib/api/Locale.js
+++ b/components/lib/api/Locale.js
@@ -137,7 +137,7 @@ function locale(locale) {
 }
 
 function addLocale(locale, options) {
-    locales[locale] = { ...locales['en'], ...options };
+    locales[locale] = { ...locales.en, ...options };
 }
 
 function updateLocaleOption(key, value, locale) {
@@ -176,7 +176,7 @@ function ariaLabel(ariaKey, options) {
     const _locale = PrimeReact.locale;
 
     try {
-        let ariaLabel = localeOptions(_locale)['aria'][ariaKey];
+        let ariaLabel = localeOptions(_locale).aria[ariaKey];
 
         if (ariaLabel) {
             for (const key in options) {
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index 779a77b155..a4b53b3b7f 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -73,14 +73,12 @@ export const AutoComplete = React.memo(
             if (ObjectUtils.isEmpty(query)) {
                 hide();
                 props.onClear && props.onClear(event);
+            } else if (query.length >= props.minLength) {
+                timeout.current = setTimeout(() => {
+                    search(event, query, 'input');
+                }, props.delay);
             } else {
-                if (query.length >= props.minLength) {
-                    timeout.current = setTimeout(() => {
-                        search(event, query, 'input');
-                    }, props.delay);
-                } else {
-                    hide();
-                }
+                hide();
             }
         };
 
@@ -171,9 +169,9 @@ export const AutoComplete = React.memo(
                     const resolvedFieldData = ObjectUtils.resolveFieldData(value, props.field);
 
                     return resolvedFieldData !== null && resolvedFieldData !== undefined ? resolvedFieldData : value;
-                } else {
-                    return value;
                 }
+
+                return value;
             }
 
             return '';
@@ -193,7 +191,7 @@ export const AutoComplete = React.memo(
         };
 
         const onOverlayEnter = () => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             alignOverlay();
         };
@@ -242,8 +240,11 @@ export const AutoComplete = React.memo(
                 DomHandler.focus(inputRef.current, props.dropdownAutoFocus);
             }
 
-            if (props.dropdownMode === 'blank') search(event, '', 'dropdown');
-            else if (props.dropdownMode === 'current') search(event, inputRef.current.value, 'dropdown');
+            if (props.dropdownMode === 'blank') {
+                search(event, '', 'dropdown');
+            } else if (props.dropdownMode === 'current') {
+                search(event, inputRef.current.value, 'dropdown');
+            }
 
             if (props.onDropdownClick) {
                 props.onDropdownClick({
@@ -272,103 +273,103 @@ export const AutoComplete = React.memo(
                 let highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
 
                 switch (event.which) {
-                    //down
-                    case 40:
-                        if (highlightItem) {
-                            let nextElement = findNextItem(highlightItem);
-
-                            if (nextElement) {
-                                !isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight');
-                                nextElement.setAttribute('data-p-highlight', true);
-                                !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
-                                highlightItem.setAttribute('data-p-highlight', false);
-                                DomHandler.scrollInView(getScrollableElement(), nextElement);
-                            }
-                        } else {
-                            highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
-
-                            if (DomHandler.getAttribute(highlightItem, 'data-pc-section') === 'itemgroup') {
-                                highlightItem = findNextItem(highlightItem);
-                            }
-
-                            if (highlightItem) {
-                                !isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight');
-                                highlightItem.setAttribute('data-p-highlight', true);
-                            }
+                //down
+                case 40:
+                    if (highlightItem) {
+                        let nextElement = findNextItem(highlightItem);
+
+                        if (nextElement) {
+                            !isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight');
+                            nextElement.setAttribute('data-p-highlight', true);
+                            !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
+                            highlightItem.setAttribute('data-p-highlight', false);
+                            DomHandler.scrollInView(getScrollableElement(), nextElement);
                         }
+                    } else {
+                        highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
 
-                        event.preventDefault();
-                        break;
+                        if (DomHandler.getAttribute(highlightItem, 'data-pc-section') === 'itemgroup') {
+                            highlightItem = findNextItem(highlightItem);
+                        }
 
-                    //up
-                    case 38:
                         if (highlightItem) {
-                            let previousElement = findPrevItem(highlightItem);
-
-                            if (previousElement) {
-                                !isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight');
-                                previousElement.setAttribute('data-p-highlight', true);
-                                !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
-                                highlightItem.setAttribute('data-p-highlight', false);
-                                DomHandler.scrollInView(getScrollableElement(), previousElement);
-                            }
+                            !isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight');
+                            highlightItem.setAttribute('data-p-highlight', true);
                         }
+                    }
 
-                        event.preventDefault();
-                        break;
+                    event.preventDefault();
+                    break;
 
-                    //enter
-                    case 13:
-                        if (highlightItem) {
-                            selectHighlightItem(event, highlightItem);
-                            hide();
-                            event.preventDefault();
+                    //up
+                case 38:
+                    if (highlightItem) {
+                        let previousElement = findPrevItem(highlightItem);
+
+                        if (previousElement) {
+                            !isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight');
+                            previousElement.setAttribute('data-p-highlight', true);
+                            !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
+                            highlightItem.setAttribute('data-p-highlight', false);
+                            DomHandler.scrollInView(getScrollableElement(), previousElement);
                         }
+                    }
 
-                        break;
+                    event.preventDefault();
+                    break;
 
-                    //escape
-                    case 27:
+                    //enter
+                case 13:
+                    if (highlightItem) {
+                        selectHighlightItem(event, highlightItem);
                         hide();
                         event.preventDefault();
-                        break;
+                    }
+
+                    break;
+
+                    //escape
+                case 27:
+                    hide();
+                    event.preventDefault();
+                    break;
 
                     //tab
-                    case 9:
-                        if (highlightItem) {
-                            selectHighlightItem(event, highlightItem);
-                        }
+                case 9:
+                    if (highlightItem) {
+                        selectHighlightItem(event, highlightItem);
+                    }
 
-                        hide();
-                        break;
+                    hide();
+                    break;
 
-                    default:
-                        break;
+                default:
+                    break;
                 }
             }
 
             if (props.multiple) {
                 switch (event.which) {
-                    //backspace
-                    case 8:
-                        if (props.value && props.value.length && !inputRef.current.value) {
-                            const removedValue = props.value[props.value.length - 1];
-                            const newValue = props.value.slice(0, -1);
-
-                            updateModel(event, newValue);
-
-                            if (props.onUnselect) {
-                                props.onUnselect({
-                                    originalEvent: event,
-                                    value: removedValue
-                                });
-                            }
+                //backspace
+                case 8:
+                    if (props.value && props.value.length && !inputRef.current.value) {
+                        const removedValue = props.value[props.value.length - 1];
+                        const newValue = props.value.slice(0, -1);
+
+                        updateModel(event, newValue);
+
+                        if (props.onUnselect) {
+                            props.onUnselect({
+                                originalEvent: event,
+                                value: removedValue
+                            });
                         }
+                    }
 
-                        break;
+                    break;
 
-                    default:
-                        break;
+                default:
+                    break;
                 }
             }
         };
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
index 991526ed67..f26f39a264 100644
--- a/components/lib/autocomplete/AutoCompletePanel.js
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -121,39 +121,39 @@ export const AutoCompletePanel = React.memo(
                         const key = index + '_' + getOptionGroupRenderKey(suggestion);
 
                         return createLabelItem(suggestion, key, index, { style });
-                    } else {
-                        const key = index + '_' + latestKey.current.keyIndex;
-                        const itemProps = mergeProps({
-                            style,
-                            'data-group': latestKey.current.keyIndex,
-                            'data-index': index - latestKey.current.index - 1,
-                            'data-p-disabled': suggestion.disabled
-                        });
-
-                        return createListItem(suggestion, key, index, itemProps);
                     }
-                } else {
-                    const childrenContent = createGroupChildren(suggestion, index, style);
-                    const key = index + '_' + getOptionGroupRenderKey(suggestion);
-
-                    return (
-                        <React.Fragment key={key}>
-                            {createLabelItem(suggestion, undefined, index, { style })}
-                            {childrenContent}
-                        </React.Fragment>
-                    );
-                }
-            } else {
-                const itemProps = mergeProps(
-                    {
+
+                    const key = index + '_' + latestKey.current.keyIndex;
+                    const itemProps = mergeProps({
                         style,
+                        'data-group': latestKey.current.keyIndex,
+                        'data-index': index - latestKey.current.index - 1,
                         'data-p-disabled': suggestion.disabled
-                    },
-                    getPTOptions(suggestion, 'item')
-                );
+                    });
 
-                return createListItem(suggestion, index, itemProps);
+                    return createListItem(suggestion, key, index, itemProps);
+                }
+
+                const childrenContent = createGroupChildren(suggestion, index, style);
+                const key = index + '_' + getOptionGroupRenderKey(suggestion);
+
+                return (
+                    <React.Fragment key={key}>
+                        {createLabelItem(suggestion, undefined, index, { style })}
+                        {childrenContent}
+                    </React.Fragment>
+                );
             }
+
+            const itemProps = mergeProps(
+                {
+                    style,
+                    'data-p-disabled': suggestion.disabled
+                },
+                getPTOptions(suggestion, 'item')
+            );
+
+            return createListItem(suggestion, index, itemProps);
         };
 
         const createItems = () => {
@@ -217,31 +217,31 @@ export const AutoCompletePanel = React.memo(
                 };
 
                 return <VirtualScroller ref={props.virtualScrollerRef} {...virtualScrollerProps} pt={_ptm('virtualScroller')} __parentMetadata={{ parent: props.metaData }} />;
-            } else {
-                const items = createItems();
-                const listProps = mergeProps(
-                    {
-                        id: props.listId,
-                        className: cx('list'),
-                        role: 'listbox'
-                    },
-                    _ptm('list')
-                );
+            }
 
-                const listWrapperProps = mergeProps(
-                    {
-                        className: cx('listWrapper'),
-                        style: { maxHeight: props.scrollHeight || 'auto' }
-                    },
-                    _ptm('listWrapper')
-                );
+            const items = createItems();
+            const listProps = mergeProps(
+                {
+                    id: props.listId,
+                    className: cx('list'),
+                    role: 'listbox'
+                },
+                _ptm('list')
+            );
 
-                return (
-                    <div {...listWrapperProps}>
-                        <ul {...listProps}>{items}</ul>
-                    </div>
-                );
-            }
+            const listWrapperProps = mergeProps(
+                {
+                    className: cx('listWrapper'),
+                    style: { maxHeight: props.scrollHeight || 'auto' }
+                },
+                _ptm('listWrapper')
+            );
+
+            return (
+                <div {...listWrapperProps}>
+                    <ul {...listProps}>{items}</ul>
+                </div>
+            );
         };
 
         const createElement = () => {
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
index 8b5c3b63b5..c9ebe378a5 100644
--- a/components/lib/avatar/Avatar.js
+++ b/components/lib/avatar/Avatar.js
@@ -34,7 +34,7 @@ export const Avatar = React.forwardRef((inProps, ref) => {
                 ptm('image')
             );
 
-            return <img alt={props.imageAlt} {...imageProps}></img>;
+            return <img alt={props.imageAlt} {...imageProps} />;
         } else if (props.label) {
             const labelProps = mergeProps(
                 {
diff --git a/components/lib/blockui/BlockUI.spec.js b/components/lib/blockui/BlockUI.spec.js
index e0afcc0adc..fbcc43a387 100644
--- a/components/lib/blockui/BlockUI.spec.js
+++ b/components/lib/blockui/BlockUI.spec.js
@@ -62,7 +62,7 @@ describe('BlockUI', () => {
         const ref = React.createRef();
         const { container } = render(
             <PrimeReactProvider>
-                <BlockUI ref={ref} blocked={false} fullScreen></BlockUI>
+                <BlockUI ref={ref} blocked={false} fullScreen />
             </PrimeReactProvider>
         );
 
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
index 398a667d59..1f48f43f70 100644
--- a/components/lib/button/Button.js
+++ b/components/lib/button/Button.js
@@ -78,7 +78,7 @@ export const Button = React.memo(
                 return <span {...labelProps}>{props.label}</span>;
             }
 
-            return !props.children && !props.label && <span {...labelProps} dangerouslySetInnerHTML={{ __html: '&nbsp;' }}></span>;
+            return !props.children && !props.label && <span {...labelProps} dangerouslySetInnerHTML={{ __html: '&nbsp;' }} />;
         };
 
         const createBadge = () => {
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 803151775a..dbe06f168f 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -103,37 +103,37 @@ export const Calendar = React.memo(
 
         const onInputKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowDown': {
-                    if (!overlayVisibleState) {
-                        show();
-                    } else {
-                        focusToFirstCell();
-
-                        event.preventDefault();
-                    }
+            case 'ArrowDown': {
+                if (!overlayVisibleState) {
+                    show();
+                } else {
+                    focusToFirstCell();
 
-                    break;
+                    event.preventDefault();
                 }
 
-                case 'Escape': {
+                break;
+            }
+
+            case 'Escape': {
+                hide();
+                props.touchUI && disableModality();
+                break;
+            }
+
+            case 'Tab': {
+                if (overlayRef && overlayRef.current) {
+                    DomHandler.getFocusableElements(overlayRef.current).forEach((el) => (el.tabIndex = '-1'));
                     hide();
                     props.touchUI && disableModality();
-                    break;
                 }
 
-                case 'Tab': {
-                    if (overlayRef && overlayRef.current) {
-                        DomHandler.getFocusableElements(overlayRef.current).forEach((el) => (el.tabIndex = '-1'));
-                        hide();
-                        props.touchUI && disableModality();
-                    }
-
-                    break;
-                }
+                break;
+            }
 
-                default:
-                    //no op
-                    break;
+            default:
+                //no op
+                break;
             }
         };
 
@@ -201,19 +201,19 @@ export const Calendar = React.memo(
 
         const onContainerButtonKeydown = (event) => {
             switch (event.code) {
-                case 'Tab':
-                    !props.inline && trapFocus(event);
-                    break;
+            case 'Tab':
+                !props.inline && trapFocus(event);
+                break;
 
-                case 'Escape':
-                    hide(null, reFocusInputField);
-                    event.preventDefault();
+            case 'Escape':
+                hide(null, reFocusInputField);
+                event.preventDefault();
 
-                    break;
+                break;
 
-                default:
-                    //no op
-                    break;
+            default:
+                //no op
+                break;
             }
         };
 
@@ -248,11 +248,15 @@ export const Calendar = React.memo(
                     const focusedIndex = focusableElements.indexOf(document.activeElement);
 
                     if (event?.shiftKey) {
-                        if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
-                        else focusableElements[focusedIndex - 1].focus();
+                        if (focusedIndex === -1 || focusedIndex === 0) {
+                            focusableElements[focusableElements.length - 1].focus();
+                        } else {
+                            focusableElements[focusedIndex - 1].focus();
+                        }
+                    } else if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) {
+                        focusableElements[0].focus();
                     } else {
-                        if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
-                        else focusableElements[focusedIndex + 1].focus();
+                        focusableElements[focusedIndex + 1].focus();
                     }
                 }
             }
@@ -263,8 +267,11 @@ export const Calendar = React.memo(
                 if (navigation.current.button) {
                     initFocusableCell();
 
-                    if (navigation.current.backward) previousButton.current.focus();
-                    else nextButton.current.focus();
+                    if (navigation.current.backward) {
+                        previousButton.current.focus();
+                    } else {
+                        nextButton.current.focus();
+                    }
                 } else {
                     let cell;
 
@@ -545,28 +552,44 @@ export const Calendar = React.memo(
             }, interval || 500);
 
             switch (type) {
-                case 0:
-                    if (direction === 1) incrementHour(event);
-                    else decrementHour(event);
-                    break;
+            case 0:
+                if (direction === 1) {
+                    incrementHour(event);
+                } else {
+                    decrementHour(event);
+                }
 
-                case 1:
-                    if (direction === 1) incrementMinute(event);
-                    else decrementMinute(event);
-                    break;
+                break;
 
-                case 2:
-                    if (direction === 1) incrementSecond(event);
-                    else decrementSecond(event);
-                    break;
+            case 1:
+                if (direction === 1) {
+                    incrementMinute(event);
+                } else {
+                    decrementMinute(event);
+                }
 
-                case 3:
-                    if (direction === 1) incrementMilliSecond(event);
-                    else decrementMilliSecond(event);
-                    break;
+                break;
 
-                default:
-                    break;
+            case 2:
+                if (direction === 1) {
+                    incrementSecond(event);
+                } else {
+                    decrementSecond(event);
+                }
+
+                break;
+
+            case 3:
+                if (direction === 1) {
+                    incrementMilliSecond(event);
+                } else {
+                    decrementMilliSecond(event);
+                }
+
+                break;
+
+            default:
+                break;
             }
         };
 
@@ -1105,214 +1128,223 @@ export const Calendar = React.memo(
             const cellIndex = DomHandler.index(cell);
 
             switch (event.code) {
-                case 'ArrowDown': {
-                    cellContent.tabIndex = '-1';
+            case 'ArrowDown': {
+                cellContent.tabIndex = '-1';
 
-                    let nextRow = cell.parentElement.nextElementSibling;
+                let nextRow = cell.parentElement.nextElementSibling;
 
-                    if (nextRow) {
-                        let tableRowIndex = DomHandler.index(cell.parentElement);
-                        const tableRows = Array.from(cell.parentElement.parentElement.children);
-                        const nextTableRows = tableRows.slice(tableRowIndex + 1);
+                if (nextRow) {
+                    let tableRowIndex = DomHandler.index(cell.parentElement);
+                    const tableRows = Array.from(cell.parentElement.parentElement.children);
+                    const nextTableRows = tableRows.slice(tableRowIndex + 1);
 
-                        let hasNextFocusableDate = nextTableRows.find((el) => {
-                            let focusCell = el.children[cellIndex].children[0];
+                    let hasNextFocusableDate = nextTableRows.find((el) => {
+                        let focusCell = el.children[cellIndex].children[0];
 
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
+                        return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                    });
 
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+                    if (hasNextFocusableDate) {
+                        let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
 
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
-                        } else {
-                            navigation.current = { backward: false };
-                            navForward(event);
-                        }
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
                     } else {
                         navigation.current = { backward: false };
                         navForward(event);
                     }
-
-                    event.preventDefault();
-                    break;
+                } else {
+                    navigation.current = { backward: false };
+                    navForward(event);
                 }
 
-                case 'ArrowUp': {
-                    cellContent.tabIndex = '-1';
+                event.preventDefault();
+                break;
+            }
 
-                    if (event.altKey) {
-                        hide(null, reFocusInputField);
-                    } else {
-                        let prevRow = cell.parentElement.previousElementSibling;
+            case 'ArrowUp': {
+                cellContent.tabIndex = '-1';
 
-                        if (prevRow) {
-                            let tableRowIndex = DomHandler.index(cell.parentElement);
-                            const tableRows = Array.from(cell.parentElement.parentElement.children);
-                            const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
+                if (event.altKey) {
+                    hide(null, reFocusInputField);
+                } else {
+                    let prevRow = cell.parentElement.previousElementSibling;
 
-                            let hasNextFocusableDate = prevTableRows.find((el) => {
-                                let focusCell = el.children[cellIndex].children[0];
+                    if (prevRow) {
+                        let tableRowIndex = DomHandler.index(cell.parentElement);
+                        const tableRows = Array.from(cell.parentElement.parentElement.children);
+                        const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
 
-                                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                            });
+                        let hasNextFocusableDate = prevTableRows.find((el) => {
+                            let focusCell = el.children[cellIndex].children[0];
 
-                            if (hasNextFocusableDate) {
-                                let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
 
-                                focusCell.tabIndex = '0';
-                                focusCell.focus();
-                            } else {
-                                navigation.current = { backward: true };
-                                navBackward(event);
-                            }
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
                         } else {
                             navigation.current = { backward: true };
                             navBackward(event);
                         }
+                    } else {
+                        navigation.current = { backward: true };
+                        navBackward(event);
                     }
-
-                    event.preventDefault();
-                    break;
                 }
 
-                case 'ArrowLeft': {
-                    cellContent.tabIndex = '-1';
-                    let prevCell = cell.previousElementSibling;
+                event.preventDefault();
+                break;
+            }
+
+            case 'ArrowLeft': {
+                cellContent.tabIndex = '-1';
+                let prevCell = cell.previousElementSibling;
 
-                    if (prevCell) {
-                        const cells = Array.from(cell.parentElement.children);
-                        const prevCells = cells.slice(0, cellIndex).reverse();
+                if (prevCell) {
+                    const cells = Array.from(cell.parentElement.children);
+                    const prevCells = cells.slice(0, cellIndex).reverse();
 
-                        let hasNextFocusableDate = prevCells.find((el) => {
-                            let focusCell = el.children[0];
+                    let hasNextFocusableDate = prevCells.find((el) => {
+                        let focusCell = el.children[0];
 
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
+                        return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                    });
 
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[0];
+                    if (hasNextFocusableDate) {
+                        let focusCell = hasNextFocusableDate.children[0];
 
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
-                        } else {
-                            navigateToMonth(true, groupIndex, event);
-                        }
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
                     } else {
                         navigateToMonth(true, groupIndex, event);
                     }
-
-                    event.preventDefault();
-                    break;
+                } else {
+                    navigateToMonth(true, groupIndex, event);
                 }
 
-                case 'ArrowRight': {
-                    cellContent.tabIndex = '-1';
-                    let nextCell = cell.nextElementSibling;
+                event.preventDefault();
+                break;
+            }
 
-                    if (nextCell) {
-                        const cells = Array.from(cell.parentElement.children);
-                        const nextCells = cells.slice(cellIndex + 1);
-                        let hasNextFocusableDate = nextCells.find((el) => {
-                            let focusCell = el.children[0];
+            case 'ArrowRight': {
+                cellContent.tabIndex = '-1';
+                let nextCell = cell.nextElementSibling;
 
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
+                if (nextCell) {
+                    const cells = Array.from(cell.parentElement.children);
+                    const nextCells = cells.slice(cellIndex + 1);
+                    let hasNextFocusableDate = nextCells.find((el) => {
+                        let focusCell = el.children[0];
 
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[0];
+                        return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                    });
 
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
-                        } else {
-                            navigateToMonth(false, groupIndex, event);
-                        }
+                    if (hasNextFocusableDate) {
+                        let focusCell = hasNextFocusableDate.children[0];
+
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
                     } else {
                         navigateToMonth(false, groupIndex, event);
                     }
-
-                    event.preventDefault();
-                    break;
+                } else {
+                    navigateToMonth(false, groupIndex, event);
                 }
 
-                case 'Enter':
-                case 'NumpadEnter':
+                event.preventDefault();
+                break;
+            }
 
-                case 'Space': {
-                    onDateSelect(event, date);
-                    event.preventDefault();
-                    break;
-                }
+            case 'Enter':
+            case 'NumpadEnter':
 
-                case 'Escape': {
-                    hide(null, reFocusInputField);
-                    event.preventDefault();
-                    break;
-                }
+            case 'Space': {
+                onDateSelect(event, date);
+                event.preventDefault();
+                break;
+            }
 
-                case 'Tab': {
-                    if (!props.inline) trapFocus(event);
-                    break;
+            case 'Escape': {
+                hide(null, reFocusInputField);
+                event.preventDefault();
+                break;
+            }
+
+            case 'Tab': {
+                if (!props.inline) {
+                    trapFocus(event);
                 }
 
-                case 'Home': {
-                    cellContent.tabIndex = '-1';
-                    let currentRow = cell.parentElement;
-                    let focusCell = currentRow.children[0].children[0];
+                break;
+            }
 
-                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
-                        navigateToMonth(groupIndex, true, event);
-                    } else {
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
-                    }
+            case 'Home': {
+                cellContent.tabIndex = '-1';
+                let currentRow = cell.parentElement;
+                let focusCell = currentRow.children[0].children[0];
 
-                    event.preventDefault();
-                    break;
+                if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                    navigateToMonth(groupIndex, true, event);
+                } else {
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
                 }
 
-                case 'End': {
-                    cellContent.tabIndex = '-1';
-                    let currentRow = cell.parentElement;
-                    let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
+                event.preventDefault();
+                break;
+            }
 
-                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
-                        navigateToMonth(groupIndex, false, event);
-                    } else {
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
-                    }
+            case 'End': {
+                cellContent.tabIndex = '-1';
+                let currentRow = cell.parentElement;
+                let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
 
-                    event.preventDefault();
-                    break;
+                if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                    navigateToMonth(groupIndex, false, event);
+                } else {
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
                 }
 
-                case 'PageUp': {
-                    cellContent.tabIndex = '-1';
-                    if (event.shiftKey) {
-                        navigation.current = { backward: true };
-                        navBackward(event);
-                    } else navigateToMonth(groupIndex, true, event);
+                event.preventDefault();
+                break;
+            }
 
-                    event.preventDefault();
-                    break;
+            case 'PageUp': {
+                cellContent.tabIndex = '-1';
+
+                if (event.shiftKey) {
+                    navigation.current = { backward: true };
+                    navBackward(event);
+                } else {
+                    navigateToMonth(groupIndex, true, event);
                 }
 
-                case 'PageDown': {
-                    cellContent.tabIndex = '-1';
-                    if (event.shiftKey) {
-                        navigation.current = { backward: false };
-                        navForward(event);
-                    } else navigateToMonth(groupIndex, false, event);
+                event.preventDefault();
+                break;
+            }
 
-                    event.preventDefault();
-                    break;
+            case 'PageDown': {
+                cellContent.tabIndex = '-1';
+
+                if (event.shiftKey) {
+                    navigation.current = { backward: false };
+                    navForward(event);
+                } else {
+                    navigateToMonth(groupIndex, false, event);
                 }
 
-                default:
-                    //no op
-                    break;
+                event.preventDefault();
+                break;
+            }
+
+            default:
+                //no op
+                break;
             }
         };
 
@@ -1329,17 +1361,15 @@ export const Calendar = React.memo(
                     focusCell.tabIndex = '0';
                     focusCell.focus();
                 }
+            } else if (props.numberOfMonths === 1 || groupIndex === props.numberOfMonths - 1) {
+                navigation.current = { backward: false };
+                navForward(event);
             } else {
-                if (props.numberOfMonths === 1 || groupIndex === props.numberOfMonths - 1) {
-                    navigation.current = { backward: false };
-                    navForward(event);
-                } else {
-                    const nextMonthContainer = overlayRef.current.children[groupIndex + 1];
-                    const focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
+                const nextMonthContainer = overlayRef.current.children[groupIndex + 1];
+                const focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
 
-                    focusCell.tabIndex = '0';
-                    focusCell.focus();
-                }
+                focusCell.tabIndex = '0';
+                focusCell.focus();
             }
         };
 
@@ -1347,99 +1377,105 @@ export const Calendar = React.memo(
             const cell = event.currentTarget;
 
             switch (event.code) {
-                //arrows
-                case 'ArrowUp':
-
-                case 'ArrowDown': {
-                    cell.tabIndex = '-1';
-                    const cells = cell.parentElement.children;
-                    const cellIndex = DomHandler.index(cell);
-                    const nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
-
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    }
-
-                    event.preventDefault();
-                    break;
+            //arrows
+            case 'ArrowUp':
+
+            case 'ArrowDown': {
+                cell.tabIndex = '-1';
+                const cells = cell.parentElement.children;
+                const cellIndex = DomHandler.index(cell);
+                const nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
+
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
                 }
 
-                case 'ArrowLeft': {
-                    cell.tabIndex = '-1';
-                    const prevCell = cell.previousElementSibling;
+                event.preventDefault();
+                break;
+            }
 
-                    if (prevCell) {
-                        prevCell.tabIndex = '0';
-                        prevCell.focus();
-                    } else {
-                        navigation.current = { backward: true };
-                        navBackward(event);
-                    }
+            case 'ArrowLeft': {
+                cell.tabIndex = '-1';
+                const prevCell = cell.previousElementSibling;
 
-                    event.preventDefault();
-                    break;
+                if (prevCell) {
+                    prevCell.tabIndex = '0';
+                    prevCell.focus();
+                } else {
+                    navigation.current = { backward: true };
+                    navBackward(event);
                 }
 
-                case 'ArrowRight': {
-                    cell.tabIndex = '-1';
-                    const nextCell = cell.nextElementSibling;
+                event.preventDefault();
+                break;
+            }
 
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    } else {
-                        navigation.current = { backward: false };
-                        navForward(event);
-                    }
+            case 'ArrowRight': {
+                cell.tabIndex = '-1';
+                const nextCell = cell.nextElementSibling;
 
-                    event.preventDefault();
-                    break;
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
+                } else {
+                    navigation.current = { backward: false };
+                    navForward(event);
                 }
 
-                case 'PageUp': {
-                    if (event.shiftKey) return;
-
-                    navigation.current = { backward: true };
-                    navBackward(event);
+                event.preventDefault();
+                break;
+            }
 
-                    break;
+            case 'PageUp': {
+                if (event.shiftKey) {
+                    return;
                 }
 
-                case 'PageDown': {
-                    if (event.shiftKey) return;
+                navigation.current = { backward: true };
+                navBackward(event);
 
-                    navigation.current = { backward: false };
-                    navForward(event);
+                break;
+            }
 
-                    break;
+            case 'PageDown': {
+                if (event.shiftKey) {
+                    return;
                 }
 
-                case 'Enter':
-                case 'NumpadEnter':
+                navigation.current = { backward: false };
+                navForward(event);
 
-                case 'Space': {
-                    if (props.view !== 'month') viewChangedWithKeyDown.current = true;
+                break;
+            }
 
-                    onMonthSelect(event, index);
-                    event.preventDefault();
-                    break;
-                }
+            case 'Enter':
+            case 'NumpadEnter':
 
-                case 'Escape': {
-                    hide(null, reFocusInputField);
-                    event.preventDefault();
-                    break;
+            case 'Space': {
+                if (props.view !== 'month') {
+                    viewChangedWithKeyDown.current = true;
                 }
 
-                case 'Tab': {
-                    trapFocus(event);
-                    break;
-                }
+                onMonthSelect(event, index);
+                event.preventDefault();
+                break;
+            }
 
-                default:
-                    //no op
-                    break;
+            case 'Escape': {
+                hide(null, reFocusInputField);
+                event.preventDefault();
+                break;
+            }
+
+            case 'Tab': {
+                trapFocus(event);
+                break;
+            }
+
+            default:
+                //no op
+                break;
             }
         };
 
@@ -1447,99 +1483,105 @@ export const Calendar = React.memo(
             const cell = event.currentTarget;
 
             switch (event.code) {
-                //arrows
-                case 'ArrowUp':
-
-                case 'ArrowDown': {
-                    cell.tabIndex = '-1';
-                    var cells = cell.parentElement.children;
-                    var cellIndex = DomHandler.index(cell);
-                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
-
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    }
-
-                    event.preventDefault();
-                    break;
+            //arrows
+            case 'ArrowUp':
+
+            case 'ArrowDown': {
+                cell.tabIndex = '-1';
+                let cells = cell.parentElement.children;
+                let cellIndex = DomHandler.index(cell);
+                let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
+
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
                 }
 
-                case 'ArrowLeft': {
-                    cell.tabIndex = '-1';
-                    let prevCell = cell.previousElementSibling;
+                event.preventDefault();
+                break;
+            }
 
-                    if (prevCell) {
-                        prevCell.tabIndex = '0';
-                        prevCell.focus();
-                    } else {
-                        navigation.current = { backward: true };
-                        navBackward(event);
-                    }
+            case 'ArrowLeft': {
+                cell.tabIndex = '-1';
+                let prevCell = cell.previousElementSibling;
 
-                    event.preventDefault();
-                    break;
+                if (prevCell) {
+                    prevCell.tabIndex = '0';
+                    prevCell.focus();
+                } else {
+                    navigation.current = { backward: true };
+                    navBackward(event);
                 }
 
-                case 'ArrowRight': {
-                    cell.tabIndex = '-1';
-                    let nextCell = cell.nextElementSibling;
+                event.preventDefault();
+                break;
+            }
 
-                    if (nextCell) {
-                        nextCell.tabIndex = '0';
-                        nextCell.focus();
-                    } else {
-                        navigation.current = { backward: false };
-                        navForward(event);
-                    }
+            case 'ArrowRight': {
+                cell.tabIndex = '-1';
+                let nextCell = cell.nextElementSibling;
 
-                    event.preventDefault();
-                    break;
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
+                } else {
+                    navigation.current = { backward: false };
+                    navForward(event);
                 }
 
-                case 'PageUp': {
-                    if (event.shiftKey) return;
-
-                    navigation.current = { backward: true };
-                    navBackward(event);
+                event.preventDefault();
+                break;
+            }
 
-                    break;
+            case 'PageUp': {
+                if (event.shiftKey) {
+                    return;
                 }
 
-                case 'PageDown': {
-                    if (event.shiftKey) return;
+                navigation.current = { backward: true };
+                navBackward(event);
 
-                    navigation.current = { backward: false };
-                    navForward(event);
+                break;
+            }
 
-                    break;
+            case 'PageDown': {
+                if (event.shiftKey) {
+                    return;
                 }
 
-                case 'Enter':
-                case 'NumpadEnter':
+                navigation.current = { backward: false };
+                navForward(event);
 
-                case 'Space': {
-                    if (props.view !== 'year') viewChangedWithKeyDown.current = true;
+                break;
+            }
 
-                    onYearSelect(event, index);
-                    event.preventDefault();
-                    break;
-                }
+            case 'Enter':
+            case 'NumpadEnter':
 
-                case 'Escape': {
-                    hide(null, reFocusInputField);
-                    event.preventDefault();
-                    break;
+            case 'Space': {
+                if (props.view !== 'year') {
+                    viewChangedWithKeyDown.current = true;
                 }
 
-                case 'Tab': {
-                    trapFocus(event);
-                    break;
-                }
+                onYearSelect(event, index);
+                event.preventDefault();
+                break;
+            }
 
-                default:
-                    //no op
-                    break;
+            case 'Escape': {
+                hide(null, reFocusInputField);
+                event.preventDefault();
+                break;
+            }
+
+            case 'Tab': {
+                trapFocus(event);
+                break;
+            }
+
+            default:
+                //no op
+                break;
             }
         };
 
@@ -1583,7 +1625,7 @@ export const Calendar = React.memo(
 
         const selectTime = (date, timeMeta) => {
             if (props.showTime) {
-                let hours, minutes, seconds, milliseconds;
+                let hours; let minutes; let seconds; let milliseconds;
 
                 if (timeMeta) {
                     ({ hours, minutes, seconds, milliseconds } = timeMeta);
@@ -1967,7 +2009,7 @@ export const Calendar = React.memo(
         };
 
         const getPreviousMonthAndYear = (month, year) => {
-            let m, y;
+            let m; let y;
 
             if (month === 0) {
                 m = 11;
@@ -1981,7 +2023,7 @@ export const Calendar = React.memo(
         };
 
         const getNextMonthAndYear = (month, year) => {
-            let m, y;
+            let m; let y;
 
             if (month === 11) {
                 m = 0;
@@ -2229,10 +2271,11 @@ export const Calendar = React.memo(
 
                     return selected;
                 } else if (isRangeSelection()) {
-                    if (props.value[1]) return isDateEquals(props.value[0], dateMeta) || isDateEquals(props.value[1], dateMeta) || isDateBetween(props.value[0], props.value[1], dateMeta);
-                    else {
-                        return isDateEquals(props.value[0], dateMeta);
+                    if (props.value[1]) {
+                        return isDateEquals(props.value[0], dateMeta) || isDateEquals(props.value[1], dateMeta) || isDateBetween(props.value[0], props.value[1], dateMeta);
                     }
+
+                    return isDateEquals(props.value[0], dateMeta);
                 }
             } else {
                 return false;
@@ -2249,9 +2292,9 @@ export const Calendar = React.memo(
 
                 if (isMultipleSelection()) {
                     return value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === currentYear);
-                } else {
-                    return value.getMonth() === month && value.getFullYear() === currentYear;
                 }
+
+                return value.getMonth() === month && value.getFullYear() === currentYear;
             }
 
             return false;
@@ -2263,9 +2306,9 @@ export const Calendar = React.memo(
 
                 if (isMultipleSelection()) {
                     return value.some((currentValue) => currentValue.getFullYear() === year);
-                } else {
-                    return value.getFullYear() === year;
                 }
+
+                return value.getFullYear() === year;
             }
 
             return false;
@@ -2276,8 +2319,11 @@ export const Calendar = React.memo(
         };
 
         const isDateEquals = (value, dateMeta) => {
-            if (value && value instanceof Date) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
-            else return false;
+            if (value && value instanceof Date) {
+                return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
+            }
+
+            return false;
         };
 
         const isDateBetween = (start, end, dateMeta) => {
@@ -2378,10 +2424,10 @@ export const Calendar = React.memo(
                             let selectedValue = value[i];
                             let dateAsString = isValidDate(selectedValue) ? formatDateTime(selectedValue) : '';
 
-                            formattedValue += dateAsString;
+                            formattedValue = formattedValue + dateAsString;
 
                             if (i !== value.length - 1) {
-                                formattedValue += ', ';
+                                formattedValue = formattedValue + ', ';
                             }
                         }
                     } else if (isRangeSelection()) {
@@ -2392,7 +2438,7 @@ export const Calendar = React.memo(
                             formattedValue = isValidDate(startDate) ? formatDateTime(startDate) : '';
 
                             if (endDate) {
-                                formattedValue += isValidDate(endDate) ? ' - ' + formatDateTime(endDate) : '';
+                                formattedValue = formattedValue + (isValidDate(endDate) ? ' - ' + formatDateTime(endDate) : '');
                             }
                         }
                     }
@@ -2418,7 +2464,7 @@ export const Calendar = React.memo(
                     formattedValue = formatDate(date, getDateFormat());
 
                     if (props.showTime) {
-                        formattedValue += ' ' + formatTime(date);
+                        formattedValue = formattedValue + (' ' + formatTime(date));
                     }
                 }
             }
@@ -2434,28 +2480,30 @@ export const Calendar = React.memo(
             let iFormat;
 
             const lookAhead = (match) => {
-                    const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+                const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
 
-                    if (matches) {
-                        iFormat++;
-                    }
+                if (matches) {
+                    iFormat++;
+                }
 
-                    return matches;
-                },
-                formatNumber = (match, value, len) => {
-                    let num = '' + value;
+                return matches;
+            };
 
-                    if (lookAhead(match)) {
-                        while (num.length < len) {
-                            num = '0' + num;
-                        }
+            const formatNumber = (match, value, len) => {
+                let num = '' + value;
+
+                if (lookAhead(match)) {
+                    while (num.length < len) {
+                        num = '0' + num;
                     }
+                }
 
-                    return num;
-                },
-                formatName = (match, value, shortNames, longNames) => {
-                    return lookAhead(match) ? longNames[value] : shortNames[value];
-                };
+                return num;
+            };
+
+            const formatName = (match, value, shortNames, longNames) => {
+                return lookAhead(match) ? longNames[value] : shortNames[value];
+            };
 
             let output = '';
             let literal = false;
@@ -2464,47 +2512,47 @@ export const Calendar = React.memo(
             if (date) {
                 for (iFormat = 0; iFormat < format.length; iFormat++) {
                     if (literal) {
-                        if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                        if (format.charAt(iFormat) === '\'' && !lookAhead('\'')) {
                             literal = false;
                         } else {
-                            output += format.charAt(iFormat);
+                            output = output + format.charAt(iFormat);
                         }
                     } else {
                         switch (format.charAt(iFormat)) {
-                            case 'd':
-                                output += formatNumber('d', date.getDate(), 2);
-                                break;
-                            case 'D':
-                                output += formatName('D', date.getDay(), dayNamesShort, dayNames);
-                                break;
-                            case 'o':
-                                output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
-                                break;
-                            case 'm':
-                                output += formatNumber('m', date.getMonth() + 1, 2);
-                                break;
-                            case 'M':
-                                output += formatName('M', date.getMonth(), monthNamesShort, monthNames);
-                                break;
-                            case 'y':
-                                output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
-                                break;
-                            case '@':
-                                output += date.getTime();
-                                break;
-                            case '!':
-                                output += date.getTime() * 10000 + ticksTo1970;
-                                break;
-                            case "'":
-                                if (lookAhead("'")) {
-                                    output += "'";
-                                } else {
-                                    literal = true;
-                                }
-
-                                break;
-                            default:
-                                output += format.charAt(iFormat);
+                        case 'd':
+                            output = output + formatNumber('d', date.getDate(), 2);
+                            break;
+                        case 'D':
+                            output = output + formatName('D', date.getDay(), dayNamesShort, dayNames);
+                            break;
+                        case 'o':
+                            output = output + formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                            break;
+                        case 'm':
+                            output = output + formatNumber('m', date.getMonth() + 1, 2);
+                            break;
+                        case 'M':
+                            output = output + formatName('M', date.getMonth(), monthNamesShort, monthNames);
+                            break;
+                        case 'y':
+                            output = output + (lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100));
+                            break;
+                        case '@':
+                            output = output + date.getTime();
+                            break;
+                        case '!':
+                            output = output + (date.getTime() * 10000 + ticksTo1970);
+                            break;
+                        case '\'':
+                            if (lookAhead('\'')) {
+                                output = output + '\'';
+                            } else {
+                                literal = true;
+                            }
+
+                            break;
+                        default:
+                            output = output + format.charAt(iFormat);
                         }
                     }
                 }
@@ -2525,30 +2573,30 @@ export const Calendar = React.memo(
             let milliseconds = date.getMilliseconds();
 
             if (props.hourFormat === '12' && hours > 11 && hours !== 12) {
-                hours -= 12;
+                hours = hours - 12;
             }
 
             if (props.hourFormat === '12') {
-                output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
+                output = output + (hours === 0 ? 12 : hours < 10 ? '0' + hours : hours);
             } else {
-                output += hours < 10 ? '0' + hours : hours;
+                output = output + (hours < 10 ? '0' + hours : hours);
             }
 
-            output += ':';
-            output += minutes < 10 ? '0' + minutes : minutes;
+            output = output + ':';
+            output = output + (minutes < 10 ? '0' + minutes : minutes);
 
             if (props.showSeconds) {
-                output += ':';
-                output += seconds < 10 ? '0' + seconds : seconds;
+                output = output + ':';
+                output = output + (seconds < 10 ? '0' + seconds : seconds);
             }
 
             if (props.showMillisec) {
-                output += '.';
-                output += milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds;
+                output = output + '.';
+                output = output + (milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds);
             }
 
             if (props.hourFormat === '12') {
-                output += date.getHours() > 11 ? ' PM' : ' AM';
+                output = output + (date.getHours() > 11 ? ' PM' : ' AM');
             }
 
             return output;
@@ -2595,13 +2643,11 @@ export const Calendar = React.memo(
             if (props.timeOnly) {
                 date = new Date();
                 populateTime(date, parts[0], parts[1]);
+            } else if (props.showTime) {
+                date = parseDate(parts[0], getDateFormat());
+                populateTime(date, parts[1], parts[2]);
             } else {
-                if (props.showTime) {
-                    date = parseDate(parts[0], getDateFormat());
-                    populateTime(date, parts[1], parts[2]);
-                } else {
-                    date = parseDate(text, getDateFormat());
-                }
+                date = parseDate(text, getDateFormat());
             }
 
             return date;
@@ -2641,11 +2687,11 @@ export const Calendar = React.memo(
             } else {
                 if (props.hourFormat === '12') {
                     if (h !== 12 && ampm === 'PM') {
-                        h += 12;
+                        h = h + 12;
                     }
 
                     if (h === 12 && ampm === 'AM') {
-                        h -= 12;
+                        h = h - 12;
                     }
                 }
 
@@ -2665,77 +2711,81 @@ export const Calendar = React.memo(
                 return null;
             }
 
-            let iFormat,
-                dim,
-                extra,
-                iValue = 0,
-                shortYearCutoff = typeof props.shortYearCutoff !== 'string' ? props.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(props.shortYearCutoff, 10),
-                year = -1,
-                month = -1,
-                day = -1,
-                doy = -1,
-                literal = false,
-                date,
-                lookAhead = (match) => {
-                    let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
-
-                    if (matches) {
-                        iFormat++;
-                    }
+            let iFormat;
+            let dim;
+            let extra;
+            let iValue = 0;
+            let shortYearCutoff = typeof props.shortYearCutoff !== 'string' ? props.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(props.shortYearCutoff, 10);
+            let year = -1;
+            let month = -1;
+            let day = -1;
+            let doy = -1;
+            let literal = false;
+            let date;
 
-                    return matches;
-                },
-                getNumber = (match) => {
-                    let isDoubled = lookAhead(match),
-                        size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2,
-                        minSize = match === 'y' ? size : 1,
-                        digits = new RegExp('^\\d{' + minSize + ',' + size + '}'),
-                        num = value.substring(iValue).match(digits);
-
-                    if (!num) {
-                        throw new Error('Missing number at position ' + iValue);
-                    }
+            let lookAhead = (match) => {
+                let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
 
-                    iValue += num[0].length;
+                if (matches) {
+                    iFormat++;
+                }
 
-                    return parseInt(num[0], 10);
-                },
-                getName = (match, shortNames, longNames) => {
-                    let index = -1;
-                    let arr = lookAhead(match) ? longNames : shortNames;
-                    let names = [];
+                return matches;
+            };
 
-                    for (let i = 0; i < arr.length; i++) {
-                        names.push([i, arr[i]]);
-                    }
+            let getNumber = (match) => {
+                let isDoubled = lookAhead(match);
+                let size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2;
+                let minSize = match === 'y' ? size : 1;
+                let digits = new RegExp('^\\d{' + minSize + ',' + size + '}');
+                let num = value.substring(iValue).match(digits);
 
-                    names.sort((a, b) => {
-                        return -(a[1].length - b[1].length);
-                    });
+                if (!num) {
+                    throw new Error('Missing number at position ' + iValue);
+                }
 
-                    for (let i = 0; i < names.length; i++) {
-                        let name = names[i][1];
+                iValue = iValue + num[0].length;
 
-                        if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
-                            index = names[i][0];
-                            iValue += name.length;
-                            break;
-                        }
-                    }
+                return parseInt(num[0], 10);
+            };
 
-                    if (index !== -1) {
-                        return index + 1;
-                    } else {
-                        throw new Error('Unknown name at position ' + iValue);
-                    }
-                },
-                checkLiteral = () => {
-                    if (value.charAt(iValue) !== format.charAt(iFormat)) {
-                        throw new Error('Unexpected literal at position ' + iValue);
+            let getName = (match, shortNames, longNames) => {
+                let index = -1;
+                let arr = lookAhead(match) ? longNames : shortNames;
+                let names = [];
+
+                for (let i = 0; i < arr.length; i++) {
+                    names.push([i, arr[i]]);
+                }
+
+                names.sort((a, b) => {
+                    return -(a[1].length - b[1].length);
+                });
+
+                for (let i = 0; i < names.length; i++) {
+                    let name = names[i][1];
+
+                    if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
+                        index = names[i][0];
+                        iValue = iValue + name.length;
+                        break;
                     }
+                }
 
-                    iValue++;
-                };
+                if (index !== -1) {
+                    return index + 1;
+                }
+
+                throw new Error('Unknown name at position ' + iValue);
+            };
+
+            let checkLiteral = () => {
+                if (value.charAt(iValue) !== format.charAt(iFormat)) {
+                    throw new Error('Unexpected literal at position ' + iValue);
+                }
+
+                iValue++;
+            };
 
             if (props.view === 'month') {
                 day = 1;
@@ -2750,53 +2800,53 @@ export const Calendar = React.memo(
 
             for (iFormat = 0; iFormat < format.length; iFormat++) {
                 if (literal) {
-                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                    if (format.charAt(iFormat) === '\'' && !lookAhead('\'')) {
                         literal = false;
                     } else {
                         checkLiteral();
                     }
                 } else {
                     switch (format.charAt(iFormat)) {
-                        case 'd':
-                            day = getNumber('d');
-                            break;
-                        case 'D':
-                            getName('D', dayNamesShort, dayNames);
-                            break;
-                        case 'o':
-                            doy = getNumber('o');
-                            break;
-                        case 'm':
-                            month = getNumber('m');
-                            break;
-                        case 'M':
-                            month = getName('M', monthNamesShort, monthNames);
-                            break;
-                        case 'y':
-                            year = getNumber('y');
-                            break;
-                        case '@':
-                            date = new Date(getNumber('@'));
-                            year = date.getFullYear();
-                            month = date.getMonth() + 1;
-                            day = date.getDate();
-                            break;
-                        case '!':
-                            date = new Date((getNumber('!') - ticksTo1970) / 10000);
-                            year = date.getFullYear();
-                            month = date.getMonth() + 1;
-                            day = date.getDate();
-                            break;
-                        case "'":
-                            if (lookAhead("'")) {
-                                checkLiteral();
-                            } else {
-                                literal = true;
-                            }
-
-                            break;
-                        default:
+                    case 'd':
+                        day = getNumber('d');
+                        break;
+                    case 'D':
+                        getName('D', dayNamesShort, dayNames);
+                        break;
+                    case 'o':
+                        doy = getNumber('o');
+                        break;
+                    case 'm':
+                        month = getNumber('m');
+                        break;
+                    case 'M':
+                        month = getName('M', monthNamesShort, monthNames);
+                        break;
+                    case 'y':
+                        year = getNumber('y');
+                        break;
+                    case '@':
+                        date = new Date(getNumber('@'));
+                        year = date.getFullYear();
+                        month = date.getMonth() + 1;
+                        day = date.getDate();
+                        break;
+                    case '!':
+                        date = new Date((getNumber('!') - ticksTo1970) / 10000);
+                        year = date.getFullYear();
+                        month = date.getMonth() + 1;
+                        day = date.getDate();
+                        break;
+                    case '\'':
+                        if (lookAhead('\'')) {
                             checkLiteral();
+                        } else {
+                            literal = true;
+                        }
+
+                        break;
+                    default:
+                        checkLiteral();
                     }
                 }
             }
@@ -2812,7 +2862,7 @@ export const Calendar = React.memo(
             if (year === -1) {
                 year = new Date().getFullYear();
             } else if (year < 100) {
-                year += new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100);
+                year = year + (new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100));
             }
 
             if (doy > -1) {
@@ -2827,7 +2877,7 @@ export const Calendar = React.memo(
                     }
 
                     month++;
-                    day -= dim;
+                    day = day - dim;
                 } while (true);
             }
 
@@ -3371,7 +3421,7 @@ export const Calendar = React.memo(
             return (
                 <span {...dayLabelProps}>
                     {content}
-                    {selected && <div aria-live="polite" className="p-hidden-accessible" data-p-hidden-accessible={true} pt={ptm('hiddenSelectedDay')}></div>}
+                    {selected && <div aria-live="polite" className="p-hidden-accessible" data-p-hidden-accessible={true} pt={ptm('hiddenSelectedDay')} />}
                 </span>
             );
         };
@@ -3616,9 +3666,9 @@ export const Calendar = React.memo(
             if (!props.timeOnly) {
                 if (props.view === 'date') {
                     return createDateView();
-                } else {
-                    return createMonthYearView();
                 }
+
+                return createMonthYearView();
             }
 
             return null;
@@ -3638,8 +3688,11 @@ export const Calendar = React.memo(
             hour = minute > 59 ? hour + 1 : hour;
 
             if (props.hourFormat === '12') {
-                if (hour === 0) hour = 12;
-                else if (hour > 11 && hour !== 12) hour = hour - 12;
+                if (hour === 0) {
+                    hour = 12;
+                } else if (hour > 11 && hour !== 12) {
+                    hour = hour - 12;
+                }
             }
 
             const hourProps = mergeProps(ptm('hour'));
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index 00999dcc75..7591e7c46b 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -92,15 +92,15 @@ export const Carousel = React.memo(
                 totalShiftedItems = numScrollState * page * -1;
 
                 if (isCircular) {
-                    totalShiftedItems -= numVisibleState;
+                    totalShiftedItems = totalShiftedItems - numVisibleState;
                 }
 
                 isRemainingItemsAdded.current = false;
             } else {
-                totalShiftedItems += numScrollState * dir;
+                totalShiftedItems = totalShiftedItems + numScrollState * dir;
 
                 if (isRemainingItemsAdded.current) {
-                    totalShiftedItems += remainingItems.current - numScrollState * dir;
+                    totalShiftedItems = totalShiftedItems + (remainingItems.current - numScrollState * dir);
                     isRemainingItemsAdded.current = false;
                 }
 
@@ -116,7 +116,7 @@ export const Carousel = React.memo(
                 totalShiftedItems = 0;
                 page = totalIndicators - 1;
             } else if (page === totalIndicators - 1 && remainingItems.current > 0) {
-                totalShiftedItems += remainingItems.current * -1 - numScrollState * dir;
+                totalShiftedItems = totalShiftedItems + (remainingItems.current * -1 - numScrollState * dir);
                 isRemainingItemsAdded.current = true;
             }
 
@@ -151,7 +151,7 @@ export const Carousel = React.memo(
                     let totalShiftedItems = matchedResponsiveData.numScroll * page * -1;
 
                     if (isCircular) {
-                        totalShiftedItems -= matchedResponsiveData.numVisible;
+                        totalShiftedItems = totalShiftedItems - matchedResponsiveData.numVisible;
                     }
 
                     setTotalShiftedItemsState(totalShiftedItems);
@@ -247,35 +247,35 @@ export const Carousel = React.memo(
 
         const onIndicatorKeydown = (event) => {
             switch (event.code) {
-                case 'ArrowRight':
-                    onRightKey();
-                    break;
+            case 'ArrowRight':
+                onRightKey();
+                break;
 
-                case 'ArrowLeft':
-                    onLeftKey();
-                    break;
+            case 'ArrowLeft':
+                onLeftKey();
+                break;
 
-                case 'Home':
-                    onHomeKey();
-                    event.preventDefault();
-                    break;
+            case 'Home':
+                onHomeKey();
+                event.preventDefault();
+                break;
 
-                case 'End':
-                    onEndKey();
-                    event.preventDefault();
-                    break;
+            case 'End':
+                onEndKey();
+                event.preventDefault();
+                break;
 
-                case 'ArrowUp':
-                case 'ArrowDown':
-                    event.preventDefault();
-                    break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
 
-                case 'Tab':
-                    onTabKey();
-                    break;
+            case 'Tab':
+                onTabKey();
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
@@ -375,7 +375,7 @@ export const Carousel = React.memo(
                 for (let i = 0; i < responsiveOptions.current.length; i++) {
                     let res = responsiveOptions.current[i];
 
-                    innerHTML += `
+                    innerHTML = innerHTML + `
                     @media screen and (max-width: ${res.breakpoint}) {
                         .p-carousel[${attributeSelector.current}] .p-carousel-item {
                             flex: 1 0 ${100 / res.numVisible}%
@@ -451,11 +451,11 @@ export const Carousel = React.memo(
                 totalShiftedItems = page * numScrollState * -1;
 
                 if (isCircular) {
-                    totalShiftedItems -= numVisibleState;
+                    totalShiftedItems = totalShiftedItems - numVisibleState;
                 }
 
                 if (page === totalIndicators - 1 && remainingItems.current > 0) {
-                    totalShiftedItems += -1 * remainingItems.current + numScrollState;
+                    totalShiftedItems = totalShiftedItems + (-1 * remainingItems.current + numScrollState);
                     isRemainingItemsAdded.current = true;
                 } else {
                     isRemainingItemsAdded.current = false;
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index c2bd02b70a..2aac855f07 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -153,31 +153,31 @@ export const CascadeSelect = React.memo(
 
         const onInputKeyDown = (event) => {
             switch (event.which) {
-                //down
-                case 40:
-                    if (overlayVisibleState) {
-                        DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
-                    } else if (event.altKey && props.options && props.options.length) {
-                        show();
-                    }
+            //down
+            case 40:
+                if (overlayVisibleState) {
+                    DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
+                } else if (event.altKey && props.options && props.options.length) {
+                    show();
+                }
 
-                    event.preventDefault();
-                    break;
+                event.preventDefault();
+                break;
 
                 //space
-                case 32:
-                    overlayVisibleState ? hide() : show();
+            case 32:
+                overlayVisibleState ? hide() : show();
 
-                    event.preventDefault();
-                    break;
+                event.preventDefault();
+                break;
 
                 //tab
-                case 9:
-                    hide();
-                    break;
+            case 9:
+                hide();
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
@@ -200,7 +200,7 @@ export const CascadeSelect = React.memo(
         };
 
         const onOverlayEnter = () => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             alignOverlay();
 
diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
index e42f942660..a514a12a9a 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.js
+++ b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -38,65 +38,65 @@ export const CascadeSelectSub = React.memo((props) => {
         const listItem = event.currentTarget.parentElement;
 
         switch (event.key) {
-            case 'Down':
-            case 'ArrowDown':
-                const nextItem = findNextItem(listItem);
+        case 'Down':
+        case 'ArrowDown':
+            const nextItem = findNextItem(listItem);
 
-                if (nextItem) {
-                    nextItem.children[0].focus();
-                }
+            if (nextItem) {
+                nextItem.children[0].focus();
+            }
 
-                break;
+            break;
 
-            case 'Up':
-            case 'ArrowUp':
-                const prevItem = findPrevItem(listItem);
+        case 'Up':
+        case 'ArrowUp':
+            const prevItem = findPrevItem(listItem);
 
-                if (prevItem) {
-                    prevItem.children[0].focus();
-                }
+            if (prevItem) {
+                prevItem.children[0].focus();
+            }
 
-                break;
+            break;
 
-            case 'Right':
-            case 'ArrowRight':
-                if (isOptionGroup(option)) {
-                    if (activeOptionState === option) {
-                        listItem.children[1].children[0].children[0].focus();
-                    } else {
-                        setActiveOptionState(option);
-                    }
+        case 'Right':
+        case 'ArrowRight':
+            if (isOptionGroup(option)) {
+                if (activeOptionState === option) {
+                    listItem.children[1].children[0].children[0].focus();
+                } else {
+                    setActiveOptionState(option);
                 }
+            }
 
-                break;
+            break;
 
-            case 'Left':
-            case 'ArrowLeft':
-                setActiveOptionState(null);
+        case 'Left':
+        case 'ArrowLeft':
+            setActiveOptionState(null);
 
-                const parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
+            const parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
 
-                if (parentList) {
-                    parentList.focus();
-                }
+            if (parentList) {
+                parentList.focus();
+            }
 
-                break;
+            break;
 
-            case 'Enter':
-                onOptionClick(event, option);
-                break;
+        case 'Enter':
+            onOptionClick(event, option);
+            break;
 
-            case 'Tab':
-            case 'Escape':
-                if (props.onPanelHide) {
-                    props.onPanelHide();
-                    event.preventDefault();
-                }
+        case 'Tab':
+        case 'Escape':
+            if (props.onPanelHide) {
+                props.onPanelHide();
+                event.preventDefault();
+            }
 
-                break;
+            break;
 
-            default:
-                break;
+        default:
+            break;
         }
 
         event.preventDefault();
@@ -124,13 +124,11 @@ export const CascadeSelectSub = React.memo((props) => {
                     value: option
                 });
             }
-        } else {
-            if (props.onOptionSelect) {
-                props.onOptionSelect({
-                    originalEvent: event,
-                    value: getOptionValue(option)
-                });
-            }
+        } else if (props.onOptionSelect) {
+            props.onOptionSelect({
+                originalEvent: event,
+                value: getOptionValue(option)
+            });
         }
     };
 
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index 63cc531674..5a043b60a8 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -11,7 +11,7 @@ const ChartJS = (function () {
     } catch {
         return null;
     }
-})();
+}());
 
 const PrimeReactChart = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -114,7 +114,7 @@ const PrimeReactChart = React.memo(
 
         return (
             <div {...rootProps}>
-                <canvas {...canvasProps}></canvas>
+                <canvas {...canvasProps} />
             </div>
         );
     }),
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 5e7085fdad..4bc6a769e9 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -63,7 +63,7 @@ export const Chip = React.memo(
                     ptm('image')
                 );
 
-                content.push(<img alt={props.imageAlt} {...imageProps}></img>);
+                content.push(<img alt={props.imageAlt} {...imageProps} />);
             } else if (props.icon) {
                 const chipIconProps = mergeProps(
                     {
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index 10d70fd031..423987428b 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -96,20 +96,20 @@ export const Chips = React.memo(
 
         const onContainerKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowLeft':
-                    onArrowLeftKeyOn(event);
-                    break;
+            case 'ArrowLeft':
+                onArrowLeftKeyOn(event);
+                break;
 
-                case 'ArrowRight':
-                    onArrowRightKeyOn(event);
-                    break;
+            case 'ArrowRight':
+                onArrowRightKeyOn(event);
+                break;
 
-                case 'Backspace':
-                    onBackspaceKeyOn(event);
-                    break;
+            case 'Backspace':
+                onBackspaceKeyOn(event);
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
@@ -118,7 +118,10 @@ export const Chips = React.memo(
 
             if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
                 focusIndex = focusIndex === null ? props.value.length - 1 : focusIndex - 1;
-                if (focusIndex < 0) focusIndex = 0;
+
+                if (focusIndex < 0) {
+                    focusIndex = 0;
+                }
             }
 
             setFocusedIndex(focusIndex);
@@ -156,41 +159,41 @@ export const Chips = React.memo(
             }
 
             switch (event.key) {
-                case 'Backspace':
-                    if (inputValue.length === 0 && values.length > 0) {
-                        removeItem(event, values.length - 1);
-                    }
+            case 'Backspace':
+                if (inputValue.length === 0 && values.length > 0) {
+                    removeItem(event, values.length - 1);
+                }
 
-                    break;
+                break;
 
-                case 'Enter':
-                    if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
-                        addItem(event, inputValue, true);
-                    }
+            case 'Enter':
+                if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
+                    addItem(event, inputValue, true);
+                }
 
-                    break;
+                break;
 
-                case 'ArrowLeft':
-                    if (inputValue.length === 0 && values && values.length > 0) {
-                        DomHandler.focus(listRef.current);
-                    }
+            case 'ArrowLeft':
+                if (inputValue.length === 0 && values && values.length > 0) {
+                    DomHandler.focus(listRef.current);
+                }
 
-                    break;
+                break;
 
-                case 'ArrowRight':
-                    event.stopPropagation();
-                    break;
+            case 'ArrowRight':
+                event.stopPropagation();
+                break;
 
-                default:
-                    if (props.keyfilter) {
-                        KeyFilter.onKeyPress(event, props.keyfilter);
-                    }
+            default:
+                if (props.keyfilter) {
+                    KeyFilter.onKeyPress(event, props.keyfilter);
+                }
 
-                    if (isMaxedOut()) {
-                        event.preventDefault();
-                    }
+                if (isMaxedOut()) {
+                    event.preventDefault();
+                }
 
-                    break;
+                break;
             }
         };
 
@@ -236,7 +239,7 @@ export const Chips = React.memo(
         const onPaste = (event) => {
             if (props.separator) {
                 let separator = props.separator.replace('\\n', '\n').replace('\\r', '\r').replace('\\t', '\t');
-                let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
+                let pastedData = (event.clipboardData || window.clipboardData).getData('Text');
 
                 if (props.keyfilter) {
                     KeyFilter.onPaste(event, props.keyfilter);
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 4e40380b3c..db66d4dff5 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -171,20 +171,20 @@ export const ColorPicker = React.memo(
 
         const updateModel = () => {
             switch (props.format) {
-                case 'hex':
-                    onChange(HSBtoHEX(hsbValue.current));
-                    break;
+            case 'hex':
+                onChange(HSBtoHEX(hsbValue.current));
+                break;
 
-                case 'rgb':
-                    onChange(HSBtoRGB(hsbValue.current));
-                    break;
+            case 'rgb':
+                onChange(HSBtoRGB(hsbValue.current));
+                break;
 
-                case 'hsb':
-                    onChange(hsbValue.current);
-                    break;
+            case 'hsb':
+                onChange(hsbValue.current);
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
@@ -193,20 +193,20 @@ export const ColorPicker = React.memo(
 
             if (value) {
                 switch (props.format) {
-                    case 'hex':
-                        hsb = HEXtoHSB(value);
-                        break;
+                case 'hex':
+                    hsb = HEXtoHSB(value);
+                    break;
 
-                    case 'rgb':
-                        hsb = RGBtoHSB(value);
-                        break;
+                case 'rgb':
+                    hsb = RGBtoHSB(value);
+                    break;
 
-                    case 'hsb':
-                        hsb = value;
-                        break;
+                case 'hsb':
+                    hsb = value;
+                    break;
 
-                    default:
-                        break;
+                default:
+                    break;
                 }
             } else {
                 hsb = HEXtoHSB(props.defaultColor);
@@ -280,7 +280,7 @@ export const ColorPicker = React.memo(
         const onOverlayEnter = () => {
             const styles = !props.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
 
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, styles);
             alignOverlay();
         };
@@ -311,20 +311,20 @@ export const ColorPicker = React.memo(
 
         const onInputKeydown = (event) => {
             switch (event.which) {
-                //space
-                case 32:
-                    togglePanel();
-                    event.preventDefault();
-                    break;
+            //space
+            case 32:
+                togglePanel();
+                event.preventDefault();
+                break;
 
                 //escape and tab
-                case 27:
-                case 9:
-                    hide();
-                    break;
+            case 27:
+            case 9:
+                hide();
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
@@ -396,14 +396,14 @@ export const ColorPicker = React.memo(
                 hsb.h = -1;
             }
 
-            hsb.h *= 60;
+            hsb.h = hsb.h * 60;
 
             if (hsb.h < 0) {
-                hsb.h += 360;
+                hsb.h = hsb.h + 360;
             }
 
-            hsb.s *= 100 / 255;
-            hsb.b *= 100 / 255;
+            hsb.s = hsb.s * (100 / 255);
+            hsb.b = hsb.b * (100 / 255);
 
             return hsb;
         };
@@ -429,7 +429,9 @@ export const ColorPicker = React.memo(
                 let t2 = ((255 - s) * v) / 255;
                 let t3 = ((t1 - t2) * (h % 60)) / 60;
 
-                if (h === 360) h = 0;
+                if (h === 360) {
+                    h = 0;
+                }
 
                 if (h < 60) {
                     rgb.r = t1;
@@ -564,7 +566,7 @@ export const ColorPicker = React.memo(
             return (
                 <div {...selectorProps}>
                     <div {...colorProps}>
-                        <div {...colorHandlerProps}></div>
+                        <div {...colorHandlerProps} />
                     </div>
                 </div>
             );
@@ -591,7 +593,7 @@ export const ColorPicker = React.memo(
 
             return (
                 <div ref={hueViewRef} {...hueProps}>
-                    <div ref={hueHandleRef} {...hueHandlerProps}></div>
+                    <div ref={hueHandleRef} {...hueHandlerProps} />
                 </div>
             );
         };
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index 159e130d7f..73d04cb19a 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -470,8 +470,13 @@ export const ComponentBase = {
             const getPTClassValue = (...args) => {
                 const value = getOptionValue(...args);
 
-                if (Array.isArray(value)) return { className: classNames(...value) };
-                if (ObjectUtils.isString(value)) return { className: value };
+                if (Array.isArray(value)) {
+                    return { className: classNames(...value) };
+                }
+
+                if (ObjectUtils.isString(value)) {
+                    return { className: value };
+                }
 
                 if (value?.hasOwnProperty('className') && Array.isArray(value.className)) {
                     return { className: classNames(...value.className) };
@@ -541,7 +546,7 @@ const getOptionValue = (obj, key = '', params = {}) => {
 };
 
 const _getPT = (pt, key = '', callback) => {
-    const _usept = pt?.['_usept'];
+    const _usept = pt?._usept;
 
     const getValue = (value, checkSameKey = false) => {
         const _value = callback ? callback(value) : value;
@@ -552,10 +557,10 @@ const _getPT = (pt, key = '', callback) => {
 
     return ObjectUtils.isNotEmpty(_usept)
         ? {
-              _usept,
-              originalValue: getValue(pt.originalValue),
-              value: getValue(pt.value)
-          }
+            _usept,
+            originalValue: getValue(pt.originalValue),
+            value: getValue(pt.value)
+        }
         : getValue(pt, true);
 };
 
@@ -563,13 +568,17 @@ const _usePT = (pt, callback, key, params) => {
     const fn = (value) => callback(value, key, params);
 
     if (pt?.hasOwnProperty('_usept')) {
-        const { mergeSections = true, mergeProps: useMergeProps = false, classNameMergeFunction } = pt['_usept'] || ComponentBase.context.ptOptions || {};
+        const { mergeSections = true, mergeProps: useMergeProps = false, classNameMergeFunction } = pt._usept || ComponentBase.context.ptOptions || {};
         const originalValue = fn(pt.originalValue);
         const value = fn(pt.value);
 
-        if (originalValue === undefined && value === undefined) return undefined;
-        else if (ObjectUtils.isString(value)) return value;
-        else if (ObjectUtils.isString(originalValue)) return originalValue;
+        if (originalValue === undefined && value === undefined) {
+            return undefined;
+        } else if (ObjectUtils.isString(value)) {
+            return value;
+        } else if (ObjectUtils.isString(originalValue)) {
+            return originalValue;
+        }
 
         return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps([originalValue, value], { classNameMergeFunction }) : { ...originalValue, ...value }) : value;
     }
@@ -619,7 +628,10 @@ export const useHandleStyle = (styles, _isUnstyled = () => {}, config) => {
         loadBaseStyle();
         loadGlobalStyle();
         loadCommonStyle();
-        if (!styled) load();
+
+        if (!styled) {
+            load();
+        }
     });
 
     useUpdateEffect(() => {
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
index 9499302531..44836aaeba 100644
--- a/components/lib/confirmpopup/ConfirmPopup.js
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -141,7 +141,7 @@ export const ConfirmPopup = React.memo(
         };
 
         const onEnter = () => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '50%', left: '50%', marginTop: '10px' });
             align();
         };
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index 14f6eca0f8..5e2316d97e 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -155,7 +155,7 @@ export const ContextMenu = React.memo(
             DomHandler.addStyles(menuRef.current, { position: 'absolute' });
 
             if (props.autoZIndex) {
-                ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
+                ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
             }
 
             position(currentEvent.current);
@@ -190,12 +190,12 @@ export const ContextMenu = React.memo(
 
                 //flip
                 if (left + width - document.body.scrollLeft > viewport.width) {
-                    left -= width;
+                    left = left - width;
                 }
 
                 //flip
                 if (top + height - document.body.scrollTop > viewport.height) {
-                    top -= height;
+                    top = top - height;
                 }
 
                 //fit
@@ -229,7 +229,7 @@ export const ContextMenu = React.memo(
                         parentKey
                     };
 
-                    newItem['items'] = createProcessedItems(item.items, level + 1, newItem, key);
+                    newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
                     processedItems.push(newItem);
                 });
 
@@ -355,68 +355,70 @@ export const ContextMenu = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'ArrowLeft':
-                    onArrowLeftKey(event);
-                    break;
-
-                case 'ArrowRight':
-                    onArrowRightKey(event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Escape':
-                    onEscapeKey(event);
-                    break;
-
-                case 'Tab':
-                    onTabKey(event);
-                    break;
-
-                case 'PageDown':
-                case 'PageUp':
-                case 'Backspace':
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    // NOOP
-                    break;
-
-                default:
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        searchItems(event, event.key);
-                    }
-
-                    break;
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+                onEscapeKey(event);
+                break;
+
+            case 'Tab':
+                onTabKey(event);
+                break;
+
+            case 'PageDown':
+            case 'PageUp':
+            case 'Backspace':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                // NOOP
+                break;
+
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    searchItems(event, event.key);
+                }
+
+                break;
             }
         };
 
         const onItemChange = (event) => {
             const { processedItem, isFocus, updateState = true } = event;
 
-            if (ObjectUtils.isEmpty(processedItem)) return;
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
 
             const { index, key, level, parentKey, items } = processedItem;
             const grouped = ObjectUtils.isNotEmpty(items);
diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js
index e0b8bed26e..9e37a0a4da 100644
--- a/components/lib/contextmenu/ContextMenuSub.js
+++ b/components/lib/contextmenu/ContextMenuSub.js
@@ -150,7 +150,7 @@ export const ContextMenuSub = React.memo(
                 ptm('separator', { hostName: props.hostName })
             );
 
-            return <li {...separatorProps}></li>;
+            return <li {...separatorProps} />;
         };
 
         const createSubmenu = (item, index) => {
diff --git a/components/lib/csstransition/CSSTransition.js b/components/lib/csstransition/CSSTransition.js
index da073343f0..9a16331b0b 100644
--- a/components/lib/csstransition/CSSTransition.js
+++ b/components/lib/csstransition/CSSTransition.js
@@ -61,13 +61,13 @@ export const CSSTransition = React.forwardRef((inProps, ref) => {
 
     if (disabled) {
         return props.in ? props.children : null;
-    } else {
-        const immutableProps = { nodeRef: props.nodeRef, in: props.in, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited };
-        const mutableProps = { classNames: props.classNames, timeout: props.timeout, unmountOnExit: props.unmountOnExit };
-        const mergedProps = { ...mutableProps, ...(props.options || {}), ...immutableProps };
-
-        return <ReactCSSTransition {...mergedProps}>{props.children}</ReactCSSTransition>;
     }
+
+    const immutableProps = { nodeRef: props.nodeRef, in: props.in, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited };
+    const mutableProps = { classNames: props.classNames, timeout: props.timeout, unmountOnExit: props.unmountOnExit };
+    const mergedProps = { ...mutableProps, ...(props.options || {}), ...immutableProps };
+
+    return <ReactCSSTransition {...mergedProps}>{props.children}</ReactCSSTransition>;
 });
 
 CSSTransition.displayName = 'CSSTransition';
diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
index c77791ace0..9ce1542c13 100644
--- a/components/lib/datascroller/DataScroller.js
+++ b/components/lib/datascroller/DataScroller.js
@@ -40,23 +40,21 @@ export const DataScroller = React.memo(
                     props.onLazyLoad(createLazyLoadMetadata());
                 }
 
-                first.current += props.rows;
-            } else {
-                if (value.current) {
-                    for (let i = first.current; i < first.current + props.rows; i++) {
-                        if (i >= value.current.length) {
-                            break;
-                        }
-
-                        dataToRender.current.push(value.current[i]);
+                first.current = first.current + props.rows;
+            } else if (value.current) {
+                for (let i = first.current; i < first.current + props.rows; i++) {
+                    if (i >= value.current.length) {
+                        break;
                     }
 
-                    if (value.current.length !== 0) {
-                        first.current += props.rows;
-                    }
+                    dataToRender.current.push(value.current[i]);
+                }
 
-                    setDataToRenderState([...dataToRender.current]);
+                if (value.current.length !== 0) {
+                    first.current = first.current + props.rows;
                 }
+
+                setDataToRenderState([...dataToRender.current]);
             }
         };
 
@@ -81,9 +79,9 @@ export const DataScroller = React.memo(
         const bindScrollListener = () => {
             if (props.inline) {
                 scrollFunction.current = () => {
-                    let scrollTop = contentRef.current.scrollTop,
-                        scrollHeight = contentRef.current.scrollHeight,
-                        viewportHeight = contentRef.current.clientHeight;
+                    let scrollTop = contentRef.current.scrollTop;
+                    let scrollHeight = contentRef.current.scrollHeight;
+                    let viewportHeight = contentRef.current.clientHeight;
 
                     if (scrollTop >= scrollHeight * props.buffer - viewportHeight) {
                         load();
@@ -93,11 +91,11 @@ export const DataScroller = React.memo(
                 contentRef.current.addEventListener('scroll', scrollFunction.current);
             } else {
                 scrollFunction.current = () => {
-                    let docBody = document.body,
-                        docElement = document.documentElement,
-                        scrollTop = window.pageYOffset || document.documentElement.scrollTop,
-                        winHeight = docElement.clientHeight,
-                        docHeight = Math.max(docBody.scrollHeight, docBody.offsetHeight, winHeight, docElement.scrollHeight, docElement.offsetHeight);
+                    let docBody = document.body;
+                    let docElement = document.documentElement;
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                    let winHeight = docElement.clientHeight;
+                    let docHeight = Math.max(docBody.scrollHeight, docBody.offsetHeight, winHeight, docElement.scrollHeight, docElement.offsetHeight);
 
                     if (scrollTop >= docHeight * props.buffer - winHeight) {
                         load();
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index 42104ad9c0..0db4205fef 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -260,7 +260,7 @@ export const BodyCell = React.memo((props) => {
                     right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                 }
 
-                styleObject['right'] = right + 'px';
+                styleObject.right = right + 'px';
             } else {
                 let left = 0;
                 let prev = elementRef.current && elementRef.current.previousElementSibling;
@@ -269,10 +269,10 @@ export const BodyCell = React.memo((props) => {
                     left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                 }
 
-                styleObject['left'] = left + 'px';
+                styleObject.left = left + 'px';
             }
 
-            const isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+            const isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
 
             !isSameStyle && setStyleObjectState(styleObject);
         }
@@ -375,72 +375,72 @@ export const BodyCell = React.memo((props) => {
             const { target, currentTarget: cell } = event;
 
             switch (event.code) {
-                case 'ArrowLeft':
-                    let prevCell = findPrevSelectableCell(cell);
+            case 'ArrowLeft':
+                let prevCell = findPrevSelectableCell(cell);
 
-                    if (prevCell) {
-                        changeTabIndex(cell, prevCell);
-                        prevCell.focus();
-                    }
+                if (prevCell) {
+                    changeTabIndex(cell, prevCell);
+                    prevCell.focus();
+                }
 
-                    event.preventDefault();
-                    break;
+                event.preventDefault();
+                break;
 
-                case 'ArrowRight':
-                    let nextCell = findNextSelectableCell(cell);
+            case 'ArrowRight':
+                let nextCell = findNextSelectableCell(cell);
 
-                    if (nextCell) {
-                        changeTabIndex(cell, nextCell);
-                        nextCell.focus();
-                    }
+                if (nextCell) {
+                    changeTabIndex(cell, nextCell);
+                    nextCell.focus();
+                }
 
-                    event.preventDefault();
-                    break;
+                event.preventDefault();
+                break;
 
-                case 'ArrowUp':
-                    let upCell = findUpSelectableCell(cell);
+            case 'ArrowUp':
+                let upCell = findUpSelectableCell(cell);
 
-                    if (upCell) {
-                        changeTabIndex(cell, upCell);
-                        upCell.focus();
-                    }
+                if (upCell) {
+                    changeTabIndex(cell, upCell);
+                    upCell.focus();
+                }
 
-                    event.preventDefault();
-                    break;
+                event.preventDefault();
+                break;
 
-                case 'ArrowDown':
-                    let downCell = findDownSelectableCell(cell);
+            case 'ArrowDown':
+                let downCell = findDownSelectableCell(cell);
 
-                    if (downCell) {
-                        changeTabIndex(cell, downCell);
-                        downCell.focus();
-                    }
+                if (downCell) {
+                    changeTabIndex(cell, downCell);
+                    downCell.focus();
+                }
 
+                event.preventDefault();
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                if (event.shiftKey || event.ctrlKey) {
+                    // #5192 allow TextArea to add new lines
+                } else if (!DomHandler.isClickable(target)) {
+                    onClick(event);
                     event.preventDefault();
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    if (event.shiftKey || event.ctrlKey) {
-                        // #5192 allow TextArea to add new lines
-                    } else if (!DomHandler.isClickable(target)) {
-                        onClick(event);
-                        event.preventDefault();
-                    }
+                }
 
-                    break;
+                break;
 
-                case 'Space':
-                    if (!DomHandler.isClickable(target) && !target.readOnly) {
-                        onClick(event);
-                        event.preventDefault();
-                    }
+            case 'Space':
+                if (!DomHandler.isClickable(target) && !target.readOnly) {
+                    onClick(event);
+                    event.preventDefault();
+                }
 
-                    break;
+                break;
 
-                default:
-                    //no op
-                    break;
+            default:
+                //no op
+                break;
             }
         }
     };
@@ -555,7 +555,7 @@ export const BodyCell = React.memo((props) => {
     };
 
     const createElement = () => {
-        let content, editorKeyHelper;
+        let content; let editorKeyHelper;
         const cellSelected = props.allowCellSelection && isSelected();
         const isRowEditor = props.editMode === 'row';
         const tabIndex = getTabIndex(cellSelected);
@@ -674,7 +674,7 @@ export const BodyCell = React.memo((props) => {
             );
 
             if (body) {
-                expanderProps['element'] = content;
+                expanderProps.element = content;
                 content = ObjectUtils.getJSXElement(body, props.rowData, { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps, expander: expanderProps });
             }
         } else if (isRowEditor && rowEditor) {
@@ -761,7 +761,7 @@ export const BodyCell = React.memo((props) => {
             }
 
             if (body) {
-                rowEditorProps['element'] = content;
+                rowEditorProps.element = content;
                 content = ObjectUtils.getJSXElement(body, props.rowData, { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps, rowEditor: rowEditorProps });
             }
         } else if (body && (!editingState || !editor)) {
@@ -781,7 +781,7 @@ export const BodyCell = React.memo((props) => {
             content = value;
         }
 
-        content = typeof content == 'boolean' ? content.toString() : content;
+        content = typeof content === 'boolean' ? content.toString() : content;
 
         if (!isRowEditor && editor) {
             const editorKeyHelperProps = mergeProps(
diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
index f5434129a5..ae26561903 100644
--- a/components/lib/datatable/BodyRow.js
+++ b/components/lib/datatable/BodyRow.js
@@ -120,9 +120,9 @@ export const BodyRow = React.memo((props) => {
             }
 
             return groupRowSpan === 1 ? null : groupRowSpan;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const onClick = (event) => {
@@ -162,38 +162,38 @@ export const BodyRow = React.memo((props) => {
             const { target, currentTarget: row } = event;
 
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(row, event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(row, event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(row, event);
-                    break;
-
-                case 'End':
-                    onEndKey(row, event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(row, event, target);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(row, event, target);
-                    break;
-
-                case 'Tab':
-                    onTabKey(row, event);
-                    break;
-
-                default:
-                    //no op
-                    break;
+            case 'ArrowDown':
+                onArrowDownKey(row, event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(row, event);
+                break;
+
+            case 'Home':
+                onHomeKey(row, event);
+                break;
+
+            case 'End':
+                onEndKey(row, event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(row, event, target);
+                break;
+
+            case 'Space':
+                onSpaceKey(row, event, target);
+                break;
+
+            case 'Tab':
+                onTabKey(row, event);
+                break;
+
+            default:
+                //no op
+                break;
             }
         }
     };
@@ -327,8 +327,11 @@ export const BodyRow = React.memo((props) => {
 
                 editingRows = props.editingRows ? [...props.editingRows] : [];
 
-                if (editingRowIndex !== -1) editingRows = editingRows.filter((val, i) => i !== editingRowIndex);
-                else editingRows.push(data);
+                if (editingRowIndex !== -1) {
+                    editingRows = editingRows.filter((val, i) => i !== editingRowIndex);
+                } else {
+                    editingRows.push(data);
+                }
             }
 
             props.onRowEditChange({
diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
index a2bd50ed13..61835d7256 100644
--- a/components/lib/datatable/ColumnFilter.js
+++ b/components/lib/datatable/ColumnFilter.js
@@ -64,7 +64,9 @@ export const ColumnFilter = React.memo((props) => {
     });
 
     const hasFilter = () => {
-        if (!filterStoreModel || !filterModel) return false;
+        if (!filterStoreModel || !filterModel) {
+            return false;
+        }
 
         return filterStoreModel.operator ? !isFilterBlank(filterModel.constraints[0].value) : !isFilterBlank(filterModel.value);
     };
@@ -128,11 +130,11 @@ export const ColumnFilter = React.memo((props) => {
                     matchMode: filterStoreModel.constraints[0].matchMode,
                     operator: filterStoreModel.operator
                 };
-            } else {
-                return {
-                    matchMode: filterStoreModel.matchMode
-                };
             }
+
+            return {
+                matchMode: filterStoreModel.matchMode
+            };
         }
     };
 
@@ -186,26 +188,26 @@ export const ColumnFilter = React.memo((props) => {
 
     const onToggleButtonKeyDown = (event) => {
         switch (event.key) {
-            case 'Escape':
-            case 'Tab':
-                hide();
-                break;
-
-            case 'ArrowDown':
-                if (overlayVisibleState) {
-                    const focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
-
-                    focusable && focusable.focus();
-                    event.preventDefault();
-                } else if (event.altKey) {
-                    setOverlayVisibleState(true);
-                    event.preventDefault();
-                }
+        case 'Escape':
+        case 'Tab':
+            hide();
+            break;
+
+        case 'ArrowDown':
+            if (overlayVisibleState) {
+                const focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
+
+                focusable && focusable.focus();
+                event.preventDefault();
+            } else if (event.altKey) {
+                setOverlayVisibleState(true);
+                event.preventDefault();
+            }
 
-                break;
+            break;
 
-            default:
-                break;
+        default:
+            break;
         }
     };
 
@@ -258,38 +260,38 @@ export const ColumnFilter = React.memo((props) => {
         let item = event.target;
 
         switch (event.key) {
-            case 'ArrowDown':
-                const nextItem = findNextItem(item);
+        case 'ArrowDown':
+            const nextItem = findNextItem(item);
 
-                if (nextItem) {
-                    item.removeAttribute('tabindex');
-                    nextItem.tabIndex = 0;
-                    nextItem.focus();
-                }
+            if (nextItem) {
+                item.removeAttribute('tabindex');
+                nextItem.tabIndex = 0;
+                nextItem.focus();
+            }
 
-                event.preventDefault();
-                break;
+            event.preventDefault();
+            break;
 
-            case 'ArrowUp':
-                const prevItem = findPrevItem(item);
+        case 'ArrowUp':
+            const prevItem = findPrevItem(item);
 
-                if (prevItem) {
-                    item.removeAttribute('tabindex');
-                    prevItem.tabIndex = 0;
-                    prevItem.focus();
-                }
+            if (prevItem) {
+                item.removeAttribute('tabindex');
+                prevItem.tabIndex = 0;
+                prevItem.focus();
+            }
 
-                event.preventDefault();
-                break;
+            event.preventDefault();
+            break;
 
-            case 'Enter':
-                clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
+        case 'Enter':
+            clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
 
-                event.preventDefault();
-                break;
+            event.preventDefault();
+            break;
 
-            default:
-                break;
+        default:
+            break;
         }
     };
 
@@ -385,7 +387,7 @@ export const ColumnFilter = React.memo((props) => {
     };
 
     const onOverlayEnter = () => {
-        ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+        ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
         DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
         DomHandler.alignOverlay(overlayRef.current, iconRef.current, (context && context.appendTo) || PrimeReact.appendTo, false);
 
@@ -659,7 +661,7 @@ export const ColumnFilter = React.memo((props) => {
                             </li>
                         );
                     })}
-                    <li {...filterSeparatorProps}></li>
+                    <li {...filterSeparatorProps} />
                     <li {...filterRowItemProps}>{_noFilterLabel}</li>
                 </ul>
             );
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 2213e44620..045a2c5cd1 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -177,17 +177,17 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 
     const getStorage = () => {
         switch (props.stateStorage) {
-            case 'local':
-                return window.localStorage;
+        case 'local':
+            return window.localStorage;
 
-            case 'session':
-                return window.sessionStorage;
+        case 'session':
+            return window.sessionStorage;
 
-            case 'custom':
-                return null;
+        case 'custom':
+            return null;
 
-            default:
-                throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
+        default:
+            throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
         }
     };
 
@@ -392,7 +392,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         widths.forEach((width, index) => {
             let style = `width: ${width}px !important; max-width: ${width}px !important`;
 
-            innerHTML += `
+            innerHTML = innerHTML + `
                 ${selector} > [data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
@@ -422,16 +422,19 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const findParentHeader = (element) => {
         if (element.nodeName === 'TH') {
             return element;
-        } else {
-            let parent = element.parentElement;
+        }
 
-            while (parent.nodeName !== 'TH') {
-                parent = parent.parentElement;
-                if (!parent) break;
-            }
+        let parent = element.parentElement;
 
-            return parent;
+        while (parent.nodeName !== 'TH') {
+            parent = parent.parentElement;
+
+            if (!parent) {
+                break;
+            }
         }
+
+        return parent;
     };
 
     const getGroupRowSortField = () => {
@@ -443,8 +446,13 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             return val.filter((data, index) => {
                 let isSelectable = true;
 
-                if (props.showSelectionElement) isSelectable = props.showSelectionElement({ rowIndex: index, props });
-                if (props.isDataSelectable && isSelectable) isSelectable = props.isDataSelectable({ data, index });
+                if (props.showSelectionElement) {
+                    isSelectable = props.showSelectionElement({ rowIndex: index, props });
+                }
+
+                if (props.isDataSelectable && isSelectable) {
+                    isSelectable = props.isDataSelectable({ data, index });
+                }
 
                 return isSelectable;
             });
@@ -456,13 +464,13 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const allRowsSelected = (processedData) => {
         if (props.onSelectAllChange) {
             return props.selectAll;
-        } else {
-            const data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-            const val = ObjectUtils.isNotEmpty(props.frozenValue) ? [...props.frozenValue, ...data] : data;
-            const selectableVal = getSelectableData(val);
-
-            return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every((sv) => ObjectUtils.isArray(props.selection) && props.selection.some((s) => isEquals(s, sv)));
         }
+
+        const data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
+        const val = ObjectUtils.isNotEmpty(props.frozenValue) ? [...props.frozenValue, ...data] : data;
+        const selectableVal = getSelectableData(val);
+
+        return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every((sv) => ObjectUtils.isArray(props.selection) && props.selection.some((s) => isEquals(s, sv)));
     };
 
     const getSelectionModeInColumn = (columns) => {
@@ -490,11 +498,11 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 
         if (editing) {
             !meta && (meta = editingMeta[editingKey] = { data: { ...rowData }, fields: [] });
-            meta['fields'].push(field);
+            meta.fields.push(field);
         } else if (meta) {
-            const fields = meta['fields'].filter((f) => f !== field);
+            const fields = meta.fields.filter((f) => f !== field);
 
-            !fields.length ? delete editingMeta[editingKey] : (meta['fields'] = fields);
+            !fields.length ? delete editingMeta[editingKey] : (meta.fields = fields);
         }
 
         setEditingMetaState(editingMeta);
@@ -604,7 +612,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
             let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
 
-            innerHTML += `
+            innerHTML = innerHTML + `
                  ${selector} > [data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
@@ -632,8 +640,11 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         const { originalEvent: event, column } = e;
 
         if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
-            if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) event.currentTarget.draggable = false;
-            else event.currentTarget.draggable = true;
+            if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) {
+                event.currentTarget.draggable = false;
+            } else {
+                event.currentTarget.draggable = true;
+            }
         }
     };
 
@@ -673,7 +684,9 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             return;
         }
 
-        if (!props.reorderableColumns) return;
+        if (!props.reorderableColumns) {
+            return;
+        }
 
         colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
         colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
@@ -955,8 +968,11 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const addSortMeta = (meta, multiSortMeta) => {
         const index = multiSortMeta.findIndex((sortMeta) => sortMeta.field === meta.field);
 
-        if (index >= 0) multiSortMeta[index] = meta;
-        else multiSortMeta.push(meta);
+        if (index >= 0) {
+            multiSortMeta[index] = meta;
+        } else {
+            multiSortMeta.push(meta);
+        }
     };
 
     const removeSortMeta = (meta, multiSortMeta) => {
@@ -1098,14 +1114,16 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     };
 
     const filterLocal = (data, filters) => {
-        if (!data) return;
+        if (!data) {
+            return;
+        }
 
         let activeFilters = filters ? getActiveFilters(filters) : {};
 
         let columns = getColumns();
         let filteredValue = [];
 
-        let isGlobalFilter = activeFilters['global'] || props.globalFilter;
+        let isGlobalFilter = activeFilters.global || props.globalFilter;
         let globalFilterFieldsArray;
 
         if (isGlobalFilter) {
@@ -1150,8 +1168,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             if (localMatch && isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
                 for (let j = 0; j < globalFilterFieldsArray.length; j++) {
                     let globalFilterField = globalFilterFieldsArray[j];
-                    let matchMode = activeFilters['global'] ? activeFilters['global'].matchMode : props.globalFilterMatchMode;
-                    let value = activeFilters['global'] ? activeFilters['global'].value : props.globalFilter;
+                    let matchMode = activeFilters.global ? activeFilters.global.matchMode : props.globalFilterMatchMode;
+                    let value = activeFilters.global ? activeFilters.global.value : props.globalFilter;
 
                     globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, props.filterLocale);
 
@@ -1198,11 +1216,11 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             Object.entries(filters).forEach(([prop, value]) => {
                 cloned[prop] = value.operator
                     ? {
-                          operator: value.operator,
-                          constraints: value.constraints.map((constraint) => {
-                              return { ...constraint };
-                          })
-                      }
+                        operator: value.operator,
+                        constraints: value.constraints.map((constraint) => {
+                            return { ...constraint };
+                        })
+                    }
                     : { ...value };
             });
         } else {
@@ -1315,17 +1333,17 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                     .replace(/"/g, '""')
                     .replace(/\n/g, '\u2028');
 
-                csv += '"' + columnHeader + '"';
+                csv = csv + ('"' + columnHeader + '"');
 
                 if (i < columns.length - 1) {
-                    csv += props.csvSeparator;
+                    csv = csv + props.csvSeparator;
                 }
             }
         });
 
         //body
         data.forEach((record) => {
-            csv += '\n';
+            csv = csv + '\n';
             columns.forEach((column, i) => {
                 const [colField, exportField, exportable] = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')];
                 const field = exportField || colField;
@@ -1339,12 +1357,14 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                         } else {
                             cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, '\u2028');
                         }
-                    } else cellData = '';
+                    } else {
+                        cellData = '';
+                    }
 
-                    csv += '"' + cellData + '"';
+                    csv = csv + ('"' + cellData + '"');
 
                     if (i < columns.length - 1) {
-                        csv += props.csvSeparator;
+                        csv = csv + props.csvSeparator;
                     }
                 }
             });
@@ -1401,8 +1421,11 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 }
 
                 if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
-                    if (props.sortMode === 'single') data = sortSingle(data, sortField, sortOrder);
-                    else if (props.sortMode === 'multiple') data = sortMultiple(data, multiSortMeta);
+                    if (props.sortMode === 'single') {
+                        data = sortSingle(data, sortField, sortOrder);
+                    } else if (props.sortMode === 'multiple') {
+                        data = sortMultiple(data, multiSortMeta);
+                    }
                 }
             }
         }
@@ -1798,7 +1821,9 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     };
 
     const createContent = (processedData, columns, selectionModeInColumn, empty) => {
-        if (!columns) return;
+        if (!columns) {
+            return;
+        }
 
         const _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
         const virtualScrollerOptions = props.virtualScrollerOptions || {};
@@ -1922,7 +1947,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 ptCallbacks.ptm('resizeHelper')
             );
 
-            return <div ref={resizeHelperRef} {...resizeHelperProps}></div>;
+            return <div ref={resizeHelperRef} {...resizeHelperProps} />;
         }
 
         return null;
diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
index f94a71e8a1..35d1f23348 100644
--- a/components/lib/datatable/DataTableBase.js
+++ b/components/lib/datatable/DataTableBase.js
@@ -395,16 +395,16 @@ const classes = {
         ObjectUtils.isEmpty(props)
             ? classNames('p-filter-column', { 'p-frozen-column': frozen })
             : classNames({
-                  'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
-                  'p-sortable-column': getColumnProp('sortable'),
-                  'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
-                  'p-highlight': sortMeta.sorted,
-                  'p-frozen-column': frozen,
-                  'p-selection-column': getColumnProp('selectionMode'),
-                  'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
-                  'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen,
-                  [`p-align-${align}`]: !!align
-              }),
+                'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
+                'p-sortable-column': getColumnProp('sortable'),
+                'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
+                'p-highlight': sortMeta.sorted,
+                'p-frozen-column': frozen,
+                'p-selection-column': getColumnProp('selectionMode'),
+                'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
+                'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen,
+                [`p-align-${align}`]: !!align
+            }),
     footerCell: ({ getColumnProp, align }) =>
         classNames({
             'p-frozen-column': getColumnProp('frozen'),
diff --git a/components/lib/datatable/FooterCell.js b/components/lib/datatable/FooterCell.js
index ada6c85516..158a6e78f0 100644
--- a/components/lib/datatable/FooterCell.js
+++ b/components/lib/datatable/FooterCell.js
@@ -51,7 +51,7 @@ export const FooterCell = React.memo((props) => {
                     right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                 }
 
-                styleObject['right'] = right + 'px';
+                styleObject.right = right + 'px';
             } else {
                 let left = 0;
                 let prev = elementRef.current.previousElementSibling;
@@ -60,10 +60,10 @@ export const FooterCell = React.memo((props) => {
                     left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                 }
 
-                styleObject['left'] = left + 'px';
+                styleObject.left = left + 'px';
             }
 
-            const isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+            const isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
 
             !isSameStyle && setStyleObjectState(styleObject);
         }
diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
index ba09f28238..5e60892e5f 100644
--- a/components/lib/datatable/HeaderCell.js
+++ b/components/lib/datatable/HeaderCell.js
@@ -87,9 +87,13 @@ export const HeaderCell = React.memo((props) => {
 
     const getAriaSort = ({ sorted, sortOrder }) => {
         if (getColumnProp('sortable')) {
-            if (sorted && sortOrder < 0) return 'descending';
-            else if (sorted && sortOrder > 0) return 'ascending';
-            else return 'none';
+            if (sorted && sortOrder < 0) {
+                return 'descending';
+            } else if (sorted && sortOrder > 0) {
+                return 'ascending';
+            }
+
+            return 'none';
         }
 
         return null;
@@ -108,7 +112,7 @@ export const HeaderCell = React.memo((props) => {
                     right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                 }
 
-                styleObject['right'] = right + 'px';
+                styleObject.right = right + 'px';
             } else {
                 let left = 0;
                 let prev = elementRef.current.previousElementSibling;
@@ -117,7 +121,7 @@ export const HeaderCell = React.memo((props) => {
                     left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                 }
 
-                styleObject['left'] = left + 'px';
+                styleObject.left = left + 'px';
             }
 
             let filterRow = elementRef.current.parentElement.nextElementSibling;
@@ -125,11 +129,11 @@ export const HeaderCell = React.memo((props) => {
             if (filterRow) {
                 let index = DomHandler.index(elementRef.current);
 
-                filterRow.children[index].style.left = styleObject['left'];
-                filterRow.children[index].style.right = styleObject['right'];
+                filterRow.children[index].style.left = styleObject.left;
+                filterRow.children[index].style.right = styleObject.right;
             }
 
-            const isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+            const isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
 
             !isSameStyle && setStyleObjectState(styleObject);
         }
@@ -240,7 +244,7 @@ export const HeaderCell = React.memo((props) => {
                 getColumnPTOptions('columnResizer')
             );
 
-            return <span {...columnResizerProps}></span>;
+            return <span {...columnResizerProps} />;
         }
 
         return null;
diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
index 4564653717..3a20717e65 100644
--- a/components/lib/datatable/TableBody.js
+++ b/components/lib/datatable/TableBody.js
@@ -52,8 +52,11 @@ export const TableBody = React.memo(
         const isCheckboxSelectionModeInColumn = props.selectionModeInColumn === 'multiple';
 
         const equals = (data1, data2) => {
-            if (allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);
-            else return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
+            if (allowCellSelection()) {
+                return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);
+            }
+
+            return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
         };
 
         const isSelectionEnabled = () => {
@@ -100,38 +103,44 @@ export const TableBody = React.memo(
             if (rowData && props.expandedRows) {
                 if (isSubheaderGrouping && props.expandableRowGroups) {
                     return isRowGroupExpanded(rowData);
-                } else {
-                    if (props.dataKey) {
-                        const rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
-                        let expanded = false;
-
-                        if (props.expandedRows) {
-                            if (Array.isArray(props.expandedRows)) {
-                                expanded = props.expandedRows.some((row) => ObjectUtils.resolveFieldData(row, props.dataKey) === rowId);
-                            } else {
-                                expanded = props.expandedRows[rowId] !== undefined;
-                            }
-                        }
+                }
 
-                        return expanded;
-                    } else {
-                        return findIndex(props.expandedRows, rowData) !== -1;
+                if (props.dataKey) {
+                    const rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
+                    let expanded = false;
+
+                    if (props.expandedRows) {
+                        if (Array.isArray(props.expandedRows)) {
+                            expanded = props.expandedRows.some((row) => ObjectUtils.resolveFieldData(row, props.dataKey) === rowId);
+                        } else {
+                            expanded = props.expandedRows[rowId] !== undefined;
+                        }
                     }
+
+                    return expanded;
                 }
+
+                return findIndex(props.expandedRows, rowData) !== -1;
             }
 
             return false;
         };
 
         const isRowGroupExpanded = (rowData) => {
-            if (props.dataKey === props.groupRowsBy) return Object.keys(props.expandedRows).some((data) => ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, props.dataKey)));
-            else return props.expandedRows.some((data) => ObjectUtils.equals(data, rowData, props.groupRowsBy));
+            if (props.dataKey === props.groupRowsBy) {
+                return Object.keys(props.expandedRows).some((data) => ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, props.dataKey)));
+            }
+
+            return props.expandedRows.some((data) => ObjectUtils.equals(data, rowData, props.groupRowsBy));
         };
 
         const isRowEditing = (rowData) => {
             if (props.editMode === 'row' && rowData && props.editingRows) {
-                if (props.dataKey) return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;
-                else return findIndex(props.editingRows, rowData) !== -1;
+                if (props.dataKey) {
+                    return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;
+                }
+
+                return findIndex(props.editingRows, rowData) !== -1;
             }
 
             return false;
@@ -189,7 +198,7 @@ export const TableBody = React.memo(
 
         const rowGroupHeaderStyle = () => {
             if (props.scrollable) {
-                return { top: rowGroupHeaderStyleObjectState['top'] };
+                return { top: rowGroupHeaderStyleObjectState.top };
             }
 
             return null;
@@ -207,26 +216,26 @@ export const TableBody = React.memo(
                 const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, props.groupRowsBy);
 
                 return !ObjectUtils.deepEquals(currentRowFieldData, previousRowFieldData);
-            } else {
-                return true;
             }
+
+            return true;
         };
 
         const shouldRenderRowGroupFooter = (value, rowData, i, expanded) => {
             if (props.expandableRowGroups && !expanded) {
                 return false;
-            } else {
-                const currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
-                const nextRowData = value[i + 1];
+            }
 
-                if (nextRowData) {
-                    const nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
+            const currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
+            const nextRowData = value[i + 1];
 
-                    return !ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
-                } else {
-                    return true;
-                }
+            if (nextRowData) {
+                const nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
+
+                return !ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
             }
+
+            return true;
         };
 
         const updateFrozenRowStickyPosition = () => {
@@ -323,7 +332,7 @@ export const TableBody = React.memo(
         };
 
         const selectRange = (event) => {
-            let rangeStart, rangeEnd, selectedSize;
+            let rangeStart; let rangeEnd; let selectedSize;
 
             const isAllowCellSelection = allowCellSelection();
             const index = ObjectUtils.findIndexInList(event.data, props.value, props.dataKey);
@@ -373,9 +382,9 @@ export const TableBody = React.memo(
         };
 
         const selectRangeOnCell = (event, rowRangeStart, rowRangeEnd) => {
-            let cellRangeStart,
-                cellRangeEnd,
-                cellIndex = event.cellIndex;
+            let cellRangeStart;
+            let cellRangeEnd;
+            let cellIndex = event.cellIndex;
 
             if (cellIndex > anchorCellIndex.current) {
                 cellRangeStart = anchorCellIndex.current;
@@ -421,13 +430,19 @@ export const TableBody = React.memo(
         };
 
         const onSelect = (event) => {
-            if (allowCellSelection()) props.onCellSelect && props.onCellSelect({ originalEvent: event.originalEvent, ...event.data, type: event.type });
-            else props.onRowSelect && props.onRowSelect(event);
+            if (allowCellSelection()) {
+                props.onCellSelect && props.onCellSelect({ originalEvent: event.originalEvent, ...event.data, type: event.type });
+            } else {
+                props.onRowSelect && props.onRowSelect(event);
+            }
         };
 
         const onUnselect = (event) => {
-            if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect({ originalEvent: event.originalEvent, ...event.data, type: event.type });
-            else props.onRowUnselect && props.onRowUnselect(event);
+            if (allowCellSelection()) {
+                props.onCellUnselect && props.onCellUnselect({ originalEvent: event.originalEvent, ...event.data, type: event.type });
+            } else {
+                props.onRowUnselect && props.onRowUnselect(event);
+            }
         };
 
         const enableDragSelection = (event) => {
@@ -550,7 +565,9 @@ export const TableBody = React.memo(
                 const hasSelection = ObjectUtils.isNotEmpty(props.selection);
                 const data = hasSelection ? props.selection : event.data;
 
-                if (hasSelection) DomHandler.clearSelection();
+                if (hasSelection) {
+                    DomHandler.clearSelection();
+                }
 
                 if (props.onContextMenuSelectionChange) {
                     props.onContextMenuSelectionChange({
@@ -585,8 +602,11 @@ export const TableBody = React.memo(
         const onRowMouseDown = (e) => {
             const { originalEvent: event } = e;
 
-            if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;
-            else event.currentTarget.draggable = false;
+            if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
+                event.currentTarget.draggable = true;
+            } else {
+                event.currentTarget.draggable = false;
+            }
 
             if (allowRowDrag(e)) {
                 enableDragSelection(event, 'row');
@@ -768,8 +788,13 @@ export const TableBody = React.memo(
             const dx = event.clientX - x;
             const dy = event.clientY - y;
 
-            if (dy < 0) dragSelectionHelper.current.style.top = `${event.pageY + 5}px`;
-            if (dx < 0) dragSelectionHelper.current.style.left = `${event.pageX + 5}px`;
+            if (dy < 0) {
+                dragSelectionHelper.current.style.top = `${event.pageY + 5}px`;
+            }
+
+            if (dx < 0) {
+                dragSelectionHelper.current.style.left = `${event.pageX + 5}px`;
+            }
 
             dragSelectionHelper.current.style.height = `${Math.abs(dy)}px`;
             dragSelectionHelper.current.style.width = `${Math.abs(dx)}px`;
diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js
index 681c3db56e..d202316d00 100644
--- a/components/lib/datatable/TableHeader.js
+++ b/components/lib/datatable/TableHeader.js
@@ -251,23 +251,23 @@ export const TableHeader = React.memo((props) => {
                     </tr>
                 );
             });
-        } else {
-            const headerRowProps = mergeProps(
-                {
-                    role: 'row'
-                },
-                ptm('headerRow', { hostName: props.hostName })
-            );
-            const headerRow = <tr {...headerRowProps}>{createHeaderCells(props.columns)}</tr>;
-            const filterRow = props.filterDisplay === 'row' && <tr {...headerRowProps}>{createFilterCells()}</tr>;
-
-            return (
-                <>
-                    {headerRow}
-                    {filterRow}
-                </>
-            );
         }
+
+        const headerRowProps = mergeProps(
+            {
+                role: 'row'
+            },
+            ptm('headerRow', { hostName: props.hostName })
+        );
+        const headerRow = <tr {...headerRowProps}>{createHeaderCells(props.columns)}</tr>;
+        const filterRow = props.filterDisplay === 'row' && <tr {...headerRowProps}>{createFilterCells()}</tr>;
+
+        return (
+            <>
+                {headerRow}
+                {filterRow}
+            </>
+        );
     };
 
     const content = createContent();
diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js
index d0227770f7..c474fe6d2d 100644
--- a/components/lib/deferredcontent/DeferredContent.js
+++ b/components/lib/deferredcontent/DeferredContent.js
@@ -32,12 +32,12 @@ export const DeferredContent = React.forwardRef((inProps, ref) => {
     const shouldLoad = () => {
         if (loadedState) {
             return false;
-        } else {
-            const rect = elementRef.current.getBoundingClientRect();
-            const winHeight = document.documentElement.clientHeight;
-
-            return winHeight >= rect.top;
         }
+
+        const rect = elementRef.current.getBoundingClientRect();
+        const winHeight = document.documentElement.clientHeight;
+
+        return winHeight >= rect.top;
     };
 
     const load = (event) => {
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index 5bcf2a1c86..ed2da9bfe1 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -135,11 +135,15 @@ export const Dialog = React.forwardRef((inProps, ref) => {
                     const focusedIndex = focusableElements.indexOf(document.activeElement);
 
                     if (event.shiftKey) {
-                        if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
-                        else focusableElements[focusedIndex - 1].focus();
+                        if (focusedIndex === -1 || focusedIndex === 0) {
+                            focusableElements[focusableElements.length - 1].focus();
+                        } else {
+                            focusableElements[focusedIndex - 1].focus();
+                        }
+                    } else if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) {
+                        focusableElements[0].focus();
                     } else {
-                        if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
-                        else focusableElements[focusedIndex + 1].focus();
+                        focusableElements[focusedIndex + 1].focus();
                     }
                 }
             }
@@ -247,8 +251,8 @@ export const Dialog = React.forwardRef((inProps, ref) => {
             let newHeight = height + deltaY;
 
             if (hasBeenDragged) {
-                newWidth += deltaX;
-                newHeight += deltaY;
+                newWidth = newWidth + deltaX;
+                newHeight = newHeight + deltaY;
             }
 
             if ((!minWidth || newWidth > minWidth) && offset.left + newWidth < viewport.width) {
@@ -388,7 +392,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
         let innerHTML = '';
 
         for (let breakpoint in props.breakpoints) {
-            innerHTML += `
+            innerHTML = innerHTML + `
                 @media screen and (max-width: ${breakpoint}) {
                      [data-pc-name="dialog"][${attributeSelector.current}] {
                         width: ${props.breakpoints[breakpoint]} !important;
@@ -441,7 +445,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
 
     useUpdateEffect(() => {
         if (maskVisibleState) {
-            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['modal']) || PrimeReact.zIndex['modal']);
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
             setVisibleState(true);
         }
     }, [maskVisibleState]);
@@ -623,7 +627,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
 
     const createResizer = () => {
         if (props.resizable) {
-            return <span className="p-resizable-handle" style={{ zIndex: 90 }} onMouseDown={onResizeStart}></span>;
+            return <span className="p-resizable-handle" style={{ zIndex: 90 }} onMouseDown={onResizeStart} />;
         }
 
         return null;
@@ -740,11 +744,11 @@ export const Dialog = React.forwardRef((inProps, ref) => {
             const templateElement = createTemplateElement({ maskProps, rootProps, transitionProps });
 
             return <Portal element={templateElement} appendTo={props.appendTo} visible />;
-        } else {
-            const element = createElement({ maskProps, rootProps, transitionProps });
-
-            return <Portal element={element} appendTo={props.appendTo} visible />;
         }
+
+        const element = createElement({ maskProps, rootProps, transitionProps });
+
+        return <Portal element={element} appendTo={props.appendTo} visible />;
     };
 
     return maskVisibleState && createDialog();
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index f3579a35a6..50b9218872 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -66,45 +66,57 @@ export const Dock = React.memo(
 
         const onListKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    if (props.position === 'left' || props.position === 'right') onArrowDownKey();
-                    event.preventDefault();
-                    break;
-
-                case 'ArrowUp':
-                    if (props.position === 'left' || props.position === 'right') onArrowUpKey();
-                    event.preventDefault();
-                    break;
-
-                case 'ArrowRight':
-                    if (props.position === 'top' || props.position === 'bottom') onArrowDownKey();
-                    event.preventDefault();
-                    break;
-
-                case 'ArrowLeft':
-                    if (props.position === 'top' || props.position === 'bottom') onArrowUpKey();
-                    event.preventDefault();
-                    break;
-
-                case 'Home':
-                    onHomeKey();
-                    event.preventDefault();
-                    break;
-
-                case 'End':
-                    onEndKey();
-                    event.preventDefault();
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                case 'Space':
-                    onSpaceKey(event);
-                    event.preventDefault();
-                    break;
-
-                default:
-                    break;
+            case 'ArrowDown':
+                if (props.position === 'left' || props.position === 'right') {
+                    onArrowDownKey();
+                }
+
+                event.preventDefault();
+                break;
+
+            case 'ArrowUp':
+                if (props.position === 'left' || props.position === 'right') {
+                    onArrowUpKey();
+                }
+
+                event.preventDefault();
+                break;
+
+            case 'ArrowRight':
+                if (props.position === 'top' || props.position === 'bottom') {
+                    onArrowDownKey();
+                }
+
+                event.preventDefault();
+                break;
+
+            case 'ArrowLeft':
+                if (props.position === 'top' || props.position === 'bottom') {
+                    onArrowUpKey();
+                }
+
+                event.preventDefault();
+                break;
+
+            case 'Home':
+                onHomeKey();
+                event.preventDefault();
+                break;
+
+            case 'End':
+                onEndKey();
+                event.preventDefault();
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onSpaceKey(event);
+                event.preventDefault();
+                break;
+
+            default:
+                break;
             }
         };
 
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 77a7befc25..9c4fb0d604 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -74,12 +74,12 @@ export const Dropdown = React.memo(
                     }
 
                     return filteredGroups;
-                } else {
-                    return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
                 }
-            } else {
-                return props.options;
+
+                return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
             }
+
+            return props.options;
         };
 
         const onFirstHiddenFocus = (event) => {
@@ -183,68 +183,68 @@ export const Dropdown = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'ArrowLeft':
-                case 'ArrowRight':
-                    onArrowLeftKey(event, props.editable);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                case 'PageDown':
-                    onPageDownKey(event);
-                    break;
-
-                case 'PageUp':
-                    onPageUpKey(event);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event, props.editable);
-                    break;
-
-                case 'NumpadEnter':
-                case 'Enter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Escape':
-                    onEscapeKey(event);
-                    break;
-
-                case 'Tab':
-                    onTabKey(event);
-                    break;
-
-                case 'Backspace':
-                    onBackspaceKey(event, props.editable);
-                    break;
-
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    //NOOP
-                    break;
-
-                default:
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        !overlayVisibleState && !props.editable && show();
-                        !props.editable && searchOptions(event, event.key);
-                    }
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                onArrowLeftKey(event, props.editable);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'PageDown':
+                onPageDownKey(event);
+                break;
+
+            case 'PageUp':
+                onPageUpKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event, props.editable);
+                break;
+
+            case 'NumpadEnter':
+            case 'Enter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+                onEscapeKey(event);
+                break;
+
+            case 'Tab':
+                onTabKey(event);
+                break;
+
+            case 'Backspace':
+                onBackspaceKey(event, props.editable);
+                break;
+
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
+                break;
+
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    !overlayVisibleState && !props.editable && show();
+                    !props.editable && searchOptions(event, event.key);
+                }
 
-                    break;
+                break;
             }
 
             clickedRef.current = false;
@@ -252,28 +252,28 @@ export const Dropdown = React.memo(
 
         const onFilterInputKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'ArrowLeft':
-                case 'ArrowRight':
-                    onArrowLeftKey(event, true);
-                    break;
-
-                case 'Escape':
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    event.preventDefault();
-                    break;
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
 
-                default:
-                    break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                onArrowLeftKey(event, true);
+                break;
+
+            case 'Escape':
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                event.preventDefault();
+                break;
+
+            default:
+                break;
             }
         };
 
@@ -506,9 +506,13 @@ export const Dropdown = React.memo(
                 const optionIndex = index === -1 ? -1 : index.option;
                 const option = findNextOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
 
-                if (option) return option;
-                else if (groupIndex + 1 !== visibleOptions.length) return findNextOption({ group: groupIndex + 1, option: -1 });
-                else return null;
+                if (option) {
+                    return option;
+                } else if (groupIndex + 1 !== visibleOptions.length) {
+                    return findNextOption({ group: groupIndex + 1, option: -1 });
+                }
+
+                return null;
             }
 
             return findNextOptionInList(visibleOptions, index);
@@ -536,9 +540,13 @@ export const Dropdown = React.memo(
                 const optionIndex = index.option;
                 const option = findPrevOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
 
-                if (option) return option;
-                else if (groupIndex > 0) return findPrevOption({ group: groupIndex - 1, option: getOptionGroupChildren(visibleOptions[groupIndex - 1]).length });
-                else return null;
+                if (option) {
+                    return option;
+                } else if (groupIndex > 0) {
+                    return findPrevOption({ group: groupIndex - 1, option: getOptionGroupChildren(visibleOptions[groupIndex - 1]).length });
+                }
+
+                return null;
             }
 
             return findPrevOptionInList(visibleOptions, index);
@@ -573,8 +581,11 @@ export const Dropdown = React.memo(
                 return;
             }
 
-            if (currentSearchChar.current === char) searchValue.current = char;
-            else searchValue.current = searchValue.current ? searchValue.current + char : char;
+            if (currentSearchChar.current === char) {
+                searchValue.current = char;
+            } else {
+                searchValue.current = searchValue.current ? searchValue.current + char : char;
+            }
 
             currentSearchChar.current = char;
 
@@ -801,7 +812,7 @@ export const Dropdown = React.memo(
         };
 
         const onOverlayEnter = (callback) => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             alignOverlay();
             callback && callback();
@@ -852,11 +863,11 @@ export const Dropdown = React.memo(
         };
 
         const getOptionLabel = (option) => {
-            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
         };
 
         const getOptionValue = (option) => {
-            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
+            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option.value !== undefined ? option.value : option;
         };
 
         const getOptionRenderKey = (option) => {
@@ -872,7 +883,7 @@ export const Dropdown = React.memo(
                 return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
             }
 
-            return option && option['disabled'] !== undefined ? option['disabled'] : false;
+            return option && option.disabled !== undefined ? option.disabled : false;
         };
 
         const getOptionGroupRenderKey = (optionGroup) => {
@@ -1073,19 +1084,19 @@ export const Dropdown = React.memo(
                 );
 
                 return <input {...inputProps} />;
-            } else {
-                const content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
-                const inputProps = mergeProps(
-                    {
-                        ref: inputRef,
-                        className: cx('input', { label }),
-                        tabIndex: '-1'
-                    },
-                    ptm('input')
-                );
-
-                return <span {...inputProps}>{content}</span>;
             }
+
+            const content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
+            const inputProps = mergeProps(
+                {
+                    ref: inputRef,
+                    className: cx('input', { label }),
+                    tabIndex: '-1'
+                },
+                ptm('input')
+            );
+
+            return <span {...inputProps}>{content}</span>;
         };
 
         const createClearIcon = () => {
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 27369dc56d..041f9b4564 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -16,9 +16,9 @@ const classes = {
         props.editable
             ? 'p-dropdown-label p-inputtext'
             : classNames('p-dropdown-label p-inputtext', {
-                  'p-placeholder': label === null && props.placeholder,
-                  'p-dropdown-label-empty': label === null && !props.placeholder
-              }),
+                'p-placeholder': label === null && props.placeholder,
+                'p-dropdown-label-empty': label === null && !props.placeholder
+            }),
     trigger: 'p-dropdown-trigger',
     emptyMessage: 'p-dropdown-empty-message',
     itemGroup: ({ optionGroupLabel }) =>
diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
index 6f5b841f5d..f70f2426a8 100644
--- a/components/lib/dropdown/DropdownItem.js
+++ b/components/lib/dropdown/DropdownItem.js
@@ -61,16 +61,16 @@ export const DropdownItem = React.memo((props) => {
             );
 
             return <CheckIcon {...checkIconProps} />;
-        } else {
-            const blankIconProps = mergeProps(
-                {
-                    className: cx('blankIcon')
-                },
-                getPTOptions('blankIcon')
-            );
-
-            return <BlankIcon {...blankIconProps} />;
         }
+
+        const blankIconProps = mergeProps(
+            {
+                className: cx('blankIcon')
+            },
+            getPTOptions('blankIcon')
+        );
+
+        return <BlankIcon {...blankIconProps} />;
     };
 
     return (
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index fb669a6499..178e85397c 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -151,31 +151,31 @@ export const DropdownPanel = React.memo(
                         {groupChildrenContent}
                     </React.Fragment>
                 );
-            } else {
-                const optionLabel = props.getOptionLabel(option);
-                const optionKey = index + '_' + props.getOptionRenderKey(option);
-                const disabled = props.isOptionDisabled(option);
-
-                return (
-                    <DropdownItem
-                        key={optionKey}
-                        label={optionLabel}
-                        index={index}
-                        focusedOptionIndex={props.focusedOptionIndex}
-                        option={option}
-                        style={style}
-                        template={props.itemTemplate}
-                        selected={props.isSelected(option)}
-                        highlightOnSelect={props.highlightOnSelect}
-                        disabled={disabled}
-                        onClick={props.onOptionClick}
-                        onMouseMove={changeFocusedItemOnHover}
-                        ptm={ptm}
-                        cx={cx}
-                        checkmark={props.checkmark}
-                    />
-                );
             }
+
+            const optionLabel = props.getOptionLabel(option);
+            const optionKey = index + '_' + props.getOptionRenderKey(option);
+            const disabled = props.isOptionDisabled(option);
+
+            return (
+                <DropdownItem
+                    key={optionKey}
+                    label={optionLabel}
+                    index={index}
+                    focusedOptionIndex={props.focusedOptionIndex}
+                    option={option}
+                    style={style}
+                    template={props.itemTemplate}
+                    selected={props.isSelected(option)}
+                    highlightOnSelect={props.highlightOnSelect}
+                    disabled={disabled}
+                    onClick={props.onOptionClick}
+                    onMouseMove={changeFocusedItemOnHover}
+                    ptm={ptm}
+                    cx={cx}
+                    checkmark={props.checkmark}
+                />
+            );
         };
 
         const createItems = () => {
@@ -304,30 +304,30 @@ export const DropdownPanel = React.memo(
                 };
 
                 return <VirtualScroller ref={props.virtualScrollerRef} {...virtualScrollerProps} pt={ptm('virtualScroller')} />;
-            } else {
-                const items = createItems();
-                const wrapperProps = mergeProps(
-                    {
-                        className: cx('wrapper'),
-                        style: sx('wrapper')
-                    },
-                    getPTOptions('wrapper')
-                );
+            }
 
-                const listProps = mergeProps(
-                    {
-                        className: cx('list'),
-                        role: 'listbox'
-                    },
-                    getPTOptions('list')
-                );
+            const items = createItems();
+            const wrapperProps = mergeProps(
+                {
+                    className: cx('wrapper'),
+                    style: sx('wrapper')
+                },
+                getPTOptions('wrapper')
+            );
 
-                return (
-                    <div {...wrapperProps}>
-                        <ul {...listProps}>{items}</ul>
-                    </div>
-                );
-            }
+            const listProps = mergeProps(
+                {
+                    className: cx('list'),
+                    role: 'listbox'
+                },
+                getPTOptions('list')
+            );
+
+            return (
+                <div {...wrapperProps}>
+                    <ul {...listProps}>{items}</ul>
+                </div>
+            );
         };
 
         const createElement = () => {
diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
index efadd501c6..ca72b3d854 100644
--- a/components/lib/editor/Editor.js
+++ b/components/lib/editor/Editor.js
@@ -11,7 +11,7 @@ const QuillJS = (function () {
     } catch {
         return null;
     }
-})();
+}());
 
 export const Editor = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -176,55 +176,55 @@ export const Editor = React.memo(
                 return null;
             } else if (props.headerTemplate) {
                 return <div {...toolbarProps}>{props.headerTemplate}</div>;
-            } else {
-                const getMergeProps = (params, key) => mergeProps(params && { ...params }, ptm(key));
-
-                const formatsProps = mergeProps({ className: 'ql-formats' }, ptm('formats'));
-
-                return (
-                    <div {...toolbarProps}>
-                        <span {...formatsProps}>
-                            <select {...getMergeProps({ className: 'ql-header', defaultValue: '0' }, 'header')}>
-                                <option {...getMergeProps({ value: '1' }, 'option')}>Heading</option>
-                                <option {...getMergeProps({ value: '2' }, 'option')}>Subheading</option>
-                                <option {...getMergeProps({ value: '0' }, 'option')}>Normal</option>
-                            </select>
-                            <select {...getMergeProps({ className: 'ql-font' }, 'font')}>
-                                <option {...getMergeProps(undefined, 'option')}></option>
-                                <option {...getMergeProps({ value: 'serif' }, 'option')}></option>
-                                <option {...getMergeProps({ value: 'monospace' }, 'option')}></option>
-                            </select>
-                        </span>
-                        <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-bold', 'aria-label': 'Bold' }, 'bold')}></button>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-italic', 'aria-label': 'Italic' }, 'italic')}></button>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-underline', 'aria-label': 'Underline' }, 'underline')}></button>
-                        </span>
-                        <span {...formatsProps}>
-                            <select {...getMergeProps({ className: 'ql-color' }, 'color')}></select>
-                            <select {...getMergeProps({ className: 'ql-background' }, 'background')}></select>
-                        </span>
-                        <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-list', value: 'ordered', 'aria-label': 'Ordered List' }, 'list')}></button>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-list', value: 'bullet', 'aria-label': 'Unordered List' }, 'list')}></button>
-                            <select {...getMergeProps({ className: 'ql-align' }, 'select')}>
-                                <option {...getMergeProps({ defaultValue: true }, 'option')}></option>
-                                <option {...getMergeProps({ value: 'center' }, 'option')}></option>
-                                <option {...getMergeProps({ value: 'right' }, 'option')}></option>
-                                <option {...getMergeProps({ value: 'justify' }, 'option')}></option>
-                            </select>
-                        </span>
-                        <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-link', 'aria-label': 'Insert Link' }, 'link')}></button>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-image', 'aria-label': 'Insert Image' }, 'image')}></button>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-code-block', 'aria-label': 'Insert Code Block' }, 'codeBlock')}></button>
-                        </span>
-                        <span {...formatsProps}>
-                            <button {...getMergeProps({ type: 'button', className: 'ql-clean', 'aria-label': 'Remove Styles' }, 'clean')}></button>
-                        </span>
-                    </div>
-                );
             }
+
+            const getMergeProps = (params, key) => mergeProps(params && { ...params }, ptm(key));
+
+            const formatsProps = mergeProps({ className: 'ql-formats' }, ptm('formats'));
+
+            return (
+                <div {...toolbarProps}>
+                    <span {...formatsProps}>
+                        <select {...getMergeProps({ className: 'ql-header', defaultValue: '0' }, 'header')}>
+                            <option {...getMergeProps({ value: '1' }, 'option')}>Heading</option>
+                            <option {...getMergeProps({ value: '2' }, 'option')}>Subheading</option>
+                            <option {...getMergeProps({ value: '0' }, 'option')}>Normal</option>
+                        </select>
+                        <select {...getMergeProps({ className: 'ql-font' }, 'font')}>
+                            <option {...getMergeProps(undefined, 'option')} />
+                            <option {...getMergeProps({ value: 'serif' }, 'option')} />
+                            <option {...getMergeProps({ value: 'monospace' }, 'option')} />
+                        </select>
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-bold', 'aria-label': 'Bold' }, 'bold')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-italic', 'aria-label': 'Italic' }, 'italic')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-underline', 'aria-label': 'Underline' }, 'underline')} />
+                    </span>
+                    <span {...formatsProps}>
+                        <select {...getMergeProps({ className: 'ql-color' }, 'color')} />
+                        <select {...getMergeProps({ className: 'ql-background' }, 'background')} />
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-list', value: 'ordered', 'aria-label': 'Ordered List' }, 'list')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-list', value: 'bullet', 'aria-label': 'Unordered List' }, 'list')} />
+                        <select {...getMergeProps({ className: 'ql-align' }, 'select')}>
+                            <option {...getMergeProps({ defaultValue: true }, 'option')} />
+                            <option {...getMergeProps({ value: 'center' }, 'option')} />
+                            <option {...getMergeProps({ value: 'right' }, 'option')} />
+                            <option {...getMergeProps({ value: 'justify' }, 'option')} />
+                        </select>
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-link', 'aria-label': 'Insert Link' }, 'link')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-image', 'aria-label': 'Insert Image' }, 'image')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-code-block', 'aria-label': 'Insert Code Block' }, 'codeBlock')} />
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-clean', 'aria-label': 'Remove Styles' }, 'clean')} />
+                    </span>
+                </div>
+            );
         };
 
         const header = createToolbarHeader();
@@ -236,7 +236,7 @@ export const Editor = React.memo(
             },
             ptm('content')
         );
-        const content = <div {...contentProps}></div>;
+        const content = <div {...contentProps} />;
         const rootProps = mergeProps(
             {
                 className: classNames(props.className, cx('root'))
diff --git a/components/lib/editor/Editor.spec.js b/components/lib/editor/Editor.spec.js
index bfa7481cd1..bb3ae77333 100644
--- a/components/lib/editor/Editor.spec.js
+++ b/components/lib/editor/Editor.spec.js
@@ -41,7 +41,7 @@ describe('Editor', () => {
                         onClick={() => {
                             ref.current.getQuill().setText('789');
                         }}
-                    ></button>
+                    />
                     <Editor
                         ref={ref}
                         value={text}
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 8f3c714772..2041e466ab 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -184,7 +184,7 @@ export const FileUpload = React.memo(
 
             if (props.customUpload) {
                 if (props.fileLimit) {
-                    uploadedFileCount += files.length;
+                    uploadedFileCount = uploadedFileCount + files.length;
                 }
 
                 if (props.uploadHandler) {
@@ -234,7 +234,7 @@ export const FileUpload = React.memo(
 
                         if (xhr.status >= 200 && xhr.status < 300) {
                             if (props.fileLimit) {
-                                uploadedFileCount += files.length;
+                                uploadedFileCount = uploadedFileCount + files.length;
                             }
 
                             if (props.onUpload) {
@@ -243,13 +243,11 @@ export const FileUpload = React.memo(
                                     files
                                 });
                             }
-                        } else {
-                            if (props.onError) {
-                                props.onError({
-                                    xhr,
-                                    files
-                                });
-                            }
+                        } else if (props.onError) {
+                            props.onError({
+                                xhr,
+                                files
+                            });
                         }
 
                         clear();
@@ -418,8 +416,11 @@ export const FileUpload = React.memo(
         };
 
         const onRemoveClick = (e, badgeOptions, index) => {
-            if (badgeOptions.severity === 'warning') remove(e, index);
-            else removeUploadedFiles(e, index);
+            if (badgeOptions.severity === 'warning') {
+                remove(e, index);
+            } else {
+                removeUploadedFiles(e, index);
+            }
         };
 
         const createFile = (file, index, badgeOptions) => {
@@ -543,7 +544,7 @@ export const FileUpload = React.memo(
         const createAdvanced = () => {
             const chooseButton = createChooseButton();
             const emptyContent = createEmptyContent();
-            let uploadButton, cancelButton, filesList, uplaodedFilesList, progressBar;
+            let uploadButton; let cancelButton; let filesList; let uplaodedFilesList; let progressBar;
 
             if (!props.auto) {
                 const uploadOptions = props.uploadOptions;
@@ -739,8 +740,11 @@ export const FileUpload = React.memo(
             );
         };
 
-        if (props.mode === 'advanced') return createAdvanced();
-        else if (props.mode === 'basic') return createBasic();
+        if (props.mode === 'advanced') {
+            return createAdvanced();
+        } else if (props.mode === 'basic') {
+            return createBasic();
+        }
     })
 );
 
diff --git a/components/lib/focustrap/FocusTrap.js b/components/lib/focustrap/FocusTrap.js
index 64e8163fe1..2135d272f3 100644
--- a/components/lib/focustrap/FocusTrap.js
+++ b/components/lib/focustrap/FocusTrap.js
@@ -90,7 +90,7 @@ export const FocusTrap = React.memo(
                         data-p-hidden-focusable={true}
                         onFocus={onFocus}
                         data-pc-section={section}
-                    ></span>
+                    />
                 );
             };
 
diff --git a/components/lib/focustrap/FocusTrapBase.js b/components/lib/focustrap/FocusTrapBase.js
index 8071835e92..03c6c52db0 100644
--- a/components/lib/focustrap/FocusTrapBase.js
+++ b/components/lib/focustrap/FocusTrapBase.js
@@ -1,7 +1,7 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { ObjectUtils } from '../utils/Utils';
 
-const styles = ``;
+const styles = '';
 
 export const FocusTrapBase = ComponentBase.extend({
     defaultProps: {
diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
index 1a0a50abc5..ddaeb59847 100644
--- a/components/lib/galleria/Galleria.js
+++ b/components/lib/galleria/Galleria.js
@@ -76,7 +76,7 @@ export const Galleria = React.memo(
         };
 
         const onEntering = () => {
-            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['modal']) || PrimeReact.zIndex['modal']);
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
             !isUnstyled() && DomHandler.addMultipleClasses(maskRef.current, 'p-component-overlay p-component-overlay-enter');
         };
 
diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js
index 5c8106c5a5..2a3a49cb89 100644
--- a/components/lib/galleria/GalleriaItem.js
+++ b/components/lib/galleria/GalleriaItem.js
@@ -87,48 +87,48 @@ export const GalleriaItem = React.memo(
 
         const onIndicatorKeyDown = (event, index) => {
             switch (event.code) {
-                case 'Enter':
-                case 'NumpadEnter':
-                case 'Space':
-                    stopSlideShow();
-
-                    props.onActiveItemChange({
-                        index
-                    });
-                    event.preventDefault();
-                    break;
-
-                case 'ArrowRight':
-                    onRightKey();
-                    break;
-
-                case 'ArrowLeft':
-                    onLeftKey();
-                    break;
-
-                case 'Home':
-                    onHomeKey();
-                    event.preventDefault();
-                    break;
-
-                case 'End':
-                    onEndKey();
-                    event.preventDefault();
-                    break;
-
-                case 'Tab':
-                    onTabKey();
-                    break;
-
-                case 'ArrowDown':
-                case 'ArrowUp':
-                case 'PageUp':
-                case 'PageDown':
-                    event.preventDefault();
-                    break;
-
-                default:
-                    break;
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                stopSlideShow();
+
+                props.onActiveItemChange({
+                    index
+                });
+                event.preventDefault();
+                break;
+
+            case 'ArrowRight':
+                onRightKey();
+                break;
+
+            case 'ArrowLeft':
+                onLeftKey();
+                break;
+
+            case 'Home':
+                onHomeKey();
+                event.preventDefault();
+                break;
+
+            case 'End':
+                onEndKey();
+                event.preventDefault();
+                break;
+
+            case 'Tab':
+                onTabKey();
+                break;
+
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'PageUp':
+            case 'PageDown':
+                event.preventDefault();
+                break;
+
+            default:
+                break;
             }
         };
 
diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
index 5f125742d1..c7cc8034b6 100644
--- a/components/lib/galleria/GalleriaThumbnails.js
+++ b/components/lib/galleria/GalleriaThumbnails.js
@@ -40,35 +40,35 @@ const GalleriaThumbnailItem = React.memo((props) => {
         }
 
         switch (event.code) {
-            case 'ArrowRight':
-                onRightKey();
-                break;
-
-            case 'ArrowLeft':
-                onLeftKey();
-                break;
-
-            case 'Home':
-                onHomeKey();
-                event.preventDefault();
-                break;
-
-            case 'End':
-                onEndKey();
-                event.preventDefault();
-                break;
-
-            case 'ArrowUp':
-            case 'ArrowDown':
-                event.preventDefault();
-                break;
-
-            case 'Tab':
-                onTabKey();
-                break;
-
-            default:
-                break;
+        case 'ArrowRight':
+            onRightKey();
+            break;
+
+        case 'ArrowLeft':
+            onLeftKey();
+            break;
+
+        case 'Home':
+            onHomeKey();
+            event.preventDefault();
+            break;
+
+        case 'End':
+            onEndKey();
+            event.preventDefault();
+            break;
+
+        case 'ArrowUp':
+        case 'ArrowDown':
+            event.preventDefault();
+            break;
+
+        case 'Tab':
+            onTabKey();
+            break;
+
+        default:
+            break;
         }
     };
 
@@ -371,7 +371,7 @@ export const GalleriaThumbnails = React.memo(
                 for (let i = 0; i < responsiveOptions.current.length; i++) {
                     let res = responsiveOptions.current[i];
 
-                    innerHTML += `
+                    innerHTML = innerHTML + `
                     @media screen and (max-width: ${res.breakpoint}) {
                         [data-pc-section="thumbnailitems"][${attributeSelector.current}] {
                             [data-pc-section="thumbnailitem"] {
diff --git a/components/lib/hooks/useDisplayOrder.js b/components/lib/hooks/useDisplayOrder.js
index 40efe6b8c4..b6faf02719 100644
--- a/components/lib/hooks/useDisplayOrder.js
+++ b/components/lib/hooks/useDisplayOrder.js
@@ -24,7 +24,9 @@ export const useDisplayOrder = (group, isVisible = true) => {
                 const lastIndex = groupToDisplayedElements[group].length - 1;
                 const lastOrder = ObjectUtils.findLastIndex(groupToDisplayedElements[group], (el) => el !== undefined);
 
-                if (lastOrder !== lastIndex) groupToDisplayedElements[group].splice(lastOrder + 1);
+                if (lastOrder !== lastIndex) {
+                    groupToDisplayedElements[group].splice(lastOrder + 1);
+                }
 
                 setDisplayOrder(undefined);
             };
diff --git a/components/lib/hooks/useFavicon.js b/components/lib/hooks/useFavicon.js
index 71d5b3dd81..6a0796b5c7 100644
--- a/components/lib/hooks/useFavicon.js
+++ b/components/lib/hooks/useFavicon.js
@@ -10,7 +10,7 @@ const TYPE_MAP = {
 export const useFavicon = (newIcon = '', rel = 'shortcut icon') => {
     React.useLayoutEffect(() => {
         if (newIcon) {
-            const linkElements = document.querySelectorAll(`link[rel*='icon']`);
+            const linkElements = document.querySelectorAll('link[rel*=\'icon\']');
 
             linkElements.forEach((linkEl) => {
                 document.head.removeChild(linkEl);
diff --git a/components/lib/hooks/useGlobalOnEscapeKey.js b/components/lib/hooks/useGlobalOnEscapeKey.js
index 76c0e7f31f..10b5a44670 100644
--- a/components/lib/hooks/useGlobalOnEscapeKey.js
+++ b/components/lib/hooks/useGlobalOnEscapeKey.js
@@ -42,7 +42,9 @@ const globalEscKeyHandlingLogic = {
      */
     onGlobalKeyDown(event) {
         // Do nothing if not an "esc" key is pressed:
-        if (event.code !== 'Escape') return;
+        if (event.code !== 'Escape') {
+            return;
+        }
 
         const escKeyListeners = globalEscKeyHandlingLogic.escKeyListeners;
         const maxPrimaryPriority = Math.max(...escKeyListeners.keys());
@@ -101,7 +103,9 @@ const globalEscKeyHandlingLogic = {
 
 export const useGlobalOnEscapeKey = ({ callback, when, priority }) => {
     useEffect(() => {
-        if (!when) return;
+        if (!when) {
+            return;
+        }
 
         return globalEscKeyHandlingLogic.addListener(callback, priority);
     }, [callback, when, priority]);
diff --git a/components/lib/hooks/useIntersectionObserver.js b/components/lib/hooks/useIntersectionObserver.js
index fef718b646..74fd3f924d 100644
--- a/components/lib/hooks/useIntersectionObserver.js
+++ b/components/lib/hooks/useIntersectionObserver.js
@@ -4,7 +4,9 @@ export const useIntersectionObserver = (ref, options = {}) => {
     const [isElementVisible, setIsElementVisible] = React.useState(false);
 
     React.useEffect(() => {
-        if (!ref.current) return;
+        if (!ref.current) {
+            return;
+        }
 
         const observer = new IntersectionObserver(([entry]) => {
             setIsElementVisible(entry.isIntersecting);
diff --git a/components/lib/hooks/useMouse.js b/components/lib/hooks/useMouse.js
index f921c7aff0..81037d50cf 100644
--- a/components/lib/hooks/useMouse.js
+++ b/components/lib/hooks/useMouse.js
@@ -6,7 +6,7 @@ export const useMouse = () => {
     const ref = React.useRef(null);
 
     const handleMouseMove = React.useCallback((event) => {
-        let x, y;
+        let x; let y;
 
         if (ref.current) {
             const rect = event.currentTarget.getBoundingClientRect();
diff --git a/components/lib/hooks/useStyle.js b/components/lib/hooks/useStyle.js
index ee36e30012..83c030024d 100644
--- a/components/lib/hooks/useStyle.js
+++ b/components/lib/hooks/useStyle.js
@@ -36,7 +36,9 @@ export const useStyle = (css, options = {}) => {
     };
 
     const load = () => {
-        if (!document || isLoaded) return;
+        if (!document || isLoaded) {
+            return;
+        }
 
         const styleContainer = context?.styleContainer || document.head;
 
@@ -44,12 +46,21 @@ export const useStyle = (css, options = {}) => {
 
         if (!styleRef.current.isConnected) {
             styleRef.current.type = 'text/css';
-            if (id) styleRef.current.id = id;
-            if (media) styleRef.current.media = media;
+
+            if (id) {
+                styleRef.current.id = id;
+            }
+
+            if (media) {
+                styleRef.current.media = media;
+            }
 
             DomHandler.addNonce(styleRef.current, (context && context.nonce) || PrimeReact.nonce);
             styleContainer.appendChild(styleRef.current);
-            if (name) styleRef.current.setAttribute('data-primereact-style-id', name);
+
+            if (name) {
+                styleRef.current.setAttribute('data-primereact-style-id', name);
+            }
         }
 
         styleRef.current.textContent = css;
@@ -58,14 +69,18 @@ export const useStyle = (css, options = {}) => {
     };
 
     const unload = () => {
-        if (!document || !styleRef.current) return;
+        if (!document || !styleRef.current) {
+            return;
+        }
 
         DomHandler.removeInlineStyle(styleRef.current);
         setIsLoaded(false);
     };
 
     useEffect(() => {
-        if (!manual) load();
+        if (!manual) {
+            load();
+        }
 
         // return () => {if (!manual) unload()}; /* @todo */
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index 37379c5226..9d3c4b4822 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -85,17 +85,17 @@ export const Image = React.memo(
 
         const onMaskKeydown = (event) => {
             switch (event.code) {
-                case 'Escape':
-                    hide();
-                    setTimeout(() => {
-                        DomHandler.focus(previewButton.current);
-                    }, 200);
-                    event.preventDefault();
+            case 'Escape':
+                hide();
+                setTimeout(() => {
+                    DomHandler.focus(previewButton.current);
+                }, 200);
+                event.preventDefault();
 
-                    break;
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
@@ -121,7 +121,9 @@ export const Image = React.memo(
             event.stopPropagation();
 
             setScaleState((prevScale) => {
-                if (zoomInDisabled) return prevScale;
+                if (zoomInDisabled) {
+                    return prevScale;
+                }
 
                 return prevScale + 0.1;
             });
@@ -131,14 +133,16 @@ export const Image = React.memo(
             event.stopPropagation();
 
             setScaleState((prevScale) => {
-                if (zoomOutDisabled) return prevScale;
+                if (zoomOutDisabled) {
+                    return prevScale;
+                }
 
                 return prevScale - 0.1;
             });
         };
 
         const onEntering = () => {
-            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['modal']) || PrimeReact.zIndex['modal']);
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
         };
 
         const onEntered = () => {
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 16243eff43..1088f33cf9 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -103,7 +103,7 @@ export const Inplace = React.forwardRef((inProps, ref) => {
                 }
             });
 
-            return <Button {...closeButtonProps}></Button>;
+            return <Button {...closeButtonProps} />;
         }
 
         return null;
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index 41cc5a42f5..4702f71774 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -28,7 +28,7 @@ export const InputMask = React.memo(
         };
 
         const caret = (first, last) => {
-            let range, begin, end;
+            let range; let begin; let end;
             let inputEl = elementRef.current;
 
             if (!inputEl || !inputEl.offsetParent || inputEl !== document.activeElement) {
@@ -41,22 +41,20 @@ export const InputMask = React.memo(
 
                 if (inputEl.setSelectionRange) {
                     inputEl.setSelectionRange(begin, end);
-                } else if (inputEl['createTextRange']) {
-                    range = inputEl['createTextRange']();
+                } else if (inputEl.createTextRange) {
+                    range = inputEl.createTextRange();
                     range.collapse(true);
                     range.moveEnd('character', end);
                     range.moveStart('character', begin);
                     range.select();
                 }
-            } else {
-                if (inputEl.setSelectionRange) {
-                    begin = inputEl.selectionStart;
-                    end = inputEl.selectionEnd;
-                } else if (document['selection'] && document['selection'].createRange) {
-                    range = document['selection'].createRange();
-                    begin = 0 - range.duplicate().moveStart('character', -100000);
-                    end = begin + range.text.length;
-                }
+            } else if (inputEl.setSelectionRange) {
+                begin = inputEl.selectionStart;
+                end = inputEl.selectionEnd;
+            } else if (document.selection && document.selection.createRange) {
+                range = document.selection.createRange();
+                begin = 0 - range.duplicate().moveStart('character', -100000);
+                end = begin + range.text.length;
             }
 
             return { begin: begin, end: end };
@@ -88,19 +86,23 @@ export const InputMask = React.memo(
         };
 
         const seekNext = (pos) => {
-            while (++pos < len.current && !tests.current[pos]);
+            while (++pos < len.current && !tests.current[pos]) {
+
+            }
 
             return pos;
         };
 
         const seekPrev = (pos) => {
-            while (--pos >= 0 && !tests.current[pos]);
+            while (--pos >= 0 && !tests.current[pos]) {
+
+            }
 
             return pos;
         };
 
         const shiftL = (begin, end) => {
-            let i, j;
+            let i; let j;
 
             if (begin < 0) {
                 return;
@@ -124,7 +126,7 @@ export const InputMask = React.memo(
         };
 
         const shiftR = (pos) => {
-            let i, c, j, t;
+            let i; let c; let j; let t;
 
             for (i = pos, c = getPlaceholder(pos); i < len.current; i++) {
                 if (tests.current[i]) {
@@ -152,16 +154,24 @@ export const InputMask = React.memo(
             if (oldVal.current.length && oldVal.current.length > curVal.length) {
                 // a deletion or backspace happened
                 checkVal(true);
-                while (pos.begin > 0 && !tests.current[pos.begin - 1]) pos.begin--;
+
+                while (pos.begin > 0 && !tests.current[pos.begin - 1]) {
+                    pos.begin--;
+                }
 
                 if (pos.begin === 0) {
-                    while (pos.begin < firstNonMaskPos.current && !tests.current[pos.begin]) pos.begin++;
+                    while (pos.begin < firstNonMaskPos.current && !tests.current[pos.begin]) {
+                        pos.begin++;
+                    }
                 }
 
                 caret(pos.begin, pos.begin);
             } else {
                 checkVal(true);
-                while (pos.begin < len.current && !tests.current[pos.begin]) pos.begin++;
+
+                while (pos.begin < len.current && !tests.current[pos.begin]) {
+                    pos.begin++;
+                }
 
                 caret(pos.begin, pos.begin);
             }
@@ -197,10 +207,10 @@ export const InputMask = React.memo(
                 return;
             }
 
-            let k = e.which || e.keyCode,
-                pos,
-                begin,
-                end;
+            let k = e.which || e.keyCode;
+            let pos;
+            let begin;
+            let end;
 
             oldVal.current = elementRef.current.value;
 
@@ -249,11 +259,11 @@ export const InputMask = React.memo(
                 return;
             }
 
-            let k = e.which || e.keyCode,
-                p,
-                c,
-                next,
-                completed;
+            let k = e.which || e.keyCode;
+            let p;
+            let c;
+            let next;
+            let completed;
 
             if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
                 //Ignore
@@ -325,11 +335,11 @@ export const InputMask = React.memo(
         const checkVal = (allow) => {
             isValueChecked.current = true;
             //try to place characters where they belong
-            let test = elementRef.current && elementRef.current.value,
-                lastMatch = -1,
-                i,
-                c,
-                pos;
+            let test = elementRef.current && elementRef.current.value;
+            let lastMatch = -1;
+            let i;
+            let c;
+            let pos;
 
             for (i = 0, pos = 0; i < len.current; i++) {
                 if (tests.current[i]) {
@@ -366,7 +376,10 @@ export const InputMask = React.memo(
                 if (props.autoClear || buffer.current.join('') === defaultBuffer.current) {
                     // Invalid value. Remove it and replace it with the
                     // mask, which is the default behavior.
-                    if (elementRef.current && elementRef.current.value) elementRef.current.value = '';
+                    if (elementRef.current && elementRef.current.value) {
+                        elementRef.current.value = '';
+                    }
+
                     clearBuffer(0, len.current);
                 } else {
                     // Invalid value, but we opt to show the value to the
@@ -483,8 +496,11 @@ export const InputMask = React.memo(
         };
 
         const updateFilledState = () => {
-            if (elementRef.current && elementRef.current.value && elementRef.current.value.length > 0) DomHandler.addClass(elementRef.current, 'p-filled');
-            else DomHandler.removeClass(elementRef.current, 'p-filled');
+            if (elementRef.current && elementRef.current.value && elementRef.current.value.length > 0) {
+                DomHandler.addClass(elementRef.current, 'p-filled');
+            } else {
+                DomHandler.removeClass(elementRef.current, 'p-filled');
+            }
         };
 
         const updateValue = (allow) => {
@@ -561,8 +577,11 @@ export const InputMask = React.memo(
                     let c = maskTokens[i];
 
                     if (c !== '?') {
-                        if (defs[c]) buffer.current.push(getPlaceholder(i));
-                        else buffer.current.push(c);
+                        if (defs[c]) {
+                            buffer.current.push(getPlaceholder(i));
+                        } else {
+                            buffer.current.push(c);
+                        }
                     }
                 }
 
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index f1ec8707d2..a52abac10e 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -125,7 +125,7 @@ export const InputNumber = React.memo(
                 return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(_numeral.current, '').replace(_group.current, '')}]`, 'g');
             }
 
-            return new RegExp(`[]`, 'g');
+            return new RegExp('[]', 'g');
         };
 
         const getPrefixExpression = () => {
@@ -201,8 +201,10 @@ export const InputNumber = React.memo(
 
             if (filteredText) {
                 if (filteredText === '-')
-                    // Minus sign
+                // Minus sign
+                {
                     return filteredText;
+                }
 
                 let parsedValue = +filteredText;
 
@@ -345,164 +347,164 @@ export const InputNumber = React.memo(
             let newValueStr = null;
 
             switch (event.code) {
-                //up
-                case 'ArrowUp':
-                    spin(event, 1);
-                    event.preventDefault();
-                    break;
+            //up
+            case 'ArrowUp':
+                spin(event, 1);
+                event.preventDefault();
+                break;
 
                 //down
-                case 'ArrowDown':
-                    spin(event, -1);
-                    event.preventDefault();
-                    break;
+            case 'ArrowDown':
+                spin(event, -1);
+                event.preventDefault();
+                break;
 
                 //left
-                case 'ArrowLeft':
-                    if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
-                        event.preventDefault();
-                    }
+            case 'ArrowLeft':
+                if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
+                    event.preventDefault();
+                }
 
-                    break;
+                break;
 
                 //right
-                case 'ArrowRight':
-                    if (!isNumeralChar(inputValue.charAt(selectionStart))) {
-                        event.preventDefault();
-                    }
+            case 'ArrowRight':
+                if (!isNumeralChar(inputValue.charAt(selectionStart))) {
+                    event.preventDefault();
+                }
 
-                    break;
+                break;
 
                 //enter and tab
-                case 'Tab':
-                case 'NumpadEnter':
-                case 'Enter':
-                case 'NumpadEnter':
-                    newValueStr = validateValue(parseValue(inputValue));
-                    inputRef.current.value = formatValue(newValueStr);
-                    inputRef.current.setAttribute('aria-valuenow', newValueStr);
-                    updateModel(event, newValueStr);
-                    break;
+            case 'Tab':
+            case 'NumpadEnter':
+            case 'Enter':
+            case 'NumpadEnter':
+                newValueStr = validateValue(parseValue(inputValue));
+                inputRef.current.value = formatValue(newValueStr);
+                inputRef.current.setAttribute('aria-valuenow', newValueStr);
+                updateModel(event, newValueStr);
+                break;
 
                 //backspace
-                case 'Backspace':
-                    event.preventDefault();
+            case 'Backspace':
+                event.preventDefault();
+
+                if (selectionStart === selectionEnd) {
+                    const deleteChar = inputValue.charAt(selectionStart - 1);
+
+                    if (isNumeralChar(deleteChar)) {
+                        const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
+                        const decimalLength = getDecimalLength(inputValue);
+
+                        if (_group.current.test(deleteChar)) {
+                            _group.current.lastIndex = 0;
+                            newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
+                        } else if (_decimal.current.test(deleteChar)) {
+                            _decimal.current.lastIndex = 0;
 
-                    if (selectionStart === selectionEnd) {
-                        const deleteChar = inputValue.charAt(selectionStart - 1);
-
-                        if (isNumeralChar(deleteChar)) {
-                            const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
-                            const decimalLength = getDecimalLength(inputValue);
-
-                            if (_group.current.test(deleteChar)) {
-                                _group.current.lastIndex = 0;
-                                newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
-                            } else if (_decimal.current.test(deleteChar)) {
-                                _decimal.current.lastIndex = 0;
-
-                                if (decimalLength) {
-                                    inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
-                                } else {
-                                    newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
-                                }
-                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                                const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
-
-                                newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
-                            } else if (decimalCharIndexWithoutPrefix === 1) {
-                                newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
-                                newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
+                            if (decimalLength) {
+                                inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
                             } else {
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
                             }
-                        } else if (_currency.current.test(deleteChar)) {
-                            const { minusCharIndex, currencyCharIndex } = getCharIndexes(inputValue);
+                        } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
 
-                            if (minusCharIndex === currencyCharIndex - 1) {
-                                newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart);
-                            }
+                            newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
+                        } else if (decimalCharIndexWithoutPrefix === 1) {
+                            newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
+                            newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
+                        } else {
+                            newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
                         }
+                    } else if (_currency.current.test(deleteChar)) {
+                        const { minusCharIndex, currencyCharIndex } = getCharIndexes(inputValue);
 
-                        updateValue(event, newValueStr, null, 'delete-single');
-                    } else {
-                        newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
-                        updateValue(event, newValueStr, null, 'delete-range');
+                        if (minusCharIndex === currencyCharIndex - 1) {
+                            newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart);
+                        }
                     }
 
-                    break;
+                    updateValue(event, newValueStr, null, 'delete-single');
+                } else {
+                    newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                    updateValue(event, newValueStr, null, 'delete-range');
+                }
+
+                break;
 
                 // del
-                case 'Delete':
-                    event.preventDefault();
+            case 'Delete':
+                event.preventDefault();
 
-                    if (selectionStart === selectionEnd) {
-                        const deleteChar = inputValue.charAt(selectionStart);
-                        const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
+                if (selectionStart === selectionEnd) {
+                    const deleteChar = inputValue.charAt(selectionStart);
+                    const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
+
+                    if (isNumeralChar(deleteChar)) {
+                        const decimalLength = getDecimalLength(inputValue);
+
+                        if (_group.current.test(deleteChar)) {
+                            _group.current.lastIndex = 0;
+                            newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
+                        } else if (_decimal.current.test(deleteChar)) {
+                            _decimal.current.lastIndex = 0;
 
-                        if (isNumeralChar(deleteChar)) {
-                            const decimalLength = getDecimalLength(inputValue);
-
-                            if (_group.current.test(deleteChar)) {
-                                _group.current.lastIndex = 0;
-                                newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
-                            } else if (_decimal.current.test(deleteChar)) {
-                                _decimal.current.lastIndex = 0;
-
-                                if (decimalLength) {
-                                    inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
-                                } else {
-                                    newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
-                                }
-                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                                const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
-
-                                newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
-                            } else if (decimalCharIndexWithoutPrefix === 1) {
-                                newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
-                                newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
+                            if (decimalLength) {
+                                inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
                             } else {
                                 newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
                             }
-                        }
+                        } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
 
-                        updateValue(event, newValueStr, null, 'delete-back-single');
-                    } else {
-                        newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
-                        updateValue(event, newValueStr, null, 'delete-range');
+                            newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
+                        } else if (decimalCharIndexWithoutPrefix === 1) {
+                            newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
+                            newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
+                        } else {
+                            newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+                        }
                     }
 
-                    break;
+                    updateValue(event, newValueStr, null, 'delete-back-single');
+                } else {
+                    newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                    updateValue(event, newValueStr, null, 'delete-range');
+                }
 
-                case 'End':
-                    event.preventDefault();
+                break;
 
-                    if (!ObjectUtils.isEmpty(props.max)) {
-                        updateModel(event, props.max);
-                    }
+            case 'End':
+                event.preventDefault();
 
-                    break;
-                case 'Home':
-                    event.preventDefault();
+                if (!ObjectUtils.isEmpty(props.max)) {
+                    updateModel(event, props.max);
+                }
 
-                    if (!ObjectUtils.isEmpty(props.min)) {
-                        updateModel(event, props.min);
-                    }
+                break;
+            case 'Home':
+                event.preventDefault();
 
-                    break;
+                if (!ObjectUtils.isEmpty(props.min)) {
+                    updateModel(event, props.min);
+                }
 
-                default:
-                    event.preventDefault();
+                break;
 
-                    let char = event.key;
-                    const _isDecimalSign = isDecimalSign(char);
-                    const _isMinusSign = isMinusSign(char);
+            default:
+                event.preventDefault();
 
-                    if (((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) {
-                        insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
-                    }
+                let char = event.key;
+                const _isDecimalSign = isDecimalSign(char);
+                const _isMinusSign = isMinusSign(char);
 
-                    break;
+                if (((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) {
+                    insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
+                }
+
+                break;
             }
         };
 
@@ -513,7 +515,7 @@ export const InputNumber = React.memo(
                 return;
             }
 
-            let data = (event.clipboardData || window['clipboardData']).getData('Text');
+            let data = (event.clipboardData || window.clipboardData).getData('Text');
 
             if (data) {
                 let filteredData = parseValue(data);
@@ -564,7 +566,9 @@ export const InputNumber = React.memo(
             let formatter = new Intl.NumberFormat(_locale, getOptions());
             let parseVal = parseValue(formatter.format(val));
 
-            if (parseVal === null) return false;
+            if (parseVal === null) {
+                return false;
+            }
 
             return parseVal % 1 !== 0;
         };
@@ -679,22 +683,27 @@ export const InputNumber = React.memo(
                 return text + value.slice(suffix);
             } else if (end === value.length) {
                 return value.slice(0, start) + text;
-            } else {
-                const selectionValue = value.slice(start, end);
-                // Fix: if the suffix starts with a space, the input will be cleared after pasting
-                const space = /\s$/.test(selectionValue) ? ' ' : '';
-
-                return value.slice(0, start) + text + space + value.slice(end);
             }
+
+            const selectionValue = value.slice(start, end);
+            // Fix: if the suffix starts with a space, the input will be cleared after pasting
+            const space = /\s$/.test(selectionValue) ? ' ' : '';
+
+            return value.slice(0, start) + text + space + value.slice(end);
         };
 
         const deleteRange = (value, start, end) => {
             let newValueStr;
 
-            if (end - start === value.length) newValueStr = '';
-            else if (start === 0) newValueStr = value.slice(end);
-            else if (end === value.length) newValueStr = value.slice(0, start);
-            else newValueStr = value.slice(0, start) + value.slice(end);
+            if (end - start === value.length) {
+                newValueStr = '';
+            } else if (start === 0) {
+                newValueStr = value.slice(end);
+            } else if (end === value.length) {
+                newValueStr = value.slice(0, start);
+            } else {
+                newValueStr = value.slice(0, start) + value.slice(end);
+            }
 
             return newValueStr;
         };
@@ -768,9 +777,9 @@ export const InputNumber = React.memo(
                 resetRegex();
 
                 return true;
-            } else {
-                return false;
             }
+
+            return false;
         };
 
         const resetRegex = () => {
@@ -911,9 +920,9 @@ export const InputNumber = React.memo(
                     let isGroupChar = _group.current.test(nextChar);
 
                     if (isGroupChar && diff === 1) {
-                        selectionEnd += 1;
+                        selectionEnd = selectionEnd + 1;
                     } else if (!isGroupChar && isNumeralChar(prevChar)) {
-                        selectionEnd += -1 * diff + 1;
+                        selectionEnd = selectionEnd + (-1 * diff + 1);
                     }
 
                     _group.current.lastIndex = 0;
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index 4a21068707..05f8e4d39d 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -114,7 +114,7 @@ export const InputSwitch = React.memo(
             <>
                 <div id={props.id} ref={elementRef} {...rootProps}>
                     <input ref={inputRef} {...inputProps} />
-                    <span {...sliderProps}></span>
+                    <span {...sliderProps} />
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
             </>
diff --git a/components/lib/inputtext/InputText.spec.js b/components/lib/inputtext/InputText.spec.js
index 033d609c5c..b6a116aa22 100644
--- a/components/lib/inputtext/InputText.spec.js
+++ b/components/lib/inputtext/InputText.spec.js
@@ -45,7 +45,7 @@ describe('InputText', () => {
     });
     test('when input is is set for validation only', () => {
         // Arrange
-        const { container } = render(<InputText validateOnly keyfilter={`alpha`} />);
+        const { container } = render(<InputText validateOnly keyfilter={'alpha'} />);
         const input = container.getElementsByTagName('input')[0];
 
         // Act
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index 4054bd6e54..87e88edf12 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -142,7 +142,7 @@ export const InputTextarea = React.memo(
 
         return (
             <>
-                <textarea {...rootProps}></textarea>
+                <textarea {...rootProps} />
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
             </>
         );
diff --git a/components/lib/inputtextarea/InputTextarea.spec.js b/components/lib/inputtextarea/InputTextarea.spec.js
index 87b11d3862..7b852a4382 100644
--- a/components/lib/inputtextarea/InputTextarea.spec.js
+++ b/components/lib/inputtextarea/InputTextarea.spec.js
@@ -45,7 +45,7 @@ describe('InputTextarea', () => {
     });
     test('when input is is set for validation only', async () => {
         // Arrange
-        const { container } = render(<InputTextarea validateOnly keyfilter={`alpha`} />);
+        const { container } = render(<InputTextarea validateOnly keyfilter={'alpha'} />);
         const input = container.getElementsByTagName('textarea')[0];
 
         // Act
diff --git a/components/lib/keyfilter/KeyFilter.js b/components/lib/keyfilter/KeyFilter.js
index 0db8d7fa61..d228d20a3c 100644
--- a/components/lib/keyfilter/KeyFilter.js
+++ b/components/lib/keyfilter/KeyFilter.js
@@ -78,8 +78,8 @@ export const KeyFilter = {
     },
 
     validate(e, keyfilter) {
-        let value = e.target.value,
-            validatePattern = true;
+        let value = e.target.value;
+        let validatePattern = true;
 
         const regex = this.getRegex(keyfilter);
 
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index ede1487090..c9ff688a52 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -116,9 +116,13 @@ export const Knob = React.memo(
         const updateModel = (angle, start) => {
             let mappedValue;
 
-            if (angle > maxRadians) mappedValue = mapRange(angle, minRadians, maxRadians, props.min, props.max);
-            else if (angle < start) mappedValue = mapRange(angle + 2 * Math.PI, minRadians, maxRadians, props.min, props.max);
-            else return;
+            if (angle > maxRadians) {
+                mappedValue = mapRange(angle, minRadians, maxRadians, props.min, props.max);
+            } else if (angle < start) {
+                mappedValue = mapRange(angle + 2 * Math.PI, minRadians, maxRadians, props.min, props.max);
+            } else {
+                return;
+            }
 
             if (props.onChange) {
                 props.onChange({
@@ -130,9 +134,13 @@ export const Knob = React.memo(
         const updateModelValue = (newValue) => {
             let currentValue;
 
-            if (newValue > props.max) currentValue = props.max;
-            else if (newValue < props.min) currentValue = props.min;
-            else currentValue = newValue;
+            if (newValue > props.max) {
+                currentValue = props.max;
+            } else if (newValue < props.min) {
+                currentValue = props.min;
+            } else {
+                currentValue = newValue;
+            }
 
             if (props.onChange) {
                 props.onChange({
@@ -171,43 +179,43 @@ export const Knob = React.memo(
         const onKeyDown = (event) => {
             if (!props.disabled && !props.readonly) {
                 switch (event.code) {
-                    case 'ArrowRight':
-                    case 'ArrowUp':
-                        event.preventDefault();
-                        updateModelValue(props.value + 1);
-                        break;
-
-                    case 'ArrowLeft':
-
-                    case 'ArrowDown': {
-                        event.preventDefault();
-                        updateModelValue(props.value - 1);
-                        break;
-                    }
-
-                    case 'Home': {
-                        event.preventDefault();
-                        updateModelValue(props.min);
-                        break;
-                    }
-
-                    case 'End': {
-                        event.preventDefault();
-                        updateModelValue(props.max);
-                        break;
-                    }
-
-                    case 'PageUp': {
-                        event.preventDefault();
-                        updateModelValue(props.value + 10);
-                        break;
-                    }
-
-                    case 'PageDown': {
-                        event.preventDefault();
-                        updateModelValue(props.value - 10);
-                        break;
-                    }
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    updateModelValue(props.value + 1);
+                    break;
+
+                case 'ArrowLeft':
+
+                case 'ArrowDown': {
+                    event.preventDefault();
+                    updateModelValue(props.value - 1);
+                    break;
+                }
+
+                case 'Home': {
+                    event.preventDefault();
+                    updateModelValue(props.min);
+                    break;
+                }
+
+                case 'End': {
+                    event.preventDefault();
+                    updateModelValue(props.max);
+                    break;
+                }
+
+                case 'PageUp': {
+                    event.preventDefault();
+                    updateModelValue(props.value + 10);
+                    break;
+                }
+
+                case 'PageDown': {
+                    event.preventDefault();
+                    updateModelValue(props.value - 10);
+                    break;
+                }
                 }
             }
         };
@@ -286,8 +294,8 @@ export const Knob = React.memo(
         return (
             <div {...rootProps}>
                 <svg {...svgProps}>
-                    <path {...rangeProps}></path>
-                    <path {...valueProps}></path>
+                    <path {...rangeProps} />
+                    <path {...valueProps} />
                     {text}
                 </svg>
             </div>
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 803505ec0b..3c2768b092 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -107,8 +107,11 @@ export const ListBox = React.memo(
                 let metaKey = event.metaKey || event.ctrlKey;
 
                 if (selected) {
-                    if (metaKey) value = removeOption(option);
-                    else value = [getOptionValue(option)];
+                    if (metaKey) {
+                        value = removeOption(option);
+                    } else {
+                        value = [getOptionValue(option)];
+                    }
 
                     valueChanged = true;
                 } else {
@@ -117,8 +120,11 @@ export const ListBox = React.memo(
                     valueChanged = true;
                 }
             } else {
-                if (selected) value = removeOption(option);
-                else value = [...(props.value || []), getOptionValue(option)];
+                if (selected) {
+                    value = removeOption(option);
+                } else {
+                    value = [...(props.value || []), getOptionValue(option)];
+                }
 
                 valueChanged = true;
             }
@@ -173,7 +179,9 @@ export const ListBox = React.memo(
                         const value = props.value[index];
                         const matchedOptionIndex = visibleOptions.findIndex((option) => isValidSelectedOption(option) && isEquals(value, getOptionValue(option)));
 
-                        if (matchedOptionIndex > -1) return matchedOptionIndex;
+                        if (matchedOptionIndex > -1) {
+                            return matchedOptionIndex;
+                        }
                     }
                 } else {
                     return visibleOptions.findIndex((option) => isValidSelectedOption(option));
@@ -334,8 +342,11 @@ export const ListBox = React.memo(
 
         const onEnterKey = (event) => {
             if (focusedOptionIndex !== -1) {
-                if (props.multiple && event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);
-                else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                if (props.multiple && event.shiftKey) {
+                    onOptionSelectRange(event, focusedOptionIndex);
+                } else {
+                    onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                }
             }
 
             event.preventDefault();
@@ -402,62 +413,62 @@ export const ListBox = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
 
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
 
-                case 'Home':
-                    onHomeKey(event);
-                    break;
+            case 'Home':
+                onHomeKey(event);
+                break;
 
-                case 'End':
-                    onEndKey(event);
-                    break;
+            case 'End':
+                onEndKey(event);
+                break;
 
-                case 'PageDown':
-                    onPageDownKey(event);
-                    break;
+            case 'PageDown':
+                onPageDownKey(event);
+                break;
 
-                case 'PageUp':
-                    onPageUpKey(event);
-                    break;
+            case 'PageUp':
+                onPageUpKey(event);
+                break;
 
-                case 'Enter':
-                case 'NumpadEnter':
-                case 'Space':
-                    onSpaceKey(event);
-                    event.preventDefault();
-                    break;
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onSpaceKey(event);
+                event.preventDefault();
+                break;
 
-                case 'Tab':
-                    // NOOP
-                    break;
+            case 'Tab':
+                // NOOP
+                break;
 
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    onShiftKey(event);
-                    break;
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                onShiftKey(event);
+                break;
 
-                default:
-                    if (props.multiple && event.code === 'KeyA' && metaKey) {
-                        const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+            default:
+                if (props.multiple && event.code === 'KeyA' && metaKey) {
+                    const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
 
-                        updateModel(event, value);
+                    updateModel(event, value);
 
-                        event.preventDefault();
-                        break;
-                    }
+                    event.preventDefault();
+                    break;
+                }
 
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        searchOptions(event, event.key);
-                        event.preventDefault();
-                    }
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    searchOptions(event, event.key);
+                    event.preventDefault();
+                }
 
-                    break;
+                break;
             }
         };
 
@@ -562,8 +573,11 @@ export const ListBox = React.memo(
         const isSelected = (option) => {
             const optionValue = getOptionValue(option);
 
-            if (props.multiple) return (props.value || []).some((value) => isEquals(value, optionValue));
-            else return isEquals(props.value, optionValue);
+            if (props.multiple) {
+                return (props.value || []).some((value) => isEquals(value, optionValue));
+            }
+
+            return isEquals(props.value, optionValue);
         };
 
         const filter = (option) => {
@@ -574,11 +588,11 @@ export const ListBox = React.memo(
         };
 
         const getOptionLabel = (option) => {
-            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
         };
 
         const getOptionValue = (option) => {
-            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
+            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option.value !== undefined ? option.value : option;
         };
 
         const getOptionRenderKey = (option) => {
@@ -590,7 +604,7 @@ export const ListBox = React.memo(
                 return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
             }
 
-            return option && option['disabled'] !== undefined ? option['disabled'] : false;
+            return option && option.disabled !== undefined ? option.disabled : false;
         };
 
         const onFirstHiddenFocus = () => {
@@ -660,12 +674,12 @@ export const ListBox = React.memo(
                     }
 
                     return filteredGroups;
-                } else {
-                    return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
                 }
-            } else {
-                return props.options;
+
+                return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
             }
+
+            return props.options;
         };
 
         const scrollToSelectedIndex = () => {
@@ -764,34 +778,34 @@ export const ListBox = React.memo(
                         {groupChildrenContent}
                     </React.Fragment>
                 );
-            } else {
-                const optionLabel = getOptionLabel(option);
-                const optionKey = index + '_' + getOptionRenderKey(option);
-                const disabled = isOptionDisabled(option);
-
-                return (
-                    <ListBoxItem
-                        id={id.current + '_' + index}
-                        hostName="ListBox"
-                        optionKey={optionKey}
-                        key={optionKey}
-                        label={optionLabel}
-                        index={index}
-                        onOptionMouseDown={onOptionMouseDown}
-                        onOptionMouseMove={onOptionMouseMove}
-                        focusedOptionIndex={focusedOptionIndex}
-                        option={option}
-                        style={style}
-                        template={props.itemTemplate}
-                        selected={isSelected(option)}
-                        onClick={onOptionSelect}
-                        onTouchEnd={onOptionTouchEnd}
-                        disabled={disabled}
-                        ptCallbacks={ptCallbacks}
-                        metaData={metaData}
-                    />
-                );
             }
+
+            const optionLabel = getOptionLabel(option);
+            const optionKey = index + '_' + getOptionRenderKey(option);
+            const disabled = isOptionDisabled(option);
+
+            return (
+                <ListBoxItem
+                    id={id.current + '_' + index}
+                    hostName="ListBox"
+                    optionKey={optionKey}
+                    key={optionKey}
+                    label={optionLabel}
+                    index={index}
+                    onOptionMouseDown={onOptionMouseDown}
+                    onOptionMouseMove={onOptionMouseMove}
+                    focusedOptionIndex={focusedOptionIndex}
+                    option={option}
+                    style={style}
+                    template={props.itemTemplate}
+                    selected={isSelected(option)}
+                    onClick={onOptionSelect}
+                    onTouchEnd={onOptionTouchEnd}
+                    disabled={disabled}
+                    ptCallbacks={ptCallbacks}
+                    metaData={metaData}
+                />
+            );
         };
 
         const createItems = () => {
@@ -848,26 +862,26 @@ export const ListBox = React.memo(
                 };
 
                 return <VirtualScroller ref={virtualScrollerRef} {...virtualScrollerProps} pt={ptCallbacks.ptm('virtualScroller')} />;
-            } else {
-                const items = createItems();
+            }
 
-                const listProps = mergeProps(
-                    {
-                        ref: listRef,
-                        className: ptCallbacks.cx('list'),
-                        role: 'listbox',
-                        'aria-multiselectable': props.multiple,
-                        tabIndex: '-1',
-                        onFocus: onListFocus,
-                        onBlur: onListBlur,
-                        onKeyDown: onListKeyDown,
-                        ...ariaProps
-                    },
-                    ptCallbacks.ptm('list')
-                );
+            const items = createItems();
 
-                return <ul {...listProps}>{items}</ul>;
-            }
+            const listProps = mergeProps(
+                {
+                    ref: listRef,
+                    className: ptCallbacks.cx('list'),
+                    role: 'listbox',
+                    'aria-multiselectable': props.multiple,
+                    tabIndex: '-1',
+                    onFocus: onListFocus,
+                    onBlur: onListBlur,
+                    onKeyDown: onListKeyDown,
+                    ...ariaProps
+                },
+                ptCallbacks.ptm('list')
+            );
+
+            return <ul {...listProps}>{items}</ul>;
         };
 
         const visibleOptions = getVisibleOptions();
@@ -928,10 +942,10 @@ export const ListBox = React.memo(
         return (
             <>
                 <div {...rootProps}>
-                    <span {...hiddenFirstElement}></span>
+                    <span {...hiddenFirstElement} />
                     {header}
                     <div {...wrapperProps}>{list}</div>
-                    <span {...hiddenLastElement}></span>
+                    <span {...hiddenLastElement} />
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptCallbacks.ptm('tooltip')} {...props.tooltipOptions} />}
             </>
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index 73f60591b7..d9137947e2 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -115,24 +115,24 @@ export const MegaMenu = React.memo(
 
                 setActiveItemState(null);
                 setFocusedItemInfo({ index, key, parentKey });
+            } else if (grouped) {
+                onItemChange(event);
             } else {
-                if (grouped) {
-                    onItemChange(event);
-                } else {
-                    const rootProcessedItemIndex = activeItemState ? activeItemState.index : -1;
-                    const rootProcessedItemKey = activeItemState ? activeItemState.key : '';
+                const rootProcessedItemIndex = activeItemState ? activeItemState.index : -1;
+                const rootProcessedItemKey = activeItemState ? activeItemState.key : '';
 
-                    hide(originalEvent);
-                    setFocusedItemInfo({ index: rootProcessedItemIndex, key: rootProcessedItemKey, parentKey: '' });
-                    setMobileActiveState(false);
-                }
+                hide(originalEvent);
+                setFocusedItemInfo({ index: rootProcessedItemIndex, key: rootProcessedItemKey, parentKey: '' });
+                setMobileActiveState(false);
             }
         };
 
         const onItemChange = (event) => {
             const { processedItem, isFocus } = event;
 
-            if (ObjectUtils.isEmpty(processedItem)) return;
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
 
             const { index, key, parentKey, items } = processedItem;
             const grouped = ObjectUtils.isNotEmpty(items);
@@ -182,17 +182,15 @@ export const MegaMenu = React.memo(
                 setActiveItemState(null);
                 setFocusedItemInfo({ index, key, parentKey });
                 setDirty(!root);
+            } else if (grouped) {
+                onItemChange(event);
             } else {
-                if (grouped) {
-                    onItemChange(event);
-                } else {
-                    const rootProcessedItem = root ? processedItem : activeItemState;
+                const rootProcessedItem = root ? processedItem : activeItemState;
 
-                    hide();
-                    changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
-                    setMobileActiveState(false);
-                    DomHandler.focus(menubarRef.current);
-                }
+                hide();
+                changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
+                setMobileActiveState(false);
+                DomHandler.focus(menubarRef.current);
             }
         };
 
@@ -227,7 +225,7 @@ export const MegaMenu = React.memo(
                 hide();
             } else {
                 setMobileActiveState(true);
-                ZIndexUtils.set('menu', menubarRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
+                ZIndexUtils.set('menu', menubarRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
                 setTimeout(() => {
                     show();
                 }, 1);
@@ -288,7 +286,7 @@ export const MegaMenu = React.memo(
                 bindListeners();
 
                 if (!isMobileMode) {
-                    ZIndexUtils.set('menu', currentPanel, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
+                    ZIndexUtils.set('menu', currentPanel, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
                 }
             } else {
                 unbindListeners();
@@ -324,14 +322,14 @@ export const MegaMenu = React.memo(
             const _visibleItems =
                 processedItem && processedItem.key === focusedItemInfo.parentKey
                     ? processedItem.items.reduce((items, col) => {
-                          col.forEach((submenu) => {
-                              submenu.items.forEach((a) => {
-                                  items.push(a);
-                              });
-                          });
-
-                          return items;
-                      }, [])
+                        col.forEach((submenu) => {
+                            submenu.items.forEach((a) => {
+                                items.push(a);
+                            });
+                        });
+
+                        return items;
+                    }, [])
                     : processedItems;
 
             setVisibleItems(_visibleItems);
@@ -362,61 +360,61 @@ export const MegaMenu = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'ArrowLeft':
-                    onArrowLeftKey(event);
-                    break;
-
-                case 'ArrowRight':
-                    onArrowRightKey(event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Escape':
-                    onEscapeKey(event);
-                    break;
-
-                case 'Tab':
-                    onTabKey(event);
-                    break;
-
-                case 'PageDown':
-                case 'PageUp':
-                case 'Backspace':
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    //NOOP
-                    break;
-
-                default:
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        searchItems(event, event.key);
-                    }
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+                onEscapeKey(event);
+                break;
+
+            case 'Tab':
+                onTabKey(event);
+                break;
+
+            case 'PageDown':
+            case 'PageUp':
+            case 'Backspace':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
+                break;
+
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    searchItems(event, event.key);
+                }
 
-                    break;
+                break;
             }
         };
 
@@ -755,7 +753,7 @@ export const MegaMenu = React.memo(
                         columnIndex: columnIndex !== undefined ? columnIndex : parent && parent.columnIndex !== undefined ? parent.columnIndex : index
                     };
 
-                    newItem['items'] = level === 0 && item.items && item.items.length > 0 ? item.items.map((_items, _index) => createProcessedItems(_items, level + 1, newItem, key, _index)) : createProcessedItems(item.items, level + 1, newItem, key);
+                    newItem.items = level === 0 && item.items && item.items.length > 0 ? item.items.map((_items, _index) => createProcessedItems(_items, level + 1, newItem, key, _index)) : createProcessedItems(item.items, level + 1, newItem, key);
                     _processedItems.push(newItem);
                 });
 
@@ -775,7 +773,7 @@ export const MegaMenu = React.memo(
                 ptm('separator')
             );
 
-            return <li {...separatorProps}></li>;
+            return <li {...separatorProps} />;
         };
 
         const createSubmenuIcon = (item) => {
@@ -805,96 +803,96 @@ export const MegaMenu = React.memo(
 
             if (item.separator) {
                 return createSeparator(index);
-            } else {
-                const key = getItemId(processedItem);
-                const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
-                const iconProps = mergeProps(
-                    {
-                        className: classNames(item.icon, cx('icon'))
-                    },
-                    ptm('icon')
-                );
-                const labelProps = mergeProps(
-                    {
-                        className: cx('label')
-                    },
-                    ptm('label')
-                );
-                const iconClassName = classNames(item.icon, 'p-menuitem-icon');
-                const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
-                const label = item.label && <span {...labelProps}>{item.label}</span>;
+            }
 
-                const actionProps = mergeProps(
-                    {
-                        href: item.url || '#',
-                        className: cx('action', { item }),
-                        target: item.target,
-                        tabIndex: '-1',
-                        'aria-hidden': true
-                    },
-                    getPTOptions(processedItem, 'action', index)
-                );
+            const key = getItemId(processedItem);
+            const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
+            const iconProps = mergeProps(
+                {
+                    className: classNames(item.icon, cx('icon'))
+                },
+                ptm('icon')
+            );
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+            const iconClassName = classNames(item.icon, 'p-menuitem-icon');
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
 
-                const isFocused = isItemFocused(processedItem);
-                const isDisabled = isItemDisabled(processedItem);
-                const isGroup = isItemGroup(processedItem);
-                const isActive = isItemActive(processedItem);
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: cx('action', { item }),
+                    target: item.target,
+                    tabIndex: '-1',
+                    'aria-hidden': true
+                },
+                getPTOptions(processedItem, 'action', index)
+            );
 
-                const submenuItemProps = mergeProps(
-                    {
-                        key,
-                        id: key,
-                        'aria-label': getItemLabel(processedItem),
-                        'aria-disabled': isDisabled,
-                        'aria-haspopup': isGroup ? 'menu' : undefined,
-                        'aria-level': '2',
-                        'aria-expanded': isGroup ? isActive : undefined,
-                        'aria-setsize': getAriaSetSize(),
-                        'aria-posinset': getAriaPosInset(index),
-                        'data-p-highlight': isActive,
-                        'data-p-disabled': isDisabled,
-                        'data-p-focused': isFocused,
-                        className: classNames(item.className, cx('submenuItem', { focused: isFocused, disabled: isDisabled, active: isActive })),
-                        style: item.style,
-                        role: 'menuitem'
-                    },
-                    getPTOptions(processedItem, 'submenuItem', index)
-                );
+            const isFocused = isItemFocused(processedItem);
+            const isDisabled = isItemDisabled(processedItem);
+            const isGroup = isItemGroup(processedItem);
+            const isActive = isItemActive(processedItem);
 
-                const contentProps = mergeProps(
-                    {
-                        onClick: (event) => onLeafClick({ originalEvent: event, processedItem: processedItem }),
-                        className: cx('content')
-                    },
-                    getPTOptions(processedItem, 'content', index)
-                );
+            const submenuItemProps = mergeProps(
+                {
+                    key,
+                    id: key,
+                    'aria-label': getItemLabel(processedItem),
+                    'aria-disabled': isDisabled,
+                    'aria-haspopup': isGroup ? 'menu' : undefined,
+                    'aria-level': '2',
+                    'aria-expanded': isGroup ? isActive : undefined,
+                    'aria-setsize': getAriaSetSize(),
+                    'aria-posinset': getAriaPosInset(index),
+                    'data-p-highlight': isActive,
+                    'data-p-disabled': isDisabled,
+                    'data-p-focused': isFocused,
+                    className: classNames(item.className, cx('submenuItem', { focused: isFocused, disabled: isDisabled, active: isActive })),
+                    style: item.style,
+                    role: 'menuitem'
+                },
+                getPTOptions(processedItem, 'submenuItem', index)
+            );
 
-                let content = (
-                    <a {...actionProps}>
-                        {icon}
-                        {label}
-                        <Ripple />
-                    </a>
-                );
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onLeafClick({ originalEvent: event, processedItem: processedItem }),
+                    className: cx('content')
+                },
+                getPTOptions(processedItem, 'content', index)
+            );
 
-                if (item.template) {
-                    const defaultContentOptions = {
-                        className: linkClassName,
-                        labelClassName: 'p-menuitem-text',
-                        iconClassName,
-                        element: content,
-                        props
-                    };
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    {label}
+                    <Ripple />
+                </a>
+            );
 
-                    content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
-                }
+            if (item.template) {
+                const defaultContentOptions = {
+                    className: linkClassName,
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName,
+                    element: content,
+                    props
+                };
 
-                return (
-                    <li {...submenuItemProps}>
-                        <div {...contentProps}>{content}</div>
-                    </li>
-                );
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
             }
+
+            return (
+                <li {...submenuItemProps}>
+                    <div {...contentProps}>{content}</div>
+                </li>
+            );
         };
 
         const createSubmenu = (submenu, index) => {
@@ -1062,18 +1060,18 @@ export const MegaMenu = React.memo(
                         }
 
                         ${
-                            horizontal
-                                ? `
+    horizontal
+        ? `
                                     .p-megamenu[${selector}] .p-menuitem-active  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
                                         transform: rotate(-180deg);
                                     }
                             `
-                                : ''
-                        }
+        : ''
+}
 
                         ${
-                            vertical
-                                ? `                                                                   
+    vertical
+        ? `                                                                   
                                     .p-megamenu[${selector}] .p-menuitem  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
                                         transform: rotate(90deg);
                                     }
@@ -1082,8 +1080,8 @@ export const MegaMenu = React.memo(
                                         transform: rotate(-90deg);
                                     }
                             `
-                                : ''
-                        }
+        : ''
+}
                     }
                 `;
 
diff --git a/components/lib/megamenu/MegaMenuBase.js b/components/lib/megamenu/MegaMenuBase.js
index 924fb4f4b5..1cb5ed3fe3 100644
--- a/components/lib/megamenu/MegaMenuBase.js
+++ b/components/lib/megamenu/MegaMenuBase.js
@@ -32,25 +32,25 @@ const classes = {
         let columnClass;
 
         switch (length) {
-            case 2:
-                columnClass = 'p-megamenu-col-6';
-                break;
+        case 2:
+            columnClass = 'p-megamenu-col-6';
+            break;
 
-            case 3:
-                columnClass = 'p-megamenu-col-4';
-                break;
+        case 3:
+            columnClass = 'p-megamenu-col-4';
+            break;
 
-            case 4:
-                columnClass = 'p-megamenu-col-3';
-                break;
+        case 4:
+            columnClass = 'p-megamenu-col-3';
+            break;
 
-            case 6:
-                columnClass = 'p-megamenu-col-2';
-                break;
+        case 6:
+            columnClass = 'p-megamenu-col-2';
+            break;
 
-            default:
-                columnClass = 'p-megamenu-col-12';
-                break;
+        default:
+            columnClass = 'p-megamenu-col-12';
+            break;
         }
 
         return columnClass;
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
index 0fdc4045aa..f188876727 100644
--- a/components/lib/mention/Mention.js
+++ b/components/lib/mention/Mention.js
@@ -71,7 +71,7 @@ export const Mention = React.memo(
         };
 
         const onOverlayEnter = () => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             alignOverlay();
         };
@@ -265,12 +265,10 @@ export const Mention = React.memo(
                 DomHandler.setAttributes(elementRef.current, {
                     'data-p-inputwrapper-filled': isFilled
                 });
+            } else if (isFilled) {
+                DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled');
             } else {
-                if (isFilled) {
-                    DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled');
-                } else {
-                    DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
-                }
+                DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
             }
         };
 
@@ -291,98 +289,98 @@ export const Mention = React.memo(
                 let highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
 
                 switch (event.which) {
-                    //down
-                    case 40:
-                        if (highlightItem) {
-                            let nextElement = highlightItem.nextElementSibling;
+                //down
+                case 40:
+                    if (highlightItem) {
+                        let nextElement = highlightItem.nextElementSibling;
 
-                            if (nextElement) {
-                                const nextElementIndex = DomHandler.index(nextElement);
-                                const highlightItemIndex = DomHandler.index(highlightItem);
+                        if (nextElement) {
+                            const nextElementIndex = DomHandler.index(nextElement);
+                            const highlightItemIndex = DomHandler.index(highlightItem);
 
-                                setHighlightState((prevState) => {
-                                    const newState = [...prevState];
+                            setHighlightState((prevState) => {
+                                const newState = [...prevState];
 
-                                    newState[nextElementIndex] = true;
-                                    newState[highlightItemIndex] = false;
+                                newState[nextElementIndex] = true;
+                                newState[highlightItemIndex] = false;
 
-                                    return newState;
-                                });
+                                return newState;
+                            });
 
-                                DomHandler.scrollInView(overlayRef.current, nextElement);
-                            }
-                        } else {
-                            highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
+                            DomHandler.scrollInView(overlayRef.current, nextElement);
+                        }
+                    } else {
+                        highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
 
-                            if (highlightItem) {
-                                const highlightItemIndex = DomHandler.index(highlightItem);
+                        if (highlightItem) {
+                            const highlightItemIndex = DomHandler.index(highlightItem);
 
-                                setHighlightState((prevState) => {
-                                    const newState = [...prevState];
+                            setHighlightState((prevState) => {
+                                const newState = [...prevState];
 
-                                    newState[highlightItemIndex] = true;
+                                newState[highlightItemIndex] = true;
 
-                                    return newState;
-                                });
-                            }
+                                return newState;
+                            });
                         }
+                    }
 
-                        event.preventDefault();
-                        break;
+                    event.preventDefault();
+                    break;
 
                     //up
-                    case 38:
-                        if (highlightItem) {
-                            let previousElement = highlightItem.previousElementSibling;
+                case 38:
+                    if (highlightItem) {
+                        let previousElement = highlightItem.previousElementSibling;
 
-                            if (previousElement) {
-                                const previousElementIndex = DomHandler.index(previousElement);
-                                const highlightItemIndex = DomHandler.index(highlightItem);
+                        if (previousElement) {
+                            const previousElementIndex = DomHandler.index(previousElement);
+                            const highlightItemIndex = DomHandler.index(highlightItem);
 
-                                setHighlightState((prevState) => {
-                                    const newState = [...prevState];
+                            setHighlightState((prevState) => {
+                                const newState = [...prevState];
 
-                                    newState[previousElementIndex] = true;
-                                    newState[highlightItemIndex] = false;
+                                newState[previousElementIndex] = true;
+                                newState[highlightItemIndex] = false;
 
-                                    return newState;
-                                });
+                                return newState;
+                            });
 
-                                DomHandler.scrollInView(overlayRef.current, previousElement);
-                            }
+                            DomHandler.scrollInView(overlayRef.current, previousElement);
                         }
+                    }
 
-                        event.preventDefault();
-                        break;
+                    event.preventDefault();
+                    break;
 
                     //backspace
-                    case 8:
-                        const { value, selectionStart } = event.target;
-                        const key = value.substring(selectionStart - 1, selectionStart);
+                case 8:
+                    const { value, selectionStart } = event.target;
+                    const key = value.substring(selectionStart - 1, selectionStart);
 
-                        if (key === triggerState.key) {
-                            hide();
-                        }
+                    if (key === triggerState.key) {
+                        hide();
+                    }
 
-                        break;
+                    break;
 
                     //enter
-                    case 13:
-                        if (highlightItem) {
-                            selectItem(event, props.suggestions[DomHandler.index(highlightItem)]);
-                        }
+                case 13:
+                    if (highlightItem) {
+                        selectItem(event, props.suggestions[DomHandler.index(highlightItem)]);
+                    }
 
-                        event.preventDefault();
-                        break;
+                    event.preventDefault();
+                    break;
 
                     //escape
-                    case 27:
-                        hide();
-                        event.preventDefault();
-                        break;
+                case 27:
+                    hide();
+                    event.preventDefault();
+                    break;
 
-                    default:
-                        break;
+                default:
+                    break;
                 }
             }
         };
@@ -427,8 +425,8 @@ export const Mention = React.memo(
             if (!isFilled && isInputWrapperFilled) {
                 _isUnstyled
                     ? DomHandler.setAttributes(elementRef.current, {
-                          'data-p-inputwrapper-filled': false
-                      })
+                        'data-p-inputwrapper-filled': false
+                    })
                     : DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
             }
         }, [isFilled]);
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index 5e412859d6..90e037e971 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -100,7 +100,9 @@ export const Menu = React.memo(
                 if (selectedOptionIndex !== -1) {
                     changeFocusedOptionIndex(selectedOptionIndex);
                     setSelectedOptionIndex(-1);
-                } else changeFocusedOptionIndex(0);
+                } else {
+                    changeFocusedOptionIndex(0);
+                }
             }
 
             props.onFocus && props.onFocus(event);
@@ -114,43 +116,43 @@ export const Menu = React.memo(
 
         const onListKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event);
-                    break;
-
-                case 'Escape':
-                    if (props.popup) {
-                        DomHandler.focus(targetRef.current);
-                        hide(event);
-                    }
-
-                case 'Tab':
-                    props.popup && visibleState && hide(event);
-                    break;
-
-                default:
-                    break;
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'Escape':
+                if (props.popup) {
+                    DomHandler.focus(targetRef.current);
+                    hide(event);
+                }
+
+            case 'Tab':
+                props.popup && visibleState && hide(event);
+                break;
+
+            default:
+                break;
             }
         };
 
@@ -243,7 +245,7 @@ export const Menu = React.memo(
 
         const onEnter = () => {
             DomHandler.addStyles(menuRef.current, { position: 'absolute', top: '0', left: '0' });
-            ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
+            ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
             DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
 
             if (props.popup) {
@@ -319,7 +321,7 @@ export const Menu = React.memo(
                 ptm('separator')
             );
 
-            return <li {...separatorProps}></li>;
+            return <li {...separatorProps} />;
         };
 
         const createMenuItem = (item, index, parentId = null) => {
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index f3717698b7..06b6bd07a5 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -138,67 +138,69 @@ export const Menubar = React.memo(
             const code = event.code;
 
             switch (code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'ArrowLeft':
-                    onArrowLeftKey(event);
-                    break;
-
-                case 'ArrowRight':
-                    onArrowRightKey(event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Escape':
-                    onEscapeKey(event);
-                    break;
-
-                case 'Tab':
-                    onTabKey(event);
-                    break;
-
-                case 'PageDown':
-                case 'PageUp':
-                case 'Backspace':
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    break;
-
-                default:
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        searchItems(event, event.key);
-                    }
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+                onEscapeKey(event);
+                break;
+
+            case 'Tab':
+                onTabKey(event);
+                break;
+
+            case 'PageDown':
+            case 'PageUp':
+            case 'Backspace':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                break;
+
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    searchItems(event, event.key);
+                }
 
-                    break;
+                break;
             }
         };
 
         const onItemChange = (event) => {
             const { processedItem, isFocus } = event;
 
-            if (ObjectUtils.isEmpty(processedItem)) return;
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
 
             const { index, key, level, parentKey, items } = processedItem;
             const grouped = ObjectUtils.isNotEmpty(items);
@@ -236,18 +238,16 @@ export const Menubar = React.memo(
                         setDirty(true);
                     }
                 }, 0);
+            } else if (grouped) {
+                DomHandler.focus(rootMenuRef.current);
+                onItemChange({ originalEvent, processedItem });
             } else {
-                if (grouped) {
-                    DomHandler.focus(rootMenuRef.current);
-                    onItemChange({ originalEvent, processedItem });
-                } else {
-                    const rootProcessedItem = root ? processedItem : activeItemPath.find((p) => p.parentKey === '');
-                    const rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
+                const rootProcessedItem = root ? processedItem : activeItemPath.find((p) => p.parentKey === '');
+                const rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
 
-                    hide(originalEvent);
-                    setFocusedItemInfo({ index: rootProcessedItemIndex, parentKey: rootProcessedItem ? rootProcessedItem.parentKey : '' });
-                    setMobileActiveState(false);
-                }
+                hide(originalEvent);
+                setFocusedItemInfo({ index: rootProcessedItemIndex, parentKey: rootProcessedItem ? rootProcessedItem.parentKey : '' });
+                setMobileActiveState(false);
             }
         };
 
@@ -506,7 +506,7 @@ export const Menubar = React.memo(
                         parentKey
                     };
 
-                    newItem['items'] = createProcessedItems(item.items, level + 1, newItem, key);
+                    newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
                     _processedItems.push(newItem);
                 });
 
@@ -523,7 +523,7 @@ export const Menubar = React.memo(
             if (mobileActiveState) {
                 bindOutsideClickListener();
                 bindResizeListener();
-                ZIndexUtils.set('menu', rootMenuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
+                ZIndexUtils.set('menu', rootMenuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
             } else {
                 unbindResizeListener();
                 unbindOutsideClickListener();
diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
index f5c8cc5c74..c9b0da6a86 100644
--- a/components/lib/menubar/MenubarSub.js
+++ b/components/lib/menubar/MenubarSub.js
@@ -115,7 +115,7 @@ export const MenubarSub = React.memo(
                 ptm('separator', { hostName: props.hostName })
             );
 
-            return <li {...separatorProps}></li>;
+            return <li {...separatorProps} />;
         };
 
         const createSubmenu = (processedItem) => {
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index 4eb220bef1..c468e6c5f6 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -41,20 +41,20 @@ export const Message = React.memo(
 
             if (!icon) {
                 switch (props.severity) {
-                    case 'info':
-                        icon = <InfoCircleIcon {...iconProps} />;
-                        break;
-                    case 'warn':
-                        icon = <ExclamationTriangleIcon {...iconProps} />;
-                        break;
-                    case 'error':
-                        icon = <TimesCircleIcon {...iconProps} />;
-                        break;
-                    case 'success':
-                        icon = <CheckIcon {...iconProps} />;
-                        break;
-                    default:
-                        break;
+                case 'info':
+                    icon = <InfoCircleIcon {...iconProps} />;
+                    break;
+                case 'warn':
+                    icon = <ExclamationTriangleIcon {...iconProps} />;
+                    break;
+                case 'error':
+                    icon = <TimesCircleIcon {...iconProps} />;
+                    break;
+                case 'success':
+                    icon = <CheckIcon {...iconProps} />;
+                    break;
+                default:
+                    break;
                 }
             }
 
diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
index a51fffa446..74b8b6a8a4 100644
--- a/components/lib/messages/UIMessage.js
+++ b/components/lib/messages/UIMessage.js
@@ -102,20 +102,20 @@ export const UIMessage = React.memo(
 
                 if (!_icon) {
                     switch (severity) {
-                        case 'info':
-                            icon = <InfoCircleIcon {...iconProps} />;
-                            break;
-                        case 'warn':
-                            icon = <ExclamationTriangleIcon {...iconProps} />;
-                            break;
-                        case 'error':
-                            icon = <TimesCircleIcon {...iconProps} />;
-                            break;
-                        case 'success':
-                            icon = <CheckIcon {...iconProps} />;
-                            break;
-                        default:
-                            break;
+                    case 'info':
+                        icon = <InfoCircleIcon {...iconProps} />;
+                        break;
+                    case 'warn':
+                        icon = <ExclamationTriangleIcon {...iconProps} />;
+                        break;
+                    case 'error':
+                        icon = <TimesCircleIcon {...iconProps} />;
+                        break;
+                    case 'success':
+                        icon = <CheckIcon {...iconProps} />;
+                        break;
+                    default:
+                        break;
                     }
                 }
 
diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js
index 6960f187fd..47007709e2 100644
--- a/components/lib/metergroup/MeterGroup.js
+++ b/components/lib/metergroup/MeterGroup.js
@@ -25,7 +25,7 @@ export const MeterGroup = (inProps) => {
     let precentages = [];
 
     values.map((item) => {
-        totalPercent += item.value;
+        totalPercent = totalPercent + item.value;
         precentages.push(Math.round((item.value / totalPercent) * 100));
     });
 
@@ -69,9 +69,9 @@ export const MeterGroup = (inProps) => {
                 );
 
                 return ObjectUtils.getJSXElement(item.meterTemplate || meter, { ...item, percentage: calculatedPercantage, index }, meterTemplateProps);
-            } else {
-                return <span key={index} {...meterProps} />;
             }
+
+            return <span key={index} {...meterProps} />;
         });
 
         const meterContainerProps = mergeProps(
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 857c623597..ecb1cf32de 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -297,93 +297,93 @@ export const MultiSelect = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-                case 'ArrowUp':
-                    if (props.inline) {
-                        break;
-                    }
-
-                    onArrowUpKey(event);
+            case 'ArrowUp':
+                if (props.inline) {
                     break;
+                }
 
-                case 'ArrowDown':
-                    if (props.inline) {
-                        break;
-                    }
-
-                    onArrowDownKey(event);
+                onArrowUpKey(event);
+                break;
 
+            case 'ArrowDown':
+                if (props.inline) {
                     break;
+                }
 
-                case 'Space':
-                case 'NumpadEnter':
-                case 'Enter':
-                    if (props.inline) {
-                        break;
-                    }
-
-                    onEnterKey(event);
-                    break;
+                onArrowDownKey(event);
 
-                case 'Home':
-                    if (props.inline) {
-                        break;
-                    }
+                break;
 
-                    onHomeKey(event);
-                    event.preventDefault();
+            case 'Space':
+            case 'NumpadEnter':
+            case 'Enter':
+                if (props.inline) {
                     break;
+                }
 
-                case 'End':
-                    if (props.inline) {
-                        break;
-                    }
+                onEnterKey(event);
+                break;
 
-                    onEndKey(event);
-                    event.preventDefault();
+            case 'Home':
+                if (props.inline) {
                     break;
+                }
 
-                case 'PageDown':
-                    onPageDownKey(event);
-                    break;
+                onHomeKey(event);
+                event.preventDefault();
+                break;
 
-                case 'PageUp':
-                    onPageUpKey(event);
+            case 'End':
+                if (props.inline) {
                     break;
+                }
 
-                case 'Escape':
-                    if (props.inline) {
-                        break;
-                    }
+                onEndKey(event);
+                event.preventDefault();
+                break;
 
-                    hide();
-                    break;
+            case 'PageDown':
+                onPageDownKey(event);
+                break;
 
-                case 'Tab':
-                    onTabKey(event);
-                    break;
+            case 'PageUp':
+                onPageUpKey(event);
+                break;
 
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    onShiftKey(event);
+            case 'Escape':
+                if (props.inline) {
                     break;
+                }
 
-                default:
-                    if (event.code === 'KeyA' && metaKey) {
-                        const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+                hide();
+                break;
 
-                        updateModel(event, value, value);
+            case 'Tab':
+                onTabKey(event);
+                break;
 
-                        event.preventDefault();
-                        break;
-                    }
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                onShiftKey(event);
+                break;
 
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        !overlayVisibleState && show();
-                        searchOptions(event);
-                        event.preventDefault();
-                    }
+            default:
+                if (event.code === 'KeyA' && metaKey) {
+                    const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+
+                    updateModel(event, value, value);
 
+                    event.preventDefault();
                     break;
+                }
+
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    !overlayVisibleState && show();
+                    searchOptions(event);
+                    event.preventDefault();
+                }
+
+                break;
             }
 
             setClicked(false);
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index ea63befe6c..2f4cec035b 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -186,36 +186,36 @@ export const MultiSelectPanel = React.memo(
                         {groupChildrenContent}
                     </React.Fragment>
                 );
-            } else {
-                const optionLabel = props.getOptionLabel(option);
-                const optionKey = index + '_' + props.getOptionRenderKey(option);
-                const disabled = props.isOptionDisabled(option);
-                const tabIndex = disabled ? null : props.tabIndex || 0;
-                const selected = props.isSelected(option);
-
-                return (
-                    <MultiSelectItem
-                        hostName={props.hostName}
-                        key={optionKey}
-                        focusedOptionIndex={props.focusedOptionIndex}
-                        label={optionLabel}
-                        option={option}
-                        style={style}
-                        index={index}
-                        template={props.itemTemplate}
-                        selected={selected}
-                        onClick={props.onOptionSelect}
-                        onMouseMove={changeFocusedItemOnHover}
-                        tabIndex={tabIndex}
-                        disabled={disabled}
-                        className={props.itemClassName}
-                        checkboxIcon={props.checkboxIcon}
-                        isUnstyled={isUnstyled}
-                        ptm={ptm}
-                        cx={cx}
-                    />
-                );
             }
+
+            const optionLabel = props.getOptionLabel(option);
+            const optionKey = index + '_' + props.getOptionRenderKey(option);
+            const disabled = props.isOptionDisabled(option);
+            const tabIndex = disabled ? null : props.tabIndex || 0;
+            const selected = props.isSelected(option);
+
+            return (
+                <MultiSelectItem
+                    hostName={props.hostName}
+                    key={optionKey}
+                    focusedOptionIndex={props.focusedOptionIndex}
+                    label={optionLabel}
+                    option={option}
+                    style={style}
+                    index={index}
+                    template={props.itemTemplate}
+                    selected={selected}
+                    onClick={props.onOptionSelect}
+                    onMouseMove={changeFocusedItemOnHover}
+                    tabIndex={tabIndex}
+                    disabled={disabled}
+                    className={props.itemClassName}
+                    checkboxIcon={props.checkboxIcon}
+                    isUnstyled={isUnstyled}
+                    ptm={ptm}
+                    cx={cx}
+                />
+            );
         };
 
         const createItems = () => {
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index 42ad88fca9..43dba9d97d 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -92,7 +92,7 @@ export const MultiStateCheckbox = React.memo(
         };
 
         const getSelectedOptionMap = () => {
-            let option, index;
+            let option; let index;
 
             if (props.options) {
                 index = props.options.findIndex((option) => ObjectUtils.equals(props.value, getOptionValue(option), equalityKey));
@@ -152,8 +152,8 @@ export const MultiStateCheckbox = React.memo(
         const otherProps = MultiStateCheckboxBase.getOtherProps(props);
         const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const icon = createIcon();
-        const ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
-        const ariaChecked = !!selectedOption ? 'true' : 'false';
+        const ariaValueLabel = selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
+        const ariaChecked = selectedOption ? 'true' : 'false';
 
         const rootProps = mergeProps(
             {
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 921177b779..f4c6c38647 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -65,8 +65,11 @@ export const OrderList = React.memo(
             const selected = selectedIndex !== -1;
             let newSelection;
 
-            if (selected) newSelection = metaKey ? selectionState.filter((_, i) => i !== selectedIndex) : [value];
-            else newSelection = metaKey ? [...selectionState, value] : [value];
+            if (selected) {
+                newSelection = metaKey ? selectionState.filter((_, i) => i !== selectedIndex) : [value];
+            } else {
+                newSelection = metaKey ? [...selectionState, value] : [value];
+            }
 
             setSelectionState(newSelection);
         };
@@ -75,8 +78,11 @@ export const OrderList = React.memo(
             const item = visibleList[index];
             const selected = ObjectUtils.findIndexInList(item, selectionState) !== -1;
 
-            if (selected) setSelectionState(selectionState.filter((selectedItem) => selectedItem !== item));
-            else setSelectionState([...selectionState, item]);
+            if (selected) {
+                setSelectionState(selectionState.filter((selectedItem) => selectedItem !== item));
+            } else {
+                setSelectionState([...selectionState, item]);
+            }
         };
 
         const findCurrentFocusedIndex = (listElement) => {
@@ -129,39 +135,39 @@ export const OrderList = React.memo(
 
         const onListKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event);
-                    break;
-
-                case 'KeyA':
-                    if (event.ctrlKey) {
-                        setSelectionState(visibleList);
-                        event.preventDefault();
-                    }
-
-                default:
-                    break;
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'KeyA':
+                if (event.ctrlKey) {
+                    setSelectionState(visibleList);
+                    event.preventDefault();
+                }
+
+            default:
+                break;
             }
         };
 
diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js
index d1c6edbdfd..9d8d4c9b4e 100644
--- a/components/lib/orderlist/OrderListControls.js
+++ b/components/lib/orderlist/OrderListControls.js
@@ -199,10 +199,10 @@ export const OrderListControls = React.memo((props) => {
 
     return (
         <div {...controlsProps}>
-            <Button pt={ptm('moveUpButton')} {...moveUpButtonProps}></Button>
-            <Button pt={ptm('moveTopButton')} {...moveTopButtonProps}></Button>
-            <Button pt={ptm('moveDownButton')} {...moveDownButtonProps}></Button>
-            <Button pt={ptm('moveBottomButton')} {...moveBottomButtonProps}></Button>
+            <Button pt={ptm('moveUpButton')} {...moveUpButtonProps} />
+            <Button pt={ptm('moveTopButton')} {...moveTopButtonProps} />
+            <Button pt={ptm('moveDownButton')} {...moveDownButtonProps} />
+            <Button pt={ptm('moveBottomButton')} {...moveBottomButtonProps} />
         </div>
     );
 });
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
index d786542bcd..8c3f58c9c3 100644
--- a/components/lib/orderlist/OrderListSubList.js
+++ b/components/lib/orderlist/OrderListSubList.js
@@ -85,8 +85,11 @@ export const OrderListSubList = React.memo(
                 const bottomDiff = offsetY + listElementRef.current.clientHeight - event.pageY;
                 const topDiff = event.pageY - offsetY;
 
-                if (bottomDiff < 25 && bottomDiff > 0) listElementRef.current.scrollTop += 15;
-                else if (topDiff < 25 && topDiff > 0) listElementRef.current.scrollTop -= 15;
+                if (bottomDiff < 25 && bottomDiff > 0) {
+                    listElementRef.current.scrollTop += 15;
+                } else if (topDiff < 25 && topDiff > 0) {
+                    listElementRef.current.scrollTop -= 15;
+                }
             }
         };
 
@@ -114,7 +117,7 @@ export const OrderListSubList = React.memo(
                 _ptm('droppoint')
             );
 
-            return <li key={key} {...droppointProps}></li>;
+            return <li key={key} {...droppointProps} />;
         };
 
         const createHeader = () => {
@@ -175,29 +178,29 @@ export const OrderListSubList = React.memo(
                         items.push(createDropPoint(i, key + '_droppoint'));
 
                         return items;
-                    } else {
-                        const itemProps = mergeProps(
-                            {
-                                id: key,
-                                role: 'option',
-                                onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
-                                onMouseDown: props.onOptionMouseDown,
-                                onMouseMove: (e) => changeFocusedItemOnHover(e, i),
-                                className: classNames(props.className, cx('item', { selected, focused })),
-                                'aria-selected': selected,
-                                'data-p-highlight': selected,
-                                'data-p-focused': focused
-                            },
-                            getPTOptions(item, 'item')
-                        );
-
-                        return (
-                            <li key={key} {...itemProps}>
-                                {content}
-                                <Ripple />
-                            </li>
-                        );
                     }
+
+                    const itemProps = mergeProps(
+                        {
+                            id: key,
+                            role: 'option',
+                            onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
+                            onMouseDown: props.onOptionMouseDown,
+                            onMouseMove: (e) => changeFocusedItemOnHover(e, i),
+                            className: classNames(props.className, cx('item', { selected, focused })),
+                            'aria-selected': selected,
+                            'data-p-highlight': selected,
+                            'data-p-focused': focused
+                        },
+                        getPTOptions(item, 'item')
+                    );
+
+                    return (
+                        <li key={key} {...itemProps}>
+                            {content}
+                            <Ripple />
+                        </li>
+                    );
                 });
             }
 
diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js
index 990826802f..e9bc7d1762 100644
--- a/components/lib/organizationchart/OrganizationChart.js
+++ b/components/lib/organizationchart/OrganizationChart.js
@@ -60,8 +60,11 @@ export const OrganizationChart = React.memo(
 
         const findIndexInSelection = (node) => {
             if (props.selectionMode && props.selection) {
-                if (props.selectionMode === 'single') return props.selection === node ? 0 : -1;
-                else if (props.selectionMode === 'multiple') return props.selection.findIndex((selectedNode) => selectedNode === node);
+                if (props.selectionMode === 'single') {
+                    return props.selection === node ? 0 : -1;
+                } else if (props.selectionMode === 'multiple') {
+                    return props.selection.findIndex((selectedNode) => selectedNode === node);
+                }
             }
 
             return -1;
diff --git a/components/lib/organizationchart/OrganizationChartNode.js b/components/lib/organizationchart/OrganizationChartNode.js
index 2d317e49f5..02370bac14 100644
--- a/components/lib/organizationchart/OrganizationChartNode.js
+++ b/components/lib/organizationchart/OrganizationChartNode.js
@@ -121,7 +121,7 @@ export const OrganizationChartNode = React.memo((props) => {
             <tr {...linesProps}>
                 {node.children && node.children.length === 1 && (
                     <td {...lineCellProps}>
-                        <div {...lineDownProps}></div>
+                        <div {...lineDownProps} />
                     </td>
                 )}
                 {node.children &&
@@ -179,7 +179,7 @@ export const OrganizationChartNode = React.memo((props) => {
         return (
             <tr {...linesProps}>
                 <td {...lineCellProps}>
-                    <div {...lineDownProps}></div>
+                    <div {...lineDownProps} />
                 </td>
             </tr>
         );
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
index f3d81f02dc..fbe2247479 100644
--- a/components/lib/overlaypanel/OverlayPanel.js
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -38,14 +38,14 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         listener: (event, { type, valid }) => {
             if (valid) {
                 switch (type) {
-                    case 'outside':
-                        props.dismissable && !isPanelClicked.current && hide();
-                        break;
-                    case 'resize':
-                    case 'scroll':
-                    case 'orientationchange':
-                        align();
-                        break;
+                case 'outside':
+                    props.dismissable && !isPanelClicked.current && hide();
+                    break;
+                case 'resize':
+                case 'scroll':
+                case 'orientationchange':
+                    align();
+                    break;
                 }
             }
 
@@ -133,7 +133,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
 
     const onEnter = () => {
         overlayRef.current.setAttribute(attributeSelector.current, '');
-        ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+        ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
         DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
         align();
     };
@@ -185,7 +185,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
             let innerHTML = '';
 
             for (let breakpoint in props.breakpoints) {
-                innerHTML += `
+                innerHTML = innerHTML + `
                     @media screen and (max-width: ${breakpoint}) {
                         .p-overlaypanel[${attributeSelector.current}] {
                             width: ${props.breakpoints[breakpoint]};
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index 4c449ae136..2ea5cc4704 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -124,135 +124,135 @@ export const Paginator = React.memo(
             let element;
 
             switch (key) {
-                case 'FirstPageLink':
-                    element = (
-                        <FirstPageLink
-                            hostName="Paginator"
-                            key={key}
-                            page={page}
-                            totalPages={totalPages}
-                            totalRecords={props.totalRecords}
-                            rows={props.rows}
-                            onClick={changePageToFirst}
-                            disabled={isFirstPage || isEmpty}
-                            template={template}
-                            firstPageLinkIcon={props.firstPageLinkIcon}
-                            ptm={ptm}
-                            cx={cx}
-                        />
-                    );
-                    break;
-
-                case 'PrevPageLink':
-                    element = (
-                        <PrevPageLink
-                            hostName="Paginator"
-                            key={key}
-                            page={page}
-                            totalPages={totalPages}
-                            totalRecords={props.totalRecords}
-                            rows={props.rows}
-                            onClick={changePageToPrev}
-                            disabled={isFirstPage || isEmpty}
-                            template={template}
-                            prevPageLinkIcon={props.prevPageLinkIcon}
-                            ptm={ptm}
-                            cx={cx}
-                        />
-                    );
-                    break;
-
-                case 'NextPageLink':
-                    element = (
-                        <NextPageLink
-                            hostName="Paginator"
-                            key={key}
-                            page={page}
-                            totalPages={totalPages}
-                            totalRecords={props.totalRecords}
-                            rows={props.rows}
-                            onClick={changePageToNext}
-                            disabled={isLastPage || isEmpty}
-                            template={template}
-                            nextPageLinkIcon={props.nextPageLinkIcon}
-                            ptm={ptm}
-                            cx={cx}
-                        />
-                    );
-                    break;
-
-                case 'LastPageLink':
-                    element = (
-                        <LastPageLink
-                            hostName="Paginator"
-                            key={key}
-                            page={page}
-                            totalPages={totalPages}
-                            totalRecords={props.totalRecords}
-                            rows={props.rows}
-                            onClick={changePageToLast}
-                            disabled={isLastPage || isEmpty}
-                            template={template}
-                            lastPageLinkIcon={props.lastPageLinkIcon}
-                            ptm={ptm}
-                            cx={cx}
-                        />
-                    );
-                    break;
-
-                case 'PageLinks':
-                    element = (
-                        <PageLinks hostName="Paginator" key={key} page={page} totalPages={totalPages} totalRecords={props.totalRecords} rows={props.rows} value={updatePageLinks()} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />
-                    );
-                    break;
-
-                case 'RowsPerPageDropdown':
-                    element = (
-                        <RowsPerPageDropdown
-                            hostName="Paginator"
-                            key={key}
-                            value={props.rows}
-                            page={page}
-                            totalPages={totalPages}
-                            totalRecords={props.totalRecords}
-                            options={props.rowsPerPageOptions}
-                            onChange={onRowsChange}
-                            appendTo={props.dropdownAppendTo}
-                            template={template}
-                            disabled={isEmpty}
-                            unstyled={props.unstyled}
-                            ptm={ptm}
-                            cx={cx}
-                            metaData={metaData}
-                        />
-                    );
-                    break;
-
-                case 'CurrentPageReport':
-                    element = (
-                        <CurrentPageReport
-                            hostName="Paginator"
-                            reportTemplate={props.currentPageReportTemplate}
-                            key={key}
-                            page={page}
-                            totalPages={totalPages}
-                            totalRecords={props.totalRecords}
-                            rows={props.rows}
-                            first={props.first}
-                            template={template}
-                            ptm={ptm}
-                        />
-                    );
-                    break;
-                case 'JumpToPageInput':
-                    element = (
-                        <JumpToPageInput hostName="Paginator" key={key} rows={props.rows} page={page} totalPages={totalPages} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />
-                    );
-                    break;
-
-                default:
-                    element = null;
-                    break;
+            case 'FirstPageLink':
+                element = (
+                    <FirstPageLink
+                        hostName="Paginator"
+                        key={key}
+                        page={page}
+                        totalPages={totalPages}
+                        totalRecords={props.totalRecords}
+                        rows={props.rows}
+                        onClick={changePageToFirst}
+                        disabled={isFirstPage || isEmpty}
+                        template={template}
+                        firstPageLinkIcon={props.firstPageLinkIcon}
+                        ptm={ptm}
+                        cx={cx}
+                    />
+                );
+                break;
+
+            case 'PrevPageLink':
+                element = (
+                    <PrevPageLink
+                        hostName="Paginator"
+                        key={key}
+                        page={page}
+                        totalPages={totalPages}
+                        totalRecords={props.totalRecords}
+                        rows={props.rows}
+                        onClick={changePageToPrev}
+                        disabled={isFirstPage || isEmpty}
+                        template={template}
+                        prevPageLinkIcon={props.prevPageLinkIcon}
+                        ptm={ptm}
+                        cx={cx}
+                    />
+                );
+                break;
+
+            case 'NextPageLink':
+                element = (
+                    <NextPageLink
+                        hostName="Paginator"
+                        key={key}
+                        page={page}
+                        totalPages={totalPages}
+                        totalRecords={props.totalRecords}
+                        rows={props.rows}
+                        onClick={changePageToNext}
+                        disabled={isLastPage || isEmpty}
+                        template={template}
+                        nextPageLinkIcon={props.nextPageLinkIcon}
+                        ptm={ptm}
+                        cx={cx}
+                    />
+                );
+                break;
+
+            case 'LastPageLink':
+                element = (
+                    <LastPageLink
+                        hostName="Paginator"
+                        key={key}
+                        page={page}
+                        totalPages={totalPages}
+                        totalRecords={props.totalRecords}
+                        rows={props.rows}
+                        onClick={changePageToLast}
+                        disabled={isLastPage || isEmpty}
+                        template={template}
+                        lastPageLinkIcon={props.lastPageLinkIcon}
+                        ptm={ptm}
+                        cx={cx}
+                    />
+                );
+                break;
+
+            case 'PageLinks':
+                element = (
+                    <PageLinks hostName="Paginator" key={key} page={page} totalPages={totalPages} totalRecords={props.totalRecords} rows={props.rows} value={updatePageLinks()} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />
+                );
+                break;
+
+            case 'RowsPerPageDropdown':
+                element = (
+                    <RowsPerPageDropdown
+                        hostName="Paginator"
+                        key={key}
+                        value={props.rows}
+                        page={page}
+                        totalPages={totalPages}
+                        totalRecords={props.totalRecords}
+                        options={props.rowsPerPageOptions}
+                        onChange={onRowsChange}
+                        appendTo={props.dropdownAppendTo}
+                        template={template}
+                        disabled={isEmpty}
+                        unstyled={props.unstyled}
+                        ptm={ptm}
+                        cx={cx}
+                        metaData={metaData}
+                    />
+                );
+                break;
+
+            case 'CurrentPageReport':
+                element = (
+                    <CurrentPageReport
+                        hostName="Paginator"
+                        reportTemplate={props.currentPageReportTemplate}
+                        key={key}
+                        page={page}
+                        totalPages={totalPages}
+                        totalRecords={props.totalRecords}
+                        rows={props.rows}
+                        first={props.first}
+                        template={template}
+                        ptm={ptm}
+                    />
+                );
+                break;
+            case 'JumpToPageInput':
+                element = (
+                    <JumpToPageInput hostName="Paginator" key={key} rows={props.rows} page={page} totalPages={totalPages} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />
+                );
+                break;
+
+            default:
+                element = null;
+                break;
             }
 
             return element;
@@ -265,13 +265,13 @@ export const Paginator = React.memo(
                 if (typeof template === 'object') {
                     return template.layout
                         ? template.layout.split(' ').map((value) => {
-                              const key = value.trim();
+                            const key = value.trim();
 
-                              return createElement(key, template[key]);
-                          })
+                            return createElement(key, template[key]);
+                        })
                         : Object.entries(template).map(([key, _template]) => {
-                              return createElement(key, _template);
-                          });
+                            return createElement(key, _template);
+                        });
                 }
 
                 return template.split(' ').map((value) => {
@@ -284,43 +284,43 @@ export const Paginator = React.memo(
 
         if (!props.alwaysShow && totalPages <= 1) {
             return null;
-        } else {
-            const leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
-            const rightContent = ObjectUtils.getJSXElement(props.rightContent, props);
-
-            const elements = createElements();
-            const leftProps = mergeProps(
-                {
-                    className: cx('left')
-                },
-                ptm('left')
-            );
-            const leftElement = leftContent && <div {...leftProps}>{leftContent}</div>;
-            const endProps = mergeProps(
-                {
-                    className: cx('end')
-                },
-                ptm('end')
-            );
-            const rightElement = rightContent && <div {...endProps}>{rightContent}</div>;
-            const rootProps = mergeProps(
-                {
-                    ref: elementRef,
-                    className: classNames(props.className, cx('root')),
-                    style: props.style
-                },
-                PaginatorBase.getOtherProps(props),
-                ptm('root')
-            );
-
-            return (
-                <div {...rootProps}>
-                    {leftElement}
-                    {elements}
-                    {rightElement}
-                </div>
-            );
         }
+
+        const leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
+        const rightContent = ObjectUtils.getJSXElement(props.rightContent, props);
+
+        const elements = createElements();
+        const leftProps = mergeProps(
+            {
+                className: cx('left')
+            },
+            ptm('left')
+        );
+        const leftElement = leftContent && <div {...leftProps}>{leftContent}</div>;
+        const endProps = mergeProps(
+            {
+                className: cx('end')
+            },
+            ptm('end')
+        );
+        const rightElement = rightContent && <div {...endProps}>{rightContent}</div>;
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            PaginatorBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {leftElement}
+                {elements}
+                {rightElement}
+            </div>
+        );
     })
 );
 
diff --git a/components/lib/panel/Panel.spec.js b/components/lib/panel/Panel.spec.js
index ce86efb867..afbd6bcc80 100644
--- a/components/lib/panel/Panel.spec.js
+++ b/components/lib/panel/Panel.spec.js
@@ -13,7 +13,7 @@ const template = (options) => {
     return (
         <div className={className}>
             <button className={options.togglerClassName} onClick={options.onTogglerClick}>
-                <span className={toggleIcon}></span>
+                <span className={toggleIcon} />
             </button>
             <span className={titleClassName}>Header</span>
         </div>
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index b761f49e80..a1516c685a 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -62,9 +62,9 @@ export const PanelMenu = React.memo(
         const isItemActive = (item) => {
             if (props.expandedKeys) {
                 return props.expandedKeys[getItemProp(item, 'key')];
-            } else {
-                return props.multiple ? activeItemsState.some((subItem) => ObjectUtils.equals(item, subItem)) : ObjectUtils.equals(item, activeItemState);
             }
+
+            return props.multiple ? activeItemsState.some((subItem) => ObjectUtils.equals(item, subItem)) : ObjectUtils.equals(item, activeItemState);
         };
 
         const isItemVisible = (item) => {
@@ -93,30 +93,30 @@ export const PanelMenu = React.memo(
 
         const onHeaderKeyDown = (event, item) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    onHeaderArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onHeaderArrowUpKey(event);
-                    break;
-
-                case 'Home':
-                    onHeaderHomeKey(event);
-                    break;
-
-                case 'End':
-                    onHeaderEndKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                case 'Space':
-                    onHeaderEnterKey(event, item);
-                    break;
-
-                default:
-                    break;
+            case 'ArrowDown':
+                onHeaderArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onHeaderArrowUpKey(event);
+                break;
+
+            case 'Home':
+                onHeaderHomeKey(event);
+                break;
+
+            case 'End':
+                onHeaderEndKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onHeaderEnterKey(event, item);
+                break;
+
+            default:
+                break;
             }
         };
 
@@ -215,8 +215,11 @@ export const PanelMenu = React.memo(
             if (props.expandedKeys) {
                 let _keys = { ...props.expandedKeys };
 
-                if (expanded) _keys[item.key] = true;
-                else delete _keys[item.key];
+                if (expanded) {
+                    _keys[item.key] = true;
+                } else {
+                    delete _keys[item.key];
+                }
 
                 props.onExpandedKeysChange && props.onExpandedKeysChange(_keys);
             }
diff --git a/components/lib/panelmenu/PanelMenuList.js b/components/lib/panelmenu/PanelMenuList.js
index f9b38f91ae..2467bf47b6 100644
--- a/components/lib/panelmenu/PanelMenuList.js
+++ b/components/lib/panelmenu/PanelMenuList.js
@@ -63,55 +63,55 @@ export const PanelMenuList = React.memo((props) => {
         const metaKey = event.metaKey || event.ctrlKey;
 
         switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-                onArrowLeftKey(event);
-                break;
-
-            case 'ArrowRight':
-                onArrowRightKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-            case 'Tab':
-            case 'PageDown':
-            case 'PageUp':
-            case 'Backspace':
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                //NOOP
-                break;
-
-            default:
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    searchItems(event, event.key);
-                }
+        case 'ArrowDown':
+            onArrowDownKey(event);
+            break;
+
+        case 'ArrowUp':
+            onArrowUpKey(event);
+            break;
+
+        case 'ArrowLeft':
+            onArrowLeftKey(event);
+            break;
+
+        case 'ArrowRight':
+            onArrowRightKey(event);
+            break;
+
+        case 'Home':
+            onHomeKey(event);
+            break;
+
+        case 'End':
+            onEndKey(event);
+            break;
+
+        case 'Space':
+            onSpaceKey(event);
+            break;
+
+        case 'Enter':
+        case 'NumpadEnter':
+            onEnterKey(event);
+            break;
+
+        case 'Escape':
+        case 'Tab':
+        case 'PageDown':
+        case 'PageUp':
+        case 'Backspace':
+        case 'ShiftLeft':
+        case 'ShiftRight':
+            //NOOP
+            break;
+
+        default:
+            if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                searchItems(event, event.key);
+            }
 
-                break;
+            break;
         }
     };
 
@@ -331,17 +331,23 @@ export const PanelMenuList = React.memo((props) => {
     const findProcessedItemByItemKey = (key, processed, level = 0) => {
         const _processedItems = processed ? processed : level === 0 && props.model;
 
-        if (!_processedItems) return null;
+        if (!_processedItems) {
+            return null;
+        }
 
         for (let i = 0; i < _processedItems.length; i++) {
             const processedItem = _processedItems[i];
             const processedKey = getItemProp(processedItem, 'key') || processedItem.key;
 
-            if (processedKey === key) return processedItem;
+            if (processedKey === key) {
+                return processedItem;
+            }
 
             const matchedItem = findProcessedItemByItemKey(key, processedItem.items, level + 1);
 
-            if (matchedItem) return matchedItem;
+            if (matchedItem) {
+                return matchedItem;
+            }
         }
     };
 
@@ -360,7 +366,7 @@ export const PanelMenuList = React.memo((props) => {
                     parentKey
                 };
 
-                newItem['items'] = createProcessedItems(item.items, level + 1, newItem, key);
+                newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
                 processedItems.push(newItem);
             });
 
diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
index b1bb734bef..1e748c6c77 100644
--- a/components/lib/panelmenu/PanelMenuSub.js
+++ b/components/lib/panelmenu/PanelMenuSub.js
@@ -101,7 +101,7 @@ export const PanelMenuSub = React.memo(
                 _ptm('separator')
             );
 
-            return <li {...separatorProps}></li>;
+            return <li {...separatorProps} />;
         };
 
         const createSubmenu = (processedItem, active) => {
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 37fabb860f..d4b5bb4e5f 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -335,38 +335,38 @@ const Tailwind = {
                 classNames:
                     props.position === 'top'
                         ? {
-                              enter: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
-                              enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
-                              exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                              exitActive: '!opacity-0 !scale-75 translate-x-0 -translate-y-full translate-z-0'
-                          }
+                            enter: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
+                            enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
+                            exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                            exitActive: '!opacity-0 !scale-75 translate-x-0 -translate-y-full translate-z-0'
+                        }
                         : props.position === 'bottom'
-                          ? {
+                            ? {
                                 enter: 'opacity-0 scale-75 translate-y-full',
                                 enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
                                 exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
                                 exitActive: '!opacity-0 !scale-75 translate-x-0 translate-y-full translate-z-0'
                             }
-                          : props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left'
-                            ? {
-                                  enter: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
-                                  enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
-                                  exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                                  exitActive: '!opacity-0 !scale-75 -translate-x-full translate-y-0 translate-z-0'
-                              }
-                            : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right'
-                              ? {
-                                    enter: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
+                            : props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left'
+                                ? {
+                                    enter: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
                                     enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
                                     exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                                    exitActive: '!opacity-0 !scale-75 translate-x-full translate-y-0 translate-z-0'
-                                }
-                              : {
-                                    enter: 'opacity-0 scale-75',
-                                    enterActive: '!opacity-100 !scale-100 transition-all duration-200 ease-out',
-                                    exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                                    exitActive: '!opacity-0 !scale-75'
+                                    exitActive: '!opacity-0 !scale-75 -translate-x-full translate-y-0 translate-z-0'
                                 }
+                                : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right'
+                                    ? {
+                                        enter: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
+                                        enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
+                                        exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                        exitActive: '!opacity-0 !scale-75 translate-x-full translate-y-0 translate-z-0'
+                                    }
+                                    : {
+                                        enter: 'opacity-0 scale-75',
+                                        enterActive: '!opacity-100 !scale-100 transition-all duration-200 ease-out',
+                                        exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                        exitActive: '!opacity-0 !scale-75'
+                                    }
             };
         }
     },
@@ -453,40 +453,40 @@ const Tailwind = {
                 timeout: 300,
                 classNames: props.fullScreen
                     ? {
-                          enter: 'opacity-0',
-                          enterActive: '!opacity-100 transition-opacity duration-300 ease-in',
-                          exit: 'opacity-100 transition-opacity duration-300 ease-in',
-                          exitActive: '!opacity-0'
-                      }
+                        enter: 'opacity-0',
+                        enterActive: '!opacity-100 transition-opacity duration-300 ease-in',
+                        exit: 'opacity-100 transition-opacity duration-300 ease-in',
+                        exitActive: '!opacity-0'
+                    }
                     : props.position === 'top'
-                      ? {
+                        ? {
                             enter: 'translate-x-0 -translate-y-full translate-z-0',
                             enterActive: '!translate-y-0 transition-transform duration-300',
                             exit: 'translate-y-0 transition-transform duration-300',
                             exitActive: 'translate-x-0 !-translate-y-full translate-z-0'
                         }
-                      : props.position === 'bottom'
-                        ? {
-                              enter: 'translate-x-0 translate-y-full translate-z-0',
-                              enterActive: '!translate-y-0 transition-transform duration-300',
-                              exit: 'translate-y-0 transition-transform duration-300',
-                              exitActive: 'translate-x-0 !translate-y-full translate-z-0'
-                          }
-                        : props.position === 'left'
-                          ? {
-                                enter: '-translate-x-full translate-y-0 translate-z-0',
-                                enterActive: '!translate-x-0 transition-transform duration-300',
-                                exit: 'translate-x-0 transition-transform duration-300',
-                                exitActive: '!-translate-x-full translate-y-0 translate-z-0'
-                            }
-                          : props.position === 'right'
+                        : props.position === 'bottom'
                             ? {
-                                  enter: 'translate-x-full translate-y-0 translate-z-0',
-                                  enterActive: '!translate-x-0 transition-transform duration-300',
-                                  exit: 'translate-x-0 transition-transform duration-300',
-                                  exitActive: '!translate-x-full translate-y-0 translate-z-0'
-                              }
-                            : undefined
+                                enter: 'translate-x-0 translate-y-full translate-z-0',
+                                enterActive: '!translate-y-0 transition-transform duration-300',
+                                exit: 'translate-y-0 transition-transform duration-300',
+                                exitActive: 'translate-x-0 !translate-y-full translate-z-0'
+                            }
+                            : props.position === 'left'
+                                ? {
+                                    enter: '-translate-x-full translate-y-0 translate-z-0',
+                                    enterActive: '!translate-x-0 transition-transform duration-300',
+                                    exit: 'translate-x-0 transition-transform duration-300',
+                                    exitActive: '!-translate-x-full translate-y-0 translate-z-0'
+                                }
+                                : props.position === 'right'
+                                    ? {
+                                        enter: 'translate-x-full translate-y-0 translate-z-0',
+                                        enterActive: '!translate-x-0 transition-transform duration-300',
+                                        exit: 'translate-x-0 transition-transform duration-300',
+                                        exitActive: '!translate-x-full translate-y-0 translate-z-0'
+                                    }
+                                    : undefined
             };
         }
     },
@@ -845,7 +845,7 @@ const Tailwind = {
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
                 'transition-colors duration-200 rounded-2xl',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                "before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
+                'before:absolute before:content-\'\' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200',
                 {
                     'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.checked,
                     'bg-blue-500 before:transform before:translate-x-5': props.checked
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index ba70dd69ad..2c4ee1e928 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -73,29 +73,27 @@ export const Password = React.memo(
                 let label = null;
 
                 switch (meterState.strength) {
-                    case 'weak':
-                        label = weakLabel;
-                        break;
+                case 'weak':
+                    label = weakLabel;
+                    break;
 
-                    case 'medium':
-                        label = mediumLabel;
-                        break;
+                case 'medium':
+                    label = mediumLabel;
+                    break;
 
-                    case 'strong':
-                        label = strongLabel;
-                        break;
+                case 'strong':
+                    label = strongLabel;
+                    break;
 
-                    default:
-                        break;
+                default:
+                    break;
                 }
 
                 if (label && infoTextState !== label) {
                     setInfoTextState(label);
                 }
-            } else {
-                if (infoTextState !== promptLabel) {
-                    setInfoTextState(promptLabel);
-                }
+            } else if (infoTextState !== promptLabel) {
+                setInfoTextState(promptLabel);
             }
         };
 
@@ -108,34 +106,34 @@ export const Password = React.memo(
             let meter = null;
 
             switch (testStrength(value)) {
-                case 1:
-                    label = weakLabel;
-                    meter = {
-                        strength: 'weak',
-                        width: '33.33%'
-                    };
-                    break;
-
-                case 2:
-                    label = mediumLabel;
-                    meter = {
-                        strength: 'medium',
-                        width: '66.66%'
-                    };
-                    break;
-
-                case 3:
-                    label = strongLabel;
-                    meter = {
-                        strength: 'strong',
-                        width: '100%'
-                    };
-                    break;
-
-                default:
-                    label = promptLabel;
-                    meter = null;
-                    break;
+            case 1:
+                label = weakLabel;
+                meter = {
+                    strength: 'weak',
+                    width: '33.33%'
+                };
+                break;
+
+            case 2:
+                label = mediumLabel;
+                meter = {
+                    strength: 'medium',
+                    width: '66.66%'
+                };
+                break;
+
+            case 3:
+                label = strongLabel;
+                meter = {
+                    strength: 'strong',
+                    width: '100%'
+                };
+                break;
+
+            default:
+                label = promptLabel;
+                meter = null;
+                break;
             }
 
             setMeterState(meter);
@@ -173,7 +171,7 @@ export const Password = React.memo(
         };
 
         const onOverlayEnter = () => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             alignOverlay();
         };
@@ -395,7 +393,7 @@ export const Password = React.memo(
             ) : (
                 <>
                     <div {...meterProps}>
-                        <div {...meterLabelProps}></div>
+                        <div {...meterLabelProps} />
                     </div>
                     <div {...infoProps}>{infoTextState}</div>
                 </>
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index de7ba1c140..cf736710fd 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -65,25 +65,25 @@ export const PickList = React.memo(
         const handleScrollPosition = (listElement, direction) => {
             if (listElement) {
                 switch (direction) {
-                    case 'up':
-                        scrollInView(listElement, -1);
-                        break;
+                case 'up':
+                    scrollInView(listElement, -1);
+                    break;
 
-                    case 'top':
-                        listElement.scrollTop = 0;
-                        break;
+                case 'top':
+                    listElement.scrollTop = 0;
+                    break;
 
-                    case 'down':
-                        scrollInView(listElement, 1);
-                        break;
+                case 'down':
+                    scrollInView(listElement, 1);
+                    break;
 
-                    case 'bottom':
-                        /* TODO: improve this code block */
-                        setTimeout(() => (listElement.scrollTop = listElement.scrollHeight), 100);
-                        break;
+                case 'bottom':
+                    /* TODO: improve this code block */
+                    setTimeout(() => (listElement.scrollTop = listElement.scrollHeight), 100);
+                    break;
 
-                    default:
-                        break;
+                default:
+                    break;
                 }
             }
         };
@@ -104,60 +104,60 @@ export const PickList = React.memo(
             let selectedValue = [];
 
             switch (direction) {
-                case 'toTarget':
-                    selectedValue = sourceSelection;
-
-                    if (props.onMoveToTarget) {
-                        props.onMoveToTarget({
-                            originalEvent,
-                            value: selectedValue
-                        });
-                    }
+            case 'toTarget':
+                selectedValue = sourceSelection;
+
+                if (props.onMoveToTarget) {
+                    props.onMoveToTarget({
+                        originalEvent,
+                        value: selectedValue
+                    });
+                }
 
-                    break;
+                break;
 
-                case 'allToTarget':
-                    selectedValue = props.source;
+            case 'allToTarget':
+                selectedValue = props.source;
 
-                    if (props.onMoveAllToTarget) {
-                        props.onMoveAllToTarget({
-                            originalEvent,
-                            value: selectedValue
-                        });
-                    }
+                if (props.onMoveAllToTarget) {
+                    props.onMoveAllToTarget({
+                        originalEvent,
+                        value: selectedValue
+                    });
+                }
 
-                    selectedValue = [];
+                selectedValue = [];
 
-                    break;
+                break;
 
-                case 'toSource':
-                    selectedValue = targetSelection;
+            case 'toSource':
+                selectedValue = targetSelection;
 
-                    if (props.onMoveToSource) {
-                        props.onMoveToSource({
-                            originalEvent,
-                            value: selectedValue
-                        });
-                    }
+                if (props.onMoveToSource) {
+                    props.onMoveToSource({
+                        originalEvent,
+                        value: selectedValue
+                    });
+                }
 
-                    break;
+                break;
 
-                case 'allToSource':
-                    selectedValue = props.target;
+            case 'allToSource':
+                selectedValue = props.target;
 
-                    if (props.onMoveAllToSource) {
-                        props.onMoveAllToSource({
-                            originalEvent,
-                            value: selectedValue
-                        });
-                    }
+                if (props.onMoveAllToSource) {
+                    props.onMoveAllToSource({
+                        originalEvent,
+                        value: selectedValue
+                    });
+                }
 
-                    selectedValue = [];
+                selectedValue = [];
 
-                    break;
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
 
             onSelectionChange({ originalEvent, value: selectedValue }, 'sourceSelection', props.onSourceSelectionChange);
@@ -174,8 +174,11 @@ export const PickList = React.memo(
         };
 
         const onSelectionChange = (e, stateKey, callback) => {
-            if (stateKey === 'sourceSelection') setSourceSelectionState(e.value);
-            else setTargetSelectionState(e.value);
+            if (stateKey === 'sourceSelection') {
+                setSourceSelectionState(e.value);
+            } else {
+                setTargetSelectionState(e.value);
+            }
 
             if (callback) {
                 callback(e);
@@ -283,7 +286,9 @@ export const PickList = React.memo(
             let selected = index !== -1;
             let metaSelection = props.metaKeySelection;
 
-            if (!arrowKeyClick) setFocusedOptionIndex(selectedId);
+            if (!arrowKeyClick) {
+                setFocusedOptionIndex(selectedId);
+            }
 
             if (metaSelection) {
                 const metaKey = originalEvent.metaKey || originalEvent.ctrlKey || originalEvent.shiftKey;
@@ -297,9 +302,10 @@ export const PickList = React.memo(
 
                     selection.push(item);
                 }
+            } else if (selected) {
+                selection.splice(index, 1);
             } else {
-                if (selected) selection.splice(index, 1);
-                else selection.push(item);
+                selection.push(item);
             }
 
             if (isSource) {
@@ -316,44 +322,47 @@ export const PickList = React.memo(
 
         const onListKeyDown = (event, type) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event, type);
-                    break;
+            case 'ArrowDown':
+                onArrowDownKey(event, type);
+                break;
 
-                case 'ArrowUp':
-                    onArrowUpKey(event, type);
-                    break;
+            case 'ArrowUp':
+                onArrowUpKey(event, type);
+                break;
 
-                case 'Home':
-                    onHomeKey(event, type);
-                    break;
+            case 'Home':
+                onHomeKey(event, type);
+                break;
 
-                case 'End':
-                    onEndKey(event, type);
-                    break;
+            case 'End':
+                onEndKey(event, type);
+                break;
 
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event, type);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event, type);
-                    break;
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event, type);
+                break;
 
-                case 'KeyA':
-                    if (event.ctrlKey) {
-                        const isSource = type === 'source';
+            case 'Space':
+                onSpaceKey(event, type);
+                break;
 
-                        if (isSource) setSourceSelectionState([...sourceList]);
-                        else setTargetSelectionState([...targetList]);
+            case 'KeyA':
+                if (event.ctrlKey) {
+                    const isSource = type === 'source';
 
-                        onSelectionChange({ originalEvent: event, value: [...sourceList] }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
-                        event.preventDefault();
+                    if (isSource) {
+                        setSourceSelectionState([...sourceList]);
+                    } else {
+                        setTargetSelectionState([...targetList]);
                     }
 
-                default:
-                    break;
+                    onSelectionChange({ originalEvent: event, value: [...sourceList] }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
+                    event.preventDefault();
+                }
+
+            default:
+                break;
             }
         };
 
@@ -634,8 +643,8 @@ export const PickList = React.memo(
                     onListBlur={(e) => onListBlur(e, 'source')}
                     onOptionMouseDown={(index) => onOptionMouseDown(index, 'source')}
                     onItemClick={(e) => onItemClick(e, 'source')}
-                    focusedOptionId={focused['source'] ? focusedOptionId : null}
-                    ariaActivedescendant={focused['source'] ? focusedOptionId : null}
+                    focusedOptionId={focused.source ? focusedOptionId : null}
+                    ariaActivedescendant={focused.source ? focusedOptionId : null}
                     itemTemplate={sourceItemTemplate}
                     header={props.sourceHeader}
                     style={props.sourceStyle}
@@ -691,8 +700,8 @@ export const PickList = React.memo(
                     onListBlur={(e) => onListBlur(e, 'target')}
                     onOptionMouseDown={(index) => onOptionMouseDown(index, 'target')}
                     onItemClick={(e) => onItemClick(e, 'target')}
-                    focusedOptionId={focused['target'] ? focusedOptionId : null}
-                    ariaActivedescendant={focused['target'] ? focusedOptionId : null}
+                    focusedOptionId={focused.target ? focusedOptionId : null}
+                    ariaActivedescendant={focused.target ? focusedOptionId : null}
                     itemTemplate={targetItemTemplate}
                     header={props.targetHeader}
                     style={props.targetStyle}
diff --git a/components/lib/picklist/PickListControls.js b/components/lib/picklist/PickListControls.js
index 59d0e92ad2..a31845a66b 100644
--- a/components/lib/picklist/PickListControls.js
+++ b/components/lib/picklist/PickListControls.js
@@ -148,10 +148,10 @@ export const PickListControls = React.memo((props) => {
 
     return (
         <div {...controlsProps}>
-            <Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp} pt={ptm('moveUpButton')} unstyled={unstyled} aria-label={ariaLabel('moveUp')} __parentMetadata={{ parent: props.metaData }}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop} pt={ptm('moveTopButton')} unstyled={unstyled} aria-label={ariaLabel('moveTop')} __parentMetadata={{ parent: props.metaData }}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown} pt={ptm('moveDownButton')} unstyled={unstyled} aria-label={ariaLabel('moveDown')} __parentMetadata={{ parent: props.metaData }}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom} pt={ptm('moveBottomButton')} unstyled={unstyled} aria-label={ariaLabel('moveBottom')} __parentMetadata={{ parent: props.metaData }}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp} pt={ptm('moveUpButton')} unstyled={unstyled} aria-label={ariaLabel('moveUp')} __parentMetadata={{ parent: props.metaData }} />
+            <Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop} pt={ptm('moveTopButton')} unstyled={unstyled} aria-label={ariaLabel('moveTop')} __parentMetadata={{ parent: props.metaData }} />
+            <Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown} pt={ptm('moveDownButton')} unstyled={unstyled} aria-label={ariaLabel('moveDown')} __parentMetadata={{ parent: props.metaData }} />
+            <Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom} pt={ptm('moveBottomButton')} unstyled={unstyled} aria-label={ariaLabel('moveBottom')} __parentMetadata={{ parent: props.metaData }} />
         </div>
     );
 });
diff --git a/components/lib/picklist/PickListTransferControls.js b/components/lib/picklist/PickListTransferControls.js
index 8ddb77ce9c..d3aaa7eddf 100644
--- a/components/lib/picklist/PickListTransferControls.js
+++ b/components/lib/picklist/PickListTransferControls.js
@@ -19,16 +19,16 @@ export const PickListTransferControls = React.memo((props) => {
 
     function getIconComponent(iconType) {
         switch (iconType) {
-            case 'moveToTargetIcon':
-                return props.moveToTargetIcon || viewChanged ? props.moveToTargetIcon || <AngleDownIcon /> : props.moveToTargetIcon || <AngleRightIcon />;
-            case 'moveAllToTargetIcon':
-                return props.moveAllToTargetIcon || viewChanged ? props.moveAllToTargetIcon || <AngleDoubleDownIcon /> : props.moveAllToTargetIcon || <AngleDoubleRightIcon />;
-            case 'moveToSourceIcon':
-                return props.moveToSourceIcon || viewChanged ? props.moveToSourceIcon || <AngleUpIcon /> : props.moveToSourceIcon || <AngleLeftIcon />;
-            case 'moveAllToSourceIcon':
-                return props.moveAllToSourceIcon || viewChanged ? props.moveAllToSourceIcon || <AngleDoubleUpIcon /> : props.moveAllToSourceIcon || <AngleDoubleLeftIcon />;
-            default:
-                return null;
+        case 'moveToTargetIcon':
+            return props.moveToTargetIcon || viewChanged ? props.moveToTargetIcon || <AngleDownIcon /> : props.moveToTargetIcon || <AngleRightIcon />;
+        case 'moveAllToTargetIcon':
+            return props.moveAllToTargetIcon || viewChanged ? props.moveAllToTargetIcon || <AngleDoubleDownIcon /> : props.moveAllToTargetIcon || <AngleDoubleRightIcon />;
+        case 'moveToSourceIcon':
+            return props.moveToSourceIcon || viewChanged ? props.moveToSourceIcon || <AngleUpIcon /> : props.moveToSourceIcon || <AngleLeftIcon />;
+        case 'moveAllToSourceIcon':
+            return props.moveAllToSourceIcon || viewChanged ? props.moveAllToSourceIcon || <AngleDoubleUpIcon /> : props.moveAllToSourceIcon || <AngleDoubleLeftIcon />;
+        default:
+            return null;
         }
     }
 
@@ -144,7 +144,7 @@ export const PickListTransferControls = React.memo((props) => {
                 unstyled={unstyled}
                 aria-label={ariaLabel('moveToTarget')}
                 __parentMetadata={{ parent: props.metaData }}
-            ></Button>
+            />
             <Button
                 disabled={moveAllRightDisabled}
                 type="button"
@@ -154,8 +154,8 @@ export const PickListTransferControls = React.memo((props) => {
                 unstyled={unstyled}
                 aria-label={ariaLabel('moveAllToTarget')}
                 __parentMetadata={{ parent: props.metaData }}
-            ></Button>
-            <Button disabled={moveLeftDisabled} type="button" icon={moveToSourceIcon} onClick={moveLeft} pt={ptm('moveToSourceButton')} unstyled={unstyled} aria-label={ariaLabel('moveToSource')} __parentMetadata={{ parent: props.metaData }}></Button>
+            />
+            <Button disabled={moveLeftDisabled} type="button" icon={moveToSourceIcon} onClick={moveLeft} pt={ptm('moveToSourceButton')} unstyled={unstyled} aria-label={ariaLabel('moveToSource')} __parentMetadata={{ parent: props.metaData }} />
             <Button
                 disabled={moveAllLeftDisabled}
                 type="button"
@@ -165,7 +165,7 @@ export const PickListTransferControls = React.memo((props) => {
                 unstyled={unstyled}
                 aria-label={ariaLabel('moveAllToSource')}
                 __parentMetadata={{ parent: props.metaData }}
-            ></Button>
+            />
         </div>
     );
 });
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index b2f16e1956..9b958c2444 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -96,7 +96,7 @@ export const ProgressBar = React.memo(
             return (
                 <div id={props.id} ref={elementRef} {...rootProps}>
                     <div {...containerProps}>
-                        <div {...valueProps}></div>
+                        <div {...valueProps} />
                     </div>
                 </div>
             );
@@ -107,9 +107,13 @@ export const ProgressBar = React.memo(
             getElement: () => elementRef.current
         }));
 
-        if (props.mode === 'determinate') return createDeterminate();
-        else if (props.mode === 'indeterminate') return createIndeterminate();
-        else throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
+        if (props.mode === 'determinate') {
+            return createDeterminate();
+        } else if (props.mode === 'indeterminate') {
+            return createIndeterminate();
+        }
+
+        throw new Error(props.mode + ' is not a valid mode for the ProgressBar. Valid values are \'determinate\' and \'indeterminate\'');
     })
 );
 
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index e5efe1fc71..57c44fc926 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -85,25 +85,25 @@ export const Rating = React.memo(
 
         const onStarKeyDown = (event, value) => {
             switch (event.key) {
-                case 'Enter':
-                case 'Space':
-                    rate(event, value);
-                    event.preventDefault();
-                    break;
-                case 'ArrowLeft':
-                case 'ArrowUp':
-                    event.preventDefault();
-                    rate(event, props.value - 1 < 1 ? props.stars : props.value - 1);
-                    break;
-
-                case 'ArrowRight':
-                case 'ArrowDown':
-                    event.preventDefault();
-                    rate(event, props.value + 1 > props.stars ? 1 : props.value + 1);
-                    break;
-
-                default:
-                    break;
+            case 'Enter':
+            case 'Space':
+                rate(event, value);
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                rate(event, props.value - 1 < 1 ? props.stars : props.value - 1);
+                break;
+
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                rate(event, props.value + 1 > props.stars ? 1 : props.value + 1);
+                break;
+
+            default:
+                break;
             }
         };
 
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
index 0ce0432ccd..5825c1bedc 100644
--- a/components/lib/ripple/Ripple.js
+++ b/components/lib/ripple/Ripple.js
@@ -109,7 +109,9 @@ export const Ripple = React.memo(
             }
         });
 
-        if (!isRippleActive) return null;
+        if (!isRippleActive) {
+            return null;
+        }
 
         const rootProps = mergeProps(
             {
@@ -120,7 +122,7 @@ export const Ripple = React.memo(
             ptm('root')
         );
 
-        return <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd}></span>;
+        return <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd} />;
     })
 );
 
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
index 38d774d8ff..8142971860 100644
--- a/components/lib/scrollpanel/ScrollPanel.js
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -38,10 +38,10 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
     const calculateContainerHeight = () => {
         const containerStyles = getComputedStyle(containerRef.current);
         const xBarStyles = getComputedStyle(xBarRef.current);
-        const pureContainerHeight = DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles['height'], 10);
+        const pureContainerHeight = DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles.height, 10);
 
         if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
-            if (contentRef.current.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
+            if (contentRef.current.offsetHeight + parseInt(xBarStyles.height, 10) > parseInt(containerStyles['max-height'], 10)) {
                 containerRef.current.style.height = containerStyles['max-height'];
             } else {
                 containerRef.current.style.height =
@@ -175,53 +175,53 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
     const onKeyDown = (event) => {
         if (orientationState === 'vertical') {
             switch (event.code) {
-                case 'ArrowDown': {
-                    setTimer('scrollTop', props.step);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowUp': {
-                    setTimer('scrollTop', props.step * -1);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowLeft':
-
-                case 'ArrowRight': {
-                    event.preventDefault();
-                    break;
-                }
-
-                default:
-                    //no op
-                    break;
+            case 'ArrowDown': {
+                setTimer('scrollTop', props.step);
+                event.preventDefault();
+                break;
+            }
+
+            case 'ArrowUp': {
+                setTimer('scrollTop', props.step * -1);
+                event.preventDefault();
+                break;
+            }
+
+            case 'ArrowLeft':
+
+            case 'ArrowRight': {
+                event.preventDefault();
+                break;
+            }
+
+            default:
+                //no op
+                break;
             }
         } else if (orientationState === 'horizontal') {
             switch (event.code) {
-                case 'ArrowRight': {
-                    setTimer('scrollLeft', props.step);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowLeft': {
-                    setTimer('scrollLeft', props.step * -1);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowDown':
-
-                case 'ArrowUp': {
-                    event.preventDefault();
-                    break;
-                }
-
-                default:
-                    //no op
-                    break;
+            case 'ArrowRight': {
+                setTimer('scrollLeft', props.step);
+                event.preventDefault();
+                break;
+            }
+
+            case 'ArrowLeft': {
+                setTimer('scrollLeft', props.step * -1);
+                event.preventDefault();
+                break;
+            }
+
+            case 'ArrowDown':
+
+            case 'ArrowUp': {
+                event.preventDefault();
+                break;
+            }
+
+            default:
+                //no op
+                break;
             }
         }
     };
@@ -352,8 +352,8 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
                     {props.children}
                 </div>
             </div>
-            <div {...barXProps}></div>
-            <div {...barYProps}></div>
+            <div {...barXProps} />
+            <div {...barYProps} />
         </div>
     );
 });
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
index 043c5110bc..d96730814b 100644
--- a/components/lib/scrolltop/ScrollTop.js
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -57,7 +57,7 @@ export const ScrollTop = React.memo(
         };
 
         const onEnter = () => {
-            ZIndexUtils.set('overlay', scrollElementRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', scrollElementRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
         };
 
         const onEntered = () => {
@@ -76,8 +76,11 @@ export const ScrollTop = React.memo(
         }));
 
         React.useEffect(() => {
-            if (props.target === 'window') bindDocumentScrollListener();
-            else if (props.target === 'parent') bindParentScrollListener();
+            if (props.target === 'window') {
+                bindDocumentScrollListener();
+            } else if (props.target === 'parent') {
+                bindParentScrollListener();
+            }
         }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
         useUnmountEffect(() => {
@@ -128,7 +131,7 @@ export const ScrollTop = React.memo(
                         <Ripple />
                     </button>
                 </CSSTransition>
-                {isTargetParent && <span ref={helperRef} className="p-scrolltop-helper"></span>}
+                {isTargetParent && <span ref={helperRef} className="p-scrolltop-helper" />}
             </>
         );
     })
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 7834a6edd3..39fcd15108 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -64,11 +64,11 @@ export const SelectButton = React.memo(
         };
 
         const getOptionLabel = (option) => {
-            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
         };
 
         const getOptionValue = (option) => {
-            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
+            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option.value !== undefined ? option.value : option;
         };
 
         const isOptionDisabled = (option) => {
@@ -76,7 +76,7 @@ export const SelectButton = React.memo(
                 return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
             }
 
-            return option && option['disabled'] !== undefined ? option['disabled'] : false;
+            return option && option.disabled !== undefined ? option.disabled : false;
         };
 
         const isSelected = (option) => {
diff --git a/components/lib/selectbutton/SelectButtonItem.js b/components/lib/selectbutton/SelectButtonItem.js
index b000337096..19c3debb61 100644
--- a/components/lib/selectbutton/SelectButtonItem.js
+++ b/components/lib/selectbutton/SelectButtonItem.js
@@ -40,46 +40,52 @@ export const SelectButtonItem = React.memo((props) => {
 
     const onKeyDown = (event, index) => {
         switch (event.code) {
-            case 'Space': {
-                onClick(event, index);
-                event.preventDefault();
-                break;
-            }
+        case 'Space': {
+            onClick(event, index);
+            event.preventDefault();
+            break;
+        }
 
-            case 'ArrowDown':
+        case 'ArrowDown':
 
-            case 'ArrowRight': {
-                changeTabIndexes(event, 'next');
-                event.preventDefault();
-                break;
-            }
+        case 'ArrowRight': {
+            changeTabIndexes(event, 'next');
+            event.preventDefault();
+            break;
+        }
 
-            case 'ArrowUp':
+        case 'ArrowUp':
 
-            case 'ArrowLeft': {
-                changeTabIndexes(event, 'prev');
-                event.preventDefault();
-                break;
-            }
+        case 'ArrowLeft': {
+            changeTabIndexes(event, 'prev');
+            event.preventDefault();
+            break;
+        }
 
-            default:
-                break;
+        default:
+            break;
         }
     };
 
     const changeTabIndexes = (event, direction) => {
-        let firstTabableChild, index;
+        let firstTabableChild; let index;
 
         for (let i = 0; i <= props.elementRef.current.children.length - 1; i++) {
-            if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') firstTabableChild = { elem: props.elementRef.current.children[i], index: i };
+            if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') {
+                firstTabableChild = { elem: props.elementRef.current.children[i], index: i };
+            }
         }
 
         if (direction === 'prev') {
-            if (firstTabableChild.index === 0) index = props.elementRef.current.children.length - 1;
-            else index = firstTabableChild.index - 1;
+            if (firstTabableChild.index === 0) {
+                index = props.elementRef.current.children.length - 1;
+            } else {
+                index = firstTabableChild.index - 1;
+            }
+        } else if (firstTabableChild.index === props.elementRef.current.children.length - 1) {
+            index = 0;
         } else {
-            if (firstTabableChild.index === props.elementRef.current.children.length - 1) index = 0;
-            else index = firstTabableChild.index + 1;
+            index = firstTabableChild.index + 1;
         }
 
         props.setFocusedIndex(index);
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
index 512500b939..25fc2a79e3 100644
--- a/components/lib/sidebar/Sidebar.js
+++ b/components/lib/sidebar/Sidebar.js
@@ -138,7 +138,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
 
     useUpdateEffect(() => {
         if (maskVisibleState) {
-            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['modal']) || PrimeReact.zIndex['modal']);
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
             setVisibleState(true);
         }
     }, [maskVisibleState]);
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
index e356dceffc..77dc99917d 100644
--- a/components/lib/skeleton/Skeleton.js
+++ b/components/lib/skeleton/Skeleton.js
@@ -36,7 +36,7 @@ export const Skeleton = React.memo(
             ptm('root')
         );
 
-        return <div {...rootProps}></div>;
+        return <div {...rootProps} />;
     })
 );
 
diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
index e3a67fb3da..6f5e90ad86 100644
--- a/components/lib/slidemenu/SlideMenu.js
+++ b/components/lib/slidemenu/SlideMenu.js
@@ -91,7 +91,7 @@ export const SlideMenu = React.memo(
 
         const onEnter = () => {
             if (props.autoZIndex) {
-                ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
+                ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
             }
 
             DomHandler.addStyles(menuRef.current, { position: 'absolute', top: '0', left: '0' });
diff --git a/components/lib/slidemenu/SlideMenuSub.js b/components/lib/slidemenu/SlideMenuSub.js
index 56050a1cf0..3058479e23 100644
--- a/components/lib/slidemenu/SlideMenuSub.js
+++ b/components/lib/slidemenu/SlideMenuSub.js
@@ -59,7 +59,7 @@ export const SlideMenuSub = React.memo((props) => {
             ptm('separator', { hostName: props.hostName })
         );
 
-        return <li {...separatorProps}></li>;
+        return <li {...separatorProps} />;
     };
 
     const createSubmenu = (item, index) => {
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index e291592e6a..cc55ab1c17 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -110,38 +110,38 @@ export const Slider = React.memo(
             const key = event.key;
 
             switch (key) {
-                case 'ArrowRight':
-                case 'ArrowUp':
-                    spin(event, 1);
-                    break;
-
-                case 'ArrowLeft':
-                case 'ArrowDown':
-                    spin(event, -1);
-                    break;
-
-                case 'PageUp':
-                    spin(event, 10);
-                    event.preventDefault();
-                    break;
-
-                case 'PageDown':
-                    spin(event, -10);
-                    event.preventDefault();
-                    break;
-
-                case 'Home':
-                    spin(event, -value);
-                    event.preventDefault();
-                    break;
-
-                case 'End':
-                    spin(event, props.max);
-                    event.preventDefault();
-                    break;
-
-                default:
-                    break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                spin(event, 1);
+                break;
+
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                spin(event, -1);
+                break;
+
+            case 'PageUp':
+                spin(event, 10);
+                event.preventDefault();
+                break;
+
+            case 'PageDown':
+                spin(event, -10);
+                event.preventDefault();
+                break;
+
+            case 'Home':
+                spin(event, -value);
+                event.preventDefault();
+                break;
+
+            case 'End':
+                spin(event, props.max);
+                event.preventDefault();
+                break;
+
+            default:
+                break;
             }
         };
 
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index f692bdb36f..53e099299f 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -89,66 +89,66 @@ export const SpeedDial = React.memo(
 
         const onKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDown(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUp(event);
-                    break;
-
-                case 'ArrowLeft':
-                    onArrowLeft(event);
-                    break;
-
-                case 'ArrowRight':
-                    onArrowRight(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                case 'Space':
-                    onEnterKey(event);
-                    break;
-
-                case 'Escape':
-                    onEscapeKey(event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                default:
-                    break;
+            case 'ArrowDown':
+                onArrowDown(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUp(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeft(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRight(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+                onEscapeKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            default:
+                break;
             }
         };
 
         const onTogglerKeydown = (event) => {
             switch (event.code) {
-                case 'ArrowDown':
-                case 'ArrowLeft':
-                    onTogglerArrowDown(event);
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                onTogglerArrowDown(event);
 
-                    break;
+                break;
 
-                case 'ArrowUp':
-                case 'ArrowRight':
-                    onTogglerArrowUp(event);
+            case 'ArrowUp':
+            case 'ArrowRight':
+                onTogglerArrowUp(event);
 
-                    break;
+                break;
 
-                case 'Escape':
-                    onEscapeKey();
+            case 'Escape':
+                onEscapeKey();
 
-                    break;
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
@@ -566,7 +566,7 @@ export const SpeedDial = React.memo(
                     ptm('mask')
                 );
 
-                return <div {...maskProps}></div>;
+                return <div {...maskProps} />;
             }
 
             return null;
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index 962163df76..e2dea589c0 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -82,8 +82,13 @@ export const Splitter = React.memo(
         };
 
         const validateResize = (newPrevPanelSize, newNextPanelSize) => {
-            if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false;
-            if (newNextPanelSize > 100 || newNextPanelSize < 0) return false;
+            if (newPrevPanelSize > 100 || newPrevPanelSize < 0) {
+                return false;
+            }
+
+            if (newNextPanelSize > 100 || newNextPanelSize < 0) {
+                return false;
+            }
 
             if (props.children[prevPanelIndex.current].props && props.children[prevPanelIndex.current].props.minSize && props.children[prevPanelIndex.current].props.minSize > newPrevPanelSize) {
                 return false;
@@ -111,14 +116,14 @@ export const Splitter = React.memo(
 
         const getStorage = React.useCallback(() => {
             switch (props.stateStorage) {
-                case 'local':
-                    return window.localStorage;
+            case 'local':
+                return window.localStorage;
 
-                case 'session':
-                    return window.sessionStorage;
+            case 'session':
+                return window.sessionStorage;
 
-                default:
-                    throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
+            default:
+                throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
             }
         }, [props.stateStorage]);
 
@@ -131,7 +136,9 @@ export const Splitter = React.memo(
         const restoreState = React.useCallback(() => {
             const stateString = getStorage().getItem(props.stateKey);
 
-            if (stateString) setPanelSizes(JSON.parse(stateString));
+            if (stateString) {
+                setPanelSizes(JSON.parse(stateString));
+            }
         }, [getStorage, props.stateKey]);
 
         const onResizeStart = (event, index, isKeyDown) => {
@@ -163,7 +170,7 @@ export const Splitter = React.memo(
         };
 
         const onResize = (event, step = 0, isKeyDown = false) => {
-            let newPos, newNextPanelSize, newPrevPanelSize;
+            let newPos; let newNextPanelSize; let newPrevPanelSize;
             const pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
             const pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
 
@@ -176,8 +183,11 @@ export const Splitter = React.memo(
                     newNextPanelSize = (100 * (nextPanelSize.current + step)) / size.current;
                 }
             } else {
-                if (horizontal) newPos = (pageX * 100) / size.current - (startPos.current * 100) / size.current;
-                else newPos = (pageY * 100) / size.current - (startPos.current * 100) / size.current;
+                if (horizontal) {
+                    newPos = (pageX * 100) / size.current - (startPos.current * 100) / size.current;
+                } else {
+                    newPos = (pageY * 100) / size.current - (startPos.current * 100) / size.current;
+                }
 
                 newPrevPanelSize = prevPanelSize.current + newPos;
                 newNextPanelSize = nextPanelSize.current - newPos;
@@ -196,7 +206,9 @@ export const Splitter = React.memo(
                 });
             }
 
-            if (isStateful) saveState(sizes);
+            if (isStateful) {
+                saveState(sizes);
+            }
 
             setPanelSizes(sizes);
 
@@ -216,72 +228,72 @@ export const Splitter = React.memo(
             const minSize = (props.children[index].props && props.children[index].props.minSize) || 0;
 
             switch (event.code) {
-                case 'ArrowLeft': {
-                    if (horizontal) {
-                        setTimer(event, index, props.step * -1);
-                    }
-
-                    event.preventDefault();
-                    break;
+            case 'ArrowLeft': {
+                if (horizontal) {
+                    setTimer(event, index, props.step * -1);
                 }
 
-                case 'ArrowRight': {
-                    if (horizontal) {
-                        setTimer(event, index, props.step);
-                    }
+                event.preventDefault();
+                break;
+            }
 
-                    event.preventDefault();
-                    break;
+            case 'ArrowRight': {
+                if (horizontal) {
+                    setTimer(event, index, props.step);
                 }
 
-                case 'ArrowDown': {
-                    if (!horizontal) {
-                        setTimer(event, index, props.step * -1);
-                    }
+                event.preventDefault();
+                break;
+            }
 
-                    event.preventDefault();
-                    break;
+            case 'ArrowDown': {
+                if (!horizontal) {
+                    setTimer(event, index, props.step * -1);
                 }
 
-                case 'ArrowUp': {
-                    if (!horizontal) {
-                        setTimer(event, index, props.step);
-                    }
+                event.preventDefault();
+                break;
+            }
 
-                    event.preventDefault();
-                    break;
+            case 'ArrowUp': {
+                if (!horizontal) {
+                    setTimer(event, index, props.step);
                 }
 
-                case 'Home': {
-                    resizePanel(index, 100 - minSize, minSize);
+                event.preventDefault();
+                break;
+            }
 
-                    event.preventDefault();
-                    break;
-                }
+            case 'Home': {
+                resizePanel(index, 100 - minSize, minSize);
 
-                case 'End': {
-                    resizePanel(index, minSize, 100 - minSize);
+                event.preventDefault();
+                break;
+            }
 
-                    event.preventDefault();
-                    break;
-                }
+            case 'End': {
+                resizePanel(index, minSize, 100 - minSize);
 
-                case 'NumpadEnter':
+                event.preventDefault();
+                break;
+            }
 
-                case 'Enter': {
-                    if (prevSize.current >= 100 - (minSize || 5)) {
-                        resizePanel(index, minSize, 100 - minSize);
-                    } else {
-                        resizePanel(index, 100 - minSize, minSize);
-                    }
+            case 'NumpadEnter':
 
-                    event.preventDefault();
-                    break;
+            case 'Enter': {
+                if (prevSize.current >= 100 - (minSize || 5)) {
+                    resizePanel(index, minSize, 100 - minSize);
+                } else {
+                    resizePanel(index, 100 - minSize, minSize);
                 }
 
-                default:
-                    //no op
-                    break;
+                event.preventDefault();
+                break;
+            }
+
+            default:
+                //no op
+                break;
             }
         };
 
@@ -360,7 +372,7 @@ export const Splitter = React.memo(
             panelElements.map((panelElement, i) => {
                 prevSize.current = panelSize(panelSizes, 0);
 
-                if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']") && DomHandler.find(panelElement, "[data-pc-section='root']"))) {
+                if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, '[data-pc-name=\'splitter\']') && DomHandler.find(panelElement, '[data-pc-section=\'root\']'))) {
                     !isUnstyled() && DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
                     panelElement.setAttribute('data-p-splitter-panel-nested', true);
                     setNested(true);
@@ -370,7 +382,9 @@ export const Splitter = React.memo(
         }, []);
 
         React.useEffect(() => {
-            if (isStateful) restoreState();
+            if (isStateful) {
+                restoreState();
+            }
         }, [restoreState, isStateful]);
 
         const createPanel = (panel, index) => {
@@ -412,7 +426,7 @@ export const Splitter = React.memo(
 
             const gutter = index !== props.children.length - 1 && (
                 <div {...gutterProps}>
-                    <div {...gutterHandlerProps}></div>
+                    <div {...gutterHandlerProps} />
                 </div>
             );
 
diff --git a/components/lib/splitter/Splitter.spec.js b/components/lib/splitter/Splitter.spec.js
index 5c1cbe57e9..10e15f3489 100644
--- a/components/lib/splitter/Splitter.spec.js
+++ b/components/lib/splitter/Splitter.spec.js
@@ -66,7 +66,7 @@ describe('Splitter', () => {
     );
     snapshot(
         <>
-            <Splitter style={{ height: '300px' }} layout="vertical"></Splitter>
+            <Splitter style={{ height: '300px' }} layout="vertical" />
         </>,
         'Without panels'
     );
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index d9c64d538b..d0a76ffb8c 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -59,39 +59,39 @@ export const Steps = React.memo(
             }
 
             switch (event.code) {
-                case 'ArrowRight':
-                    navigateToNextItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'ArrowLeft':
-                    navigateToPrevItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'Home':
-                    navigateToFirstItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'End':
-                    navigateToLastItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'Tab':
-                    //no op
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                case 'Space':
-                    itemClick(event, item, index);
-                    event.preventDefault();
-                    break;
-
-                default:
-                    break;
+            case 'ArrowRight':
+                navigateToNextItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'ArrowLeft':
+                navigateToPrevItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'Home':
+                navigateToFirstItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'End':
+                navigateToLastItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'Tab':
+                //no op
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                itemClick(event, item, index);
+                event.preventDefault();
+                break;
+
+            default:
+                break;
             }
         };
 
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
index 2665092455..6673565d85 100644
--- a/components/lib/styleclass/StyleClass.js
+++ b/components/lib/styleclass/StyleClass.js
@@ -63,8 +63,11 @@ export const StyleClass = React.forwardRef((inProps, ref) => {
             targetRef.current = resolveTarget();
 
             if (props.toggleClassName) {
-                if (DomHandler.hasClass(targetRef.current, props.toggleClassName)) DomHandler.removeClass(targetRef.current, props.toggleClassName);
-                else DomHandler.addClass(targetRef.current, props.toggleClassName);
+                if (DomHandler.hasClass(targetRef.current, props.toggleClassName)) {
+                    DomHandler.removeClass(targetRef.current, props.toggleClassName);
+                } else {
+                    DomHandler.addClass(targetRef.current, props.toggleClassName);
+                }
             } else {
                 DomHandler.isVisible(targetRef.current) ? leave() : enter();
             }
@@ -158,20 +161,20 @@ export const StyleClass = React.forwardRef((inProps, ref) => {
         }
 
         switch (props.selector) {
-            case '@next':
-                return elementRef.current && elementRef.current.nextElementSibling;
+        case '@next':
+            return elementRef.current && elementRef.current.nextElementSibling;
 
-            case '@prev':
-                return elementRef.current && elementRef.current.previousElementSibling;
+        case '@prev':
+            return elementRef.current && elementRef.current.previousElementSibling;
 
-            case '@parent':
-                return elementRef.current && elementRef.current.parentElement;
+        case '@parent':
+            return elementRef.current && elementRef.current.parentElement;
 
-            case '@grandparent':
-                return elementRef.current && elementRef.current.parentElement.parentElement;
+        case '@grandparent':
+            return elementRef.current && elementRef.current.parentElement.parentElement;
 
-            default:
-                return document.querySelector(props.selector);
+        default:
+            return document.querySelector(props.selector);
         }
     };
 
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index 541dfbf3d0..5c0bf99a81 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -116,39 +116,39 @@ export const TabMenu = React.memo(
 
         const onKeyDownItem = (event, item, index) => {
             switch (event.code) {
-                case 'ArrowRight':
-                    navigateToNextItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'ArrowLeft':
-                    navigateToPrevItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'Home':
-                    navigateToFirstItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'End':
-                    navigateToLastItem(event.target);
-                    event.preventDefault();
-                    break;
-
-                case 'Space':
-                case 'Enter':
-                case 'NumpadEnter':
-                    itemClick(event, item, index);
-                    event.preventDefault();
-                    break;
-
-                case 'Tab':
-                    onTabKey();
-                    break;
-
-                default:
-                    break;
+            case 'ArrowRight':
+                navigateToNextItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'ArrowLeft':
+                navigateToPrevItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'Home':
+                navigateToFirstItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'End':
+                navigateToLastItem(event.target);
+                event.preventDefault();
+                break;
+
+            case 'Space':
+            case 'Enter':
+            case 'NumpadEnter':
+                itemClick(event, item, index);
+                event.preventDefault();
+                break;
+
+            case 'Tab':
+                onTabKey();
+                break;
+
+            default:
+                break;
             }
         };
 
@@ -340,7 +340,7 @@ export const TabMenu = React.memo(
                 <div {...rootProps}>
                     <ul {...menuProps}>
                         {items}
-                        <li {...inkbarProps}></li>
+                        <li {...inkbarProps} />
                     </ul>
                 </div>
             );
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index 8e70c16a9d..8e453fd0c4 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -115,8 +115,11 @@ export const TabView = React.forwardRef((inProps, ref) => {
                 return;
             }
 
-            if (props.onTabChange) props.onTabChange({ originalEvent: event, index });
-            else setActiveIndexState(index);
+            if (props.onTabChange) {
+                props.onTabChange({ originalEvent: event, index });
+            } else {
+                setActiveIndexState(index);
+            }
         }
 
         updateScrollBar({ index });
@@ -124,38 +127,38 @@ export const TabView = React.forwardRef((inProps, ref) => {
 
     const onKeyDown = (event, tab, index) => {
         switch (event.code) {
-            case 'ArrowLeft':
-                onTabArrowLeftKey(event);
-                break;
-
-            case 'ArrowRight':
-                onTabArrowRightKey(event);
-                break;
-
-            case 'Home':
-                onTabHomeKey(event);
-                break;
-
-            case 'End':
-                onTabEndKey(event);
-                break;
-
-            case 'PageDown':
-                onPageDownKey(event);
-                break;
-
-            case 'PageUp':
-                onPageUpKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                onTabEnterKey(event, tab, index);
-                break;
-
-            default:
-                break;
+        case 'ArrowLeft':
+            onTabArrowLeftKey(event);
+            break;
+
+        case 'ArrowRight':
+            onTabArrowRightKey(event);
+            break;
+
+        case 'Home':
+            onTabHomeKey(event);
+            break;
+
+        case 'End':
+            onTabEndKey(event);
+            break;
+
+        case 'PageDown':
+            onPageDownKey(event);
+            break;
+
+        case 'PageUp':
+            onPageUpKey(event);
+            break;
+
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+            onTabEnterKey(event, tab, index);
+            break;
+
+        default:
+            break;
         }
     };
 
@@ -289,8 +292,11 @@ export const TabView = React.forwardRef((inProps, ref) => {
         setForwardIsDisabledState(false);
         setHiddenTabsState([]);
 
-        if (props.onTabChange) props.onTabChange({ index: activeIndex });
-        else setActiveIndexState(props.activeIndex);
+        if (props.onTabChange) {
+            props.onTabChange({ index: activeIndex });
+        } else {
+            setActiveIndexState(props.activeIndex);
+        }
     };
 
     React.useEffect(() => {
@@ -454,7 +460,7 @@ export const TabView = React.forwardRef((inProps, ref) => {
             <div {...navContentProps}>
                 <ul {...navProps}>
                     {headers}
-                    <li {...inkbarProps}></li>
+                    <li {...inkbarProps} />
                 </ul>
             </div>
         );
diff --git a/components/lib/tag/Tag.spec.js b/components/lib/tag/Tag.spec.js
index 6d8e478169..8b240f3ec1 100644
--- a/components/lib/tag/Tag.spec.js
+++ b/components/lib/tag/Tag.spec.js
@@ -5,7 +5,7 @@ import { snapshot } from '../../test';
 
 describe('Tag', () => {
     snapshot(<Tag />, 'default');
-    snapshot(<Tag value={`jest`} />, 'value');
+    snapshot(<Tag value={'jest'} />, 'value');
     snapshot(<Tag severity="success" />, 'sevrity success');
     snapshot(<Tag severity="info" />, 'sevrity info');
     snapshot(<Tag severity="warning" />, 'sevrity warning');
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index acaa97fb76..625c38447b 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -46,35 +46,35 @@ export const Terminal = React.memo(
 
         const onKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowUp':
-                    if (commandsState && commandsState.length) {
-                        const prevIndex = indexState - 1 < 0 ? commandsState.length - 1 : indexState - 1;
-                        const command = commandsState[prevIndex];
+            case 'ArrowUp':
+                if (commandsState && commandsState.length) {
+                    const prevIndex = indexState - 1 < 0 ? commandsState.length - 1 : indexState - 1;
+                    const command = commandsState[prevIndex];
 
-                        setIndexState(prevIndex);
-                        setCommandTextState(command.text);
-                    }
+                    setIndexState(prevIndex);
+                    setCommandTextState(command.text);
+                }
 
-                    break;
+                break;
 
-                case 'Enter':
-                case 'NumpadEnter':
-                    if (!!commandTextState) {
-                        let newCommands = [...commandsState];
+            case 'Enter':
+            case 'NumpadEnter':
+                if (commandTextState) {
+                    let newCommands = [...commandsState];
 
-                        newCommands.push({ text: commandTextState });
+                    newCommands.push({ text: commandTextState });
 
-                        setIndexState((prevIndex) => prevIndex + 1);
-                        setCommandTextState('');
-                        setCommandsState(newCommands);
-                        setEmittedTextState(commandTextState);
-                        isEmitted.current = true;
-                    }
+                    setIndexState((prevIndex) => prevIndex + 1);
+                    setCommandTextState('');
+                    setCommandsState(newCommands);
+                    setEmittedTextState(commandTextState);
+                    isEmitted.current = true;
+                }
 
-                    break;
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index 9d037dffcf..8659dc9245 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -124,69 +124,71 @@ export const TieredMenu = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    onArrowUpKey(event);
-                    break;
-
-                case 'ArrowLeft':
-                    onArrowLeftKey(event);
-                    break;
-
-                case 'ArrowRight':
-                    onArrowRightKey(event);
-                    break;
-
-                case 'Home':
-                    onHomeKey(event);
-                    break;
-
-                case 'End':
-                    onEndKey(event);
-                    break;
-
-                case 'Space':
-                    onSpaceKey(event);
-                    break;
-
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Escape':
-                    props.popup && DomHandler.focus(targetRef.current);
-                    onEscapeKey(event);
-                    break;
-
-                case 'Tab':
-                    onTabKey(event);
-                    break;
-
-                case 'PageDown':
-                case 'PageUp':
-                case 'Backspace':
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    //NOOP
-                    break;
-
-                default:
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        searchItems(event.key);
-                    }
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
 
-                    break;
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+                props.popup && DomHandler.focus(targetRef.current);
+                onEscapeKey(event);
+                break;
+
+            case 'Tab':
+                onTabKey(event);
+                break;
+
+            case 'PageDown':
+            case 'PageUp':
+            case 'Backspace':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
+                break;
+
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    searchItems(event.key);
+                }
+
+                break;
             }
         };
 
         const onItemChange = (event) => {
             const { processedItem, isFocus } = event;
 
-            if (ObjectUtils.isEmpty(processedItem)) return;
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
 
             const { index, key, level, parentKey, items } = processedItem;
             const grouped = ObjectUtils.isNotEmpty(items);
@@ -233,17 +235,15 @@ export const TieredMenu = React.memo(
                         setDirty(true);
                     }
                 }, 0);
+            } else if (grouped) {
+                DomHandler.focus(menuElement);
+                onItemChange(event);
             } else {
-                if (grouped) {
-                    DomHandler.focus(menuElement);
-                    onItemChange(event);
-                } else {
-                    const rootProcessedItem = root ? processedItem : activeItemPath.find((p) => p.parentKey === '');
-                    const rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
+                const rootProcessedItem = root ? processedItem : activeItemPath.find((p) => p.parentKey === '');
+                const rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
 
-                    hide(originalEvent, true);
-                    setFocusedItemInfo({ index: rootProcessedItemIndex, parentKey: rootProcessedItem ? rootProcessedItem.parentKey : '' });
-                }
+                hide(originalEvent, true);
+                setFocusedItemInfo({ index: rootProcessedItemIndex, parentKey: rootProcessedItem ? rootProcessedItem.parentKey : '' });
             }
         };
 
@@ -513,7 +513,7 @@ export const TieredMenu = React.memo(
                         parentKey
                     };
 
-                    newItem['items'] = createProcessedItems(item.items, level + 1, newItem, key);
+                    newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
                     processedItems.push(newItem);
                 });
 
@@ -571,7 +571,7 @@ export const TieredMenu = React.memo(
 
         const onEnter = () => {
             if (props.autoZIndex) {
-                ZIndexUtils.set('menu', containerRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
+                ZIndexUtils.set('menu', containerRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
             }
 
             DomHandler.addStyles(containerRef.current, { position: 'absolute', top: '0', left: '0' });
diff --git a/components/lib/tieredmenu/TieredMenuSub.js b/components/lib/tieredmenu/TieredMenuSub.js
index e553659b3c..649f50fca3 100644
--- a/components/lib/tieredmenu/TieredMenuSub.js
+++ b/components/lib/tieredmenu/TieredMenuSub.js
@@ -126,7 +126,7 @@ export const TieredMenuSub = React.memo(
                 ptm('separator', { hostName: props.hostName })
             );
 
-            return <li {...separatorProps}></li>;
+            return <li {...separatorProps} />;
         };
 
         const createSubmenu = (processedItem, index) => {
diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js
index 0aa175de3e..920f0c27e3 100644
--- a/components/lib/timeline/Timeline.js
+++ b/components/lib/timeline/Timeline.js
@@ -41,14 +41,14 @@ export const Timeline = React.memo(
                         },
                         getPTOptions('marker', index)
                     );
-                    const marker = ObjectUtils.getJSXElement(props.marker, item, index) || <div {...markerProps}></div>;
+                    const marker = ObjectUtils.getJSXElement(props.marker, item, index) || <div {...markerProps} />;
                     const connectorProps = mergeProps(
                         {
                             className: cx('connector')
                         },
                         getPTOptions('connector', index)
                     );
-                    const connector = index !== props.value.length - 1 && <div {...connectorProps}></div>;
+                    const connector = index !== props.value.length - 1 && <div {...connectorProps} />;
                     const content = ObjectUtils.getJSXElement(props.content, item, index);
 
                     const eventProps = mergeProps(
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
index f42c076322..12cf4f1b42 100644
--- a/components/lib/toast/Toast.js
+++ b/components/lib/toast/Toast.js
@@ -98,7 +98,7 @@ export const Toast = React.memo(
         };
 
         useUpdateEffect(() => {
-            ZIndexUtils.set('toast', containerRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['toast']) || PrimeReact.zIndex['toast']);
+            ZIndexUtils.set('toast', containerRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.toast) || PrimeReact.zIndex.toast);
         }, [messagesState, props.baseZIndex]);
 
         useUnmountEffect(() => {
diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js
index 7c7f4f24a8..4158ae17ce 100644
--- a/components/lib/toast/ToastMessage.js
+++ b/components/lib/toast/ToastMessage.js
@@ -130,20 +130,20 @@ export const ToastMessage = React.memo(
 
                 if (!_icon) {
                     switch (severity) {
-                        case 'info':
-                            icon = <InfoCircleIcon {...iconProps} />;
-                            break;
-                        case 'warn':
-                            icon = <ExclamationTriangleIcon {...iconProps} />;
-                            break;
-                        case 'error':
-                            icon = <TimesCircleIcon {...iconProps} />;
-                            break;
-                        case 'success':
-                            icon = <CheckIcon {...iconProps} />;
-                            break;
-                        default:
-                            break;
+                    case 'info':
+                        icon = <InfoCircleIcon {...iconProps} />;
+                        break;
+                    case 'warn':
+                        icon = <ExclamationTriangleIcon {...iconProps} />;
+                        break;
+                    case 'error':
+                        icon = <TimesCircleIcon {...iconProps} />;
+                        break;
+                    case 'success':
+                        icon = <CheckIcon {...iconProps} />;
+                        break;
+                    default:
+                        break;
                     }
                 }
 
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index d2d2e18de9..9804229985 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -140,7 +140,7 @@ export const Tooltip = React.memo(
                 const { pageX: x, pageY: y } = currentMouseEvent.current;
 
                 if (props.autoZIndex && !ZIndexUtils.get(elementRef.current)) {
-                    ZIndexUtils.set('tooltip', elementRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['tooltip']) || PrimeReact.zIndex['tooltip']);
+                    ZIndexUtils.set('tooltip', elementRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.tooltip) || PrimeReact.zIndex.tooltip);
                 }
 
                 elementRef.current.style.left = '';
@@ -213,9 +213,9 @@ export const Tooltip = React.memo(
         };
 
         const align = (target, coordinate, position) => {
-            let left = 0,
-                top = 0,
-                currentPosition = position || positionState;
+            let left = 0;
+            let top = 0;
+            let currentPosition = position || positionState;
 
             if ((isMouseTrack(target) || currentPosition == 'mouse') && coordinate) {
                 const _containerSize = {
@@ -229,25 +229,25 @@ export const Tooltip = React.memo(
                 let { top: mouseTrackTop, left: mouseTrackLeft } = getMouseTrackPosition(target);
 
                 switch (currentPosition) {
-                    case 'left':
-                        left -= _containerSize.width + mouseTrackLeft;
-                        top -= _containerSize.height / 2 - mouseTrackTop;
-                        break;
-                    case 'right':
-                    case 'mouse':
-                        left += mouseTrackLeft;
-                        top -= _containerSize.height / 2 - mouseTrackTop;
-                        break;
-                    case 'top':
-                        left -= _containerSize.width / 2 - mouseTrackLeft;
-                        top -= _containerSize.height + mouseTrackTop;
-                        break;
-                    case 'bottom':
-                        left -= _containerSize.width / 2 - mouseTrackLeft;
-                        top += mouseTrackTop;
-                        break;
-                    default:
-                        break;
+                case 'left':
+                    left = left - (_containerSize.width + mouseTrackLeft);
+                    top = top - (_containerSize.height / 2 - mouseTrackTop);
+                    break;
+                case 'right':
+                case 'mouse':
+                    left = left + mouseTrackLeft;
+                    top = top - (_containerSize.height / 2 - mouseTrackTop);
+                    break;
+                case 'top':
+                    left = left - (_containerSize.width / 2 - mouseTrackLeft);
+                    top = top - (_containerSize.height + mouseTrackTop);
+                    break;
+                case 'bottom':
+                    left = left - (_containerSize.width / 2 - mouseTrackLeft);
+                    top = top + mouseTrackTop;
+                    break;
+                default:
+                    break;
                 }
 
                 if (left <= 0 || containerSize.current.width > _containerSize.width) {
@@ -285,8 +285,11 @@ export const Tooltip = React.memo(
             if (elementRef.current) {
                 const style = getComputedStyle(elementRef.current);
 
-                if (position === 'left') elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';
-                else if (position === 'top') elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
+                if (position === 'left') {
+                    elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';
+                } else if (position === 'top') {
+                    elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
+                }
             }
         };
 
@@ -328,7 +331,7 @@ export const Tooltip = React.memo(
 
             const delay = getTargetOption(currentTargetRef.current, delayProp.toLowerCase()) || props[delayProp];
 
-            !!delay ? (timeouts.current[`${delayProp}`] = setTimeout(() => callback(), delay)) : callback();
+            delay ? (timeouts.current[`${delayProp}`] = setTimeout(() => callback(), delay)) : callback();
         };
 
         const sendCallback = (callback, ...params) => {
@@ -357,7 +360,7 @@ export const Tooltip = React.memo(
                         const isInputElement = target.nodeName === 'INPUT';
 
                         if (isInputElement) {
-                            DomHandler.addMultipleClasses(wrapper, `p-tooltip-target-wrapper p-inputwrapper`);
+                            DomHandler.addMultipleClasses(wrapper, 'p-tooltip-target-wrapper p-inputwrapper');
                         } else {
                             DomHandler.addClass(wrapper, 'p-tooltip-target-wrapper');
                         }
@@ -367,9 +370,9 @@ export const Tooltip = React.memo(
                         target.hasWrapper = true;
 
                         return wrapper;
-                    } else {
-                        return target.parentElement;
                     }
+
+                    return target.parentElement;
                 } else if (target.hasWrapper) {
                     target.parentElement.replaceWith(...target.parentElement.childNodes);
                     delete target.hasWrapper;
@@ -518,7 +521,7 @@ export const Tooltip = React.memo(
 
             return (
                 <div ref={elementRef} {...rootProps}>
-                    <div {...arrowProps}></div>
+                    <div {...arrowProps} />
                     <div ref={textRef} {...textProps}>
                         {empty && props.children}
                     </div>
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 968f874e72..06ed45a083 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -111,7 +111,9 @@ export const Tree = React.memo(
                 }
 
                 return result;
-            } else return value;
+            }
+
+            return value;
         };
 
         const onDrop = (event) => {
@@ -125,11 +127,17 @@ export const Tree = React.memo(
                 let dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
                 let dropNode = findNode(value, event.path.split('-'));
 
-                if (dropNode.children) dropNode.children.push(dragNode);
-                else dropNode.children = [dragNode];
+                if (dropNode.children) {
+                    dropNode.children.push(dragNode);
+                } else {
+                    dropNode.children = [dragNode];
+                }
 
-                if (dragNodeParent) dragNodeParent.children.splice(dragState.current.index, 1);
-                else value.splice(dragState.current.index, 1);
+                if (dragNodeParent) {
+                    dragNodeParent.children.splice(dragState.current.index, 1);
+                } else {
+                    value.splice(dragState.current.index, 1);
+                }
 
                 if (props.onDragDrop) {
                     props.onDragDrop({
@@ -159,17 +167,24 @@ export const Tree = React.memo(
                 let dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
                 let siblings = areSiblings(dragState.current.path, event.path);
 
-                if (dragNodeParent) dragNodeParent.children.splice(dragState.current.index, 1);
-                else value.splice(dragState.current.index, 1);
+                if (dragNodeParent) {
+                    dragNodeParent.children.splice(dragState.current.index, 1);
+                } else {
+                    value.splice(dragState.current.index, 1);
+                }
 
                 if (event.position < 0) {
                     let dropIndex = siblings ? (dragState.current.index > event.index ? event.index : event.index - 1) : event.index;
 
-                    if (dropNodeParent) dropNodeParent.children.splice(dropIndex, 0, dragNode);
-                    else value.splice(dropIndex, 0, dragNode);
+                    if (dropNodeParent) {
+                        dropNodeParent.children.splice(dropIndex, 0, dragNode);
+                    } else {
+                        value.splice(dropIndex, 0, dragNode);
+                    }
+                } else if (dropNodeParent) {
+                    dropNodeParent.children.push(dragNode);
                 } else {
-                    if (dropNodeParent) dropNodeParent.children.push(dragNode);
-                    else value.push(dragNode);
+                    value.push(dragNode);
                 }
 
                 if (props.onDragDrop) {
@@ -187,19 +202,19 @@ export const Tree = React.memo(
         const validateDrop = (dragPath, dropPath) => {
             if (!dragPath) {
                 return false;
-            } else {
-                //same node
-                if (dragPath === dropPath) {
-                    return false;
-                }
+            }
 
-                //parent dropped on an descendant
-                if (dropPath.indexOf(dragPath) === 0) {
-                    return false;
-                }
+            //same node
+            if (dragPath === dropPath) {
+                return false;
+            }
 
-                return true;
+            //parent dropped on an descendant
+            if (dropPath.indexOf(dragPath) === 0) {
+                return false;
             }
+
+            return true;
         };
 
         const validateDropNode = (dragPath, dropPath) => {
@@ -212,9 +227,9 @@ export const Tree = React.memo(
                 }
 
                 return true;
-            } else {
-                return false;
             }
+
+            return false;
         };
 
         const validateDropPoint = (event) => {
@@ -227,31 +242,34 @@ export const Tree = React.memo(
                 }
 
                 return true;
-            } else {
-                return false;
             }
+
+            return false;
         };
 
         const areSiblings = (path1, path2) => {
-            if (path1.length === 1 && path2.length === 1) return true;
-            else return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
+            if (path1.length === 1 && path2.length === 1) {
+                return true;
+            }
+
+            return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
         };
 
         const findNode = (value, path) => {
             if (path.length === 0) {
                 return null;
-            } else {
-                const index = parseInt(path[0], 10);
-                const nextSearchRoot = value.children ? value.children[index] : value[index];
+            }
 
-                if (path.length === 1) {
-                    return nextSearchRoot;
-                } else {
-                    path.shift();
+            const index = parseInt(path[0], 10);
+            const nextSearchRoot = value.children ? value.children[index] : value[index];
 
-                    return findNode(nextSearchRoot, path);
-                }
+            if (path.length === 1) {
+                return nextSearchRoot;
             }
+
+            path.shift();
+
+            return findNode(nextSearchRoot, path);
         };
 
         const isNodeLeaf = (node) => {
@@ -468,11 +486,11 @@ export const Tree = React.memo(
                     const rootNodes = createRootChildren(value);
 
                     return createRootChildrenContainer(rootNodes);
-                } else {
-                    const emptyMessageNode = createEmptyMessageNode();
-
-                    return createRootChildrenContainer(emptyMessageNode);
                 }
+
+                const emptyMessageNode = createEmptyMessageNode();
+
+                return createRootChildrenContainer(emptyMessageNode);
             }
 
             return null;
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 4ee5a32b7c..6b335e922d 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -76,13 +76,11 @@ export const UITreeNode = React.memo((props) => {
                     node: props.node
                 });
             }
-        } else {
-            if (props.onCollapse) {
-                props.onCollapse({
-                    originalEvent: event,
-                    node: props.node
-                });
-            }
+        } else if (props.onCollapse) {
+            props.onCollapse({
+                originalEvent: event,
+                node: props.node
+            });
         }
     };
 
@@ -99,9 +97,9 @@ export const UITreeNode = React.memo((props) => {
             const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
 
             return findLastVisibleDescendant(lastChildElement);
-        } else {
-            return nodeElement;
         }
+
+        return nodeElement;
     };
 
     const getParentNodeElement = (nodeElement) => {
@@ -137,8 +135,11 @@ export const UITreeNode = React.memo((props) => {
                 selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
 
                 if (checked) {
-                    if (props.propagateSelectionDown) propagateDown(props.node, false, selectionKeys);
-                    else delete selectionKeys[props.node.key];
+                    if (props.propagateSelectionDown) {
+                        propagateDown(props.node, false, selectionKeys);
+                    } else {
+                        delete selectionKeys[props.node.key];
+                    }
 
                     if (props.propagateSelectionUp && props.onPropagateUp) {
                         props.onPropagateUp({
@@ -155,8 +156,11 @@ export const UITreeNode = React.memo((props) => {
                         });
                     }
                 } else {
-                    if (props.propagateSelectionDown) propagateDown(props.node, true, selectionKeys);
-                    else selectionKeys[props.node.key] = { checked: true };
+                    if (props.propagateSelectionDown) {
+                        propagateDown(props.node, true, selectionKeys);
+                    } else {
+                        selectionKeys[props.node.key] = { checked: true };
+                    }
 
                     if (props.propagateSelectionUp && props.onPropagateUp) {
                         props.onPropagateUp({
@@ -209,50 +213,46 @@ export const UITreeNode = React.memo((props) => {
                             });
                         }
                     }
-                } else {
-                    if (isSingleSelectionMode()) {
-                        if (selected) {
-                            selectionKeys = null;
-
-                            if (props.onUnselect) {
-                                props.onUnselect({
-                                    originalEvent: event,
-                                    node: props.node
-                                });
-                            }
-                        } else {
-                            selectionKeys = props.node.key;
+                } else if (isSingleSelectionMode()) {
+                    if (selected) {
+                        selectionKeys = null;
 
-                            if (props.onSelect) {
-                                props.onSelect({
-                                    originalEvent: event,
-                                    node: props.node
-                                });
-                            }
+                        if (props.onUnselect) {
+                            props.onUnselect({
+                                originalEvent: event,
+                                node: props.node
+                            });
                         }
                     } else {
-                        if (selected) {
-                            selectionKeys = { ...props.selectionKeys };
-                            delete selectionKeys[props.node.key];
+                        selectionKeys = props.node.key;
 
-                            if (props.onUnselect) {
-                                props.onUnselect({
-                                    originalEvent: event,
-                                    node: props.node
-                                });
-                            }
-                        } else {
-                            selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
-                            selectionKeys[props.node.key] = true;
-
-                            if (props.onSelect) {
-                                props.onSelect({
-                                    originalEvent: event,
-                                    node: props.node
-                                });
-                            }
+                        if (props.onSelect) {
+                            props.onSelect({
+                                originalEvent: event,
+                                node: props.node
+                            });
                         }
                     }
+                } else if (selected) {
+                    selectionKeys = { ...props.selectionKeys };
+                    delete selectionKeys[props.node.key];
+
+                    if (props.onUnselect) {
+                        props.onUnselect({
+                            originalEvent: event,
+                            node: props.node
+                        });
+                    }
+                } else {
+                    selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
+                    selectionKeys[props.node.key] = true;
+
+                    if (props.onSelect) {
+                        props.onSelect({
+                            originalEvent: event,
+                            node: props.node
+                        });
+                    }
                 }
             }
 
@@ -299,43 +299,45 @@ export const UITreeNode = React.memo((props) => {
     };
 
     const onKeyDown = (event) => {
-        if (!isSameNode(event)) return;
+        if (!isSameNode(event)) {
+            return;
+        }
 
         switch (event.code) {
-            case 'Tab':
-                onTabKey(event);
+        case 'Tab':
+            onTabKey(event);
 
-                break;
+            break;
 
-            case 'ArrowDown':
-                onArrowDown(event);
+        case 'ArrowDown':
+            onArrowDown(event);
 
-                break;
+            break;
 
-            case 'ArrowUp':
-                onArrowUp(event);
+        case 'ArrowUp':
+            onArrowUp(event);
 
-                break;
+            break;
 
-            case 'ArrowRight':
-                onArrowRight(event);
+        case 'ArrowRight':
+            onArrowRight(event);
 
-                break;
+            break;
 
-            case 'ArrowLeft':
-                onArrowLeft(event);
+        case 'ArrowLeft':
+            onArrowLeft(event);
 
-                break;
+            break;
 
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                onEnterKey(event);
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+            onEnterKey(event);
 
-                break;
+            break;
 
-            default:
-                break;
+        default:
+            break;
         }
     };
 
@@ -345,15 +347,13 @@ export const UITreeNode = React.memo((props) => {
 
         if (listElement) {
             focusRowChange(nodeElement, listElement.children[0]);
+        } else if (nodeElement.nextElementSibling) {
+            focusRowChange(nodeElement, nodeElement.nextElementSibling);
         } else {
-            if (nodeElement.nextElementSibling) {
-                focusRowChange(nodeElement, nodeElement.nextElementSibling);
-            } else {
-                let nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
+            let nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
 
-                if (nextSiblingAncestor) {
-                    focusRowChange(nodeElement, nextSiblingAncestor);
-                }
+            if (nextSiblingAncestor) {
+                focusRowChange(nodeElement, nextSiblingAncestor);
             }
         }
 
@@ -377,7 +377,9 @@ export const UITreeNode = React.memo((props) => {
     };
 
     const onArrowRight = (event) => {
-        if (isLeaf || expanded) return;
+        if (isLeaf || expanded) {
+            return;
+        }
 
         event.currentTarget.tabIndex = -1;
 
@@ -476,7 +478,9 @@ export const UITreeNode = React.memo((props) => {
         let checkedChildCount = 0;
 
         for (let child of props.node.children) {
-            if (selectionKeys[child.key] && selectionKeys[child.key].checked) checkedChildCount++;
+            if (selectionKeys[child.key] && selectionKeys[child.key].checked) {
+                checkedChildCount++;
+            }
         }
 
         const parentKey = props.node.key;
@@ -501,8 +505,11 @@ export const UITreeNode = React.memo((props) => {
     };
 
     const propagateDown = (node, check, selectionKeys) => {
-        if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
-        else delete selectionKeys[node.key];
+        if (check) {
+            selectionKeys[node.key] = { checked: true, partialChecked: false };
+        } else {
+            delete selectionKeys[node.key];
+        }
 
         if (node.children && node.children.length) {
             for (let i = 0; i < node.children.length; i++) {
@@ -512,8 +519,11 @@ export const UITreeNode = React.memo((props) => {
     };
 
     const isSelected = () => {
-        if (props.selectionMode && props.selectionKeys) return isSingleSelectionMode() ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
-        else return false;
+        if (props.selectionMode && props.selectionKeys) {
+            return isSingleSelectionMode() ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
+        }
+
+        return false;
     };
 
     const isChecked = () => {
@@ -767,7 +777,7 @@ export const UITreeNode = React.memo((props) => {
                 getPTOptions('droppoint')
             );
 
-            return <li {...droppointProps}></li>;
+            return <li {...droppointProps} />;
         }
 
         return null;
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 6cf20b4d8f..c321c69864 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -189,68 +189,77 @@ export const TreeSelect = React.memo(
 
         const onHeaderElementKeyDown = (event, isHideButton) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    event.preventDefault();
-                    setFocusToFocusableFirstNode();
+            case 'ArrowDown':
+                event.preventDefault();
+                setFocusToFocusableFirstNode();
 
-                    break;
+                break;
 
-                case 'ArrowUp':
-                    event.preventDefault();
-                    focusInputRef.current && DomHandler.focus(focusInputRef.current);
+            case 'ArrowUp':
+                event.preventDefault();
+                focusInputRef.current && DomHandler.focus(focusInputRef.current);
 
-                    break;
+                break;
 
-                case 'Space':
-                case 'Enter':
-                case 'NumpadEnter':
-                    event.preventDefault();
+            case 'Space':
+            case 'Enter':
+            case 'NumpadEnter':
+                event.preventDefault();
+
+                if (isHideButton) {
+                    hide();
+                }
 
-                    if (isHideButton) hide();
-                    break;
+                break;
 
-                case 'Escape':
-                    onEscapeKey(event);
-                    break;
+            case 'Escape':
+                onEscapeKey(event);
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
         const onKeyDown = (event) => {
             switch (event.code) {
-                case 'ArrowDown':
-                    onArrowDownKey(event);
-                    break;
-
-                case 'Space':
-                case 'Enter':
-                case 'NumpadEnter':
-                    onEnterKey(event);
-                    break;
-
-                case 'Escape':
-                    onEscapeKey(event);
-                    break;
-
-                case 'Tab':
-                    if (overlayVisibleState) {
-                        event.preventDefault();
-
-                        if (event.shiftKey) setFocusToFocusableFirstNode();
-                        else onTabKey(event);
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'Space':
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+                onEscapeKey(event);
+                break;
+
+            case 'Tab':
+                if (overlayVisibleState) {
+                    event.preventDefault();
+
+                    if (event.shiftKey) {
+                        setFocusToFocusableFirstNode();
+                    } else {
+                        onTabKey(event);
                     }
+                }
 
-                    break;
+                break;
 
-                default:
-                    break;
+            default:
+                break;
             }
         };
 
         const onArrowDownKey = (event) => {
-            if (overlayVisibleState) return;
+            if (overlayVisibleState) {
+                return;
+            }
+
             focusToTree.current = true;
             show();
 
@@ -306,7 +315,7 @@ export const TreeSelect = React.memo(
         };
 
         const onOverlayEnter = () => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
             DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             setFocusToFocusableFirstNode();
             alignOverlay();
@@ -564,13 +573,12 @@ export const TreeSelect = React.memo(
 
             if (props.valueTemplate) {
                 content = ObjectUtils.getJSXElement(props.valueTemplate, selectedNodes, props);
-            } else {
-                if (props.display === 'comma') {
-                    content = getLabel() || 'empty';
-                } else if (props.display === 'chip') {
-                    content = (
-                        <>
-                            {selectedNodes &&
+            } else if (props.display === 'comma') {
+                content = getLabel() || 'empty';
+            } else if (props.display === 'chip') {
+                content = (
+                    <>
+                        {selectedNodes &&
                                 selectedNodes.map((node, index) => {
                                     return (
                                         <div {...tokenProps} key={`${node.key}_${index}`}>
@@ -579,10 +587,9 @@ export const TreeSelect = React.memo(
                                     );
                                 })}
 
-                            {isValueEmpty && (props.placeholder || 'empty')}
-                        </>
-                    );
-                }
+                        {isValueEmpty && (props.placeholder || 'empty')}
+                    </>
+                );
             }
 
             return (
@@ -670,7 +677,7 @@ export const TreeSelect = React.memo(
                         value={props.options}
                         pt={ptm('tree')}
                         __parentMetadata={{ parent: metaData }}
-                    ></Tree>
+                    />
 
                     {hasNoOptions && <div {...emptyMessageProps}>{message}</div>}
                 </>
@@ -866,8 +873,8 @@ export const TreeSelect = React.memo(
                     header={header}
                     hide={hide}
                     footer={footer}
-                    firstHiddenFocusableElementOnOverlay={<span {...firstHiddenFocusableElementOnOverlayProps}></span>}
-                    lastHiddenFocusableElementOnOverlay={<span {...lastHiddenFocusableElementOnOverlayProps}></span>}
+                    firstHiddenFocusableElementOnOverlay={<span {...firstHiddenFocusableElementOnOverlayProps} />}
+                    lastHiddenFocusableElementOnOverlay={<span {...lastHiddenFocusableElementOnOverlayProps} />}
                     transitionOptions={props.transitionOptions}
                     in={overlayVisibleState}
                     onEnter={onOverlayEnter}
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index f9abcd6b1e..7fc25ced09 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -193,8 +193,11 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
             }
         }
 
-        if (index >= 0) multiSortMeta[index] = meta;
-        else multiSortMeta.push(meta);
+        if (index >= 0) {
+            multiSortMeta[index] = meta;
+        } else {
+            multiSortMeta.push(meta);
+        }
     };
 
     const removeSortMeta = (meta, multiSortMeta) => {
@@ -257,8 +260,11 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
     const sortMultiple = (data) => {
         let multiSortMeta = getMultiSortMeta();
 
-        if (multiSortMeta) return sortMultipleNodes(data, multiSortMeta);
-        else return data;
+        if (multiSortMeta) {
+            return sortMultipleNodes(data, multiSortMeta);
+        }
+
+        return data;
     };
 
     const sortMultipleNodes = (data, multiSortMeta) => {
@@ -311,8 +317,11 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
         let filters = getFilters();
         let newFilters = filters ? { ...filters } : {};
 
-        if (!isFilterBlank(event.value)) newFilters[event.field] = { value: event.value, matchMode: event.matchMode };
-        else if (newFilters[event.field]) delete newFilters[event.field];
+        if (!isFilterBlank(event.value)) {
+            newFilters[event.field] = { value: event.value, matchMode: event.matchMode };
+        } else if (newFilters[event.field]) {
+            delete newFilters[event.field];
+        }
 
         if (props.onFilter) {
             props.onFilter({
@@ -334,8 +343,11 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
 
     const isFilterBlank = (filter) => {
         if (filter !== null && filter !== undefined) {
-            if ((typeof filter === 'string' && filter.trim().length === 0) || (filter instanceof Array && filter.length === 0)) return true;
-            else return false;
+            if ((typeof filter === 'string' && filter.trim().length === 0) || (filter instanceof Array && filter.length === 0)) {
+                return true;
+            }
+
+            return false;
         }
 
         return true;
@@ -444,9 +456,9 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
             }
 
             return parent;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const resizeColGroup = (table, resizeColumnIndex, newColumnWidth, nextColumnWidth) => {
@@ -596,16 +608,19 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
     const findParentHeader = (element) => {
         if (element.nodeName === 'TH') {
             return element;
-        } else {
-            let parent = element.parentElement;
+        }
 
-            while (parent.nodeName !== 'TH') {
-                parent = parent.parentElement;
-                if (!parent) break;
-            }
+        let parent = element.parentElement;
 
-            return parent;
+        while (parent.nodeName !== 'TH') {
+            parent = parent.parentElement;
+
+            if (!parent) {
+                break;
+            }
         }
+
+        return parent;
     };
 
     const getColumnProp = (column, name) => {
@@ -675,9 +690,9 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
                         return orderedColumns.indexOf(item) < 0;
                     })
                 ];
-            } else {
-                return columns;
             }
+
+            return columns;
         }
 
         return null;
@@ -740,7 +755,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
                 let col = columns[j];
                 let filterMeta = filters ? filters[getColumnProp(col, 'field')] : null;
                 let filterField = getColumnProp(col, 'field');
-                let filterValue, filterConstraint, paramsWithoutNode, options;
+                let filterValue; let filterConstraint; let paramsWithoutNode; let options;
 
                 //local
                 if (filterMeta) {
@@ -863,8 +878,11 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
                 }
 
                 if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
-                    if (props.sortMode === 'single') data = sortSingle(data);
-                    else if (props.sortMode === 'multiple') data = sortMultiple(data);
+                    if (props.sortMode === 'single') {
+                        data = sortSingle(data);
+                    } else if (props.sortMode === 'multiple') {
+                        data = sortMultiple(data);
+                    }
                 }
             }
         }
@@ -1009,7 +1027,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
         const columns = getColumns();
         const frozenColumns = getFrozenColumns(columns);
         const scrollableColumns = frozenColumns ? getScrollableColumns(columns) : columns;
-        let frozenView, scrollableView;
+        let frozenView; let scrollableView;
 
         if (frozenColumns) {
             frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
@@ -1131,7 +1149,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
     const paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords);
     const paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords);
     const loader = createLoader();
-    const resizeHelper = props.resizableColumns && <div ref={resizerHelperRef} {...resizeHelperProps}></div>;
+    const resizeHelper = props.resizableColumns && <div ref={resizerHelperRef} {...resizeHelperProps} />;
     const reorderIndicatorUpProps = mergeProps(
         {
             className: ptCallbacks.cx('reorderIndicatorUp'),
diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
index 29912dc233..d9e39cc291 100644
--- a/components/lib/treetable/TreeTableBase.js
+++ b/components/lib/treetable/TreeTableBase.js
@@ -45,13 +45,13 @@ const classes = {
         options.filterOnly
             ? classNames('p-filter-column', { 'p-frozen-column': frozen })
             : classNames({
-                  'p-sortable-column': getColumnProp(column, 'sortable'),
-                  'p-highlight': sorted,
-                  'p-frozen-column': frozen,
-                  'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
-                  'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen,
-                  [`p-align-${align}`]: !!align
-              }),
+                'p-sortable-column': getColumnProp(column, 'sortable'),
+                'p-highlight': sorted,
+                'p-frozen-column': frozen,
+                'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
+                'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen,
+                [`p-align-${align}`]: !!align
+            }),
     columnResizer: 'p-column-resizer p-clickable',
     sortIcon: 'p-sortable-column-icon',
     row: ({ isSelected, rowProps: props }) => ({
diff --git a/components/lib/treetable/TreeTableBody.js b/components/lib/treetable/TreeTableBody.js
index be07a9a9a0..fb7e91bd2c 100644
--- a/components/lib/treetable/TreeTableBody.js
+++ b/components/lib/treetable/TreeTableBody.js
@@ -108,50 +108,46 @@ export const TreeTableBody = React.memo((props) => {
                             });
                         }
                     }
-                } else {
-                    if (isSingleSelectionMode) {
-                        if (selected) {
-                            selectionKeys = null;
-
-                            if (props.onUnselect) {
-                                props.onUnselect({
-                                    originalEvent: event,
-                                    node: node
-                                });
-                            }
-                        } else {
-                            selectionKeys = node.key;
+                } else if (isSingleSelectionMode) {
+                    if (selected) {
+                        selectionKeys = null;
 
-                            if (props.onSelect) {
-                                props.onSelect({
-                                    originalEvent: event,
-                                    node: node
-                                });
-                            }
+                        if (props.onUnselect) {
+                            props.onUnselect({
+                                originalEvent: event,
+                                node: node
+                            });
                         }
                     } else {
-                        if (selected) {
-                            selectionKeys = { ...props.selectionKeys };
-                            delete selectionKeys[node.key];
-
-                            if (props.onUnselect) {
-                                props.onUnselect({
-                                    originalEvent: event,
-                                    node: node
-                                });
-                            }
-                        } else {
-                            selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
-                            selectionKeys[node.key] = true;
+                        selectionKeys = node.key;
 
-                            if (props.onSelect) {
-                                props.onSelect({
-                                    originalEvent: event,
-                                    node: node
-                                });
-                            }
+                        if (props.onSelect) {
+                            props.onSelect({
+                                originalEvent: event,
+                                node: node
+                            });
                         }
                     }
+                } else if (selected) {
+                    selectionKeys = { ...props.selectionKeys };
+                    delete selectionKeys[node.key];
+
+                    if (props.onUnselect) {
+                        props.onUnselect({
+                            originalEvent: event,
+                            node: node
+                        });
+                    }
+                } else {
+                    selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
+                    selectionKeys[node.key] = true;
+
+                    if (props.onSelect) {
+                        props.onSelect({
+                            originalEvent: event,
+                            node: node
+                        });
+                    }
                 }
             }
 
@@ -165,8 +161,11 @@ export const TreeTableBody = React.memo((props) => {
     };
 
     const isSelected = (node) => {
-        if ((isSingleSelectionMode || isMultipleSelectionMode) && props.selectionKeys) return isSingleSelectionMode ? props.selectionKeys === node.key : props.selectionKeys[node.key] !== undefined;
-        else return false;
+        if ((isSingleSelectionMode || isMultipleSelectionMode) && props.selectionKeys) {
+            return isSingleSelectionMode ? props.selectionKeys === node.key : props.selectionKeys[node.key] !== undefined;
+        }
+
+        return false;
     };
 
     const createRow = (node, index) => {
@@ -219,41 +218,44 @@ export const TreeTableBody = React.memo((props) => {
             for (let i = startIndex; i < endIndex; i++) {
                 let rowData = props.value[i];
 
-                if (rowData) rows.push(createRow(props.value[i]));
-                else break;
+                if (rowData) {
+                    rows.push(createRow(props.value[i]));
+                } else {
+                    break;
+                }
             }
 
             return rows;
-        } else {
-            return props.value.map(createRow);
         }
+
+        return props.value.map(createRow);
     };
 
     const createEmptyMessage = () => {
         if (props.loading) {
             return null;
-        } else {
-            const colSpan = props.columns ? props.columns.length : null;
-            const content = ObjectUtils.getJSXElement(props.emptyMessage, { props: props.tableProps }) || localeOption('emptyMessage');
-            const emptyMessageProps = mergeProps(
-                {
-                    className: cx('emptyMessage')
-                },
-                getPTOptions('emptyMessage')
-            );
-            const emptyMessageCellProps = mergeProps(
-                {
-                    colSpan
-                },
-                getPTOptions('emptyMessageCell')
-            );
-
-            return (
-                <tr {...emptyMessageProps}>
-                    <td {...emptyMessageCellProps}>{content}</td>
-                </tr>
-            );
         }
+
+        const colSpan = props.columns ? props.columns.length : null;
+        const content = ObjectUtils.getJSXElement(props.emptyMessage, { props: props.tableProps }) || localeOption('emptyMessage');
+        const emptyMessageProps = mergeProps(
+            {
+                className: cx('emptyMessage')
+            },
+            getPTOptions('emptyMessage')
+        );
+        const emptyMessageCellProps = mergeProps(
+            {
+                colSpan
+            },
+            getPTOptions('emptyMessageCell')
+        );
+
+        return (
+            <tr {...emptyMessageProps}>
+                <td {...emptyMessageCellProps}>{content}</td>
+            </tr>
+        );
     };
 
     const content = props.value && props.value.length ? createRows() : createEmptyMessage();
diff --git a/components/lib/treetable/TreeTableBodyCell.js b/components/lib/treetable/TreeTableBodyCell.js
index 45cdbdf2a2..1f07244390 100644
--- a/components/lib/treetable/TreeTableBodyCell.js
+++ b/components/lib/treetable/TreeTableBodyCell.js
@@ -205,11 +205,15 @@ export const TreeTableBodyCell = (props) => {
     let content;
 
     if (editingState) {
-        if (columnEditor) content = ObjectUtils.getJSXElement(columnEditor, { node: props.node, rowData: props.rowData, value: ObjectUtils.resolveFieldData(props.node.data, props.field), field: props.field, rowIndex: props.rowIndex, props });
-        else throw new Error('Editor is not found on column.');
+        if (columnEditor) {
+            content = ObjectUtils.getJSXElement(columnEditor, { node: props.node, rowData: props.rowData, value: ObjectUtils.resolveFieldData(props.node.data, props.field), field: props.field, rowIndex: props.rowIndex, props });
+        } else {
+            throw new Error('Editor is not found on column.');
+        }
+    } else if (props.body) {
+        content = ObjectUtils.getJSXElement(props.body, props.node, { field: props.field, rowIndex: props.rowIndex, props });
     } else {
-        if (props.body) content = ObjectUtils.getJSXElement(props.body, props.node, { field: props.field, rowIndex: props.rowIndex, props });
-        else content = ObjectUtils.resolveFieldData(props.node.data, props.field);
+        content = ObjectUtils.resolveFieldData(props.node.data, props.field);
     }
 
     const editorKeyHelperProps = mergeProps(
diff --git a/components/lib/treetable/TreeTableFooter.js b/components/lib/treetable/TreeTableFooter.js
index 5dc22efdfc..70b55c0049 100644
--- a/components/lib/treetable/TreeTableFooter.js
+++ b/components/lib/treetable/TreeTableFooter.js
@@ -69,9 +69,9 @@ export const TreeTableFooter = React.memo((props) => {
             const footerRowProps = mergeProps(ptm('footerRow', { hostName: props.hostName }));
 
             return <tr {...footerRowProps}>{headerCells}</tr>;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const hasFooter = () => {
@@ -90,9 +90,9 @@ export const TreeTableFooter = React.memo((props) => {
         );
 
         return <tfoot {...tfootProps}>{content}</tfoot>;
-    } else {
-        return null;
     }
+
+    return null;
 });
 
 TreeTableFooter.displayName = 'TreeTableFooter';
diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
index 5d2bed3498..d8ffe16f2f 100644
--- a/components/lib/treetable/TreeTableHeader.js
+++ b/components/lib/treetable/TreeTableHeader.js
@@ -58,8 +58,11 @@ export const TreeTableHeader = React.memo((props) => {
 
     const onHeaderMouseDown = (event, column) => {
         if (props.reorderableColumns && getColumnProp(column, 'reorderable')) {
-            if (event.target.nodeName !== 'INPUT') event.currentTarget.draggable = true;
-            else if (event.target.nodeName === 'INPUT') event.currentTarget.draggable = false;
+            if (event.target.nodeName !== 'INPUT') {
+                event.currentTarget.draggable = true;
+            } else if (event.target.nodeName === 'INPUT') {
+                event.currentTarget.draggable = false;
+            }
         }
     };
 
@@ -161,12 +164,16 @@ export const TreeTableHeader = React.memo((props) => {
 
     const getAriaSort = (column, sorted, sortOrder) => {
         if (getColumnProp(column, 'sortable')) {
-            if (sorted && sortOrder < 0) return 'descending';
-            else if (sorted && sortOrder > 0) return 'ascending';
-            else return 'none';
-        } else {
-            return null;
+            if (sorted && sortOrder < 0) {
+                return 'descending';
+            } else if (sorted && sortOrder > 0) {
+                return 'ascending';
+            }
+
+            return 'none';
         }
+
+        return null;
     };
 
     const createSortIcon = (column, sorted, sortOrder) => {
@@ -185,9 +192,9 @@ export const TreeTableHeader = React.memo((props) => {
             let sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, { ...sortIconProps }, { props, sorted, sortOrder });
 
             return sortIcon;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const createResizer = (column) => {
@@ -201,9 +208,9 @@ export const TreeTableHeader = React.memo((props) => {
             );
 
             return <span {...columnResizerProps} />;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const createSortBadge = (column, sortMetaDataIndex) => {
@@ -279,88 +286,91 @@ export const TreeTableHeader = React.memo((props) => {
             );
 
             return <th {...headerCellProps}>{filterElement}</th>;
-        } else {
-            const headerCellRef = React.createRef(null);
-            const sortMetaDataIndex = getMultiSortMetaDataIndex(column);
-            const multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
-            const singleSorted = getColumnProp(column, 'field') === props.sortField;
-            const multipleSorted = multiSortMetaData !== null;
-            const sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
-            const frozen = getColumnProp(column, 'frozen');
-            const align = getColumnProp(column, 'alignHeader');
-            let sortOrder = 0;
-
-            if (singleSorted) sortOrder = props.sortOrder;
-            else if (multipleSorted) sortOrder = multiSortMetaData.order;
-
-            const sortIconElement = createSortIcon(column, sorted, sortOrder);
-            const ariaSortData = getAriaSort(column, sorted, sortOrder);
-            const sortBadge = createSortBadge(column, sortMetaDataIndex);
-            const ariaSort = sorted ? (sortOrder ? (sortOrder < 0 ? 'descending' : 'ascending') : 'none') : null;
-
-            const headerTooltip = getColumnProp(column, 'headerTooltip');
-            const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
-            const title = createTitle(column, options);
-            const resizer = createResizer(column);
-            const sortable = getColumnProp(column, 'sortable');
-            const headerCellProps = mergeProps(
-                {
-                    role: 'columnheader',
-                    className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted, align })),
-                    style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
-                    tabIndex: sortable ? props.tabIndex : null,
-                    'aria-sort': ariaSort,
-                    onClick: (e) => onHeaderClick(e, column),
-                    onMouseDown: (e) => onHeaderMouseDown(e, column),
-                    onKeyDown: (e) => onHeaderKeyDown(e, column),
-                    rowSpan: getColumnProp(column, 'rowSpan'),
-                    colSpan: getColumnProp(column, 'colSpan'),
-                    'aria-sort': ariaSortData,
-                    onDragStart: (e) => onDragStart(e, column),
-                    onDragOver: (e) => onDragOver(e, column),
-                    onDragLeave: (e) => onDragLeave(e, column),
-                    onDrop: (e) => onDrop(e, column),
-                    'data-p-sortable-column': sortable,
-                    'data-p-resizable-column': props.resizableColumns,
-                    'data-p-highlight': sorted,
-                    'data-p-frozen-column': getColumnProp(column, 'frozen')
-                },
-                getColumnPTOptions(column, 'root'),
-                getColumnPTOptions(column, 'headerCell', {
-                    context: {
-                        sorted,
-                        frozen,
-                        resizable: props.resizableColumns
-                    }
-                })
-            );
+        }
 
-            const headerContentProps = mergeProps(
-                {
-                    className: cx('headerContent')
-                },
-                getColumnPTOptions(column, 'headerContent')
-            );
+        const headerCellRef = React.createRef(null);
+        const sortMetaDataIndex = getMultiSortMetaDataIndex(column);
+        const multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
+        const singleSorted = getColumnProp(column, 'field') === props.sortField;
+        const multipleSorted = multiSortMetaData !== null;
+        const sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
+        const frozen = getColumnProp(column, 'frozen');
+        const align = getColumnProp(column, 'alignHeader');
+        let sortOrder = 0;
+
+        if (singleSorted) {
+            sortOrder = props.sortOrder;
+        } else if (multipleSorted) {
+            sortOrder = multiSortMetaData.order;
+        }
 
-            const header = (
-                <div {...headerContentProps}>
-                    {title}
-                    {sortIconElement}
-                    {sortBadge}
-                    {filterElement}
-                </div>
-            );
+        const sortIconElement = createSortIcon(column, sorted, sortOrder);
+        const ariaSortData = getAriaSort(column, sorted, sortOrder);
+        const sortBadge = createSortBadge(column, sortMetaDataIndex);
+        const ariaSort = sorted ? (sortOrder ? (sortOrder < 0 ? 'descending' : 'ascending') : 'none') : null;
+
+        const headerTooltip = getColumnProp(column, 'headerTooltip');
+        const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
+        const title = createTitle(column, options);
+        const resizer = createResizer(column);
+        const sortable = getColumnProp(column, 'sortable');
+        const headerCellProps = mergeProps(
+            {
+                role: 'columnheader',
+                className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted, align })),
+                style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
+                tabIndex: sortable ? props.tabIndex : null,
+                'aria-sort': ariaSort,
+                onClick: (e) => onHeaderClick(e, column),
+                onMouseDown: (e) => onHeaderMouseDown(e, column),
+                onKeyDown: (e) => onHeaderKeyDown(e, column),
+                rowSpan: getColumnProp(column, 'rowSpan'),
+                colSpan: getColumnProp(column, 'colSpan'),
+                'aria-sort': ariaSortData,
+                onDragStart: (e) => onDragStart(e, column),
+                onDragOver: (e) => onDragOver(e, column),
+                onDragLeave: (e) => onDragLeave(e, column),
+                onDrop: (e) => onDrop(e, column),
+                'data-p-sortable-column': sortable,
+                'data-p-resizable-column': props.resizableColumns,
+                'data-p-highlight': sorted,
+                'data-p-frozen-column': getColumnProp(column, 'frozen')
+            },
+            getColumnPTOptions(column, 'root'),
+            getColumnPTOptions(column, 'headerCell', {
+                context: {
+                    sorted,
+                    frozen,
+                    resizable: props.resizableColumns
+                }
+            })
+        );
 
-            return (
-                <React.Fragment key={column.columnKey || column.field || options.index}>
-                    <th ref={headerCellRef} {...headerCellProps}>
-                        {resizer}
-                        {header}
-                    </th>
-                    {hasTooltip && <Tooltip target={headerCellRef} content={headerTooltip} {...getColumnProp(column, 'headerTooltipOptions')} unstyled={props.unstyled} />}
-                </React.Fragment>
-            );
-        }
+        const headerContentProps = mergeProps(
+            {
+                className: cx('headerContent')
+            },
+            getColumnPTOptions(column, 'headerContent')
+        );
+
+        const header = (
+            <div {...headerContentProps}>
+                {title}
+                {sortIconElement}
+                {sortBadge}
+                {filterElement}
+            </div>
+        );
+
+        return (
+            <React.Fragment key={column.columnKey || column.field || options.index}>
+                <th ref={headerCellRef} {...headerCellProps}>
+                    {resizer}
+                    {header}
+                </th>
+                {hasTooltip && <Tooltip target={headerCellRef} content={headerTooltip} {...getColumnProp(column, 'headerTooltipOptions')} unstyled={props.unstyled} />}
+            </React.Fragment>
+        );
     };
 
     const createHeaderRow = (row, index) => {
@@ -392,16 +402,16 @@ export const TreeTableHeader = React.memo((props) => {
                         <tr {...headerRowProps}>{columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: true, renderFilter: true }))}</tr>
                     </>
                 );
-            } else {
-                return (
-                    <tr role="row" {...headerRowProps}>
-                        {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))}
-                    </tr>
-                );
             }
-        } else {
-            return null;
+
+            return (
+                <tr role="row" {...headerRowProps}>
+                    {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))}
+                </tr>
+            );
         }
+
+        return null;
     };
 
     const content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index dc0f8e8b52..2239a1f5e7 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -122,13 +122,11 @@ export const TreeTableRow = React.memo((props) => {
                     node: props.node
                 });
             }
-        } else {
-            if (props.onCollapse) {
-                props.onCollapse({
-                    originalEvent: event,
-                    node: props.node
-                });
-            }
+        } else if (props.onCollapse) {
+            props.onCollapse({
+                originalEvent: event,
+                node: props.node
+            });
         }
     };
 
@@ -161,8 +159,11 @@ export const TreeTableRow = React.memo((props) => {
         let selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
 
         if (checked) {
-            if (props.propagateSelectionDown) propagateDown(props.node, false, selectionKeys);
-            else delete selectionKeys[props.node.key];
+            if (props.propagateSelectionDown) {
+                propagateDown(props.node, false, selectionKeys);
+            } else {
+                delete selectionKeys[props.node.key];
+            }
 
             if (props.propagateSelectionUp && props.onPropagateUp) {
                 props.onPropagateUp({
@@ -179,8 +180,11 @@ export const TreeTableRow = React.memo((props) => {
                 });
             }
         } else {
-            if (props.propagateSelectionDown) propagateDown(props.node, true, selectionKeys);
-            else selectionKeys[props.node.key] = { checked: true };
+            if (props.propagateSelectionDown) {
+                propagateDown(props.node, true, selectionKeys);
+            } else {
+                selectionKeys[props.node.key] = { checked: true };
+            }
 
             if (props.propagateSelectionUp && props.onPropagateUp) {
                 props.onPropagateUp({
@@ -214,7 +218,9 @@ export const TreeTableRow = React.memo((props) => {
         let checkedChildCount = 0;
 
         for (let child of props.node.children) {
-            if (selectionKeys[child.key] && selectionKeys[child.key].checked) checkedChildCount++;
+            if (selectionKeys[child.key] && selectionKeys[child.key].checked) {
+                checkedChildCount++;
+            }
         }
 
         const parentKey = props.node.key;
@@ -239,8 +245,11 @@ export const TreeTableRow = React.memo((props) => {
     };
 
     const propagateDown = (node, check, selectionKeys) => {
-        if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
-        else delete selectionKeys[node.key];
+        if (check) {
+            selectionKeys[node.key] = { checked: true, partialChecked: false };
+        } else {
+            delete selectionKeys[node.key];
+        }
 
         if (node.children && node.children.length) {
             for (let i = 0; i < node.children.length; i++) {
@@ -269,45 +278,45 @@ export const TreeTableRow = React.memo((props) => {
 
     const onKeyDown = (event, item) => {
         switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-                onArrowLeftKey(event);
-                break;
-
-            case 'ArrowRight':
-                onArrowRightKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                if (!DomHandler.isClickable(event.target)) {
-                    onEnterKey(event, item);
-                }
+        case 'ArrowDown':
+            onArrowDownKey(event);
+            break;
+
+        case 'ArrowUp':
+            onArrowUpKey(event);
+            break;
+
+        case 'ArrowLeft':
+            onArrowLeftKey(event);
+            break;
+
+        case 'ArrowRight':
+            onArrowRightKey(event);
+            break;
+
+        case 'Home':
+            onHomeKey(event);
+            break;
+
+        case 'End':
+            onEndKey(event);
+            break;
+
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+            if (!DomHandler.isClickable(event.target)) {
+                onEnterKey(event, item);
+            }
 
-                break;
+            break;
 
-            case 'Tab':
-                onTabKey(event);
-                break;
+        case 'Tab':
+            onTabKey(event);
+            break;
 
-            default:
-                break;
+        default:
+            break;
         }
     };
 
@@ -331,7 +340,9 @@ export const TreeTableRow = React.memo((props) => {
         const ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
         const togglerElement = DomHandler.findSingle(elementRef.current, '[data-pc-section="rowtoggler"]');
 
-        if (ishiddenIcon) return;
+        if (ishiddenIcon) {
+            return;
+        }
 
         !expanded && expand(event, true);
 
@@ -528,13 +539,13 @@ export const TreeTableRow = React.memo((props) => {
             );
 
             return <Checkbox {...rowCheckboxProps} />;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const createCell = (column, index) => {
-        let toggler, checkbox;
+        let toggler; let checkbox;
 
         if (getColumnProp(column, 'hidden')) {
             return null;
@@ -606,9 +617,9 @@ export const TreeTableRow = React.memo((props) => {
                     />
                 );
             });
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const cells = props.columns.map(createCell);
diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
index 37848351d6..5c4d82b45b 100644
--- a/components/lib/treetable/TreeTableScrollableView.js
+++ b/components/lib/treetable/TreeTableScrollableView.js
@@ -50,9 +50,9 @@ export const TreeTableScrollableView = React.memo((props) => {
             }
 
             return el;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const onHeaderScroll = () => {
@@ -113,9 +113,9 @@ export const TreeTableScrollableView = React.memo((props) => {
             );
 
             return <colgroup {...scrollableColgroupProps}>{cols}</colgroup>;
-        } else {
-            return null;
         }
+
+        return null;
     };
 
     const width = props.frozen ? props.frozenWidth : 'calc(100% - ' + props.frozenWidth + ')';
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index db6c901a04..314a902a07 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -29,9 +29,13 @@ export const TriStateCheckbox = React.memo(
 
             let newValue;
 
-            if (props.value === null || props.value === undefined) newValue = true;
-            else if (props.value === true) newValue = false;
-            else if (props.value === false) newValue = null;
+            if (props.value === null || props.value === undefined) {
+                newValue = true;
+            } else if (props.value === true) {
+                newValue = false;
+            } else if (props.value === false) {
+                newValue = null;
+            }
 
             if (props.onChange) {
                 props.onChange({
diff --git a/components/lib/utils/ClassNames.js b/components/lib/utils/ClassNames.js
index 48a21d93db..e14e2efbeb 100644
--- a/components/lib/utils/ClassNames.js
+++ b/components/lib/utils/ClassNames.js
@@ -5,14 +5,16 @@ export function classNames(...args) {
         for (let i = 0; i < args.length; i++) {
             let className = args[i];
 
-            if (!className) continue;
+            if (!className) {
+                continue;
+            }
 
             const type = typeof className;
 
             if (type === 'string' || type === 'number') {
                 classes.push(className);
             } else if (type === 'object') {
-                const _classes = Array.isArray(className) ? className : Object.entries(className).map(([key, value]) => (!!value ? key : null));
+                const _classes = Array.isArray(className) ? className : Object.entries(className).map(([key, value]) => (value ? key : null));
 
                 classes = _classes.length ? classes.concat(_classes.filter((c) => !!c)) : classes;
             }
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index 1bc680c250..7ca5433a48 100644
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -13,7 +13,7 @@ export default class DomHandler {
             let width = el.offsetWidth;
             let style = getComputedStyle(el);
 
-            width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            width = width + (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
 
             return width;
         }
@@ -26,7 +26,7 @@ export default class DomHandler {
             let width = el.offsetWidth;
             let style = getComputedStyle(el);
 
-            width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            width = width - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
 
             return width;
         }
@@ -57,7 +57,7 @@ export default class DomHandler {
             if (margin) {
                 let style = getComputedStyle(el);
 
-                width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+                width = width + (parseFloat(style.marginLeft) + parseFloat(style.marginRight));
             }
 
             return width;
@@ -73,7 +73,7 @@ export default class DomHandler {
             if (margin) {
                 let style = getComputedStyle(el);
 
-                height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+                height = height + (parseFloat(style.marginTop) + parseFloat(style.marginBottom));
             }
 
             return height;
@@ -89,7 +89,7 @@ export default class DomHandler {
             if (margin) {
                 let style = getComputedStyle(el);
 
-                height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+                height = height + (parseFloat(style.marginTop) + parseFloat(style.marginBottom));
             }
 
             return height;
@@ -105,7 +105,7 @@ export default class DomHandler {
             if (margin) {
                 let style = getComputedStyle(el);
 
-                width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+                width = width + (parseFloat(style.marginLeft) + parseFloat(style.marginRight));
             }
 
             return width;
@@ -115,12 +115,12 @@ export default class DomHandler {
     }
 
     static getViewport() {
-        let win = window,
-            d = document,
-            e = d.documentElement,
-            g = d.getElementsByTagName('body')[0],
-            w = win.innerWidth || e.clientWidth || g.clientWidth,
-            h = win.innerHeight || e.clientHeight || g.clientHeight;
+        let win = window;
+        let d = document;
+        let e = d.documentElement;
+        let g = d.getElementsByTagName('body')[0];
+        let w = win.innerWidth || e.clientWidth || g.clientWidth;
+        let h = win.innerHeight || e.clientHeight || g.clientHeight;
 
         return { width: w, height: h };
     }
@@ -147,8 +147,13 @@ export default class DomHandler {
             let num = 0;
 
             for (let i = 0; i < children.length; i++) {
-                if (children[i] === element) return num;
-                if (children[i].nodeType === 1) num++;
+                if (children[i] === element) {
+                    return num;
+                }
+
+                if (children[i].nodeType === 1) {
+                    num++;
+                }
             }
         }
 
@@ -167,7 +172,7 @@ export default class DomHandler {
                 let styles = className.split(' ');
 
                 for (let i = 0; i < styles.length; i++) {
-                    element.className += ' ' + styles[i];
+                    element.className = element.className + (' ' + styles[i]);
                 }
             }
         }
@@ -193,22 +198,31 @@ export default class DomHandler {
 
     static addClass(element, className) {
         if (element && className) {
-            if (element.classList) element.classList.add(className);
-            else element.className += ' ' + className;
+            if (element.classList) {
+                element.classList.add(className);
+            } else {
+                element.className = element.className + (' ' + className);
+            }
         }
     }
 
     static removeClass(element, className) {
         if (element && className) {
-            if (element.classList) element.classList.remove(className);
-            else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+            if (element.classList) {
+                element.classList.remove(className);
+            } else {
+                element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+            }
         }
     }
 
     static hasClass(element, className) {
         if (element) {
-            if (element.classList) return element.classList.contains(className);
-            else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
+            if (element.classList) {
+                return element.classList.contains(className);
+            }
+
+            return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
         }
 
         return false;
@@ -246,7 +260,7 @@ export default class DomHandler {
                         } else if (type === 'object') {
                             const _cv = Array.isArray(v)
                                 ? computedStyles(rule, v)
-                                : Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : !!_v ? _k : undefined));
+                                : Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : _v ? _k : undefined));
 
                             cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
                         }
@@ -305,7 +319,7 @@ export default class DomHandler {
             let height = el.offsetHeight;
             let style = getComputedStyle(el);
 
-            height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+            height = height - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth));
 
             return height;
         }
@@ -318,7 +332,7 @@ export default class DomHandler {
             let width = el.offsetWidth;
             let style = getComputedStyle(el);
 
-            width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+            width = width - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth));
 
             return width;
         }
@@ -348,7 +362,7 @@ export default class DomHandler {
             let windowScrollTop = this.getWindowScrollTop();
             let windowScrollLeft = this.getWindowScrollLeft();
             let viewport = this.getViewport();
-            let top, left;
+            let top; let left;
 
             if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
                 top = targetOffset.top + windowScrollTop - elementOuterHeight;
@@ -366,8 +380,11 @@ export default class DomHandler {
             const targetOffsetPx = targetOffset.left;
             const alignOffset = align === 'left' ? 0 : elementOuterWidth - targetOuterWidth;
 
-            if (targetOffsetPx + targetOuterWidth + elementOuterWidth > viewport.width) left = Math.max(0, targetOffsetPx + windowScrollLeft + targetOuterWidth - elementOuterWidth);
-            else left = targetOffsetPx - alignOffset + windowScrollLeft;
+            if (targetOffsetPx + targetOuterWidth + elementOuterWidth > viewport.width) {
+                left = Math.max(0, targetOffsetPx + windowScrollLeft + targetOuterWidth - elementOuterWidth);
+            } else {
+                left = targetOffsetPx - alignOffset + windowScrollLeft;
+            }
 
             element.style.top = top + 'px';
             element.style.left = left + 'px';
@@ -380,7 +397,7 @@ export default class DomHandler {
             const targetHeight = target.offsetHeight;
             const targetOffset = target.getBoundingClientRect();
             const viewport = this.getViewport();
-            let top, left;
+            let top; let left;
 
             if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
                 top = -1 * elementDimensions.height;
@@ -585,7 +602,7 @@ export default class DomHandler {
     }
 
     static getParents(element, parents = []) {
-        return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
+        return element.parentNode === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
     }
 
     static getScrollableParents(element, hideOverlaysOnDocumentScrolling = false) {
@@ -613,7 +630,7 @@ export default class DomHandler {
             };
 
             for (let parent of parents) {
-                let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
+                let scrollSelectors = parent.nodeType === 1 && parent.dataset.scrollselectors;
 
                 if (scrollSelectors) {
                     let selectors = scrollSelectors.split(',');
@@ -710,12 +727,12 @@ export default class DomHandler {
 
     static fadeOut(element, duration) {
         if (element) {
-            let opacity = 1,
-                interval = 50,
-                gap = interval / duration;
+            let opacity = 1;
+            let interval = 50;
+            let gap = interval / duration;
 
             let fading = setInterval(() => {
-                opacity -= gap;
+                opacity = opacity - gap;
 
                 if (opacity <= 0) {
                     opacity = 0;
@@ -732,7 +749,7 @@ export default class DomHandler {
     }
 
     static isIOS() {
-        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
     }
 
     static isAndroid() {
@@ -756,15 +773,23 @@ export default class DomHandler {
     }
 
     static appendChild(element, target) {
-        if (this.isElement(target)) target.appendChild(element);
-        else if (target.el && target.el.nativeElement) target.el.nativeElement.appendChild(element);
-        else throw new Error('Cannot append ' + target + ' to ' + element);
+        if (this.isElement(target)) {
+            target.appendChild(element);
+        } else if (target.el && target.el.nativeElement) {
+            target.el.nativeElement.appendChild(element);
+        } else {
+            throw new Error('Cannot append ' + target + ' to ' + element);
+        }
     }
 
     static removeChild(element, target) {
-        if (this.isElement(target)) target.removeChild(element);
-        else if (target.el && target.el.nativeElement) target.el.nativeElement.removeChild(element);
-        else throw new Error('Cannot remove ' + element + ' from ' + target);
+        if (this.isElement(target)) {
+            target.removeChild(element);
+        } else if (target.el && target.el.nativeElement) {
+            target.el.nativeElement.removeChild(element);
+        } else {
+            throw new Error('Cannot remove ' + element + ' from ' + target);
+        }
     }
 
     static isElement(obj) {
@@ -797,9 +822,9 @@ export default class DomHandler {
             } else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
                 window.getSelection().removeAllRanges();
             }
-        } else if (document['selection'] && document['selection'].empty) {
+        } else if (document.selection && document.selection.empty) {
             try {
-                document['selection'].empty();
+                document.selection.empty();
             } catch (error) {
                 //ignore IE bug
             }
@@ -811,22 +836,24 @@ export default class DomHandler {
             let style = getComputedStyle(el);
 
             return el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
-        } else {
-            if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
+        }
 
-            let scrollDiv = document.createElement('div');
+        if (this.calculatedScrollbarWidth != null) {
+            return this.calculatedScrollbarWidth;
+        }
 
-            scrollDiv.className = 'p-scrollbar-measure';
-            document.body.appendChild(scrollDiv);
+        let scrollDiv = document.createElement('div');
 
-            let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+        scrollDiv.className = 'p-scrollbar-measure';
+        document.body.appendChild(scrollDiv);
 
-            document.body.removeChild(scrollDiv);
+        let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
 
-            this.calculatedScrollbarWidth = scrollbarWidth;
+        document.body.removeChild(scrollDiv);
 
-            return scrollbarWidth;
-        }
+        this.calculatedScrollbarWidth = scrollbarWidth;
+
+        return scrollbarWidth;
     }
 
     static calculateBodyScrollbarWidth() {
@@ -841,13 +868,13 @@ export default class DomHandler {
 
             if (matched.browser) {
                 this.browser[matched.browser] = true;
-                this.browser['version'] = matched.version;
+                this.browser.version = matched.version;
             }
 
-            if (this.browser['chrome']) {
-                this.browser['webkit'] = true;
-            } else if (this.browser['webkit']) {
-                this.browser['safari'] = true;
+            if (this.browser.chrome) {
+                this.browser.webkit = true;
+            } else if (this.browser.webkit) {
+                this.browser.safari = true;
             }
         }
 
@@ -903,7 +930,9 @@ export default class DomHandler {
         let visibleFocusableElements = [];
 
         for (let focusableElement of focusableElements) {
-            if (getComputedStyle(focusableElement).display !== 'none' && getComputedStyle(focusableElement).visibility !== 'hidden') visibleFocusableElements.push(focusableElement);
+            if (getComputedStyle(focusableElement).display !== 'none' && getComputedStyle(focusableElement).visibility !== 'hidden') {
+                visibleFocusableElements.push(focusableElement);
+            }
         }
 
         return visibleFocusableElements;
@@ -941,7 +970,10 @@ export default class DomHandler {
      * @return {HTMLElement | undefined} the first focusable HTML element found
      */
     static focusFirstElement(el, scrollTo) {
-        if (!el) return;
+        if (!el) {
+            return;
+        }
+
         const firstFocusableElement = DomHandler.getFirstFocusableElement(el);
 
         firstFocusableElement && DomHandler.focus(firstFocusableElement, scrollTo);
@@ -1108,7 +1140,9 @@ export default class DomHandler {
     }
 
     static getTargetElement(target) {
-        if (!target) return null;
+        if (!target) {
+            return null;
+        }
 
         if (target === 'document') {
             return document;
@@ -1116,19 +1150,19 @@ export default class DomHandler {
             return window;
         } else if (typeof target === 'object' && target.hasOwnProperty('current')) {
             return this.isExist(target.current) ? target.current : null;
-        } else {
-            const isFunction = (obj) => !!(obj && obj.constructor && obj.call && obj.apply);
-            const element = isFunction(target) ? target() : target;
-
-            return (element && element.nodeType === 9) || this.isExist(element) ? element : null;
         }
+
+        const isFunction = (obj) => !!(obj && obj.constructor && obj.call && obj.apply);
+        const element = isFunction(target) ? target() : target;
+
+        return (element && element.nodeType === 9) || this.isExist(element) ? element : null;
     }
 
     /**
      * Get the attribute names for an element and sorts them alpha for comparison
      */
     static getAttributeNames(node) {
-        let index, rv, attrs;
+        let index; let rv; let attrs;
 
         rv = [];
         attrs = node.attributes;
@@ -1150,7 +1184,7 @@ export default class DomHandler {
      * elem2 = style="font-size: 28px; color: red"
      */
     static isEqualElement(elm1, elm2) {
-        let attrs1, attrs2, name, node1, node2;
+        let attrs1; let attrs2; let name; let node1; let node2;
 
         // Compare attributes without order sensitivity
         attrs1 = DomHandler.getAttributeNames(elm1);
@@ -1179,11 +1213,9 @@ export default class DomHandler {
                         return false;
                     }
                 }
-            } else {
-                if (elm1.getAttribute(name) !== elm2.getAttribute(name)) {
-                    // console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
-                    return false;
-                }
+            } else if (elm1.getAttribute(name) !== elm2.getAttribute(name)) {
+                // console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
+                return false;
             }
         }
 
diff --git a/components/lib/utils/EventBus.js b/components/lib/utils/EventBus.js
index ebc0bff1ca..d0e72ce7c8 100644
--- a/components/lib/utils/EventBus.js
+++ b/components/lib/utils/EventBus.js
@@ -5,8 +5,11 @@ export default function EventBus() {
         on(type, handler) {
             let handlers = allHandlers.get(type);
 
-            if (!handlers) handlers = [handler];
-            else handlers.push(handler);
+            if (!handlers) {
+                handlers = [handler];
+            } else {
+                handlers.push(handler);
+            }
 
             allHandlers.set(type, handlers);
         },
diff --git a/components/lib/utils/IconUtils.js b/components/lib/utils/IconUtils.js
index 102ed64da1..e654a9e79f 100644
--- a/components/lib/utils/IconUtils.js
+++ b/components/lib/utils/IconUtils.js
@@ -10,7 +10,7 @@ export default class IconUtils {
             const iconType = typeof icon;
             const className = classNames(iconProps.className, iconType === 'string' && icon);
 
-            content = <span {...iconProps} className={className}></span>;
+            content = <span {...iconProps} className={className} />;
 
             if (iconType !== 'string') {
                 const defaultContentOptions = {
diff --git a/components/lib/utils/Mask.js b/components/lib/utils/Mask.js
index 0163f1fef8..c485625a68 100644
--- a/components/lib/utils/Mask.js
+++ b/components/lib/utils/Mask.js
@@ -14,10 +14,10 @@ export function mask(el, options) {
     };
 
     options = { ...defaultOptions, ...options };
-    let tests, partialPosition, len, firstNonMaskPos, defs, androidChrome, lastRequiredNonMaskPos, oldVal, focusText, caretTimeoutId, buffer, defaultBuffer;
+    let tests; let partialPosition; let len; let firstNonMaskPos; let defs; let androidChrome; let lastRequiredNonMaskPos; let oldVal; let focusText; let caretTimeoutId; let buffer; let defaultBuffer;
 
     const caret = (first, last) => {
-        let range, begin, end;
+        let range; let begin; let end;
 
         if (!el.offsetParent || el !== document.activeElement) {
             return;
@@ -29,8 +29,8 @@ export function mask(el, options) {
 
             if (el.setSelectionRange) {
                 el.setSelectionRange(begin, end);
-            } else if (el['createTextRange']) {
-                range = el['createTextRange']();
+            } else if (el.createTextRange) {
+                range = el.createTextRange();
                 range.collapse(true);
                 range.moveEnd('character', end);
                 range.moveStart('character', begin);
@@ -40,8 +40,8 @@ export function mask(el, options) {
             if (el.setSelectionRange) {
                 begin = el.selectionStart;
                 end = el.selectionEnd;
-            } else if (document['selection'] && document['selection'].createRange) {
-                range = document['selection'].createRange();
+            } else if (document.selection && document.selection.createRange) {
+                range = document.selection.createRange();
                 begin = 0 - range.duplicate().moveStart('character', -100000);
                 end = begin + range.text.length;
             }
@@ -73,19 +73,23 @@ export function mask(el, options) {
     };
 
     const seekNext = (pos) => {
-        while (++pos < len && !tests[pos]);
+        while (++pos < len && !tests[pos]) {
+
+        }
 
         return pos;
     };
 
     const seekPrev = (pos) => {
-        while (--pos >= 0 && !tests[pos]);
+        while (--pos >= 0 && !tests[pos]) {
+
+        }
 
         return pos;
     };
 
     const shiftL = (begin, end) => {
-        let i, j;
+        let i; let j;
 
         if (begin < 0) {
             return;
@@ -109,7 +113,7 @@ export function mask(el, options) {
     };
 
     const shiftR = (pos) => {
-        let i, c, j, t;
+        let i; let c; let j; let t;
 
         for (i = pos, c = getPlaceholder(pos); i < len; i++) {
             if (tests[i]) {
@@ -133,16 +137,24 @@ export function mask(el, options) {
         if (oldVal && oldVal.length && oldVal.length > curVal.length) {
             // a deletion or backspace happened
             checkVal(true);
-            while (pos.begin > 0 && !tests[pos.begin - 1]) pos.begin--;
+
+            while (pos.begin > 0 && !tests[pos.begin - 1]) {
+                pos.begin--;
+            }
 
             if (pos.begin === 0) {
-                while (pos.begin < firstNonMaskPos && !tests[pos.begin]) pos.begin++;
+                while (pos.begin < firstNonMaskPos && !tests[pos.begin]) {
+                    pos.begin++;
+                }
             }
 
             caret(pos.begin, pos.begin);
         } else {
             checkVal(true);
-            while (pos.begin < len && !tests[pos.begin]) pos.begin++;
+
+            while (pos.begin < len && !tests[pos.begin]) {
+                pos.begin++;
+            }
 
             caret(pos.begin, pos.begin);
         }
@@ -173,10 +185,10 @@ export function mask(el, options) {
             return;
         }
 
-        let k = e.which || e.keyCode,
-            pos,
-            begin,
-            end;
+        let k = e.which || e.keyCode;
+        let pos;
+        let begin;
+        let end;
 
         oldVal = el.value;
 
@@ -214,12 +226,12 @@ export function mask(el, options) {
             return;
         }
 
-        let k = e.which || e.keyCode,
-            pos = caret(),
-            p,
-            c,
-            next,
-            completed;
+        let k = e.which || e.keyCode;
+        let pos = caret();
+        let p;
+        let c;
+        let next;
+        let completed;
 
         if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
             //Ignore
@@ -288,11 +300,11 @@ export function mask(el, options) {
 
     const checkVal = (allow) => {
         //try to place characters where they belong
-        let test = el.value,
-            lastMatch = -1,
-            i,
-            c,
-            pos;
+        let test = el.value;
+        let lastMatch = -1;
+        let i;
+        let c;
+        let pos;
 
         for (i = 0, pos = 0; i < len; i++) {
             if (tests[i]) {
@@ -329,7 +341,10 @@ export function mask(el, options) {
             if (options.autoClear || buffer.join('') === defaultBuffer) {
                 // Invalid value. Remove it and replace it with the
                 // mask, which is the default behavior.
-                if (el.value) el.value = '';
+                if (el.value) {
+                    el.value = '';
+                }
+
                 clearBuffer(0, len);
             } else {
                 // Invalid value, but we opt to show the value to the
@@ -376,8 +391,11 @@ export function mask(el, options) {
     };
 
     const onInput = (event) => {
-        if (androidChrome) handleAndroidInput(event);
-        else handleInputChange(event);
+        if (androidChrome) {
+            handleAndroidInput(event);
+        } else {
+            handleInputChange(event);
+        }
     };
 
     const handleInputChange = (e) => {
@@ -492,8 +510,11 @@ export function mask(el, options) {
             let c = maskTokens[i];
 
             if (c !== '?') {
-                if (defs[c]) buffer.push(getPlaceholder(i));
-                else buffer.push(c);
+                if (defs[c]) {
+                    buffer.push(getPlaceholder(i));
+                } else {
+                    buffer.push(c);
+                }
             }
         }
 
diff --git a/components/lib/utils/MergeProps.js b/components/lib/utils/MergeProps.js
index 5b1e868c04..7351e8b0c3 100644
--- a/components/lib/utils/MergeProps.js
+++ b/components/lib/utils/MergeProps.js
@@ -8,38 +8,42 @@
  * @returns the single properties value after merging
  */
 export function mergeProps(props, options = {}) {
-    if (!props) return undefined;
+    if (!props) {
+        return undefined;
+    }
 
     const isFunction = (obj) => typeof obj === 'function';
     const { classNameMergeFunction } = options;
     const hasMergeFunction = isFunction(classNameMergeFunction);
 
     return props.reduce((merged, ps) => {
-        if (!ps) return merged;
+        if (!ps) {
+            return merged;
+        }
 
         for (const key in ps) {
             const value = ps[key];
 
             if (key === 'style') {
-                merged['style'] = { ...merged['style'], ...ps['style'] };
+                merged.style = { ...merged.style, ...ps.style };
             } else if (key === 'className') {
                 let newClassName = '';
 
                 if (hasMergeFunction) {
-                    newClassName = classNameMergeFunction(merged['className'], ps['className']);
+                    newClassName = classNameMergeFunction(merged.className, ps.className);
                 } else {
-                    newClassName = [merged['className'], ps['className']].join(' ').trim();
+                    newClassName = [merged.className, ps.className].join(' ').trim();
                 }
 
-                merged['className'] = newClassName || undefined;
+                merged.className = newClassName || undefined;
             } else if (isFunction(value)) {
                 const existingFn = merged[key];
 
                 merged[key] = existingFn
                     ? (...args) => {
-                          existingFn(...args);
-                          value(...args);
-                      }
+                        existingFn(...args);
+                        value(...args);
+                    }
                     : value;
             } else {
                 merged[key] = value;
diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
index dfe7f58d3b..c50f0bd52f 100644
--- a/components/lib/utils/ObjectUtils.js
+++ b/components/lib/utils/ObjectUtils.js
@@ -14,48 +14,79 @@ export default class ObjectUtils {
      * @returns true if equals, false it not
      */
     static deepEquals(a, b) {
-        if (a === b) return true;
+        if (a === b) {
+            return true;
+        }
 
-        if (a && b && typeof a == 'object' && typeof b == 'object') {
-            let arrA = Array.isArray(a),
-                arrB = Array.isArray(b),
-                i,
-                length,
-                key;
+        if (a && b && typeof a === 'object' && typeof b === 'object') {
+            let arrA = Array.isArray(a);
+            let arrB = Array.isArray(b);
+            let i;
+            let length;
+            let key;
 
             if (arrA && arrB) {
                 length = a.length;
-                if (length !== b.length) return false;
-                for (i = length; i-- !== 0; ) if (!this.deepEquals(a[i], b[i])) return false;
+
+                if (length !== b.length) {
+                    return false;
+                }
+
+                for (i = length; i-- !== 0;) {
+                    if (!this.deepEquals(a[i], b[i])) {
+                        return false;
+                    }
+                }
 
                 return true;
             }
 
-            if (arrA !== arrB) return false;
+            if (arrA !== arrB) {
+                return false;
+            }
+
+            let dateA = a instanceof Date;
+            let dateB = b instanceof Date;
+
+            if (dateA !== dateB) {
+                return false;
+            }
 
-            let dateA = a instanceof Date,
-                dateB = b instanceof Date;
+            if (dateA && dateB) {
+                return a.getTime() === b.getTime();
+            }
 
-            if (dateA !== dateB) return false;
-            if (dateA && dateB) return a.getTime() === b.getTime();
+            let regexpA = a instanceof RegExp;
+            let regexpB = b instanceof RegExp;
 
-            let regexpA = a instanceof RegExp,
-                regexpB = b instanceof RegExp;
+            if (regexpA !== regexpB) {
+                return false;
+            }
 
-            if (regexpA !== regexpB) return false;
-            if (regexpA && regexpB) return a.toString() === b.toString();
+            if (regexpA && regexpB) {
+                return a.toString() === b.toString();
+            }
 
             let keys = Object.keys(a);
 
             length = keys.length;
 
-            if (length !== Object.keys(b).length) return false;
+            if (length !== Object.keys(b).length) {
+                return false;
+            }
 
-            for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+            for (i = length; i-- !== 0;) {
+                if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
+                    return false;
+                }
+            }
 
-            for (i = length; i-- !== 0; ) {
+            for (i = length; i-- !== 0;) {
                 key = keys[i];
-                if (!this.deepEquals(a[key], b[key])) return false;
+
+                if (!this.deepEquals(a[key], b[key])) {
+                    return false;
+                }
             }
 
             return true;
@@ -74,7 +105,9 @@ export default class ObjectUtils {
         try {
             const value = data[field];
 
-            if (this.isNotEmpty(value)) return value;
+            if (this.isNotEmpty(value)) {
+                return value;
+            }
         } catch {
             // Performance optimization: https://github.com/primefaces/primereact/issues/4797
             // do nothing and continue to other methods to resolve field data
@@ -87,20 +120,20 @@ export default class ObjectUtils {
                 return data[field];
             } else if (field.indexOf('.') === -1) {
                 return data[field];
-            } else {
-                let fields = field.split('.');
-                let value = data;
+            }
 
-                for (var i = 0, len = fields.length; i < len; ++i) {
-                    if (value == null) {
-                        return null;
-                    }
+            let fields = field.split('.');
+            let value = data;
 
-                    value = value[fields[i]];
+            for (let i = 0, len = fields.length; i < len; ++i) {
+                if (value == null) {
+                    return null;
                 }
 
-                return value;
+                value = value[fields[i]];
             }
+
+            return value;
         }
 
         return null;
@@ -147,8 +180,8 @@ export default class ObjectUtils {
     static reorderArray(value, from, to) {
         if (value && from !== to) {
             if (to >= value.length) {
-                to %= value.length;
-                from %= value.length;
+                to = to % value.length;
+                from = from % value.length;
             }
 
             value.splice(to, 0, value.splice(from, 1)[0]);
@@ -406,11 +439,17 @@ export default class ObjectUtils {
         const emptyValue1 = this.isEmpty(value1);
         const emptyValue2 = this.isEmpty(value2);
 
-        if (emptyValue1 && emptyValue2) result = 0;
-        else if (emptyValue1) result = order;
-        else if (emptyValue2) result = -order;
-        else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparator(value1, value2);
-        else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        if (emptyValue1 && emptyValue2) {
+            result = 0;
+        } else if (emptyValue1) {
+            result = order;
+        } else if (emptyValue2) {
+            result = -order;
+        } else if (typeof value1 === 'string' && typeof value2 === 'string') {
+            result = comparator(value1, value2);
+        } else {
+            result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        }
 
         return result;
     }
@@ -472,7 +511,7 @@ export default class ObjectUtils {
         const fields = field.split('.');
         let obj = data;
 
-        for (var i = 0, len = fields.length; i < len; ++i) {
+        for (let i = 0, len = fields.length; i < len; ++i) {
             // Check if we are on the last field
             if (i + 1 - len === 0) {
                 obj[fields[i]] = value;
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
index f63b93065b..349915172a 100644
--- a/components/lib/virtualscroller/VirtualScroller.js
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -114,12 +114,10 @@ export const VirtualScroller = React.memo(
                         } else if (viewport.first.cols - first.cols > index[1]) {
                             scrollToItem((viewport.first.cols - 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
                         }
-                    } else {
-                        if (viewport.first - first > index) {
-                            const pos = (viewport.first - 1) * props.itemSize;
+                    } else if (viewport.first - first > index) {
+                        const pos = (viewport.first - 1) * props.itemSize;
 
-                            horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
-                        }
+                        horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
                     }
                 } else if (isToEnd) {
                     if (both) {
@@ -128,12 +126,10 @@ export const VirtualScroller = React.memo(
                         } else if (viewport.last.cols - first.cols <= index[1] + 1) {
                             scrollToItem((viewport.first.cols + 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
                         }
-                    } else {
-                        if (viewport.last - first <= index + 1) {
-                            const pos = (viewport.first + 1) * props.itemSize;
+                    } else if (viewport.last - first <= index + 1) {
+                        const pos = (viewport.first + 1) * props.itemSize;
 
-                            horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
-                        }
+                        horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
                     }
                 }
             } else {
@@ -332,15 +328,18 @@ export const VirtualScroller = React.memo(
             };
 
             const calculateFirst = (_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {
-                if (_currentIndex <= _numT) return 0;
-                else return Math.max(0, _isScrollDownOrRight ? (_currentIndex < _triggerIndex ? _first : _currentIndex - _numT) : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);
+                if (_currentIndex <= _numT) {
+                    return 0;
+                }
+
+                return Math.max(0, _isScrollDownOrRight ? (_currentIndex < _triggerIndex ? _first : _currentIndex - _numT) : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);
             };
 
             const calculateLast = (_currentIndex, _first, _last, _num, _numT, _isCols) => {
                 let lastValue = _first + _num + 2 * _numT;
 
                 if (_currentIndex >= _numT) {
-                    lastValue += _numT + 1;
+                    lastValue = lastValue + (_numT + 1);
                 }
 
                 return getLast(lastValue, _isCols);
@@ -514,9 +513,13 @@ export const VirtualScroller = React.memo(
             const items = props.items;
 
             if (items && !loadingState) {
-                if (both) return items.slice(props.appendOnly ? 0 : firstState.rows, lastState.rows).map((item) => (props.columns ? item : item.slice(props.appendOnly ? 0 : firstState.cols, lastState.cols)));
-                else if (horizontal && props.columns) return items;
-                else return items.slice(props.appendOnly ? 0 : firstState, lastState);
+                if (both) {
+                    return items.slice(props.appendOnly ? 0 : firstState.rows, lastState.rows).map((item) => (props.columns ? item : item.slice(props.appendOnly ? 0 : firstState.cols, lastState.cols)));
+                } else if (horizontal && props.columns) {
+                    return items;
+                }
+
+                return items.slice(props.appendOnly ? 0 : firstState, lastState);
             }
 
             return [];
@@ -655,7 +658,7 @@ export const VirtualScroller = React.memo(
                     ptm('spacer')
                 );
 
-                return <div {...spacerProps}></div>;
+                return <div {...spacerProps} />;
             }
 
             return null;
@@ -726,40 +729,40 @@ export const VirtualScroller = React.memo(
                     {content}
                 </React.Fragment>
             );
-        } else {
-            const className = classNames(
-                'p-virtualscroller',
-                {
-                    'p-virtualscroller-inline': props.inline,
-                    'p-virtualscroller-both p-both-scroll': both,
-                    'p-virtualscroller-horizontal p-horizontal-scroll': horizontal
-                },
-                props.className
-            );
-
-            const loader = createLoader();
-            const content = createContent();
-            const spacer = createSpacer();
-            const rootProps = mergeProps(
-                {
-                    ref: elementRef,
-                    className,
-                    tabIndex: props.tabIndex,
-                    style: props.style,
-                    onScroll: (e) => onScroll(e)
-                },
-                VirtualScrollerBase.getOtherProps(props),
-                ptm('root')
-            );
-
-            return (
-                <div {...rootProps}>
-                    {content}
-                    {spacer}
-                    {loader}
-                </div>
-            );
         }
+
+        const className = classNames(
+            'p-virtualscroller',
+            {
+                'p-virtualscroller-inline': props.inline,
+                'p-virtualscroller-both p-both-scroll': both,
+                'p-virtualscroller-horizontal p-horizontal-scroll': horizontal
+            },
+            props.className
+        );
+
+        const loader = createLoader();
+        const content = createContent();
+        const spacer = createSpacer();
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className,
+                tabIndex: props.tabIndex,
+                style: props.style,
+                onScroll: (e) => onScroll(e)
+            },
+            VirtualScrollerBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {content}
+                {spacer}
+                {loader}
+            </div>
+        );
     })
 );
 
diff --git a/components/news/newssection.js b/components/news/newssection.js
index a4f4c860f3..d6068c043d 100644
--- a/components/news/newssection.js
+++ b/components/news/newssection.js
@@ -32,12 +32,14 @@ export default function NewsSection() {
         localStorage.setItem(storageKey, JSON.stringify(item));
     };
 
-    if (!newsActive) return null;
+    if (!newsActive) {
+        return null;
+    }
 
     return (
         <div className="layout-news">
             <div className="layout-news-container">
-                <i></i>
+                <i />
                 <div className="layout-news-content">
                     <span className="layout-news-text">{announcement.content}</span>
                     <a className="layout-news-link" href={announcement.linkHref}>
@@ -45,7 +47,7 @@ export default function NewsSection() {
                     </a>
                 </div>
                 <a className="layout-news-close" onClick={close}>
-                    <span className="pi pi-times"></span>
+                    <span className="pi pi-times" />
                 </a>
             </div>
         </div>
diff --git a/components/templates/TemplateConfiguration.js b/components/templates/TemplateConfiguration.js
index ca18ef3504..3236e3b836 100644
--- a/components/templates/TemplateConfiguration.js
+++ b/components/templates/TemplateConfiguration.js
@@ -4,9 +4,9 @@ const TemplateConfiguration = ({ title = '', description = '' }) => {
             <div className="template-configuration">
                 <div className="template-configuration-screen">
                     <div className="template-configuration-screen-top">
-                        <div className="template-configuration-screen-top-close template-configuration-screen-top-circle"></div>
-                        <div className="template-configuration-screen-top-minimize template-configuration-screen-top-circle"></div>
-                        <div className="template-configuration-screen-top-zoom template-configuration-screen-top-circle"></div>
+                        <div className="template-configuration-screen-top-close template-configuration-screen-top-circle" />
+                        <div className="template-configuration-screen-top-minimize template-configuration-screen-top-circle" />
+                        <div className="template-configuration-screen-top-zoom template-configuration-screen-top-circle" />
                     </div>
                     <div className="template-configuration-screen-bottom">
                         <p>
diff --git a/components/templates/TemplateFeatures.js b/components/templates/TemplateFeatures.js
index fbb0a0cf7a..10f41f519c 100644
--- a/components/templates/TemplateFeatures.js
+++ b/components/templates/TemplateFeatures.js
@@ -11,7 +11,7 @@ const TemplateFeatures = ({ featuresData, displayType }) => {
                     {featuresData.map((data, i) => (
                         <div key={i} className="template-features-horizontal-card">
                             <div className="template-features-horizontal-card-top">
-                                <img src={darkMode ? data.darkSrc || data.src : data.src} alt={data.title}></img>
+                                <img src={darkMode ? data.darkSrc || data.src : data.src} alt={data.title} />
                             </div>
                             <div className="template-features-horizontal-card-bottom">
                                 <h5 className="template-features-horizontal-card-bottom-title">{data.title}</h5>
@@ -36,7 +36,7 @@ const TemplateFeatures = ({ featuresData, displayType }) => {
                         .map((_, i) => (
                             <div key={i} className="template-features-vertical-col">
                                 {(i === 0 ? firstColumnData : secondColumnData).map((data, j) => (
-                                    <div key={j} className={`template-features-vertical-card `}>
+                                    <div key={j} className={'template-features-vertical-card '}>
                                         <div className="template-features-vertical-card-image">
                                             <img src={darkMode ? data.darkSrc || data.src : data.src} alt={data.title} />
                                         </div>
diff --git a/components/templates/TemplateLicense.js b/components/templates/TemplateLicense.js
index c0a2fd509d..d9d30867c1 100644
--- a/components/templates/TemplateLicense.js
+++ b/components/templates/TemplateLicense.js
@@ -22,7 +22,7 @@ const TemplateLicense = ({ license }) => {
                 </div>
                 <p className="template-license-description">{license.description}</p>
                 <p className="template-license-visit">
-                    Visit the 
+                    Visit the
                     <a href={license.documentLink} target="_blank">
                         official documentation
                     </a>
diff --git a/components/templates/TemplateYoutube.js b/components/templates/TemplateYoutube.js
index e6fee4aa95..072861d29f 100644
--- a/components/templates/TemplateYoutube.js
+++ b/components/templates/TemplateYoutube.js
@@ -53,7 +53,7 @@ const TemplateYoutube = ({
                 </div>
                 <Dialog header="Video Content" visible={youtubeVideoVisible} style={{ width: '70vw' }} onHide={() => setYoutubeVideoVisible(false)}>
                     <div className="template-youtube-video">
-                        <iframe src={youtubeLink} title="PrimeNG 2023 Roadmap" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        <iframe src={youtubeLink} title="PrimeNG 2023 Roadmap" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
                     </div>
                 </Dialog>
             </div>
diff --git a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
index b8d22242ba..5209556f48 100644
--- a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
+++ b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
@@ -10,7 +10,10 @@ const useAnimatedFeatures = (animationRef, arrayLength, seconds = 10000) => {
     const isVisible = useVisible(animationRef);
 
     const clearAllIntervals = () => {
-        if (intervalIds.length <= 0) return;
+        if (intervalIds.length <= 0) {
+            return;
+        }
+
         intervalIds.forEach((intervalId) => window.clearInterval(intervalId));
         setIntervalIds([]);
     };
@@ -30,7 +33,10 @@ const useAnimatedFeatures = (animationRef, arrayLength, seconds = 10000) => {
     };
 
     const handleHover = (cardId, type) => {
-        if (cancelInterval || cardId !== selectedID) return;
+        if (cancelInterval || cardId !== selectedID) {
+            return;
+        }
+
         clearAllIntervals();
 
         if (type === 'onMouseLeave') {
@@ -52,7 +58,10 @@ const useAnimatedFeatures = (animationRef, arrayLength, seconds = 10000) => {
     }, [animationRef, isVisible]);
 
     useEffect(() => {
-        if (!hoveredID) null;
+        if (!hoveredID) {
+            null;
+        }
+
         handleHover(hoveredID, 'onMouseEnter');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedID]);
diff --git a/components/templates/templateHero/TemplateHero.js b/components/templates/templateHero/TemplateHero.js
index 2f902c13bb..12ebdbd1e9 100644
--- a/components/templates/templateHero/TemplateHero.js
+++ b/components/templates/templateHero/TemplateHero.js
@@ -21,11 +21,11 @@ const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2,
                 </div>
                 <div className="template-hero-card-links ">
                     <a href={supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primereact-templates'} target="_blank">
-                        <i className="pi pi-github " style={{ fontSize: '1rem' }}></i>
+                        <i className="pi pi-github " style={{ fontSize: '1rem' }} />
                         <span>{free ? 'Open Issues' : 'Get Support'}</span>
                     </a>
                     <a href={docHref} target="_blank">
-                        <i className="pi pi-book " style={{ fontSize: '1rem' }}></i>
+                        <i className="pi pi-book " style={{ fontSize: '1rem' }} />
                         <span>Read Doc</span>
                     </a>
                 </div>
diff --git a/pages/404.js b/pages/404.js
index 88670b0405..69e482912f 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -8,7 +8,7 @@ const Custom404 = () => {
                     4
                 </span>
                 <div className="flex align-items-center justify-content-center bg-primary border-circle w-8rem h-8rem">
-                    <i className="pi pi-prime text-7xl"></i>
+                    <i className="pi pi-prime text-7xl" />
                 </div>
                 <span className="font-bold" style={{ fontSize: '144px' }}>
                     4
diff --git a/pages/_app.js b/pages/_app.js
index 116530323c..596013c10b 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -13,13 +13,13 @@ import '../styles/layout/layout.scss';
 function AppContent({ component: Component, pageProps }) {
     if (Component.getLayout) {
         return Component.getLayout(<Component {...pageProps} />);
-    } else {
-        return (
-            <Layout>
-                <Component {...pageProps} />
-            </Layout>
-        );
     }
+
+    return (
+        <Layout>
+            <Component {...pageProps} />
+        </Layout>
+    );
 }
 
 export default function MyApp({ Component, pageProps }) {
diff --git a/pages/api/data/customers.js b/pages/api/data/customers.js
index 667533f3fb..e24f433cb3 100644
--- a/pages/api/data/customers.js
+++ b/pages/api/data/customers.js
@@ -8,9 +8,9 @@ function getSlice(queryObject, customers) {
         let rows = parseInt(queryObject.rows);
 
         return customers.slice(first, first + rows);
-    } else {
-        return customers;
     }
+
+    return customers;
 }
 
 function sort(queryObject, customers) {
@@ -19,11 +19,17 @@ function sort(queryObject, customers) {
         let value2 = resolveFieldData(data2, queryObject.sortField);
         let result = null;
 
-        if (value1 == null && value2 != null) result = -1;
-        else if (value1 != null && value2 == null) result = 1;
-        else if (value1 == null && value2 == null) result = 0;
-        else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2);
-        else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        if (value1 == null && value2 != null) {
+            result = -1;
+        } else if (value1 != null && value2 == null) {
+            result = 1;
+        } else if (value1 == null && value2 == null) {
+            result = 0;
+        } else if (typeof value1 === 'string' && typeof value2 === 'string') {
+            result = value1.localeCompare(value2);
+        } else {
+            result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        }
 
         return queryObject.sortOrder * result;
     });
@@ -101,8 +107,11 @@ const filters = {
             return false;
         }
 
-        if (value.getTime && filter.getTime) return value.getTime() === filter.getTime();
-        else return removeAccents(value.toString()).toLocaleLowerCase() == removeAccents(filter.toString()).toLocaleLowerCase();
+        if (value.getTime && filter.getTime) {
+            return value.getTime() === filter.getTime();
+        }
+
+        return removeAccents(value.toString()).toLocaleLowerCase() == removeAccents(filter.toString()).toLocaleLowerCase();
     },
 
     notEquals: (value, filter) => {
@@ -114,8 +123,11 @@ const filters = {
             return true;
         }
 
-        if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime();
-        else return removeAccents(value.toString()).toLocaleLowerCase() != removeAccents(filter.toString()).toLocaleLowerCase();
+        if (value.getTime && filter.getTime) {
+            return value.getTime() !== filter.getTime();
+        }
+
+        return removeAccents(value.toString()).toLocaleLowerCase() != removeAccents(filter.toString()).toLocaleLowerCase();
     },
 
     in: (value, filter) => {
@@ -150,22 +162,33 @@ function filter(value, field, filterValue, filterMatchMode) {
 }
 
 function equals(obj1, obj2) {
-    if (obj1 === obj2) return true;
+    if (obj1 === obj2) {
+        return true;
+    }
 
-    if (obj1 && obj2 && typeof obj1 == 'object' && typeof obj2 == 'object') {
-        let i, length, key;
+    if (obj1 && obj2 && typeof obj1 === 'object' && typeof obj2 === 'object') {
+        let i; let length; let key;
 
         let keys = Object.keys(obj1);
 
         length = keys.length;
 
-        if (length !== Object.keys(obj2).length) return false;
+        if (length !== Object.keys(obj2).length) {
+            return false;
+        }
 
-        for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(obj2, keys[i])) return false;
+        for (i = length; i-- !== 0;) {
+            if (!Object.prototype.hasOwnProperty.call(obj2, keys[i])) {
+                return false;
+            }
+        }
 
-        for (i = length; i-- !== 0; ) {
+        for (i = length; i-- !== 0;) {
             key = keys[i];
-            if (!equals(obj1[key], obj2[key])) return false;
+
+            if (!equals(obj1[key], obj2[key])) {
+                return false;
+            }
         }
 
         return true;
@@ -207,23 +230,23 @@ function resolveFieldData(data, field) {
     if (data && field) {
         if (field.indexOf('.') == -1) {
             return data[field];
-        } else {
-            let fields = field.split('.');
-            let value = data;
+        }
 
-            for (let i = 0, len = fields.length; i < len; ++i) {
-                if (value == null) {
-                    return null;
-                }
+        let fields = field.split('.');
+        let value = data;
 
-                value = value[fields[i]];
+        for (let i = 0, len = fields.length; i < len; ++i) {
+            if (value == null) {
+                return null;
             }
 
-            return value;
+            value = value[fields[i]];
         }
-    } else {
-        return null;
+
+        return value;
     }
+
+    return null;
 }
 
 export default async function handler(req, res) {
diff --git a/pages/bootstrap/index.js b/pages/bootstrap/index.js
index a023617ab8..416c82eaa9 100644
--- a/pages/bootstrap/index.js
+++ b/pages/bootstrap/index.js
@@ -22,7 +22,7 @@ const BootstrapDemo = () => {
     is a well-known CSS library to build responsive and mobile first web projects.
     `;
 
-    return <DocComponent title="Bootstrap - PrimeReact" header="Bootstrap" description={description} componentDocs={docs} hideTabMenu></DocComponent>;
+    return <DocComponent title="Bootstrap - PrimeReact" header="Bootstrap" description={description} componentDocs={docs} hideTabMenu />;
 };
 
 export default BootstrapDemo;
diff --git a/pages/bulma/index.js b/pages/bulma/index.js
index e19f1cbeaf..68a11e2d52 100644
--- a/pages/bulma/index.js
+++ b/pages/bulma/index.js
@@ -21,7 +21,7 @@ const BulmaDemo = () => {
     <a href="https://bulma.io/" className="font-medium hover:underline text-primary">Bulma</a> is a free, open source framework that provides ready-to-use frontend components and utilities.
     `;
 
-    return <DocComponent title="Bulma - PrimeReact" header="Bulma" description={description} componentDocs={docs} hideTabMenu></DocComponent>;
+    return <DocComponent title="Bulma - PrimeReact" header="Bulma" description={description} componentDocs={docs} hideTabMenu />;
 };
 
 export default BulmaDemo;
diff --git a/pages/index.js b/pages/index.js
index 3cbafb3ebc..e6a98627ee 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -39,12 +39,12 @@ export default function Home() {
                 <meta name="twitter:site" content="@primereact" />
                 <meta name="twitter:title" content="PrimeReact | React UI Component Library" />
                 <meta name="twitter:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
-                <meta property="og:type" content="website"></meta>
-                <meta property="og:title" content="PrimeReact | React UI Component Library"></meta>
-                <meta property="og:url" content="https://primereact.org"></meta>
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content="PrimeReact | React UI Component Library" />
+                <meta property="og:url" content="https://primereact.org" />
                 <meta property="og:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
-                <meta property="og:image" content="https://primefaces.org/static/social/primereact-preview.jpg"></meta>
-                <meta property="og:ttl" content="604800"></meta>
+                <meta property="og:image" content="https://primefaces.org/static/social/primereact-preview.jpg" />
+                <meta property="og:ttl" content="604800" />
             </Head>
             <NewsSection />
             <Topbar onDarkSwitchClick={toggleDarkMode} />
diff --git a/pages/playground/index.js b/pages/playground/index.js
index 906848a580..e88db09fae 100644
--- a/pages/playground/index.js
+++ b/pages/playground/index.js
@@ -19,7 +19,7 @@ const PlayGround = () => {
                             style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }}
                             allowfFullScreen
                             src="https://stackblitz.com/edit/stackblitz-starters-66bhze?embed=1&file=src%2FApp.tsx"
-                        ></iframe>
+                        />
                     </section>
                 </div>
             </div>
diff --git a/pages/roadmap/index.js b/pages/roadmap/index.js
index eee8009935..c02587e782 100644
--- a/pages/roadmap/index.js
+++ b/pages/roadmap/index.js
@@ -26,7 +26,7 @@ const Roadmap = () => {
             <div className="overflow-auto">
                 <div style={{ minWidth: '1200px' }}>
                     <div className="flex gap-3 mb-3">
-                        <div className="flex-shrink-0 w-14rem"></div>
+                        <div className="flex-shrink-0 w-14rem" />
                         <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
                         <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
                         <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
@@ -40,21 +40,21 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
                                     <p className="mt-0 mb-3 line-height-3">Provide presets for the entire UI suite.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '10%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '10%', height: '4px' }} />
                                     </div>
                                 </div>
                                 <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
                                     <h2 className="text-lg font-bold mt-0 mb-2">New Components</h2>
                                     <p className="mt-0 mb-3 line-height-3">Layout, Typography, MeterGroup, Drawer, Stepper...</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '5%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '5%', height: '4px' }} />
                                     </div>
                                 </div>
                                 <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
                                     <h2 className="text-lg font-bold mt-0 mb-2">Form States</h2>
                                     <p className="mt-0 mb-3 line-height-3">Add filled and invalid props to form components.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
@@ -63,21 +63,21 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
                                     <p className="mt-0 mb-3 line-height-3">Move theming into core to replace sass repo.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                                 <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
                                     <h2 className="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
                                     <p className="mt-0 mb-3 line-height-3">Implement figma design tokens as CSS variables instead of SCSS.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                                 <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
                                     <h2 className="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
                                     <p className="mt-0 mb-3 line-height-3">RTL support for the UI components.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
@@ -86,14 +86,14 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2>
                                     <p className="mt-0 mb-3 line-height-3">Drag and Drop utilities.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                                 <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
                                     <h2 className="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
                                     <p className="mt-0 mb-3 line-height-3">Sheet, Event Calendar.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
@@ -102,7 +102,7 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
                                     <p className="mt-0 mb-3 line-height-3">Gantt Chart, Flow Chart.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
@@ -114,7 +114,7 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
                                     <p className="mt-0 mb-3 line-height-3">Design tokens to sync with the new styled mode.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-indigo-500 border-round" style={{ width: '20%', height: '4px' }}></div>
+                                        <div className="bg-indigo-500 border-round" style={{ width: '20%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
@@ -123,12 +123,12 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
                                     <p className="mt-0 mb-3 line-height-3">Build the infrastructure to generate themes from Figma.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-indigo-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-indigo-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
                         </div>
                         <div className="flex gap-3 border-bottom-1 surface-border pb-3">
                             <div className="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
@@ -137,13 +137,13 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Documentation</h2>
                                     <p className="mt-0 mb-3 line-height-3">Add new demos and documentation.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-teal-500 border-round" style={{ width: '10%', height: '4px' }}></div>
+                                        <div className="bg-teal-500 border-round" style={{ width: '10%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
                         </div>
                         <div className="flex gap-3 border-bottom-1 surface-border pb-3">
                             <div className="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PRIMEBLOCKS</div>
@@ -152,21 +152,21 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
                                     <p className="mt-0 mb-3 line-height-3">Create new blocks.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }}></div>
+                                        <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }} />
                                     </div>
                                 </div>
                                 <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
                                     <h2 className="text-lg font-bold mt-0 mb-2">Blocks Website</h2>
                                     <p className="mt-0 mb-3 line-height-3">New design for blocks application.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }}></div>
+                                        <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }} />
                                     </div>
                                 </div>
                                 <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
                                     <h2 className="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
                                     <p className="mt-0 mb-3 line-height-3">Port the entire Blocks to Tailwind.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
@@ -175,12 +175,12 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Online App</h2>
                                     <p className="mt-0 mb-3 line-height-3">Implement a SaaS app to access the blocks instead of an offline download.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
                         </div>
                         <div className="flex gap-3 border-bottom-1 surface-border pb-3">
                             <div className="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">DESIGN</div>
@@ -189,7 +189,7 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Aura UI Theme</h2>
                                     <p className="mt-0 mb-3 line-height-3">Brand new default theme with a modern and attractive design.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-pink-500 border-round" style={{ width: '75%', height: '4px' }}></div>
+                                        <div className="bg-pink-500 border-round" style={{ width: '75%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
@@ -198,12 +198,12 @@ const Roadmap = () => {
                                     <h2 className="text-lg font-bold mt-0 mb-2">Theme Editor</h2>
                                     <p className="mt-0 mb-3 line-height-3">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
                                     <div className="surface-200 border-round">
-                                        <div className="bg-pink-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                        <div className="bg-pink-500 border-round" style={{ width: '0%', height: '4px' }} />
                                     </div>
                                 </div>
                             </div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
-                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
                         </div>
                     </div>
                 </div>
diff --git a/pages/support/index.js b/pages/support/index.js
index f8bddad0ab..022aeb8b61 100644
--- a/pages/support/index.js
+++ b/pages/support/index.js
@@ -5,7 +5,7 @@ const SupportPage = () => {
 
             <div className="flex flex-column xl:flex-row mb-5 gap-5">
                 <div className="card xl:w-3 m-0 relative overflow-hidden">
-                    <i className="pi pi-github absolute text-200" style={{ bottom: '-50px', right: '-50px', fontSize: '200px', transform: 'rotateX(45deg) rotateY(0deg) rotateZ(-45deg)' }}></i>
+                    <i className="pi pi-github absolute text-200" style={{ bottom: '-50px', right: '-50px', fontSize: '200px', transform: 'rotateX(45deg) rotateY(0deg) rotateZ(-45deg)' }} />
                     <div className="text-2xl text-900 font-semibold mb-3 relative">Community Support</div>
                     <p className="m-0 line-height-3 relative text-lg text-800">
                         <a href="https://github.com/orgs/primefaces/discussions" className="text-primary hover:underline font-medium">
@@ -19,7 +19,7 @@ const SupportPage = () => {
                         although they are monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead.
                     </p>
                 </div>
-                <div className="card m-0 xl:w-9 text-white bg-cover" style={{ backgroundImage: `url(/images/support/card-pro.jpg)` }}>
+                <div className="card m-0 xl:w-9 text-white bg-cover" style={{ backgroundImage: 'url(/images/support/card-pro.jpg)' }}>
                     <div className="text-2xl font-semibold mb-3">PRO Support</div>
                     <p className="m-0 line-height-3 text-lg">
                         With PRO support, it's easy to support, tune and add features to PrimeReact as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed
@@ -44,55 +44,55 @@ const SupportPage = () => {
                 <div className="flex flex-wrap -mt-3 gap-3 text-800">
                     <ul className="flex-auto list-none p-0 m-0 text-lg p-3">
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Access to Private JIRA</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Response within 1 business day</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Unlimited Issue Tickets</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Conference Calls</span>
                         </li>
                     </ul>
                     <ul className="flex-auto list-none p-0 m-0 text-lg p-3">
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">PrimeBlocks - Enterprise License</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Theme Designer - Extended License</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Figma UI Kit - Enterprise License</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">1 Premium Template - Extended License</span>
                         </li>
                     </ul>
                     <ul className="flex-auto list-none p-0 m-0 text-lg p-3">
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Maintenance for Any Version</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Visual Theme Builder (Soon)</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Figma to Theme Generator (Soon)</span>
                         </li>
                         <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                            <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">PrimeIcons PRO - (Soon)</span>
                         </li>
                     </ul>
diff --git a/pages/templates/sakai/index.js b/pages/templates/sakai/index.js
index 0e9637942b..184d6c0afe 100644
--- a/pages/templates/sakai/index.js
+++ b/pages/templates/sakai/index.js
@@ -88,7 +88,7 @@ const features1Data = [
     {
         src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-github.png',
         title: 'Open Source and Free to Use',
-        description: "Explore Sakai, our versatile, open-source React application template. It's free for your every innovation."
+        description: 'Explore Sakai, our versatile, open-source React application template. It\'s free for your every innovation.'
     },
     {
         src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-ready.png',
diff --git a/pages/theming/index.js b/pages/theming/index.js
index bbc8f8da1e..062e812da4 100644
--- a/pages/theming/index.js
+++ b/pages/theming/index.js
@@ -42,7 +42,7 @@ const ThemingDoc = () => {
                 you may use a named class, CSS Modules or a CSS-in-JS solution like styled-jsx. A video tutorial that goes through the alternatives below is available.`,
             content: (
                 <div className="video-container">
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/3pO79DdPpiU" frameBorder="0" allowFullScreen="true" title="Scoped CSS with PrimeReact"></iframe>
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/3pO79DdPpiU" frameBorder="0" allowFullScreen="true" title="Scoped CSS with PrimeReact" />
                 </div>
             ),
             children: [
diff --git a/pages/uikit/index.js b/pages/uikit/index.js
index 913b687284..a561f5c50e 100644
--- a/pages/uikit/index.js
+++ b/pages/uikit/index.js
@@ -25,27 +25,27 @@ const UIKitPage = (props) => {
 
                                 <ul className="flex flex-wrap m-0 p-0 text-lg">
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Auto Layout</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Variants</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Styles</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Interactive Components</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Boolean, Instance Swap and Text Properties</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Nested Instances</span>
                                     </li>
                                 </ul>
@@ -59,19 +59,19 @@ const UIKitPage = (props) => {
 
                                 <ul className="flex flex-wrap m-0 p-0 text-lg">
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Numerous Components</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Icon Library</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Easy Customization</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Atomic Approach</span>
                                     </li>
                                 </ul>
@@ -91,11 +91,11 @@ const UIKitPage = (props) => {
 
                                 <ul className="flex flex-wrap m-0 p-0 text-lg">
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Lara Light</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Lara Dark</span>
                                     </li>
                                 </ul>
@@ -111,15 +111,15 @@ const UIKitPage = (props) => {
 
                                 <ul className="flex flex-wrap m-0 p-0 text-lg">
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Countless Design Tokens</span>
                                     </li>
                                     <li className="flex align-items-center w-6 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Light and Dark Sets</span>
                                     </li>
                                     <li className="flex align-items-center w-12 p-3">
-                                        <i className="pi pi-check-circle text-green-600 mr-2"></i>
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
                                         <span className="font-bold">Well Documented</span>
                                     </li>
                                 </ul>
@@ -169,27 +169,27 @@ const UIKitPage = (props) => {
                                         <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
                                         <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span className="font-bold">1 Designer</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Auto Layout & Variants</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Interactive Components</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Tokens Studio Support</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Lifetime Support</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Use on Unlimited Projects</span>
                                             </li>
                                         </ul>
@@ -213,27 +213,27 @@ const UIKitPage = (props) => {
                                         <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
                                         <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span className="font-bold">Up to 5 Designers</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Auto Layout & Variants</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Interactive Components</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Tokens Studio Support</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Lifetime Support</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Use on Unlimited Projects</span>
                                             </li>
                                         </ul>
@@ -257,27 +257,27 @@ const UIKitPage = (props) => {
                                         <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
                                         <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span className="font-bold">Unlimited Designers</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Auto Layout & Variants</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Interactive Components</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Tokens Studio Support</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Lifetime Support</span>
                                             </li>
                                             <li className="flex align-items-center mb-3">
-                                                <i className="pi pi-check-circle text-green-500 mr-2"></i>
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
                                                 <span>Use on Unlimited Projects</span>
                                             </li>
                                         </ul>

From 4a9df7cf12f51ead2ed3ffa1b4828d3f778e04e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Fri, 29 Mar 2024 15:51:01 +0300
Subject: [PATCH 062/194] Prettier

---
 components/doc/carousel/basicdoc.js           |  16 +-
 components/doc/carousel/circulardoc.js        |  16 +-
 components/doc/carousel/numscrolldoc.js       |  16 +-
 components/doc/carousel/pt/ptdoc.js           |  16 +-
 components/doc/carousel/responsivedoc.js      |  16 +-
 components/doc/carousel/verticaldoc.js        |  16 +-
 components/doc/common/codeeditor/index.js     |   2 +-
 components/doc/common/docapitable.js          |   4 +-
 components/doc/datascroller/basicdoc.js       |  16 +-
 components/doc/datascroller/inlinedoc.js      |  16 +-
 components/doc/datascroller/loaderdoc.js      |  16 +-
 components/doc/datascroller/pt/ptdoc.js       |  16 +-
 components/doc/datatable/edit/celleditdoc.js  |  36 +-
 components/doc/datatable/edit/roweditdoc.js   |  16 +-
 .../doc/datatable/filter/advanceddoc.js       |  20 +-
 components/doc/datatable/filter/basicdoc.js   |  20 +-
 components/doc/datatable/filter/customdoc.js  |  20 +-
 components/doc/datatable/rowexpansiondoc.js   |  36 +-
 .../doc/datatable/rowgroup/expandabledoc.js   |  20 +-
 .../doc/datatable/rowgroup/rowspandoc.js      |  20 +-
 .../doc/datatable/rowgroup/subheaderdoc.js    |  20 +-
 .../doc/datatable/samples/customersdoc.js     |  20 +-
 .../doc/datatable/samples/productsdoc.js      |  16 +-
 .../doc/datatable/scroll/frozenrowsdoc.js     |   3 +-
 components/doc/datatable/statefuldoc.js       |  20 +-
 components/doc/datatable/templatedoc.js       |  16 +-
 components/doc/dataview/basicdoc.js           |  16 +-
 components/doc/dataview/layoutdoc.js          |  16 +-
 components/doc/dataview/paginationdoc.js      |  16 +-
 components/doc/dataview/pt/ptdoc.js           |  16 +-
 components/doc/dataview/sortingdoc.js         |  16 +-
 components/doc/dock/advanceddoc.js            |  30 +-
 components/doc/icons/figmadoc.js              |   7 +-
 components/doc/multiselect/pt/ptdoc.js        |   8 +-
 components/doc/paginator/templatedoc.js       |   4 +-
 components/doc/terminal/basicdoc.js           |  30 +-
 components/doc/terminal/pt/ptdoc.js           |  30 +-
 components/doc/treeselect/checkboxdoc.js      |  11 +-
 components/landing/themesection.js            |  20 +-
 components/lib/accordion/Accordion.js         |  48 +-
 components/lib/autocomplete/AutoComplete.js   | 146 +--
 components/lib/calendar/Calendar.js           | 893 +++++++++---------
 components/lib/carousel/Carousel.js           |  50 +-
 components/lib/cascadeselect/CascadeSelect.js |  36 +-
 .../lib/cascadeselect/CascadeSelectSub.js     |  86 +-
 components/lib/chart/Chart.js                 |   2 +-
 components/lib/chips/Chips.js                 |  74 +-
 components/lib/colorpicker/ColorPicker.js     |  66 +-
 components/lib/componentbase/ComponentBase.js |   8 +-
 components/lib/contextmenu/ContextMenu.js     | 110 +--
 components/lib/datatable/BodyCell.js          | 103 +-
 components/lib/datatable/BodyRow.js           |  64 +-
 components/lib/datatable/ColumnFilter.js      |  84 +-
 components/lib/datatable/DataTable.js         |  34 +-
 components/lib/datatable/DataTableBase.js     |  20 +-
 components/lib/datatable/TableBody.js         |   4 +-
 components/lib/dialog/Dialog.js               |   4 +-
 components/lib/dock/Dock.js                   | 102 +-
 components/lib/dropdown/Dropdown.js           | 164 ++--
 components/lib/dropdown/DropdownBase.js       |   6 +-
 components/lib/editor/Editor.js               |   2 +-
 components/lib/fileupload/FileUpload.js       |   6 +-
 components/lib/galleria/GalleriaItem.js       |  84 +-
 components/lib/galleria/GalleriaThumbnails.js |  62 +-
 components/lib/hooks/useFavicon.js            |   2 +-
 components/lib/hooks/useMouse.js              |   3 +-
 components/lib/image/Image.js                 |  18 +-
 components/lib/inputmask/InputMask.js         |  20 +-
 components/lib/inputnumber/InputNumber.js     | 241 +++--
 components/lib/knob/Knob.js                   |  74 +-
 components/lib/listbox/ListBox.js             |  86 +-
 components/lib/megamenu/MegaMenu.js           | 140 +--
 components/lib/megamenu/MegaMenuBase.js       |  30 +-
 components/lib/mention/Mention.js             | 128 +--
 components/lib/menu/Menu.js                   |  74 +-
 components/lib/menubar/Menubar.js             | 106 +--
 components/lib/message/Message.js             |  28 +-
 components/lib/messages/UIMessage.js          |  28 +-
 components/lib/multiselect/MultiSelect.js     | 124 +--
 .../multistatecheckbox/MultiStateCheckbox.js  |   3 +-
 components/lib/orderlist/OrderList.js         |  66 +-
 components/lib/overlaypanel/OverlayPanel.js   |  20 +-
 components/lib/paginator/Paginator.js         | 268 +++---
 components/lib/panelmenu/PanelMenu.js         |  48 +-
 components/lib/panelmenu/PanelMenuList.js     |  96 +-
 components/lib/passthrough/tailwind/index.js  | 102 +-
 components/lib/password/Password.js           |  78 +-
 components/lib/picklist/PickList.js           | 176 ++--
 .../lib/picklist/PickListTransferControls.js  |  31 +-
 components/lib/progressbar/ProgressBar.js     |   2 +-
 components/lib/rating/Rating.js               |  38 +-
 components/lib/scrollpanel/ScrollPanel.js     |  88 +-
 .../lib/selectbutton/SelectButtonItem.js      |  41 +-
 components/lib/slider/Slider.js               |  64 +-
 components/lib/speeddial/SpeedDial.js         |  98 +-
 components/lib/splitter/Splitter.js           | 112 +--
 components/lib/steps/Steps.js                 |  66 +-
 components/lib/styleclass/StyleClass.js       |  20 +-
 components/lib/tabmenu/TabMenu.js             |  66 +-
 components/lib/tabview/TabView.js             |  64 +-
 components/lib/terminal/Terminal.js           |  44 +-
 components/lib/tieredmenu/TieredMenu.js       | 110 +--
 components/lib/toast/ToastMessage.js          |  28 +-
 components/lib/tooltip/Tooltip.js             |  38 +-
 components/lib/tree/UITreeNode.js             |  44 +-
 components/lib/treeselect/TreeSelect.js       | 108 +--
 components/lib/treetable/TreeTable.js         |   8 +-
 components/lib/treetable/TreeTableBase.js     |  14 +-
 components/lib/treetable/TreeTableRow.js      |  75 +-
 components/lib/utils/DomHandler.js            |  16 +-
 components/lib/utils/Mask.js                  |  33 +-
 components/lib/utils/MergeProps.js            |   6 +-
 components/lib/utils/ObjectUtils.js           |   6 +-
 pages/api/data/customers.js                   |   8 +-
 pages/templates/sakai/index.js                |   2 +-
 115 files changed, 3080 insertions(+), 3036 deletions(-)

diff --git a/components/doc/carousel/basicdoc.js b/components/doc/carousel/basicdoc.js
index 5bb5164d60..6b5268f5d2 100644
--- a/components/doc/carousel/basicdoc.js
+++ b/components/doc/carousel/basicdoc.js
@@ -33,17 +33,17 @@ export function BasicDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/carousel/circulardoc.js b/components/doc/carousel/circulardoc.js
index 3a32670da8..f30f8e4a0a 100644
--- a/components/doc/carousel/circulardoc.js
+++ b/components/doc/carousel/circulardoc.js
@@ -33,17 +33,17 @@ export function CircularDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/carousel/numscrolldoc.js b/components/doc/carousel/numscrolldoc.js
index c7319b819f..9608e2c7ff 100644
--- a/components/doc/carousel/numscrolldoc.js
+++ b/components/doc/carousel/numscrolldoc.js
@@ -33,17 +33,17 @@ export function NumScrollDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/carousel/pt/ptdoc.js b/components/doc/carousel/pt/ptdoc.js
index a65eab836d..a2da2c6f00 100644
--- a/components/doc/carousel/pt/ptdoc.js
+++ b/components/doc/carousel/pt/ptdoc.js
@@ -28,17 +28,17 @@ export function PTDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/carousel/responsivedoc.js b/components/doc/carousel/responsivedoc.js
index e594bf5186..82d2404543 100644
--- a/components/doc/carousel/responsivedoc.js
+++ b/components/doc/carousel/responsivedoc.js
@@ -33,17 +33,17 @@ export function ResponsiveDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/carousel/verticaldoc.js b/components/doc/carousel/verticaldoc.js
index d3106e1e0f..93dac0d31d 100644
--- a/components/doc/carousel/verticaldoc.js
+++ b/components/doc/carousel/verticaldoc.js
@@ -11,17 +11,17 @@ export function VerticalDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/common/codeeditor/index.js b/components/doc/common/codeeditor/index.js
index b47eb30383..2820cac576 100644
--- a/components/doc/common/codeeditor/index.js
+++ b/components/doc/common/codeeditor/index.js
@@ -63,7 +63,7 @@ export const useStackBlitz = (props) => {
             title: props.title || 'PrimeReact Demo',
             template: 'node',
             description: props.embedded
-                ? 'This example demonstrates how to style components with Tailwind CSS using PrimeReact\'s unstyled property. As mentioned in the PrimeReact documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS.'
+                ? "This example demonstrates how to style components with Tailwind CSS using PrimeReact's unstyled property. As mentioned in the PrimeReact documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
                 : '**' +
                   (props.description || '') +
                   '**\n PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.',
diff --git a/components/doc/common/docapitable.js b/components/doc/common/docapitable.js
index 42f094bfab..3fbe87100a 100644
--- a/components/doc/common/docapitable.js
+++ b/components/doc/common/docapitable.js
@@ -103,8 +103,8 @@ const DocApiTable = (props) => {
                                 {Object.entries(d).map(
                                     ([k, v], index) =>
                                         k !== 'readonly' &&
-                                            k !== 'optional' &&
-                                            k !== 'deprecated' && (
+                                        k !== 'optional' &&
+                                        k !== 'deprecated' && (
                                             <td key={index}>
                                                 {k === 'parameters' ? (
                                                     v.map((_v, i) => {
diff --git a/components/doc/datascroller/basicdoc.js b/components/doc/datascroller/basicdoc.js
index d5817b6991..f3e157d605 100644
--- a/components/doc/datascroller/basicdoc.js
+++ b/components/doc/datascroller/basicdoc.js
@@ -16,17 +16,17 @@ export function BasicDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/datascroller/inlinedoc.js b/components/doc/datascroller/inlinedoc.js
index c3a4ebe895..00406fb6fb 100644
--- a/components/doc/datascroller/inlinedoc.js
+++ b/components/doc/datascroller/inlinedoc.js
@@ -16,17 +16,17 @@ export function InlineDataScrollerDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/datascroller/loaderdoc.js b/components/doc/datascroller/loaderdoc.js
index e44942420a..bc4bbfb199 100644
--- a/components/doc/datascroller/loaderdoc.js
+++ b/components/doc/datascroller/loaderdoc.js
@@ -17,17 +17,17 @@ export function LoaderDataScrollerDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/datascroller/pt/ptdoc.js b/components/doc/datascroller/pt/ptdoc.js
index 8be4b1803d..7391df22f1 100644
--- a/components/doc/datascroller/pt/ptdoc.js
+++ b/components/doc/datascroller/pt/ptdoc.js
@@ -16,17 +16,17 @@ export function PTDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/edit/celleditdoc.js b/components/doc/datatable/edit/celleditdoc.js
index 4164617971..77b2d6cf76 100644
--- a/components/doc/datatable/edit/celleditdoc.js
+++ b/components/doc/datatable/edit/celleditdoc.js
@@ -41,24 +41,24 @@ export function CellEditDoc(props) {
         let { rowData, newValue, field, originalEvent: event } = e;
 
         switch (field) {
-        case 'quantity':
-        case 'price':
-            if (isPositiveInteger(newValue)) {
-                rowData[field] = newValue;
-            } else {
-                event.preventDefault();
-            }
-
-            break;
-
-        default:
-            if (newValue.trim().length > 0) {
-                rowData[field] = newValue;
-            } else {
-                event.preventDefault();
-            }
-
-            break;
+            case 'quantity':
+            case 'price':
+                if (isPositiveInteger(newValue)) {
+                    rowData[field] = newValue;
+                } else {
+                    event.preventDefault();
+                }
+
+                break;
+
+            default:
+                if (newValue.trim().length > 0) {
+                    rowData[field] = newValue;
+                } else {
+                    event.preventDefault();
+                }
+
+                break;
         }
     };
 
diff --git a/components/doc/datatable/edit/roweditdoc.js b/components/doc/datatable/edit/roweditdoc.js
index cf658bb613..b864b4d46c 100644
--- a/components/doc/datatable/edit/roweditdoc.js
+++ b/components/doc/datatable/edit/roweditdoc.js
@@ -20,17 +20,17 @@ export function RowEditDoc(props) {
 
     const getSeverity = (value) => {
         switch (value) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/filter/advanceddoc.js b/components/doc/datatable/filter/advanceddoc.js
index ba0fbbb0b3..a828dc4185 100644
--- a/components/doc/datatable/filter/advanceddoc.js
+++ b/components/doc/datatable/filter/advanceddoc.js
@@ -39,20 +39,20 @@ export function AdvancedFilterDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/filter/basicdoc.js b/components/doc/datatable/filter/basicdoc.js
index 87102f391e..67a9173ed3 100644
--- a/components/doc/datatable/filter/basicdoc.js
+++ b/components/doc/datatable/filter/basicdoc.js
@@ -41,20 +41,20 @@ export function BasicFilterDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/filter/customdoc.js b/components/doc/datatable/filter/customdoc.js
index c62747f5a2..447681d38c 100644
--- a/components/doc/datatable/filter/customdoc.js
+++ b/components/doc/datatable/filter/customdoc.js
@@ -63,20 +63,20 @@ export function CustomFilterDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/rowexpansiondoc.js b/components/doc/datatable/rowexpansiondoc.js
index f8c1056e91..3b46c4be41 100644
--- a/components/doc/datatable/rowexpansiondoc.js
+++ b/components/doc/datatable/rowexpansiondoc.js
@@ -73,36 +73,36 @@ export function RowExpansionDoc(props) {
 
     const getProductSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
     const getOrderSeverity = (order) => {
         switch (order.status) {
-        case 'DELIVERED':
-            return 'success';
+            case 'DELIVERED':
+                return 'success';
 
-        case 'CANCELLED':
-            return 'danger';
+            case 'CANCELLED':
+                return 'danger';
 
-        case 'PENDING':
-            return 'warning';
+            case 'PENDING':
+                return 'warning';
 
-        case 'RETURNED':
-            return 'info';
+            case 'RETURNED':
+                return 'info';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/rowgroup/expandabledoc.js b/components/doc/datatable/rowgroup/expandabledoc.js
index 6f9c948007..e2f7944d0c 100644
--- a/components/doc/datatable/rowgroup/expandabledoc.js
+++ b/components/doc/datatable/rowgroup/expandabledoc.js
@@ -63,20 +63,20 @@ export function ExpandableRowGroupDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/rowgroup/rowspandoc.js b/components/doc/datatable/rowgroup/rowspandoc.js
index 634021b646..4e32be63fc 100644
--- a/components/doc/datatable/rowgroup/rowspandoc.js
+++ b/components/doc/datatable/rowgroup/rowspandoc.js
@@ -38,20 +38,20 @@ export function RowSpanRowGroupDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/rowgroup/subheaderdoc.js b/components/doc/datatable/rowgroup/subheaderdoc.js
index bcf9ce55e3..e48d789027 100644
--- a/components/doc/datatable/rowgroup/subheaderdoc.js
+++ b/components/doc/datatable/rowgroup/subheaderdoc.js
@@ -62,20 +62,20 @@ export function SubHeaderRowGroupDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/samples/customersdoc.js b/components/doc/datatable/samples/customersdoc.js
index 6706b08608..9763c01710 100644
--- a/components/doc/datatable/samples/customersdoc.js
+++ b/components/doc/datatable/samples/customersdoc.js
@@ -46,20 +46,20 @@ export const CustomersDoc = (props) => {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js
index 79a63659c6..3c4c750012 100644
--- a/components/doc/datatable/samples/productsdoc.js
+++ b/components/doc/datatable/samples/productsdoc.js
@@ -218,17 +218,17 @@ export function ProductsDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/scroll/frozenrowsdoc.js b/components/doc/datatable/scroll/frozenrowsdoc.js
index 75230108b5..13f59a8091 100644
--- a/components/doc/datatable/scroll/frozenrowsdoc.js
+++ b/components/doc/datatable/scroll/frozenrowsdoc.js
@@ -42,7 +42,8 @@ export function FrozenRowsDoc(props) {
     };
 
     const toggleLock = (data, frozen, index) => {
-        let _lockedCustomers; let _unlockedCustomers;
+        let _lockedCustomers;
+        let _unlockedCustomers;
 
         if (frozen) {
             _lockedCustomers = lockedCustomers.filter((c, i) => i !== index);
diff --git a/components/doc/datatable/statefuldoc.js b/components/doc/datatable/statefuldoc.js
index b6b550a917..c96490a1ce 100644
--- a/components/doc/datatable/statefuldoc.js
+++ b/components/doc/datatable/statefuldoc.js
@@ -38,20 +38,20 @@ export function StatefulDoc(props) {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/doc/datatable/templatedoc.js b/components/doc/datatable/templatedoc.js
index bd1634287f..b4a6bfcabe 100644
--- a/components/doc/datatable/templatedoc.js
+++ b/components/doc/datatable/templatedoc.js
@@ -38,17 +38,17 @@ export function TemplateDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/dataview/basicdoc.js b/components/doc/dataview/basicdoc.js
index 2de9c0d064..369d5faae0 100644
--- a/components/doc/dataview/basicdoc.js
+++ b/components/doc/dataview/basicdoc.js
@@ -17,17 +17,17 @@ export function BasicDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/dataview/layoutdoc.js b/components/doc/dataview/layoutdoc.js
index 967e13e6c5..6aa949cbd2 100644
--- a/components/doc/dataview/layoutdoc.js
+++ b/components/doc/dataview/layoutdoc.js
@@ -18,17 +18,17 @@ export function LayoutDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/dataview/paginationdoc.js b/components/doc/dataview/paginationdoc.js
index 4f14d10bd9..bf0268233b 100644
--- a/components/doc/dataview/paginationdoc.js
+++ b/components/doc/dataview/paginationdoc.js
@@ -18,17 +18,17 @@ export function PaginationDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/dataview/pt/ptdoc.js b/components/doc/dataview/pt/ptdoc.js
index 445894c99a..d78908c210 100644
--- a/components/doc/dataview/pt/ptdoc.js
+++ b/components/doc/dataview/pt/ptdoc.js
@@ -17,17 +17,17 @@ export function PTDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/dataview/sortingdoc.js b/components/doc/dataview/sortingdoc.js
index 4da0283c68..3bfb899b70 100644
--- a/components/doc/dataview/sortingdoc.js
+++ b/components/doc/dataview/sortingdoc.js
@@ -25,17 +25,17 @@ export function SortingDoc(props) {
 
     const getSeverity = (product) => {
         switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
+            case 'INSTOCK':
+                return 'success';
 
-        case 'LOWSTOCK':
-            return 'warning';
+            case 'LOWSTOCK':
+                return 'warning';
 
-        case 'OUTOFSTOCK':
-            return 'danger';
+            case 'OUTOFSTOCK':
+                return 'danger';
 
-        default:
-            return null;
+            default:
+                return null;
         }
     };
 
diff --git a/components/doc/dock/advanceddoc.js b/components/doc/dock/advanceddoc.js
index c893d0cb4e..7177a06066 100644
--- a/components/doc/dock/advanceddoc.js
+++ b/components/doc/dock/advanceddoc.js
@@ -221,25 +221,25 @@ export function AdvancedDoc(props) {
         let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
         switch (command) {
-        case 'date':
-            response = 'Today is ' + new Date().toDateString();
-            break;
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
 
-        case 'greet':
-            response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-            break;
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
 
-        case 'random':
-            response = Math.floor(Math.random() * 100);
-            break;
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
 
-        case 'clear':
-            response = null;
-            break;
+            case 'clear':
+                response = null;
+                break;
 
-        default:
-            response = 'Unknown command: ' + command;
-            break;
+            default:
+                response = 'Unknown command: ' + command;
+                break;
         }
 
         if (response) {
diff --git a/components/doc/icons/figmadoc.js b/components/doc/icons/figmadoc.js
index 80f7d3f627..796dee1744 100644
--- a/components/doc/icons/figmadoc.js
+++ b/components/doc/icons/figmadoc.js
@@ -6,8 +6,11 @@ export function FigmaDoc(props) {
         <>
             <DocSectionText {...props}>
                 <p>
-                  PrimeIcons library is now available on <a href="https://www.figma.com/community/file/1354343849355792252/primeicons" target="_blank" rel="noopener noreferrer">Figma Community</a>. By adding them as a library, you can easily use these
-                  icons in your designs.
+                    PrimeIcons library is now available on{' '}
+                    <a href="https://www.figma.com/community/file/1354343849355792252/primeicons" target="_blank" rel="noopener noreferrer">
+                        Figma Community
+                    </a>
+                    . By adding them as a library, you can easily use these icons in your designs.
                 </p>
             </DocSectionText>
         </>
diff --git a/components/doc/multiselect/pt/ptdoc.js b/components/doc/multiselect/pt/ptdoc.js
index b9bca8f1cd..465d6ba9fe 100644
--- a/components/doc/multiselect/pt/ptdoc.js
+++ b/components/doc/multiselect/pt/ptdoc.js
@@ -154,10 +154,10 @@ export default function PTDemo() {
                         item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
                         token: ({ context }) => {
                             switch (context.value.code) {
-                            case 'NY':
-                                return 'bg-red-300';
-                            case 'RM':
-                                return 'bg-green-300';
+                                case 'NY':
+                                    return 'bg-red-300';
+                                case 'RM':
+                                    return 'bg-green-300';
                             }
 
                             return 'bg-gray-100';
diff --git a/components/doc/paginator/templatedoc.js b/components/doc/paginator/templatedoc.js
index 6db2ff8bed..8dc34faaac 100644
--- a/components/doc/paginator/templatedoc.js
+++ b/components/doc/paginator/templatedoc.js
@@ -16,7 +16,7 @@ export function TemplateDoc(props) {
     const [rows, setRows] = useState([10, 10, 10]);
 
     const [currentPage, setCurrentPage] = useState(1);
-    const [pageInputTooltip, setPageInputTooltip] = useState('Press \'Enter\' key to go to this page.');
+    const [pageInputTooltip, setPageInputTooltip] = useState("Press 'Enter' key to go to this page.");
 
     const onPageChange = (e, index) => {
         setFirst(first.map((f, i) => (index === i ? e.first : f)));
@@ -39,7 +39,7 @@ export function TemplateDoc(props) {
                 _first[0] = currentPage ? options.rows * (page - 1) : 0;
 
                 setFirst(_first);
-                setPageInputTooltip('Press \'Enter\' key to go to this page.');
+                setPageInputTooltip("Press 'Enter' key to go to this page.");
             }
         }
     };
diff --git a/components/doc/terminal/basicdoc.js b/components/doc/terminal/basicdoc.js
index ece78267d3..7413c75528 100644
--- a/components/doc/terminal/basicdoc.js
+++ b/components/doc/terminal/basicdoc.js
@@ -11,25 +11,25 @@ export function BasicDoc(props) {
         let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
         switch (command) {
-        case 'date':
-            response = 'Today is ' + new Date().toDateString();
-            break;
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
 
-        case 'greet':
-            response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-            break;
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
 
-        case 'random':
-            response = Math.floor(Math.random() * 100);
-            break;
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
 
-        case 'clear':
-            response = null;
-            break;
+            case 'clear':
+                response = null;
+                break;
 
-        default:
-            response = 'Unknown command: ' + command;
-            break;
+            default:
+                response = 'Unknown command: ' + command;
+                break;
         }
 
         if (response) {
diff --git a/components/doc/terminal/pt/ptdoc.js b/components/doc/terminal/pt/ptdoc.js
index 7b4cd5868a..0b9c1bfa7a 100644
--- a/components/doc/terminal/pt/ptdoc.js
+++ b/components/doc/terminal/pt/ptdoc.js
@@ -11,25 +11,25 @@ export function PTDoc(props) {
         let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
 
         switch (command) {
-        case 'date':
-            response = 'Today is ' + new Date().toDateString();
-            break;
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
 
-        case 'greet':
-            response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-            break;
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
 
-        case 'random':
-            response = Math.floor(Math.random() * 100);
-            break;
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
 
-        case 'clear':
-            response = null;
-            break;
+            case 'clear':
+                response = null;
+                break;
 
-        default:
-            response = 'Unknown command: ' + command;
-            break;
+            default:
+                response = 'Unknown command: ' + command;
+                break;
         }
 
         if (response) {
diff --git a/components/doc/treeselect/checkboxdoc.js b/components/doc/treeselect/checkboxdoc.js
index b436cd8aae..4d159eac9b 100644
--- a/components/doc/treeselect/checkboxdoc.js
+++ b/components/doc/treeselect/checkboxdoc.js
@@ -115,16 +115,7 @@ export default function CheckboxDemo() {
             </DocSectionText>
             <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card flex justify-content-center">
-                <TreeSelect
-                    value={selectedNodeKeys}
-                    onChange={(e) => setSelectedNodeKeys(e.value)}
-                    options={nodes}
-                    metaKeySelection={false}
-                    className="md:w-20rem w-full"
-                    selectionMode="checkbox"
-                    display="chip"
-                    placeholder="Select Items"
-                />
+                <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false} className="md:w-20rem w-full" selectionMode="checkbox" display="chip" placeholder="Select Items" />
             </div>
             <DocSectionCode code={code} service={['NodeService']} />
         </>
diff --git a/components/landing/themesection.js b/components/landing/themesection.js
index b448eeaccf..1ca1493f66 100644
--- a/components/landing/themesection.js
+++ b/components/landing/themesection.js
@@ -155,20 +155,20 @@ const ThemeSection = () => {
 
     const getSeverity = (status) => {
         switch (status) {
-        case 'unqualified':
-            return 'danger';
+            case 'unqualified':
+                return 'danger';
 
-        case 'qualified':
-            return 'success';
+            case 'qualified':
+                return 'success';
 
-        case 'new':
-            return 'info';
+            case 'new':
+                return 'info';
 
-        case 'negotiation':
-            return 'warning';
+            case 'negotiation':
+                return 'warning';
 
-        case 'renewal':
-            return null;
+            case 'renewal':
+                return null;
         }
     };
 
diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
index e7f4b42cd9..37eb772670 100644
--- a/components/lib/accordion/Accordion.js
+++ b/components/lib/accordion/Accordion.js
@@ -89,30 +89,30 @@ export const Accordion = React.forwardRef((inProps, ref) => {
 
     const onTabHeaderKeyDown = (event, tab, index) => {
         switch (event.code) {
-        case 'ArrowDown':
-            onTabArrowDownKey(event);
-            break;
-
-        case 'ArrowUp':
-            onTabArrowUpKey(event);
-            break;
-
-        case 'Home':
-            onTabHomeKey(event);
-            break;
-
-        case 'End':
-            onTabEndKey(event);
-            break;
-
-        case 'Enter':
-        case 'NumpadEnter':
-        case 'Space':
-            onTabEnterKey(event, tab, index);
-            break;
-
-        default:
-            break;
+            case 'ArrowDown':
+                onTabArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onTabArrowUpKey(event);
+                break;
+
+            case 'Home':
+                onTabHomeKey(event);
+                break;
+
+            case 'End':
+                onTabEndKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onTabEnterKey(event, tab, index);
+                break;
+
+            default:
+                break;
         }
     };
 
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index a4b53b3b7f..dbb15b9708 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -273,103 +273,103 @@ export const AutoComplete = React.memo(
                 let highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
 
                 switch (event.which) {
-                //down
-                case 40:
-                    if (highlightItem) {
-                        let nextElement = findNextItem(highlightItem);
-
-                        if (nextElement) {
-                            !isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight');
-                            nextElement.setAttribute('data-p-highlight', true);
-                            !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
-                            highlightItem.setAttribute('data-p-highlight', false);
-                            DomHandler.scrollInView(getScrollableElement(), nextElement);
-                        }
-                    } else {
-                        highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
-
-                        if (DomHandler.getAttribute(highlightItem, 'data-pc-section') === 'itemgroup') {
-                            highlightItem = findNextItem(highlightItem);
-                        }
-
+                    //down
+                    case 40:
                         if (highlightItem) {
-                            !isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight');
-                            highlightItem.setAttribute('data-p-highlight', true);
+                            let nextElement = findNextItem(highlightItem);
+
+                            if (nextElement) {
+                                !isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight');
+                                nextElement.setAttribute('data-p-highlight', true);
+                                !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
+                                highlightItem.setAttribute('data-p-highlight', false);
+                                DomHandler.scrollInView(getScrollableElement(), nextElement);
+                            }
+                        } else {
+                            highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
+
+                            if (DomHandler.getAttribute(highlightItem, 'data-pc-section') === 'itemgroup') {
+                                highlightItem = findNextItem(highlightItem);
+                            }
+
+                            if (highlightItem) {
+                                !isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight');
+                                highlightItem.setAttribute('data-p-highlight', true);
+                            }
                         }
-                    }
 
-                    event.preventDefault();
-                    break;
+                        event.preventDefault();
+                        break;
 
                     //up
-                case 38:
-                    if (highlightItem) {
-                        let previousElement = findPrevItem(highlightItem);
-
-                        if (previousElement) {
-                            !isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight');
-                            previousElement.setAttribute('data-p-highlight', true);
-                            !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
-                            highlightItem.setAttribute('data-p-highlight', false);
-                            DomHandler.scrollInView(getScrollableElement(), previousElement);
+                    case 38:
+                        if (highlightItem) {
+                            let previousElement = findPrevItem(highlightItem);
+
+                            if (previousElement) {
+                                !isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight');
+                                previousElement.setAttribute('data-p-highlight', true);
+                                !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
+                                highlightItem.setAttribute('data-p-highlight', false);
+                                DomHandler.scrollInView(getScrollableElement(), previousElement);
+                            }
                         }
-                    }
 
-                    event.preventDefault();
-                    break;
+                        event.preventDefault();
+                        break;
 
                     //enter
-                case 13:
-                    if (highlightItem) {
-                        selectHighlightItem(event, highlightItem);
-                        hide();
-                        event.preventDefault();
-                    }
+                    case 13:
+                        if (highlightItem) {
+                            selectHighlightItem(event, highlightItem);
+                            hide();
+                            event.preventDefault();
+                        }
 
-                    break;
+                        break;
 
                     //escape
-                case 27:
-                    hide();
-                    event.preventDefault();
-                    break;
+                    case 27:
+                        hide();
+                        event.preventDefault();
+                        break;
 
                     //tab
-                case 9:
-                    if (highlightItem) {
-                        selectHighlightItem(event, highlightItem);
-                    }
+                    case 9:
+                        if (highlightItem) {
+                            selectHighlightItem(event, highlightItem);
+                        }
 
-                    hide();
-                    break;
+                        hide();
+                        break;
 
-                default:
-                    break;
+                    default:
+                        break;
                 }
             }
 
             if (props.multiple) {
                 switch (event.which) {
-                //backspace
-                case 8:
-                    if (props.value && props.value.length && !inputRef.current.value) {
-                        const removedValue = props.value[props.value.length - 1];
-                        const newValue = props.value.slice(0, -1);
-
-                        updateModel(event, newValue);
-
-                        if (props.onUnselect) {
-                            props.onUnselect({
-                                originalEvent: event,
-                                value: removedValue
-                            });
+                    //backspace
+                    case 8:
+                        if (props.value && props.value.length && !inputRef.current.value) {
+                            const removedValue = props.value[props.value.length - 1];
+                            const newValue = props.value.slice(0, -1);
+
+                            updateModel(event, newValue);
+
+                            if (props.onUnselect) {
+                                props.onUnselect({
+                                    originalEvent: event,
+                                    value: removedValue
+                                });
+                            }
                         }
-                    }
 
-                    break;
+                        break;
 
-                default:
-                    break;
+                    default:
+                        break;
                 }
             }
         };
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index dbe06f168f..73e56920ea 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -103,37 +103,37 @@ export const Calendar = React.memo(
 
         const onInputKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowDown': {
-                if (!overlayVisibleState) {
-                    show();
-                } else {
-                    focusToFirstCell();
-
-                    event.preventDefault();
-                }
+                case 'ArrowDown': {
+                    if (!overlayVisibleState) {
+                        show();
+                    } else {
+                        focusToFirstCell();
 
-                break;
-            }
+                        event.preventDefault();
+                    }
 
-            case 'Escape': {
-                hide();
-                props.touchUI && disableModality();
-                break;
-            }
+                    break;
+                }
 
-            case 'Tab': {
-                if (overlayRef && overlayRef.current) {
-                    DomHandler.getFocusableElements(overlayRef.current).forEach((el) => (el.tabIndex = '-1'));
+                case 'Escape': {
                     hide();
                     props.touchUI && disableModality();
+                    break;
                 }
 
-                break;
-            }
+                case 'Tab': {
+                    if (overlayRef && overlayRef.current) {
+                        DomHandler.getFocusableElements(overlayRef.current).forEach((el) => (el.tabIndex = '-1'));
+                        hide();
+                        props.touchUI && disableModality();
+                    }
+
+                    break;
+                }
 
-            default:
-                //no op
-                break;
+                default:
+                    //no op
+                    break;
             }
         };
 
@@ -201,19 +201,19 @@ export const Calendar = React.memo(
 
         const onContainerButtonKeydown = (event) => {
             switch (event.code) {
-            case 'Tab':
-                !props.inline && trapFocus(event);
-                break;
+                case 'Tab':
+                    !props.inline && trapFocus(event);
+                    break;
 
-            case 'Escape':
-                hide(null, reFocusInputField);
-                event.preventDefault();
+                case 'Escape':
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
 
-                break;
+                    break;
 
-            default:
-                //no op
-                break;
+                default:
+                    //no op
+                    break;
             }
         };
 
@@ -552,44 +552,44 @@ export const Calendar = React.memo(
             }, interval || 500);
 
             switch (type) {
-            case 0:
-                if (direction === 1) {
-                    incrementHour(event);
-                } else {
-                    decrementHour(event);
-                }
+                case 0:
+                    if (direction === 1) {
+                        incrementHour(event);
+                    } else {
+                        decrementHour(event);
+                    }
 
-                break;
+                    break;
 
-            case 1:
-                if (direction === 1) {
-                    incrementMinute(event);
-                } else {
-                    decrementMinute(event);
-                }
+                case 1:
+                    if (direction === 1) {
+                        incrementMinute(event);
+                    } else {
+                        decrementMinute(event);
+                    }
 
-                break;
+                    break;
 
-            case 2:
-                if (direction === 1) {
-                    incrementSecond(event);
-                } else {
-                    decrementSecond(event);
-                }
+                case 2:
+                    if (direction === 1) {
+                        incrementSecond(event);
+                    } else {
+                        decrementSecond(event);
+                    }
 
-                break;
+                    break;
 
-            case 3:
-                if (direction === 1) {
-                    incrementMilliSecond(event);
-                } else {
-                    decrementMilliSecond(event);
-                }
+                case 3:
+                    if (direction === 1) {
+                        incrementMilliSecond(event);
+                    } else {
+                        decrementMilliSecond(event);
+                    }
 
-                break;
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
@@ -1128,223 +1128,223 @@ export const Calendar = React.memo(
             const cellIndex = DomHandler.index(cell);
 
             switch (event.code) {
-            case 'ArrowDown': {
-                cellContent.tabIndex = '-1';
+                case 'ArrowDown': {
+                    cellContent.tabIndex = '-1';
 
-                let nextRow = cell.parentElement.nextElementSibling;
+                    let nextRow = cell.parentElement.nextElementSibling;
 
-                if (nextRow) {
-                    let tableRowIndex = DomHandler.index(cell.parentElement);
-                    const tableRows = Array.from(cell.parentElement.parentElement.children);
-                    const nextTableRows = tableRows.slice(tableRowIndex + 1);
+                    if (nextRow) {
+                        let tableRowIndex = DomHandler.index(cell.parentElement);
+                        const tableRows = Array.from(cell.parentElement.parentElement.children);
+                        const nextTableRows = tableRows.slice(tableRowIndex + 1);
 
-                    let hasNextFocusableDate = nextTableRows.find((el) => {
-                        let focusCell = el.children[cellIndex].children[0];
+                        let hasNextFocusableDate = nextTableRows.find((el) => {
+                            let focusCell = el.children[cellIndex].children[0];
 
-                        return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                    });
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
 
-                    if (hasNextFocusableDate) {
-                        let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
 
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            navigation.current = { backward: false };
+                            navForward(event);
+                        }
                     } else {
                         navigation.current = { backward: false };
                         navForward(event);
                     }
-                } else {
-                    navigation.current = { backward: false };
-                    navForward(event);
-                }
 
-                event.preventDefault();
-                break;
-            }
+                    event.preventDefault();
+                    break;
+                }
 
-            case 'ArrowUp': {
-                cellContent.tabIndex = '-1';
+                case 'ArrowUp': {
+                    cellContent.tabIndex = '-1';
 
-                if (event.altKey) {
-                    hide(null, reFocusInputField);
-                } else {
-                    let prevRow = cell.parentElement.previousElementSibling;
+                    if (event.altKey) {
+                        hide(null, reFocusInputField);
+                    } else {
+                        let prevRow = cell.parentElement.previousElementSibling;
 
-                    if (prevRow) {
-                        let tableRowIndex = DomHandler.index(cell.parentElement);
-                        const tableRows = Array.from(cell.parentElement.parentElement.children);
-                        const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
+                        if (prevRow) {
+                            let tableRowIndex = DomHandler.index(cell.parentElement);
+                            const tableRows = Array.from(cell.parentElement.parentElement.children);
+                            const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
 
-                        let hasNextFocusableDate = prevTableRows.find((el) => {
-                            let focusCell = el.children[cellIndex].children[0];
+                            let hasNextFocusableDate = prevTableRows.find((el) => {
+                                let focusCell = el.children[cellIndex].children[0];
 
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
+                                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                            });
 
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+                            if (hasNextFocusableDate) {
+                                let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
 
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
+                                focusCell.tabIndex = '0';
+                                focusCell.focus();
+                            } else {
+                                navigation.current = { backward: true };
+                                navBackward(event);
+                            }
                         } else {
                             navigation.current = { backward: true };
                             navBackward(event);
                         }
-                    } else {
-                        navigation.current = { backward: true };
-                        navBackward(event);
                     }
-                }
 
-                event.preventDefault();
-                break;
-            }
+                    event.preventDefault();
+                    break;
+                }
 
-            case 'ArrowLeft': {
-                cellContent.tabIndex = '-1';
-                let prevCell = cell.previousElementSibling;
+                case 'ArrowLeft': {
+                    cellContent.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
 
-                if (prevCell) {
-                    const cells = Array.from(cell.parentElement.children);
-                    const prevCells = cells.slice(0, cellIndex).reverse();
+                    if (prevCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const prevCells = cells.slice(0, cellIndex).reverse();
 
-                    let hasNextFocusableDate = prevCells.find((el) => {
-                        let focusCell = el.children[0];
+                        let hasNextFocusableDate = prevCells.find((el) => {
+                            let focusCell = el.children[0];
 
-                        return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                    });
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
 
-                    if (hasNextFocusableDate) {
-                        let focusCell = hasNextFocusableDate.children[0];
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
 
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            navigateToMonth(true, groupIndex, event);
+                        }
                     } else {
                         navigateToMonth(true, groupIndex, event);
                     }
-                } else {
-                    navigateToMonth(true, groupIndex, event);
-                }
 
-                event.preventDefault();
-                break;
-            }
+                    event.preventDefault();
+                    break;
+                }
 
-            case 'ArrowRight': {
-                cellContent.tabIndex = '-1';
-                let nextCell = cell.nextElementSibling;
+                case 'ArrowRight': {
+                    cellContent.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
 
-                if (nextCell) {
-                    const cells = Array.from(cell.parentElement.children);
-                    const nextCells = cells.slice(cellIndex + 1);
-                    let hasNextFocusableDate = nextCells.find((el) => {
-                        let focusCell = el.children[0];
+                    if (nextCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const nextCells = cells.slice(cellIndex + 1);
+                        let hasNextFocusableDate = nextCells.find((el) => {
+                            let focusCell = el.children[0];
 
-                        return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                    });
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
 
-                    if (hasNextFocusableDate) {
-                        let focusCell = hasNextFocusableDate.children[0];
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
 
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            navigateToMonth(false, groupIndex, event);
+                        }
                     } else {
                         navigateToMonth(false, groupIndex, event);
                     }
-                } else {
-                    navigateToMonth(false, groupIndex, event);
+
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'Enter':
+                case 'NumpadEnter':
 
-            case 'Enter':
-            case 'NumpadEnter':
+                case 'Space': {
+                    onDateSelect(event, date);
+                    event.preventDefault();
+                    break;
+                }
 
-            case 'Space': {
-                onDateSelect(event, date);
-                event.preventDefault();
-                break;
-            }
+                case 'Escape': {
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
+                    break;
+                }
 
-            case 'Escape': {
-                hide(null, reFocusInputField);
-                event.preventDefault();
-                break;
-            }
+                case 'Tab': {
+                    if (!props.inline) {
+                        trapFocus(event);
+                    }
 
-            case 'Tab': {
-                if (!props.inline) {
-                    trapFocus(event);
+                    break;
                 }
 
-                break;
-            }
+                case 'Home': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[0].children[0];
 
-            case 'Home': {
-                cellContent.tabIndex = '-1';
-                let currentRow = cell.parentElement;
-                let focusCell = currentRow.children[0].children[0];
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        navigateToMonth(groupIndex, true, event);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
 
-                if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
-                    navigateToMonth(groupIndex, true, event);
-                } else {
-                    focusCell.tabIndex = '0';
-                    focusCell.focus();
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'End': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
 
-            case 'End': {
-                cellContent.tabIndex = '-1';
-                let currentRow = cell.parentElement;
-                let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        navigateToMonth(groupIndex, false, event);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
 
-                if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
-                    navigateToMonth(groupIndex, false, event);
-                } else {
-                    focusCell.tabIndex = '0';
-                    focusCell.focus();
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'PageUp': {
+                    cellContent.tabIndex = '-1';
 
-            case 'PageUp': {
-                cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        navigation.current = { backward: true };
+                        navBackward(event);
+                    } else {
+                        navigateToMonth(groupIndex, true, event);
+                    }
 
-                if (event.shiftKey) {
-                    navigation.current = { backward: true };
-                    navBackward(event);
-                } else {
-                    navigateToMonth(groupIndex, true, event);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'PageDown': {
+                    cellContent.tabIndex = '-1';
 
-            case 'PageDown': {
-                cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        navigation.current = { backward: false };
+                        navForward(event);
+                    } else {
+                        navigateToMonth(groupIndex, false, event);
+                    }
 
-                if (event.shiftKey) {
-                    navigation.current = { backward: false };
-                    navForward(event);
-                } else {
-                    navigateToMonth(groupIndex, false, event);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
-
-            default:
-                //no op
-                break;
+                default:
+                    //no op
+                    break;
             }
         };
 
@@ -1377,105 +1377,105 @@ export const Calendar = React.memo(
             const cell = event.currentTarget;
 
             switch (event.code) {
-            //arrows
-            case 'ArrowUp':
-
-            case 'ArrowDown': {
-                cell.tabIndex = '-1';
-                const cells = cell.parentElement.children;
-                const cellIndex = DomHandler.index(cell);
-                const nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
-
-                if (nextCell) {
-                    nextCell.tabIndex = '0';
-                    nextCell.focus();
+                //arrows
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    const cells = cell.parentElement.children;
+                    const cellIndex = DomHandler.index(cell);
+                    const nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    const prevCell = cell.previousElementSibling;
 
-            case 'ArrowLeft': {
-                cell.tabIndex = '-1';
-                const prevCell = cell.previousElementSibling;
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        navigation.current = { backward: true };
+                        navBackward(event);
+                    }
 
-                if (prevCell) {
-                    prevCell.tabIndex = '0';
-                    prevCell.focus();
-                } else {
-                    navigation.current = { backward: true };
-                    navBackward(event);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    const nextCell = cell.nextElementSibling;
 
-            case 'ArrowRight': {
-                cell.tabIndex = '-1';
-                const nextCell = cell.nextElementSibling;
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        navigation.current = { backward: false };
+                        navForward(event);
+                    }
 
-                if (nextCell) {
-                    nextCell.tabIndex = '0';
-                    nextCell.focus();
-                } else {
-                    navigation.current = { backward: false };
-                    navForward(event);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'PageUp': {
+                    if (event.shiftKey) {
+                        return;
+                    }
 
-            case 'PageUp': {
-                if (event.shiftKey) {
-                    return;
+                    navigation.current = { backward: true };
+                    navBackward(event);
+
+                    break;
                 }
 
-                navigation.current = { backward: true };
-                navBackward(event);
+                case 'PageDown': {
+                    if (event.shiftKey) {
+                        return;
+                    }
 
-                break;
-            }
+                    navigation.current = { backward: false };
+                    navForward(event);
 
-            case 'PageDown': {
-                if (event.shiftKey) {
-                    return;
+                    break;
                 }
 
-                navigation.current = { backward: false };
-                navForward(event);
+                case 'Enter':
+                case 'NumpadEnter':
 
-                break;
-            }
-
-            case 'Enter':
-            case 'NumpadEnter':
+                case 'Space': {
+                    if (props.view !== 'month') {
+                        viewChangedWithKeyDown.current = true;
+                    }
 
-            case 'Space': {
-                if (props.view !== 'month') {
-                    viewChangedWithKeyDown.current = true;
+                    onMonthSelect(event, index);
+                    event.preventDefault();
+                    break;
                 }
 
-                onMonthSelect(event, index);
-                event.preventDefault();
-                break;
-            }
-
-            case 'Escape': {
-                hide(null, reFocusInputField);
-                event.preventDefault();
-                break;
-            }
+                case 'Escape': {
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
+                    break;
+                }
 
-            case 'Tab': {
-                trapFocus(event);
-                break;
-            }
+                case 'Tab': {
+                    trapFocus(event);
+                    break;
+                }
 
-            default:
-                //no op
-                break;
+                default:
+                    //no op
+                    break;
             }
         };
 
@@ -1483,105 +1483,105 @@ export const Calendar = React.memo(
             const cell = event.currentTarget;
 
             switch (event.code) {
-            //arrows
-            case 'ArrowUp':
-
-            case 'ArrowDown': {
-                cell.tabIndex = '-1';
-                let cells = cell.parentElement.children;
-                let cellIndex = DomHandler.index(cell);
-                let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
-
-                if (nextCell) {
-                    nextCell.tabIndex = '0';
-                    nextCell.focus();
+                //arrows
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    let cells = cell.parentElement.children;
+                    let cellIndex = DomHandler.index(cell);
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
 
-            case 'ArrowLeft': {
-                cell.tabIndex = '-1';
-                let prevCell = cell.previousElementSibling;
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        navigation.current = { backward: true };
+                        navBackward(event);
+                    }
 
-                if (prevCell) {
-                    prevCell.tabIndex = '0';
-                    prevCell.focus();
-                } else {
-                    navigation.current = { backward: true };
-                    navBackward(event);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
 
-            case 'ArrowRight': {
-                cell.tabIndex = '-1';
-                let nextCell = cell.nextElementSibling;
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        navigation.current = { backward: false };
+                        navForward(event);
+                    }
 
-                if (nextCell) {
-                    nextCell.tabIndex = '0';
-                    nextCell.focus();
-                } else {
-                    navigation.current = { backward: false };
-                    navForward(event);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'PageUp': {
+                    if (event.shiftKey) {
+                        return;
+                    }
+
+                    navigation.current = { backward: true };
+                    navBackward(event);
 
-            case 'PageUp': {
-                if (event.shiftKey) {
-                    return;
+                    break;
                 }
 
-                navigation.current = { backward: true };
-                navBackward(event);
+                case 'PageDown': {
+                    if (event.shiftKey) {
+                        return;
+                    }
 
-                break;
-            }
+                    navigation.current = { backward: false };
+                    navForward(event);
 
-            case 'PageDown': {
-                if (event.shiftKey) {
-                    return;
+                    break;
                 }
 
-                navigation.current = { backward: false };
-                navForward(event);
-
-                break;
-            }
+                case 'Enter':
+                case 'NumpadEnter':
 
-            case 'Enter':
-            case 'NumpadEnter':
+                case 'Space': {
+                    if (props.view !== 'year') {
+                        viewChangedWithKeyDown.current = true;
+                    }
 
-            case 'Space': {
-                if (props.view !== 'year') {
-                    viewChangedWithKeyDown.current = true;
+                    onYearSelect(event, index);
+                    event.preventDefault();
+                    break;
                 }
 
-                onYearSelect(event, index);
-                event.preventDefault();
-                break;
-            }
-
-            case 'Escape': {
-                hide(null, reFocusInputField);
-                event.preventDefault();
-                break;
-            }
+                case 'Escape': {
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
+                    break;
+                }
 
-            case 'Tab': {
-                trapFocus(event);
-                break;
-            }
+                case 'Tab': {
+                    trapFocus(event);
+                    break;
+                }
 
-            default:
-                //no op
-                break;
+                default:
+                    //no op
+                    break;
             }
         };
 
@@ -1625,7 +1625,10 @@ export const Calendar = React.memo(
 
         const selectTime = (date, timeMeta) => {
             if (props.showTime) {
-                let hours; let minutes; let seconds; let milliseconds;
+                let hours;
+                let minutes;
+                let seconds;
+                let milliseconds;
 
                 if (timeMeta) {
                     ({ hours, minutes, seconds, milliseconds } = timeMeta);
@@ -2009,7 +2012,8 @@ export const Calendar = React.memo(
         };
 
         const getPreviousMonthAndYear = (month, year) => {
-            let m; let y;
+            let m;
+            let y;
 
             if (month === 0) {
                 m = 11;
@@ -2023,7 +2027,8 @@ export const Calendar = React.memo(
         };
 
         const getNextMonthAndYear = (month, year) => {
-            let m; let y;
+            let m;
+            let y;
 
             if (month === 11) {
                 m = 0;
@@ -2512,47 +2517,47 @@ export const Calendar = React.memo(
             if (date) {
                 for (iFormat = 0; iFormat < format.length; iFormat++) {
                     if (literal) {
-                        if (format.charAt(iFormat) === '\'' && !lookAhead('\'')) {
+                        if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
                             literal = false;
                         } else {
                             output = output + format.charAt(iFormat);
                         }
                     } else {
                         switch (format.charAt(iFormat)) {
-                        case 'd':
-                            output = output + formatNumber('d', date.getDate(), 2);
-                            break;
-                        case 'D':
-                            output = output + formatName('D', date.getDay(), dayNamesShort, dayNames);
-                            break;
-                        case 'o':
-                            output = output + formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
-                            break;
-                        case 'm':
-                            output = output + formatNumber('m', date.getMonth() + 1, 2);
-                            break;
-                        case 'M':
-                            output = output + formatName('M', date.getMonth(), monthNamesShort, monthNames);
-                            break;
-                        case 'y':
-                            output = output + (lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100));
-                            break;
-                        case '@':
-                            output = output + date.getTime();
-                            break;
-                        case '!':
-                            output = output + (date.getTime() * 10000 + ticksTo1970);
-                            break;
-                        case '\'':
-                            if (lookAhead('\'')) {
-                                output = output + '\'';
-                            } else {
-                                literal = true;
-                            }
-
-                            break;
-                        default:
-                            output = output + format.charAt(iFormat);
+                            case 'd':
+                                output = output + formatNumber('d', date.getDate(), 2);
+                                break;
+                            case 'D':
+                                output = output + formatName('D', date.getDay(), dayNamesShort, dayNames);
+                                break;
+                            case 'o':
+                                output = output + formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                                break;
+                            case 'm':
+                                output = output + formatNumber('m', date.getMonth() + 1, 2);
+                                break;
+                            case 'M':
+                                output = output + formatName('M', date.getMonth(), monthNamesShort, monthNames);
+                                break;
+                            case 'y':
+                                output = output + (lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100));
+                                break;
+                            case '@':
+                                output = output + date.getTime();
+                                break;
+                            case '!':
+                                output = output + (date.getTime() * 10000 + ticksTo1970);
+                                break;
+                            case "'":
+                                if (lookAhead("'")) {
+                                    output = output + "'";
+                                } else {
+                                    literal = true;
+                                }
+
+                                break;
+                            default:
+                                output = output + format.charAt(iFormat);
                         }
                     }
                 }
@@ -2800,53 +2805,53 @@ export const Calendar = React.memo(
 
             for (iFormat = 0; iFormat < format.length; iFormat++) {
                 if (literal) {
-                    if (format.charAt(iFormat) === '\'' && !lookAhead('\'')) {
+                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
                         literal = false;
                     } else {
                         checkLiteral();
                     }
                 } else {
                     switch (format.charAt(iFormat)) {
-                    case 'd':
-                        day = getNumber('d');
-                        break;
-                    case 'D':
-                        getName('D', dayNamesShort, dayNames);
-                        break;
-                    case 'o':
-                        doy = getNumber('o');
-                        break;
-                    case 'm':
-                        month = getNumber('m');
-                        break;
-                    case 'M':
-                        month = getName('M', monthNamesShort, monthNames);
-                        break;
-                    case 'y':
-                        year = getNumber('y');
-                        break;
-                    case '@':
-                        date = new Date(getNumber('@'));
-                        year = date.getFullYear();
-                        month = date.getMonth() + 1;
-                        day = date.getDate();
-                        break;
-                    case '!':
-                        date = new Date((getNumber('!') - ticksTo1970) / 10000);
-                        year = date.getFullYear();
-                        month = date.getMonth() + 1;
-                        day = date.getDate();
-                        break;
-                    case '\'':
-                        if (lookAhead('\'')) {
-                            checkLiteral();
-                        } else {
-                            literal = true;
-                        }
+                        case 'd':
+                            day = getNumber('d');
+                            break;
+                        case 'D':
+                            getName('D', dayNamesShort, dayNames);
+                            break;
+                        case 'o':
+                            doy = getNumber('o');
+                            break;
+                        case 'm':
+                            month = getNumber('m');
+                            break;
+                        case 'M':
+                            month = getName('M', monthNamesShort, monthNames);
+                            break;
+                        case 'y':
+                            year = getNumber('y');
+                            break;
+                        case '@':
+                            date = new Date(getNumber('@'));
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case '!':
+                            date = new Date((getNumber('!') - ticksTo1970) / 10000);
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case "'":
+                            if (lookAhead("'")) {
+                                checkLiteral();
+                            } else {
+                                literal = true;
+                            }
 
-                        break;
-                    default:
-                        checkLiteral();
+                            break;
+                        default:
+                            checkLiteral();
                     }
                 }
             }
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index 7591e7c46b..04422659f4 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -247,35 +247,35 @@ export const Carousel = React.memo(
 
         const onIndicatorKeydown = (event) => {
             switch (event.code) {
-            case 'ArrowRight':
-                onRightKey();
-                break;
+                case 'ArrowRight':
+                    onRightKey();
+                    break;
 
-            case 'ArrowLeft':
-                onLeftKey();
-                break;
+                case 'ArrowLeft':
+                    onLeftKey();
+                    break;
 
-            case 'Home':
-                onHomeKey();
-                event.preventDefault();
-                break;
+                case 'Home':
+                    onHomeKey();
+                    event.preventDefault();
+                    break;
 
-            case 'End':
-                onEndKey();
-                event.preventDefault();
-                break;
+                case 'End':
+                    onEndKey();
+                    event.preventDefault();
+                    break;
 
-            case 'ArrowUp':
-            case 'ArrowDown':
-                event.preventDefault();
-                break;
+                case 'ArrowUp':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    break;
 
-            case 'Tab':
-                onTabKey();
-                break;
+                case 'Tab':
+                    onTabKey();
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
@@ -375,7 +375,9 @@ export const Carousel = React.memo(
                 for (let i = 0; i < responsiveOptions.current.length; i++) {
                     let res = responsiveOptions.current[i];
 
-                    innerHTML = innerHTML + `
+                    innerHTML =
+                        innerHTML +
+                        `
                     @media screen and (max-width: ${res.breakpoint}) {
                         .p-carousel[${attributeSelector.current}] .p-carousel-item {
                             flex: 1 0 ${100 / res.numVisible}%
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index 2aac855f07..33d70e3ea7 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -153,31 +153,31 @@ export const CascadeSelect = React.memo(
 
         const onInputKeyDown = (event) => {
             switch (event.which) {
-            //down
-            case 40:
-                if (overlayVisibleState) {
-                    DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
-                } else if (event.altKey && props.options && props.options.length) {
-                    show();
-                }
+                //down
+                case 40:
+                    if (overlayVisibleState) {
+                        DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
+                    } else if (event.altKey && props.options && props.options.length) {
+                        show();
+                    }
 
-                event.preventDefault();
-                break;
+                    event.preventDefault();
+                    break;
 
                 //space
-            case 32:
-                overlayVisibleState ? hide() : show();
+                case 32:
+                    overlayVisibleState ? hide() : show();
 
-                event.preventDefault();
-                break;
+                    event.preventDefault();
+                    break;
 
                 //tab
-            case 9:
-                hide();
-                break;
+                case 9:
+                    hide();
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
index a514a12a9a..c6517667b4 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.js
+++ b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -38,65 +38,65 @@ export const CascadeSelectSub = React.memo((props) => {
         const listItem = event.currentTarget.parentElement;
 
         switch (event.key) {
-        case 'Down':
-        case 'ArrowDown':
-            const nextItem = findNextItem(listItem);
+            case 'Down':
+            case 'ArrowDown':
+                const nextItem = findNextItem(listItem);
 
-            if (nextItem) {
-                nextItem.children[0].focus();
-            }
+                if (nextItem) {
+                    nextItem.children[0].focus();
+                }
 
-            break;
+                break;
 
-        case 'Up':
-        case 'ArrowUp':
-            const prevItem = findPrevItem(listItem);
+            case 'Up':
+            case 'ArrowUp':
+                const prevItem = findPrevItem(listItem);
 
-            if (prevItem) {
-                prevItem.children[0].focus();
-            }
+                if (prevItem) {
+                    prevItem.children[0].focus();
+                }
 
-            break;
+                break;
 
-        case 'Right':
-        case 'ArrowRight':
-            if (isOptionGroup(option)) {
-                if (activeOptionState === option) {
-                    listItem.children[1].children[0].children[0].focus();
-                } else {
-                    setActiveOptionState(option);
+            case 'Right':
+            case 'ArrowRight':
+                if (isOptionGroup(option)) {
+                    if (activeOptionState === option) {
+                        listItem.children[1].children[0].children[0].focus();
+                    } else {
+                        setActiveOptionState(option);
+                    }
                 }
-            }
 
-            break;
+                break;
 
-        case 'Left':
-        case 'ArrowLeft':
-            setActiveOptionState(null);
+            case 'Left':
+            case 'ArrowLeft':
+                setActiveOptionState(null);
 
-            const parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
+                const parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
 
-            if (parentList) {
-                parentList.focus();
-            }
+                if (parentList) {
+                    parentList.focus();
+                }
 
-            break;
+                break;
 
-        case 'Enter':
-            onOptionClick(event, option);
-            break;
+            case 'Enter':
+                onOptionClick(event, option);
+                break;
 
-        case 'Tab':
-        case 'Escape':
-            if (props.onPanelHide) {
-                props.onPanelHide();
-                event.preventDefault();
-            }
+            case 'Tab':
+            case 'Escape':
+                if (props.onPanelHide) {
+                    props.onPanelHide();
+                    event.preventDefault();
+                }
 
-            break;
+                break;
 
-        default:
-            break;
+            default:
+                break;
         }
 
         event.preventDefault();
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index 5a043b60a8..75207de71b 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -11,7 +11,7 @@ const ChartJS = (function () {
     } catch {
         return null;
     }
-}());
+})();
 
 const PrimeReactChart = React.memo(
     React.forwardRef((inProps, ref) => {
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index 423987428b..58c1fa0b23 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -96,20 +96,20 @@ export const Chips = React.memo(
 
         const onContainerKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowLeft':
-                onArrowLeftKeyOn(event);
-                break;
+                case 'ArrowLeft':
+                    onArrowLeftKeyOn(event);
+                    break;
 
-            case 'ArrowRight':
-                onArrowRightKeyOn(event);
-                break;
+                case 'ArrowRight':
+                    onArrowRightKeyOn(event);
+                    break;
 
-            case 'Backspace':
-                onBackspaceKeyOn(event);
-                break;
+                case 'Backspace':
+                    onBackspaceKeyOn(event);
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
@@ -159,41 +159,41 @@ export const Chips = React.memo(
             }
 
             switch (event.key) {
-            case 'Backspace':
-                if (inputValue.length === 0 && values.length > 0) {
-                    removeItem(event, values.length - 1);
-                }
+                case 'Backspace':
+                    if (inputValue.length === 0 && values.length > 0) {
+                        removeItem(event, values.length - 1);
+                    }
 
-                break;
+                    break;
 
-            case 'Enter':
-                if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
-                    addItem(event, inputValue, true);
-                }
+                case 'Enter':
+                    if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
+                        addItem(event, inputValue, true);
+                    }
 
-                break;
+                    break;
 
-            case 'ArrowLeft':
-                if (inputValue.length === 0 && values && values.length > 0) {
-                    DomHandler.focus(listRef.current);
-                }
+                case 'ArrowLeft':
+                    if (inputValue.length === 0 && values && values.length > 0) {
+                        DomHandler.focus(listRef.current);
+                    }
 
-                break;
+                    break;
 
-            case 'ArrowRight':
-                event.stopPropagation();
-                break;
+                case 'ArrowRight':
+                    event.stopPropagation();
+                    break;
 
-            default:
-                if (props.keyfilter) {
-                    KeyFilter.onKeyPress(event, props.keyfilter);
-                }
+                default:
+                    if (props.keyfilter) {
+                        KeyFilter.onKeyPress(event, props.keyfilter);
+                    }
 
-                if (isMaxedOut()) {
-                    event.preventDefault();
-                }
+                    if (isMaxedOut()) {
+                        event.preventDefault();
+                    }
 
-                break;
+                    break;
             }
         };
 
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index db66d4dff5..74200a0330 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -171,20 +171,20 @@ export const ColorPicker = React.memo(
 
         const updateModel = () => {
             switch (props.format) {
-            case 'hex':
-                onChange(HSBtoHEX(hsbValue.current));
-                break;
+                case 'hex':
+                    onChange(HSBtoHEX(hsbValue.current));
+                    break;
 
-            case 'rgb':
-                onChange(HSBtoRGB(hsbValue.current));
-                break;
+                case 'rgb':
+                    onChange(HSBtoRGB(hsbValue.current));
+                    break;
 
-            case 'hsb':
-                onChange(hsbValue.current);
-                break;
+                case 'hsb':
+                    onChange(hsbValue.current);
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
@@ -193,20 +193,20 @@ export const ColorPicker = React.memo(
 
             if (value) {
                 switch (props.format) {
-                case 'hex':
-                    hsb = HEXtoHSB(value);
-                    break;
+                    case 'hex':
+                        hsb = HEXtoHSB(value);
+                        break;
 
-                case 'rgb':
-                    hsb = RGBtoHSB(value);
-                    break;
+                    case 'rgb':
+                        hsb = RGBtoHSB(value);
+                        break;
 
-                case 'hsb':
-                    hsb = value;
-                    break;
+                    case 'hsb':
+                        hsb = value;
+                        break;
 
-                default:
-                    break;
+                    default:
+                        break;
                 }
             } else {
                 hsb = HEXtoHSB(props.defaultColor);
@@ -311,20 +311,20 @@ export const ColorPicker = React.memo(
 
         const onInputKeydown = (event) => {
             switch (event.which) {
-            //space
-            case 32:
-                togglePanel();
-                event.preventDefault();
-                break;
+                //space
+                case 32:
+                    togglePanel();
+                    event.preventDefault();
+                    break;
 
                 //escape and tab
-            case 27:
-            case 9:
-                hide();
-                break;
+                case 27:
+                case 9:
+                    hide();
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index 73d04cb19a..4c2ce41cc5 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -557,10 +557,10 @@ const _getPT = (pt, key = '', callback) => {
 
     return ObjectUtils.isNotEmpty(_usept)
         ? {
-            _usept,
-            originalValue: getValue(pt.originalValue),
-            value: getValue(pt.value)
-        }
+              _usept,
+              originalValue: getValue(pt.originalValue),
+              value: getValue(pt.value)
+          }
         : getValue(pt, true);
 };
 
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index 5e2316d97e..c89eea6349 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -355,61 +355,61 @@ export const ContextMenu = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-                onArrowLeftKey(event);
-                break;
-
-            case 'ArrowRight':
-                onArrowRightKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-                onEscapeKey(event);
-                break;
-
-            case 'Tab':
-                onTabKey(event);
-                break;
-
-            case 'PageDown':
-            case 'PageUp':
-            case 'Backspace':
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                // NOOP
-                break;
-
-            default:
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    searchItems(event, event.key);
-                }
-
-                break;
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    // NOOP
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event, event.key);
+                    }
+
+                    break;
             }
         };
 
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index 0db4205fef..9dd17bb34c 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -375,72 +375,72 @@ export const BodyCell = React.memo((props) => {
             const { target, currentTarget: cell } = event;
 
             switch (event.code) {
-            case 'ArrowLeft':
-                let prevCell = findPrevSelectableCell(cell);
+                case 'ArrowLeft':
+                    let prevCell = findPrevSelectableCell(cell);
 
-                if (prevCell) {
-                    changeTabIndex(cell, prevCell);
-                    prevCell.focus();
-                }
+                    if (prevCell) {
+                        changeTabIndex(cell, prevCell);
+                        prevCell.focus();
+                    }
 
-                event.preventDefault();
-                break;
+                    event.preventDefault();
+                    break;
 
-            case 'ArrowRight':
-                let nextCell = findNextSelectableCell(cell);
+                case 'ArrowRight':
+                    let nextCell = findNextSelectableCell(cell);
 
-                if (nextCell) {
-                    changeTabIndex(cell, nextCell);
-                    nextCell.focus();
-                }
+                    if (nextCell) {
+                        changeTabIndex(cell, nextCell);
+                        nextCell.focus();
+                    }
 
-                event.preventDefault();
-                break;
+                    event.preventDefault();
+                    break;
 
-            case 'ArrowUp':
-                let upCell = findUpSelectableCell(cell);
+                case 'ArrowUp':
+                    let upCell = findUpSelectableCell(cell);
 
-                if (upCell) {
-                    changeTabIndex(cell, upCell);
-                    upCell.focus();
-                }
+                    if (upCell) {
+                        changeTabIndex(cell, upCell);
+                        upCell.focus();
+                    }
 
-                event.preventDefault();
-                break;
+                    event.preventDefault();
+                    break;
 
-            case 'ArrowDown':
-                let downCell = findDownSelectableCell(cell);
+                case 'ArrowDown':
+                    let downCell = findDownSelectableCell(cell);
 
-                if (downCell) {
-                    changeTabIndex(cell, downCell);
-                    downCell.focus();
-                }
+                    if (downCell) {
+                        changeTabIndex(cell, downCell);
+                        downCell.focus();
+                    }
 
-                event.preventDefault();
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                if (event.shiftKey || event.ctrlKey) {
-                    // #5192 allow TextArea to add new lines
-                } else if (!DomHandler.isClickable(target)) {
-                    onClick(event);
                     event.preventDefault();
-                }
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    if (event.shiftKey || event.ctrlKey) {
+                        // #5192 allow TextArea to add new lines
+                    } else if (!DomHandler.isClickable(target)) {
+                        onClick(event);
+                        event.preventDefault();
+                    }
 
-                break;
+                    break;
 
-            case 'Space':
-                if (!DomHandler.isClickable(target) && !target.readOnly) {
-                    onClick(event);
-                    event.preventDefault();
-                }
+                case 'Space':
+                    if (!DomHandler.isClickable(target) && !target.readOnly) {
+                        onClick(event);
+                        event.preventDefault();
+                    }
 
-                break;
+                    break;
 
-            default:
-                //no op
-                break;
+                default:
+                    //no op
+                    break;
             }
         }
     };
@@ -555,7 +555,8 @@ export const BodyCell = React.memo((props) => {
     };
 
     const createElement = () => {
-        let content; let editorKeyHelper;
+        let content;
+        let editorKeyHelper;
         const cellSelected = props.allowCellSelection && isSelected();
         const isRowEditor = props.editMode === 'row';
         const tabIndex = getTabIndex(cellSelected);
diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
index ae26561903..64f22f14e2 100644
--- a/components/lib/datatable/BodyRow.js
+++ b/components/lib/datatable/BodyRow.js
@@ -162,38 +162,38 @@ export const BodyRow = React.memo((props) => {
             const { target, currentTarget: row } = event;
 
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(row, event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(row, event);
-                break;
-
-            case 'Home':
-                onHomeKey(row, event);
-                break;
-
-            case 'End':
-                onEndKey(row, event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(row, event, target);
-                break;
-
-            case 'Space':
-                onSpaceKey(row, event, target);
-                break;
-
-            case 'Tab':
-                onTabKey(row, event);
-                break;
-
-            default:
-                //no op
-                break;
+                case 'ArrowDown':
+                    onArrowDownKey(row, event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(row, event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(row, event);
+                    break;
+
+                case 'End':
+                    onEndKey(row, event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(row, event, target);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(row, event, target);
+                    break;
+
+                case 'Tab':
+                    onTabKey(row, event);
+                    break;
+
+                default:
+                    //no op
+                    break;
             }
         }
     };
diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
index 61835d7256..b773d7d0ed 100644
--- a/components/lib/datatable/ColumnFilter.js
+++ b/components/lib/datatable/ColumnFilter.js
@@ -188,26 +188,26 @@ export const ColumnFilter = React.memo((props) => {
 
     const onToggleButtonKeyDown = (event) => {
         switch (event.key) {
-        case 'Escape':
-        case 'Tab':
-            hide();
-            break;
-
-        case 'ArrowDown':
-            if (overlayVisibleState) {
-                const focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
-
-                focusable && focusable.focus();
-                event.preventDefault();
-            } else if (event.altKey) {
-                setOverlayVisibleState(true);
-                event.preventDefault();
-            }
+            case 'Escape':
+            case 'Tab':
+                hide();
+                break;
+
+            case 'ArrowDown':
+                if (overlayVisibleState) {
+                    const focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
+
+                    focusable && focusable.focus();
+                    event.preventDefault();
+                } else if (event.altKey) {
+                    setOverlayVisibleState(true);
+                    event.preventDefault();
+                }
 
-            break;
+                break;
 
-        default:
-            break;
+            default:
+                break;
         }
     };
 
@@ -260,38 +260,38 @@ export const ColumnFilter = React.memo((props) => {
         let item = event.target;
 
         switch (event.key) {
-        case 'ArrowDown':
-            const nextItem = findNextItem(item);
+            case 'ArrowDown':
+                const nextItem = findNextItem(item);
 
-            if (nextItem) {
-                item.removeAttribute('tabindex');
-                nextItem.tabIndex = 0;
-                nextItem.focus();
-            }
+                if (nextItem) {
+                    item.removeAttribute('tabindex');
+                    nextItem.tabIndex = 0;
+                    nextItem.focus();
+                }
 
-            event.preventDefault();
-            break;
+                event.preventDefault();
+                break;
 
-        case 'ArrowUp':
-            const prevItem = findPrevItem(item);
+            case 'ArrowUp':
+                const prevItem = findPrevItem(item);
 
-            if (prevItem) {
-                item.removeAttribute('tabindex');
-                prevItem.tabIndex = 0;
-                prevItem.focus();
-            }
+                if (prevItem) {
+                    item.removeAttribute('tabindex');
+                    prevItem.tabIndex = 0;
+                    prevItem.focus();
+                }
 
-            event.preventDefault();
-            break;
+                event.preventDefault();
+                break;
 
-        case 'Enter':
-            clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
+            case 'Enter':
+                clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
 
-            event.preventDefault();
-            break;
+                event.preventDefault();
+                break;
 
-        default:
-            break;
+            default:
+                break;
         }
     };
 
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 045a2c5cd1..cee2cf30ff 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -177,17 +177,17 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 
     const getStorage = () => {
         switch (props.stateStorage) {
-        case 'local':
-            return window.localStorage;
+            case 'local':
+                return window.localStorage;
 
-        case 'session':
-            return window.sessionStorage;
+            case 'session':
+                return window.sessionStorage;
 
-        case 'custom':
-            return null;
+            case 'custom':
+                return null;
 
-        default:
-            throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
+            default:
+                throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
         }
     };
 
@@ -392,7 +392,9 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         widths.forEach((width, index) => {
             let style = `width: ${width}px !important; max-width: ${width}px !important`;
 
-            innerHTML = innerHTML + `
+            innerHTML =
+                innerHTML +
+                `
                 ${selector} > [data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
@@ -612,7 +614,9 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
             let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
 
-            innerHTML = innerHTML + `
+            innerHTML =
+                innerHTML +
+                `
                  ${selector} > [data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
                 ${selector} > [data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
@@ -1216,11 +1220,11 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             Object.entries(filters).forEach(([prop, value]) => {
                 cloned[prop] = value.operator
                     ? {
-                        operator: value.operator,
-                        constraints: value.constraints.map((constraint) => {
-                            return { ...constraint };
-                        })
-                    }
+                          operator: value.operator,
+                          constraints: value.constraints.map((constraint) => {
+                              return { ...constraint };
+                          })
+                      }
                     : { ...value };
             });
         } else {
diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
index 35d1f23348..f94a71e8a1 100644
--- a/components/lib/datatable/DataTableBase.js
+++ b/components/lib/datatable/DataTableBase.js
@@ -395,16 +395,16 @@ const classes = {
         ObjectUtils.isEmpty(props)
             ? classNames('p-filter-column', { 'p-frozen-column': frozen })
             : classNames({
-                'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
-                'p-sortable-column': getColumnProp('sortable'),
-                'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
-                'p-highlight': sortMeta.sorted,
-                'p-frozen-column': frozen,
-                'p-selection-column': getColumnProp('selectionMode'),
-                'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
-                'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen,
-                [`p-align-${align}`]: !!align
-            }),
+                  'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
+                  'p-sortable-column': getColumnProp('sortable'),
+                  'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
+                  'p-highlight': sortMeta.sorted,
+                  'p-frozen-column': frozen,
+                  'p-selection-column': getColumnProp('selectionMode'),
+                  'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
+                  'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen,
+                  [`p-align-${align}`]: !!align
+              }),
     footerCell: ({ getColumnProp, align }) =>
         classNames({
             'p-frozen-column': getColumnProp('frozen'),
diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
index 3a20717e65..42b3ec2738 100644
--- a/components/lib/datatable/TableBody.js
+++ b/components/lib/datatable/TableBody.js
@@ -332,7 +332,9 @@ export const TableBody = React.memo(
         };
 
         const selectRange = (event) => {
-            let rangeStart; let rangeEnd; let selectedSize;
+            let rangeStart;
+            let rangeEnd;
+            let selectedSize;
 
             const isAllowCellSelection = allowCellSelection();
             const index = ObjectUtils.findIndexInList(event.data, props.value, props.dataKey);
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index ed2da9bfe1..b5452ddeb1 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -392,7 +392,9 @@ export const Dialog = React.forwardRef((inProps, ref) => {
         let innerHTML = '';
 
         for (let breakpoint in props.breakpoints) {
-            innerHTML = innerHTML + `
+            innerHTML =
+                innerHTML +
+                `
                 @media screen and (max-width: ${breakpoint}) {
                      [data-pc-name="dialog"][${attributeSelector.current}] {
                         width: ${props.breakpoints[breakpoint]} !important;
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index 50b9218872..cfadbdd910 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -66,57 +66,57 @@ export const Dock = React.memo(
 
         const onListKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowDown':
-                if (props.position === 'left' || props.position === 'right') {
-                    onArrowDownKey();
-                }
-
-                event.preventDefault();
-                break;
-
-            case 'ArrowUp':
-                if (props.position === 'left' || props.position === 'right') {
-                    onArrowUpKey();
-                }
-
-                event.preventDefault();
-                break;
-
-            case 'ArrowRight':
-                if (props.position === 'top' || props.position === 'bottom') {
-                    onArrowDownKey();
-                }
-
-                event.preventDefault();
-                break;
-
-            case 'ArrowLeft':
-                if (props.position === 'top' || props.position === 'bottom') {
-                    onArrowUpKey();
-                }
-
-                event.preventDefault();
-                break;
-
-            case 'Home':
-                onHomeKey();
-                event.preventDefault();
-                break;
-
-            case 'End':
-                onEndKey();
-                event.preventDefault();
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                onSpaceKey(event);
-                event.preventDefault();
-                break;
-
-            default:
-                break;
+                case 'ArrowDown':
+                    if (props.position === 'left' || props.position === 'right') {
+                        onArrowDownKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowUp':
+                    if (props.position === 'left' || props.position === 'right') {
+                        onArrowUpKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowRight':
+                    if (props.position === 'top' || props.position === 'bottom') {
+                        onArrowDownKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowLeft':
+                    if (props.position === 'top' || props.position === 'bottom') {
+                        onArrowUpKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    onHomeKey();
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    onEndKey();
+                    event.preventDefault();
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onSpaceKey(event);
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 9c4fb0d604..fa63f9a3e7 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -183,68 +183,68 @@ export const Dropdown = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-            case 'ArrowRight':
-                onArrowLeftKey(event, props.editable);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'PageDown':
-                onPageDownKey(event);
-                break;
-
-            case 'PageUp':
-                onPageUpKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event, props.editable);
-                break;
-
-            case 'NumpadEnter':
-            case 'Enter':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-                onEscapeKey(event);
-                break;
-
-            case 'Tab':
-                onTabKey(event);
-                break;
-
-            case 'Backspace':
-                onBackspaceKey(event, props.editable);
-                break;
-
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                //NOOP
-                break;
-
-            default:
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    !overlayVisibleState && !props.editable && show();
-                    !props.editable && searchOptions(event, event.key);
-                }
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    onArrowLeftKey(event, props.editable);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    onPageUpKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event, props.editable);
+                    break;
+
+                case 'NumpadEnter':
+                case 'Enter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'Backspace':
+                    onBackspaceKey(event, props.editable);
+                    break;
+
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        !overlayVisibleState && !props.editable && show();
+                        !props.editable && searchOptions(event, event.key);
+                    }
 
-                break;
+                    break;
             }
 
             clickedRef.current = false;
@@ -252,28 +252,28 @@ export const Dropdown = React.memo(
 
         const onFilterInputKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-            case 'ArrowRight':
-                onArrowLeftKey(event, true);
-                break;
-
-            case 'Escape':
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                event.preventDefault();
-                break;
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    onArrowLeftKey(event, true);
+                    break;
+
+                case 'Escape':
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    event.preventDefault();
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 041f9b4564..27369dc56d 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -16,9 +16,9 @@ const classes = {
         props.editable
             ? 'p-dropdown-label p-inputtext'
             : classNames('p-dropdown-label p-inputtext', {
-                'p-placeholder': label === null && props.placeholder,
-                'p-dropdown-label-empty': label === null && !props.placeholder
-            }),
+                  'p-placeholder': label === null && props.placeholder,
+                  'p-dropdown-label-empty': label === null && !props.placeholder
+              }),
     trigger: 'p-dropdown-trigger',
     emptyMessage: 'p-dropdown-empty-message',
     itemGroup: ({ optionGroupLabel }) =>
diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
index ca72b3d854..79d1c4c8c9 100644
--- a/components/lib/editor/Editor.js
+++ b/components/lib/editor/Editor.js
@@ -11,7 +11,7 @@ const QuillJS = (function () {
     } catch {
         return null;
     }
-}());
+})();
 
 export const Editor = React.memo(
     React.forwardRef((inProps, ref) => {
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 2041e466ab..e06bd9ea17 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -544,7 +544,11 @@ export const FileUpload = React.memo(
         const createAdvanced = () => {
             const chooseButton = createChooseButton();
             const emptyContent = createEmptyContent();
-            let uploadButton; let cancelButton; let filesList; let uplaodedFilesList; let progressBar;
+            let uploadButton;
+            let cancelButton;
+            let filesList;
+            let uplaodedFilesList;
+            let progressBar;
 
             if (!props.auto) {
                 const uploadOptions = props.uploadOptions;
diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js
index 2a3a49cb89..5c8106c5a5 100644
--- a/components/lib/galleria/GalleriaItem.js
+++ b/components/lib/galleria/GalleriaItem.js
@@ -87,48 +87,48 @@ export const GalleriaItem = React.memo(
 
         const onIndicatorKeyDown = (event, index) => {
             switch (event.code) {
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                stopSlideShow();
-
-                props.onActiveItemChange({
-                    index
-                });
-                event.preventDefault();
-                break;
-
-            case 'ArrowRight':
-                onRightKey();
-                break;
-
-            case 'ArrowLeft':
-                onLeftKey();
-                break;
-
-            case 'Home':
-                onHomeKey();
-                event.preventDefault();
-                break;
-
-            case 'End':
-                onEndKey();
-                event.preventDefault();
-                break;
-
-            case 'Tab':
-                onTabKey();
-                break;
-
-            case 'ArrowDown':
-            case 'ArrowUp':
-            case 'PageUp':
-            case 'PageDown':
-                event.preventDefault();
-                break;
-
-            default:
-                break;
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    stopSlideShow();
+
+                    props.onActiveItemChange({
+                        index
+                    });
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowRight':
+                    onRightKey();
+                    break;
+
+                case 'ArrowLeft':
+                    onLeftKey();
+                    break;
+
+                case 'Home':
+                    onHomeKey();
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    onEndKey();
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    onTabKey();
+                    break;
+
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'PageUp':
+                case 'PageDown':
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
index c7cc8034b6..a31ae9f437 100644
--- a/components/lib/galleria/GalleriaThumbnails.js
+++ b/components/lib/galleria/GalleriaThumbnails.js
@@ -40,35 +40,35 @@ const GalleriaThumbnailItem = React.memo((props) => {
         }
 
         switch (event.code) {
-        case 'ArrowRight':
-            onRightKey();
-            break;
-
-        case 'ArrowLeft':
-            onLeftKey();
-            break;
-
-        case 'Home':
-            onHomeKey();
-            event.preventDefault();
-            break;
-
-        case 'End':
-            onEndKey();
-            event.preventDefault();
-            break;
-
-        case 'ArrowUp':
-        case 'ArrowDown':
-            event.preventDefault();
-            break;
-
-        case 'Tab':
-            onTabKey();
-            break;
-
-        default:
-            break;
+            case 'ArrowRight':
+                onRightKey();
+                break;
+
+            case 'ArrowLeft':
+                onLeftKey();
+                break;
+
+            case 'Home':
+                onHomeKey();
+                event.preventDefault();
+                break;
+
+            case 'End':
+                onEndKey();
+                event.preventDefault();
+                break;
+
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+
+            case 'Tab':
+                onTabKey();
+                break;
+
+            default:
+                break;
         }
     };
 
@@ -371,7 +371,9 @@ export const GalleriaThumbnails = React.memo(
                 for (let i = 0; i < responsiveOptions.current.length; i++) {
                     let res = responsiveOptions.current[i];
 
-                    innerHTML = innerHTML + `
+                    innerHTML =
+                        innerHTML +
+                        `
                     @media screen and (max-width: ${res.breakpoint}) {
                         [data-pc-section="thumbnailitems"][${attributeSelector.current}] {
                             [data-pc-section="thumbnailitem"] {
diff --git a/components/lib/hooks/useFavicon.js b/components/lib/hooks/useFavicon.js
index 6a0796b5c7..24cb1b4e44 100644
--- a/components/lib/hooks/useFavicon.js
+++ b/components/lib/hooks/useFavicon.js
@@ -10,7 +10,7 @@ const TYPE_MAP = {
 export const useFavicon = (newIcon = '', rel = 'shortcut icon') => {
     React.useLayoutEffect(() => {
         if (newIcon) {
-            const linkElements = document.querySelectorAll('link[rel*=\'icon\']');
+            const linkElements = document.querySelectorAll("link[rel*='icon']");
 
             linkElements.forEach((linkEl) => {
                 document.head.removeChild(linkEl);
diff --git a/components/lib/hooks/useMouse.js b/components/lib/hooks/useMouse.js
index 81037d50cf..5488806e63 100644
--- a/components/lib/hooks/useMouse.js
+++ b/components/lib/hooks/useMouse.js
@@ -6,7 +6,8 @@ export const useMouse = () => {
     const ref = React.useRef(null);
 
     const handleMouseMove = React.useCallback((event) => {
-        let x; let y;
+        let x;
+        let y;
 
         if (ref.current) {
             const rect = event.currentTarget.getBoundingClientRect();
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index 9d3c4b4822..c32a7ff1b8 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -85,17 +85,17 @@ export const Image = React.memo(
 
         const onMaskKeydown = (event) => {
             switch (event.code) {
-            case 'Escape':
-                hide();
-                setTimeout(() => {
-                    DomHandler.focus(previewButton.current);
-                }, 200);
-                event.preventDefault();
+                case 'Escape':
+                    hide();
+                    setTimeout(() => {
+                        DomHandler.focus(previewButton.current);
+                    }, 200);
+                    event.preventDefault();
 
-                break;
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index 4702f71774..2839861a56 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -28,7 +28,9 @@ export const InputMask = React.memo(
         };
 
         const caret = (first, last) => {
-            let range; let begin; let end;
+            let range;
+            let begin;
+            let end;
             let inputEl = elementRef.current;
 
             if (!inputEl || !inputEl.offsetParent || inputEl !== document.activeElement) {
@@ -86,23 +88,20 @@ export const InputMask = React.memo(
         };
 
         const seekNext = (pos) => {
-            while (++pos < len.current && !tests.current[pos]) {
-
-            }
+            while (++pos < len.current && !tests.current[pos]) {}
 
             return pos;
         };
 
         const seekPrev = (pos) => {
-            while (--pos >= 0 && !tests.current[pos]) {
-
-            }
+            while (--pos >= 0 && !tests.current[pos]) {}
 
             return pos;
         };
 
         const shiftL = (begin, end) => {
-            let i; let j;
+            let i;
+            let j;
 
             if (begin < 0) {
                 return;
@@ -126,7 +125,10 @@ export const InputMask = React.memo(
         };
 
         const shiftR = (pos) => {
-            let i; let c; let j; let t;
+            let i;
+            let c;
+            let j;
+            let t;
 
             for (i = pos, c = getPlaceholder(pos); i < len.current; i++) {
                 if (tests.current[i]) {
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index a52abac10e..60f595358a 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -200,9 +200,8 @@ export const InputNumber = React.memo(
                 .replace(_numeral.current, _index.current);
 
             if (filteredText) {
-                if (filteredText === '-')
-                // Minus sign
-                {
+                if (filteredText === '-') {
+                    // Minus sign
                     return filteredText;
                 }
 
@@ -347,164 +346,164 @@ export const InputNumber = React.memo(
             let newValueStr = null;
 
             switch (event.code) {
-            //up
-            case 'ArrowUp':
-                spin(event, 1);
-                event.preventDefault();
-                break;
+                //up
+                case 'ArrowUp':
+                    spin(event, 1);
+                    event.preventDefault();
+                    break;
 
                 //down
-            case 'ArrowDown':
-                spin(event, -1);
-                event.preventDefault();
-                break;
+                case 'ArrowDown':
+                    spin(event, -1);
+                    event.preventDefault();
+                    break;
 
                 //left
-            case 'ArrowLeft':
-                if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
-                    event.preventDefault();
-                }
+                case 'ArrowLeft':
+                    if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
+                        event.preventDefault();
+                    }
 
-                break;
+                    break;
 
                 //right
-            case 'ArrowRight':
-                if (!isNumeralChar(inputValue.charAt(selectionStart))) {
-                    event.preventDefault();
-                }
+                case 'ArrowRight':
+                    if (!isNumeralChar(inputValue.charAt(selectionStart))) {
+                        event.preventDefault();
+                    }
 
-                break;
+                    break;
 
                 //enter and tab
-            case 'Tab':
-            case 'NumpadEnter':
-            case 'Enter':
-            case 'NumpadEnter':
-                newValueStr = validateValue(parseValue(inputValue));
-                inputRef.current.value = formatValue(newValueStr);
-                inputRef.current.setAttribute('aria-valuenow', newValueStr);
-                updateModel(event, newValueStr);
-                break;
+                case 'Tab':
+                case 'NumpadEnter':
+                case 'Enter':
+                case 'NumpadEnter':
+                    newValueStr = validateValue(parseValue(inputValue));
+                    inputRef.current.value = formatValue(newValueStr);
+                    inputRef.current.setAttribute('aria-valuenow', newValueStr);
+                    updateModel(event, newValueStr);
+                    break;
 
                 //backspace
-            case 'Backspace':
-                event.preventDefault();
-
-                if (selectionStart === selectionEnd) {
-                    const deleteChar = inputValue.charAt(selectionStart - 1);
-
-                    if (isNumeralChar(deleteChar)) {
-                        const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
-                        const decimalLength = getDecimalLength(inputValue);
-
-                        if (_group.current.test(deleteChar)) {
-                            _group.current.lastIndex = 0;
-                            newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
-                        } else if (_decimal.current.test(deleteChar)) {
-                            _decimal.current.lastIndex = 0;
+                case 'Backspace':
+                    event.preventDefault();
 
-                            if (decimalLength) {
-                                inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
+                    if (selectionStart === selectionEnd) {
+                        const deleteChar = inputValue.charAt(selectionStart - 1);
+
+                        if (isNumeralChar(deleteChar)) {
+                            const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
+                            const decimalLength = getDecimalLength(inputValue);
+
+                            if (_group.current.test(deleteChar)) {
+                                _group.current.lastIndex = 0;
+                                newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
+                            } else if (_decimal.current.test(deleteChar)) {
+                                _decimal.current.lastIndex = 0;
+
+                                if (decimalLength) {
+                                    inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
+                                } else {
+                                    newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                                }
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                                const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
+
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
+                                newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
                             } else {
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
                             }
-                        } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                            const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
+                        } else if (_currency.current.test(deleteChar)) {
+                            const { minusCharIndex, currencyCharIndex } = getCharIndexes(inputValue);
 
-                            newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
-                        } else if (decimalCharIndexWithoutPrefix === 1) {
-                            newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
-                            newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
-                        } else {
-                            newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                            if (minusCharIndex === currencyCharIndex - 1) {
+                                newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart);
+                            }
                         }
-                    } else if (_currency.current.test(deleteChar)) {
-                        const { minusCharIndex, currencyCharIndex } = getCharIndexes(inputValue);
 
-                        if (minusCharIndex === currencyCharIndex - 1) {
-                            newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart);
-                        }
+                        updateValue(event, newValueStr, null, 'delete-single');
+                    } else {
+                        newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                        updateValue(event, newValueStr, null, 'delete-range');
                     }
 
-                    updateValue(event, newValueStr, null, 'delete-single');
-                } else {
-                    newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
-                    updateValue(event, newValueStr, null, 'delete-range');
-                }
-
-                break;
+                    break;
 
                 // del
-            case 'Delete':
-                event.preventDefault();
-
-                if (selectionStart === selectionEnd) {
-                    const deleteChar = inputValue.charAt(selectionStart);
-                    const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
-
-                    if (isNumeralChar(deleteChar)) {
-                        const decimalLength = getDecimalLength(inputValue);
+                case 'Delete':
+                    event.preventDefault();
 
-                        if (_group.current.test(deleteChar)) {
-                            _group.current.lastIndex = 0;
-                            newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
-                        } else if (_decimal.current.test(deleteChar)) {
-                            _decimal.current.lastIndex = 0;
+                    if (selectionStart === selectionEnd) {
+                        const deleteChar = inputValue.charAt(selectionStart);
+                        const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
 
-                            if (decimalLength) {
-                                inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
+                        if (isNumeralChar(deleteChar)) {
+                            const decimalLength = getDecimalLength(inputValue);
+
+                            if (_group.current.test(deleteChar)) {
+                                _group.current.lastIndex = 0;
+                                newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
+                            } else if (_decimal.current.test(deleteChar)) {
+                                _decimal.current.lastIndex = 0;
+
+                                if (decimalLength) {
+                                    inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
+                                } else {
+                                    newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+                                }
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                                const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
+
+                                newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
+                                newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
+                                newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
                             } else {
                                 newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
                             }
-                        } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                            const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
-
-                            newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
-                        } else if (decimalCharIndexWithoutPrefix === 1) {
-                            newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
-                            newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
-                        } else {
-                            newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
                         }
-                    }
 
-                    updateValue(event, newValueStr, null, 'delete-back-single');
-                } else {
-                    newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
-                    updateValue(event, newValueStr, null, 'delete-range');
-                }
+                        updateValue(event, newValueStr, null, 'delete-back-single');
+                    } else {
+                        newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                        updateValue(event, newValueStr, null, 'delete-range');
+                    }
 
-                break;
+                    break;
 
-            case 'End':
-                event.preventDefault();
+                case 'End':
+                    event.preventDefault();
 
-                if (!ObjectUtils.isEmpty(props.max)) {
-                    updateModel(event, props.max);
-                }
+                    if (!ObjectUtils.isEmpty(props.max)) {
+                        updateModel(event, props.max);
+                    }
 
-                break;
-            case 'Home':
-                event.preventDefault();
+                    break;
+                case 'Home':
+                    event.preventDefault();
 
-                if (!ObjectUtils.isEmpty(props.min)) {
-                    updateModel(event, props.min);
-                }
+                    if (!ObjectUtils.isEmpty(props.min)) {
+                        updateModel(event, props.min);
+                    }
 
-                break;
+                    break;
 
-            default:
-                event.preventDefault();
+                default:
+                    event.preventDefault();
 
-                let char = event.key;
-                const _isDecimalSign = isDecimalSign(char);
-                const _isMinusSign = isMinusSign(char);
+                    let char = event.key;
+                    const _isDecimalSign = isDecimalSign(char);
+                    const _isMinusSign = isMinusSign(char);
 
-                if (((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) {
-                    insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
-                }
+                    if (((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) {
+                        insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
+                    }
 
-                break;
+                    break;
             }
         };
 
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index c9ff688a52..aa1da5c665 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -179,43 +179,43 @@ export const Knob = React.memo(
         const onKeyDown = (event) => {
             if (!props.disabled && !props.readonly) {
                 switch (event.code) {
-                case 'ArrowRight':
-                case 'ArrowUp':
-                    event.preventDefault();
-                    updateModelValue(props.value + 1);
-                    break;
-
-                case 'ArrowLeft':
-
-                case 'ArrowDown': {
-                    event.preventDefault();
-                    updateModelValue(props.value - 1);
-                    break;
-                }
-
-                case 'Home': {
-                    event.preventDefault();
-                    updateModelValue(props.min);
-                    break;
-                }
-
-                case 'End': {
-                    event.preventDefault();
-                    updateModelValue(props.max);
-                    break;
-                }
-
-                case 'PageUp': {
-                    event.preventDefault();
-                    updateModelValue(props.value + 10);
-                    break;
-                }
-
-                case 'PageDown': {
-                    event.preventDefault();
-                    updateModelValue(props.value - 10);
-                    break;
-                }
+                    case 'ArrowRight':
+                    case 'ArrowUp':
+                        event.preventDefault();
+                        updateModelValue(props.value + 1);
+                        break;
+
+                    case 'ArrowLeft':
+
+                    case 'ArrowDown': {
+                        event.preventDefault();
+                        updateModelValue(props.value - 1);
+                        break;
+                    }
+
+                    case 'Home': {
+                        event.preventDefault();
+                        updateModelValue(props.min);
+                        break;
+                    }
+
+                    case 'End': {
+                        event.preventDefault();
+                        updateModelValue(props.max);
+                        break;
+                    }
+
+                    case 'PageUp': {
+                        event.preventDefault();
+                        updateModelValue(props.value + 10);
+                        break;
+                    }
+
+                    case 'PageDown': {
+                        event.preventDefault();
+                        updateModelValue(props.value - 10);
+                        break;
+                    }
                 }
             }
         };
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 3c2768b092..98ea380a2e 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -413,62 +413,62 @@ export const ListBox = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
 
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
 
-            case 'Home':
-                onHomeKey(event);
-                break;
+                case 'Home':
+                    onHomeKey(event);
+                    break;
 
-            case 'End':
-                onEndKey(event);
-                break;
+                case 'End':
+                    onEndKey(event);
+                    break;
 
-            case 'PageDown':
-                onPageDownKey(event);
-                break;
+                case 'PageDown':
+                    onPageDownKey(event);
+                    break;
 
-            case 'PageUp':
-                onPageUpKey(event);
-                break;
+                case 'PageUp':
+                    onPageUpKey(event);
+                    break;
 
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                onSpaceKey(event);
-                event.preventDefault();
-                break;
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onSpaceKey(event);
+                    event.preventDefault();
+                    break;
 
-            case 'Tab':
-                // NOOP
-                break;
+                case 'Tab':
+                    // NOOP
+                    break;
 
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                onShiftKey(event);
-                break;
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    onShiftKey(event);
+                    break;
 
-            default:
-                if (props.multiple && event.code === 'KeyA' && metaKey) {
-                    const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+                default:
+                    if (props.multiple && event.code === 'KeyA' && metaKey) {
+                        const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
 
-                    updateModel(event, value);
+                        updateModel(event, value);
 
-                    event.preventDefault();
-                    break;
-                }
+                        event.preventDefault();
+                        break;
+                    }
 
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    searchOptions(event, event.key);
-                    event.preventDefault();
-                }
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchOptions(event, event.key);
+                        event.preventDefault();
+                    }
 
-                break;
+                    break;
             }
         };
 
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index d9137947e2..29334d1879 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -322,14 +322,14 @@ export const MegaMenu = React.memo(
             const _visibleItems =
                 processedItem && processedItem.key === focusedItemInfo.parentKey
                     ? processedItem.items.reduce((items, col) => {
-                        col.forEach((submenu) => {
-                            submenu.items.forEach((a) => {
-                                items.push(a);
-                            });
-                        });
-
-                        return items;
-                    }, [])
+                          col.forEach((submenu) => {
+                              submenu.items.forEach((a) => {
+                                  items.push(a);
+                              });
+                          });
+
+                          return items;
+                      }, [])
                     : processedItems;
 
             setVisibleItems(_visibleItems);
@@ -360,61 +360,61 @@ export const MegaMenu = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-                onArrowLeftKey(event);
-                break;
-
-            case 'ArrowRight':
-                onArrowRightKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-                onEscapeKey(event);
-                break;
-
-            case 'Tab':
-                onTabKey(event);
-                break;
-
-            case 'PageDown':
-            case 'PageUp':
-            case 'Backspace':
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                //NOOP
-                break;
-
-            default:
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    searchItems(event, event.key);
-                }
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event, event.key);
+                    }
 
-                break;
+                    break;
             }
         };
 
@@ -1060,18 +1060,18 @@ export const MegaMenu = React.memo(
                         }
 
                         ${
-    horizontal
-        ? `
+                            horizontal
+                                ? `
                                     .p-megamenu[${selector}] .p-menuitem-active  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
                                         transform: rotate(-180deg);
                                     }
                             `
-        : ''
-}
+                                : ''
+                        }
 
                         ${
-    vertical
-        ? `                                                                   
+                            vertical
+                                ? `                                                                   
                                     .p-megamenu[${selector}] .p-menuitem  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
                                         transform: rotate(90deg);
                                     }
@@ -1080,8 +1080,8 @@ export const MegaMenu = React.memo(
                                         transform: rotate(-90deg);
                                     }
                             `
-        : ''
-}
+                                : ''
+                        }
                     }
                 `;
 
diff --git a/components/lib/megamenu/MegaMenuBase.js b/components/lib/megamenu/MegaMenuBase.js
index 1cb5ed3fe3..924fb4f4b5 100644
--- a/components/lib/megamenu/MegaMenuBase.js
+++ b/components/lib/megamenu/MegaMenuBase.js
@@ -32,25 +32,25 @@ const classes = {
         let columnClass;
 
         switch (length) {
-        case 2:
-            columnClass = 'p-megamenu-col-6';
-            break;
+            case 2:
+                columnClass = 'p-megamenu-col-6';
+                break;
 
-        case 3:
-            columnClass = 'p-megamenu-col-4';
-            break;
+            case 3:
+                columnClass = 'p-megamenu-col-4';
+                break;
 
-        case 4:
-            columnClass = 'p-megamenu-col-3';
-            break;
+            case 4:
+                columnClass = 'p-megamenu-col-3';
+                break;
 
-        case 6:
-            columnClass = 'p-megamenu-col-2';
-            break;
+            case 6:
+                columnClass = 'p-megamenu-col-2';
+                break;
 
-        default:
-            columnClass = 'p-megamenu-col-12';
-            break;
+            default:
+                columnClass = 'p-megamenu-col-12';
+                break;
         }
 
         return columnClass;
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
index f188876727..55e52c5c71 100644
--- a/components/lib/mention/Mention.js
+++ b/components/lib/mention/Mention.js
@@ -289,98 +289,98 @@ export const Mention = React.memo(
                 let highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
 
                 switch (event.which) {
-                //down
-                case 40:
-                    if (highlightItem) {
-                        let nextElement = highlightItem.nextElementSibling;
+                    //down
+                    case 40:
+                        if (highlightItem) {
+                            let nextElement = highlightItem.nextElementSibling;
 
-                        if (nextElement) {
-                            const nextElementIndex = DomHandler.index(nextElement);
-                            const highlightItemIndex = DomHandler.index(highlightItem);
+                            if (nextElement) {
+                                const nextElementIndex = DomHandler.index(nextElement);
+                                const highlightItemIndex = DomHandler.index(highlightItem);
 
-                            setHighlightState((prevState) => {
-                                const newState = [...prevState];
+                                setHighlightState((prevState) => {
+                                    const newState = [...prevState];
 
-                                newState[nextElementIndex] = true;
-                                newState[highlightItemIndex] = false;
+                                    newState[nextElementIndex] = true;
+                                    newState[highlightItemIndex] = false;
 
-                                return newState;
-                            });
+                                    return newState;
+                                });
 
-                            DomHandler.scrollInView(overlayRef.current, nextElement);
-                        }
-                    } else {
-                        highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
+                                DomHandler.scrollInView(overlayRef.current, nextElement);
+                            }
+                        } else {
+                            highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
 
-                        if (highlightItem) {
-                            const highlightItemIndex = DomHandler.index(highlightItem);
+                            if (highlightItem) {
+                                const highlightItemIndex = DomHandler.index(highlightItem);
 
-                            setHighlightState((prevState) => {
-                                const newState = [...prevState];
+                                setHighlightState((prevState) => {
+                                    const newState = [...prevState];
 
-                                newState[highlightItemIndex] = true;
+                                    newState[highlightItemIndex] = true;
 
-                                return newState;
-                            });
+                                    return newState;
+                                });
+                            }
                         }
-                    }
 
-                    event.preventDefault();
-                    break;
+                        event.preventDefault();
+                        break;
 
                     //up
-                case 38:
-                    if (highlightItem) {
-                        let previousElement = highlightItem.previousElementSibling;
+                    case 38:
+                        if (highlightItem) {
+                            let previousElement = highlightItem.previousElementSibling;
 
-                        if (previousElement) {
-                            const previousElementIndex = DomHandler.index(previousElement);
-                            const highlightItemIndex = DomHandler.index(highlightItem);
+                            if (previousElement) {
+                                const previousElementIndex = DomHandler.index(previousElement);
+                                const highlightItemIndex = DomHandler.index(highlightItem);
 
-                            setHighlightState((prevState) => {
-                                const newState = [...prevState];
+                                setHighlightState((prevState) => {
+                                    const newState = [...prevState];
 
-                                newState[previousElementIndex] = true;
-                                newState[highlightItemIndex] = false;
+                                    newState[previousElementIndex] = true;
+                                    newState[highlightItemIndex] = false;
 
-                                return newState;
-                            });
+                                    return newState;
+                                });
 
-                            DomHandler.scrollInView(overlayRef.current, previousElement);
+                                DomHandler.scrollInView(overlayRef.current, previousElement);
+                            }
                         }
-                    }
 
-                    event.preventDefault();
-                    break;
+                        event.preventDefault();
+                        break;
 
                     //backspace
-                case 8:
-                    const { value, selectionStart } = event.target;
-                    const key = value.substring(selectionStart - 1, selectionStart);
+                    case 8:
+                        const { value, selectionStart } = event.target;
+                        const key = value.substring(selectionStart - 1, selectionStart);
 
-                    if (key === triggerState.key) {
-                        hide();
-                    }
+                        if (key === triggerState.key) {
+                            hide();
+                        }
 
-                    break;
+                        break;
 
                     //enter
-                case 13:
-                    if (highlightItem) {
-                        selectItem(event, props.suggestions[DomHandler.index(highlightItem)]);
-                    }
+                    case 13:
+                        if (highlightItem) {
+                            selectItem(event, props.suggestions[DomHandler.index(highlightItem)]);
+                        }
 
-                    event.preventDefault();
-                    break;
+                        event.preventDefault();
+                        break;
 
                     //escape
-                case 27:
-                    hide();
-                    event.preventDefault();
-                    break;
+                    case 27:
+                        hide();
+                        event.preventDefault();
+                        break;
 
-                default:
-                    break;
+                    default:
+                        break;
                 }
             }
         };
@@ -425,8 +425,8 @@ export const Mention = React.memo(
             if (!isFilled && isInputWrapperFilled) {
                 _isUnstyled
                     ? DomHandler.setAttributes(elementRef.current, {
-                        'data-p-inputwrapper-filled': false
-                    })
+                          'data-p-inputwrapper-filled': false
+                      })
                     : DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
             }
         }, [isFilled]);
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index 90e037e971..59dc685054 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -116,43 +116,43 @@ export const Menu = React.memo(
 
         const onListKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event);
-                break;
-
-            case 'Escape':
-                if (props.popup) {
-                    DomHandler.focus(targetRef.current);
-                    hide(event);
-                }
-
-            case 'Tab':
-                props.popup && visibleState && hide(event);
-                break;
-
-            default:
-                break;
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Escape':
+                    if (props.popup) {
+                        DomHandler.focus(targetRef.current);
+                        hide(event);
+                    }
+
+                case 'Tab':
+                    props.popup && visibleState && hide(event);
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index 06b6bd07a5..0750070183 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -138,60 +138,60 @@ export const Menubar = React.memo(
             const code = event.code;
 
             switch (code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-                onArrowLeftKey(event);
-                break;
-
-            case 'ArrowRight':
-                onArrowRightKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-                onEscapeKey(event);
-                break;
-
-            case 'Tab':
-                onTabKey(event);
-                break;
-
-            case 'PageDown':
-            case 'PageUp':
-            case 'Backspace':
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                break;
-
-            default:
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    searchItems(event, event.key);
-                }
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event, event.key);
+                    }
 
-                break;
+                    break;
             }
         };
 
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index c468e6c5f6..4eb220bef1 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -41,20 +41,20 @@ export const Message = React.memo(
 
             if (!icon) {
                 switch (props.severity) {
-                case 'info':
-                    icon = <InfoCircleIcon {...iconProps} />;
-                    break;
-                case 'warn':
-                    icon = <ExclamationTriangleIcon {...iconProps} />;
-                    break;
-                case 'error':
-                    icon = <TimesCircleIcon {...iconProps} />;
-                    break;
-                case 'success':
-                    icon = <CheckIcon {...iconProps} />;
-                    break;
-                default:
-                    break;
+                    case 'info':
+                        icon = <InfoCircleIcon {...iconProps} />;
+                        break;
+                    case 'warn':
+                        icon = <ExclamationTriangleIcon {...iconProps} />;
+                        break;
+                    case 'error':
+                        icon = <TimesCircleIcon {...iconProps} />;
+                        break;
+                    case 'success':
+                        icon = <CheckIcon {...iconProps} />;
+                        break;
+                    default:
+                        break;
                 }
             }
 
diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
index 74b8b6a8a4..a51fffa446 100644
--- a/components/lib/messages/UIMessage.js
+++ b/components/lib/messages/UIMessage.js
@@ -102,20 +102,20 @@ export const UIMessage = React.memo(
 
                 if (!_icon) {
                     switch (severity) {
-                    case 'info':
-                        icon = <InfoCircleIcon {...iconProps} />;
-                        break;
-                    case 'warn':
-                        icon = <ExclamationTriangleIcon {...iconProps} />;
-                        break;
-                    case 'error':
-                        icon = <TimesCircleIcon {...iconProps} />;
-                        break;
-                    case 'success':
-                        icon = <CheckIcon {...iconProps} />;
-                        break;
-                    default:
-                        break;
+                        case 'info':
+                            icon = <InfoCircleIcon {...iconProps} />;
+                            break;
+                        case 'warn':
+                            icon = <ExclamationTriangleIcon {...iconProps} />;
+                            break;
+                        case 'error':
+                            icon = <TimesCircleIcon {...iconProps} />;
+                            break;
+                        case 'success':
+                            icon = <CheckIcon {...iconProps} />;
+                            break;
+                        default:
+                            break;
                     }
                 }
 
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index ecb1cf32de..857c623597 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -297,93 +297,93 @@ export const MultiSelect = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-            case 'ArrowUp':
-                if (props.inline) {
-                    break;
-                }
-
-                onArrowUpKey(event);
-                break;
+                case 'ArrowUp':
+                    if (props.inline) {
+                        break;
+                    }
 
-            case 'ArrowDown':
-                if (props.inline) {
+                    onArrowUpKey(event);
                     break;
-                }
 
-                onArrowDownKey(event);
+                case 'ArrowDown':
+                    if (props.inline) {
+                        break;
+                    }
 
-                break;
+                    onArrowDownKey(event);
 
-            case 'Space':
-            case 'NumpadEnter':
-            case 'Enter':
-                if (props.inline) {
                     break;
-                }
 
-                onEnterKey(event);
-                break;
+                case 'Space':
+                case 'NumpadEnter':
+                case 'Enter':
+                    if (props.inline) {
+                        break;
+                    }
 
-            case 'Home':
-                if (props.inline) {
+                    onEnterKey(event);
                     break;
-                }
 
-                onHomeKey(event);
-                event.preventDefault();
-                break;
+                case 'Home':
+                    if (props.inline) {
+                        break;
+                    }
 
-            case 'End':
-                if (props.inline) {
+                    onHomeKey(event);
+                    event.preventDefault();
                     break;
-                }
 
-                onEndKey(event);
-                event.preventDefault();
-                break;
+                case 'End':
+                    if (props.inline) {
+                        break;
+                    }
 
-            case 'PageDown':
-                onPageDownKey(event);
-                break;
+                    onEndKey(event);
+                    event.preventDefault();
+                    break;
 
-            case 'PageUp':
-                onPageUpKey(event);
-                break;
+                case 'PageDown':
+                    onPageDownKey(event);
+                    break;
 
-            case 'Escape':
-                if (props.inline) {
+                case 'PageUp':
+                    onPageUpKey(event);
                     break;
-                }
 
-                hide();
-                break;
+                case 'Escape':
+                    if (props.inline) {
+                        break;
+                    }
 
-            case 'Tab':
-                onTabKey(event);
-                break;
+                    hide();
+                    break;
 
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                onShiftKey(event);
-                break;
+                case 'Tab':
+                    onTabKey(event);
+                    break;
 
-            default:
-                if (event.code === 'KeyA' && metaKey) {
-                    const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    onShiftKey(event);
+                    break;
 
-                    updateModel(event, value, value);
+                default:
+                    if (event.code === 'KeyA' && metaKey) {
+                        const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
 
-                    event.preventDefault();
-                    break;
-                }
+                        updateModel(event, value, value);
 
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    !overlayVisibleState && show();
-                    searchOptions(event);
-                    event.preventDefault();
-                }
+                        event.preventDefault();
+                        break;
+                    }
+
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        !overlayVisibleState && show();
+                        searchOptions(event);
+                        event.preventDefault();
+                    }
 
-                break;
+                    break;
             }
 
             setClicked(false);
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index 43dba9d97d..a9b7b4b97a 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -92,7 +92,8 @@ export const MultiStateCheckbox = React.memo(
         };
 
         const getSelectedOptionMap = () => {
-            let option; let index;
+            let option;
+            let index;
 
             if (props.options) {
                 index = props.options.findIndex((option) => ObjectUtils.equals(props.value, getOptionValue(option), equalityKey));
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index f4c6c38647..b518e6d212 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -135,39 +135,39 @@ export const OrderList = React.memo(
 
         const onListKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event);
-                break;
-
-            case 'KeyA':
-                if (event.ctrlKey) {
-                    setSelectionState(visibleList);
-                    event.preventDefault();
-                }
-
-            default:
-                break;
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'KeyA':
+                    if (event.ctrlKey) {
+                        setSelectionState(visibleList);
+                        event.preventDefault();
+                    }
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
index fbe2247479..28b5348e03 100644
--- a/components/lib/overlaypanel/OverlayPanel.js
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -38,14 +38,14 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         listener: (event, { type, valid }) => {
             if (valid) {
                 switch (type) {
-                case 'outside':
-                    props.dismissable && !isPanelClicked.current && hide();
-                    break;
-                case 'resize':
-                case 'scroll':
-                case 'orientationchange':
-                    align();
-                    break;
+                    case 'outside':
+                        props.dismissable && !isPanelClicked.current && hide();
+                        break;
+                    case 'resize':
+                    case 'scroll':
+                    case 'orientationchange':
+                        align();
+                        break;
                 }
             }
 
@@ -185,7 +185,9 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
             let innerHTML = '';
 
             for (let breakpoint in props.breakpoints) {
-                innerHTML = innerHTML + `
+                innerHTML =
+                    innerHTML +
+                    `
                     @media screen and (max-width: ${breakpoint}) {
                         .p-overlaypanel[${attributeSelector.current}] {
                             width: ${props.breakpoints[breakpoint]};
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index 2ea5cc4704..d91b42d4b6 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -124,135 +124,135 @@ export const Paginator = React.memo(
             let element;
 
             switch (key) {
-            case 'FirstPageLink':
-                element = (
-                    <FirstPageLink
-                        hostName="Paginator"
-                        key={key}
-                        page={page}
-                        totalPages={totalPages}
-                        totalRecords={props.totalRecords}
-                        rows={props.rows}
-                        onClick={changePageToFirst}
-                        disabled={isFirstPage || isEmpty}
-                        template={template}
-                        firstPageLinkIcon={props.firstPageLinkIcon}
-                        ptm={ptm}
-                        cx={cx}
-                    />
-                );
-                break;
-
-            case 'PrevPageLink':
-                element = (
-                    <PrevPageLink
-                        hostName="Paginator"
-                        key={key}
-                        page={page}
-                        totalPages={totalPages}
-                        totalRecords={props.totalRecords}
-                        rows={props.rows}
-                        onClick={changePageToPrev}
-                        disabled={isFirstPage || isEmpty}
-                        template={template}
-                        prevPageLinkIcon={props.prevPageLinkIcon}
-                        ptm={ptm}
-                        cx={cx}
-                    />
-                );
-                break;
-
-            case 'NextPageLink':
-                element = (
-                    <NextPageLink
-                        hostName="Paginator"
-                        key={key}
-                        page={page}
-                        totalPages={totalPages}
-                        totalRecords={props.totalRecords}
-                        rows={props.rows}
-                        onClick={changePageToNext}
-                        disabled={isLastPage || isEmpty}
-                        template={template}
-                        nextPageLinkIcon={props.nextPageLinkIcon}
-                        ptm={ptm}
-                        cx={cx}
-                    />
-                );
-                break;
-
-            case 'LastPageLink':
-                element = (
-                    <LastPageLink
-                        hostName="Paginator"
-                        key={key}
-                        page={page}
-                        totalPages={totalPages}
-                        totalRecords={props.totalRecords}
-                        rows={props.rows}
-                        onClick={changePageToLast}
-                        disabled={isLastPage || isEmpty}
-                        template={template}
-                        lastPageLinkIcon={props.lastPageLinkIcon}
-                        ptm={ptm}
-                        cx={cx}
-                    />
-                );
-                break;
-
-            case 'PageLinks':
-                element = (
-                    <PageLinks hostName="Paginator" key={key} page={page} totalPages={totalPages} totalRecords={props.totalRecords} rows={props.rows} value={updatePageLinks()} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />
-                );
-                break;
-
-            case 'RowsPerPageDropdown':
-                element = (
-                    <RowsPerPageDropdown
-                        hostName="Paginator"
-                        key={key}
-                        value={props.rows}
-                        page={page}
-                        totalPages={totalPages}
-                        totalRecords={props.totalRecords}
-                        options={props.rowsPerPageOptions}
-                        onChange={onRowsChange}
-                        appendTo={props.dropdownAppendTo}
-                        template={template}
-                        disabled={isEmpty}
-                        unstyled={props.unstyled}
-                        ptm={ptm}
-                        cx={cx}
-                        metaData={metaData}
-                    />
-                );
-                break;
-
-            case 'CurrentPageReport':
-                element = (
-                    <CurrentPageReport
-                        hostName="Paginator"
-                        reportTemplate={props.currentPageReportTemplate}
-                        key={key}
-                        page={page}
-                        totalPages={totalPages}
-                        totalRecords={props.totalRecords}
-                        rows={props.rows}
-                        first={props.first}
-                        template={template}
-                        ptm={ptm}
-                    />
-                );
-                break;
-            case 'JumpToPageInput':
-                element = (
-                    <JumpToPageInput hostName="Paginator" key={key} rows={props.rows} page={page} totalPages={totalPages} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />
-                );
-                break;
-
-            default:
-                element = null;
-                break;
+                case 'FirstPageLink':
+                    element = (
+                        <FirstPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToFirst}
+                            disabled={isFirstPage || isEmpty}
+                            template={template}
+                            firstPageLinkIcon={props.firstPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'PrevPageLink':
+                    element = (
+                        <PrevPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToPrev}
+                            disabled={isFirstPage || isEmpty}
+                            template={template}
+                            prevPageLinkIcon={props.prevPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'NextPageLink':
+                    element = (
+                        <NextPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToNext}
+                            disabled={isLastPage || isEmpty}
+                            template={template}
+                            nextPageLinkIcon={props.nextPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'LastPageLink':
+                    element = (
+                        <LastPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToLast}
+                            disabled={isLastPage || isEmpty}
+                            template={template}
+                            lastPageLinkIcon={props.lastPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'PageLinks':
+                    element = (
+                        <PageLinks hostName="Paginator" key={key} page={page} totalPages={totalPages} totalRecords={props.totalRecords} rows={props.rows} value={updatePageLinks()} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />
+                    );
+                    break;
+
+                case 'RowsPerPageDropdown':
+                    element = (
+                        <RowsPerPageDropdown
+                            hostName="Paginator"
+                            key={key}
+                            value={props.rows}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            options={props.rowsPerPageOptions}
+                            onChange={onRowsChange}
+                            appendTo={props.dropdownAppendTo}
+                            template={template}
+                            disabled={isEmpty}
+                            unstyled={props.unstyled}
+                            ptm={ptm}
+                            cx={cx}
+                            metaData={metaData}
+                        />
+                    );
+                    break;
+
+                case 'CurrentPageReport':
+                    element = (
+                        <CurrentPageReport
+                            hostName="Paginator"
+                            reportTemplate={props.currentPageReportTemplate}
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            first={props.first}
+                            template={template}
+                            ptm={ptm}
+                        />
+                    );
+                    break;
+                case 'JumpToPageInput':
+                    element = (
+                        <JumpToPageInput hostName="Paginator" key={key} rows={props.rows} page={page} totalPages={totalPages} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />
+                    );
+                    break;
+
+                default:
+                    element = null;
+                    break;
             }
 
             return element;
@@ -265,13 +265,13 @@ export const Paginator = React.memo(
                 if (typeof template === 'object') {
                     return template.layout
                         ? template.layout.split(' ').map((value) => {
-                            const key = value.trim();
+                              const key = value.trim();
 
-                            return createElement(key, template[key]);
-                        })
+                              return createElement(key, template[key]);
+                          })
                         : Object.entries(template).map(([key, _template]) => {
-                            return createElement(key, _template);
-                        });
+                              return createElement(key, _template);
+                          });
                 }
 
                 return template.split(' ').map((value) => {
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index a1516c685a..5507a5f463 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -93,30 +93,30 @@ export const PanelMenu = React.memo(
 
         const onHeaderKeyDown = (event, item) => {
             switch (event.code) {
-            case 'ArrowDown':
-                onHeaderArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onHeaderArrowUpKey(event);
-                break;
-
-            case 'Home':
-                onHeaderHomeKey(event);
-                break;
-
-            case 'End':
-                onHeaderEndKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                onHeaderEnterKey(event, item);
-                break;
-
-            default:
-                break;
+                case 'ArrowDown':
+                    onHeaderArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onHeaderArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    onHeaderHomeKey(event);
+                    break;
+
+                case 'End':
+                    onHeaderEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onHeaderEnterKey(event, item);
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/panelmenu/PanelMenuList.js b/components/lib/panelmenu/PanelMenuList.js
index 2467bf47b6..53c9c3122b 100644
--- a/components/lib/panelmenu/PanelMenuList.js
+++ b/components/lib/panelmenu/PanelMenuList.js
@@ -63,55 +63,55 @@ export const PanelMenuList = React.memo((props) => {
         const metaKey = event.metaKey || event.ctrlKey;
 
         switch (event.code) {
-        case 'ArrowDown':
-            onArrowDownKey(event);
-            break;
-
-        case 'ArrowUp':
-            onArrowUpKey(event);
-            break;
-
-        case 'ArrowLeft':
-            onArrowLeftKey(event);
-            break;
-
-        case 'ArrowRight':
-            onArrowRightKey(event);
-            break;
-
-        case 'Home':
-            onHomeKey(event);
-            break;
-
-        case 'End':
-            onEndKey(event);
-            break;
-
-        case 'Space':
-            onSpaceKey(event);
-            break;
-
-        case 'Enter':
-        case 'NumpadEnter':
-            onEnterKey(event);
-            break;
-
-        case 'Escape':
-        case 'Tab':
-        case 'PageDown':
-        case 'PageUp':
-        case 'Backspace':
-        case 'ShiftLeft':
-        case 'ShiftRight':
-            //NOOP
-            break;
-
-        default:
-            if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                searchItems(event, event.key);
-            }
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+            case 'Tab':
+            case 'PageDown':
+            case 'PageUp':
+            case 'Backspace':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
+                break;
+
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    searchItems(event, event.key);
+                }
 
-            break;
+                break;
         }
     };
 
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index d4b5bb4e5f..37fabb860f 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -335,38 +335,38 @@ const Tailwind = {
                 classNames:
                     props.position === 'top'
                         ? {
-                            enter: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
-                            enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
-                            exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                            exitActive: '!opacity-0 !scale-75 translate-x-0 -translate-y-full translate-z-0'
-                        }
+                              enter: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
+                              enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
+                              exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                              exitActive: '!opacity-0 !scale-75 translate-x-0 -translate-y-full translate-z-0'
+                          }
                         : props.position === 'bottom'
-                            ? {
+                          ? {
                                 enter: 'opacity-0 scale-75 translate-y-full',
                                 enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
                                 exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
                                 exitActive: '!opacity-0 !scale-75 translate-x-0 translate-y-full translate-z-0'
                             }
-                            : props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left'
-                                ? {
-                                    enter: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
+                          : props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left'
+                            ? {
+                                  enter: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
+                                  enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
+                                  exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                  exitActive: '!opacity-0 !scale-75 -translate-x-full translate-y-0 translate-z-0'
+                              }
+                            : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right'
+                              ? {
+                                    enter: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
                                     enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
                                     exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                                    exitActive: '!opacity-0 !scale-75 -translate-x-full translate-y-0 translate-z-0'
+                                    exitActive: '!opacity-0 !scale-75 translate-x-full translate-y-0 translate-z-0'
+                                }
+                              : {
+                                    enter: 'opacity-0 scale-75',
+                                    enterActive: '!opacity-100 !scale-100 transition-all duration-200 ease-out',
+                                    exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                    exitActive: '!opacity-0 !scale-75'
                                 }
-                                : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right'
-                                    ? {
-                                        enter: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
-                                        enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
-                                        exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                                        exitActive: '!opacity-0 !scale-75 translate-x-full translate-y-0 translate-z-0'
-                                    }
-                                    : {
-                                        enter: 'opacity-0 scale-75',
-                                        enterActive: '!opacity-100 !scale-100 transition-all duration-200 ease-out',
-                                        exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
-                                        exitActive: '!opacity-0 !scale-75'
-                                    }
             };
         }
     },
@@ -453,40 +453,40 @@ const Tailwind = {
                 timeout: 300,
                 classNames: props.fullScreen
                     ? {
-                        enter: 'opacity-0',
-                        enterActive: '!opacity-100 transition-opacity duration-300 ease-in',
-                        exit: 'opacity-100 transition-opacity duration-300 ease-in',
-                        exitActive: '!opacity-0'
-                    }
+                          enter: 'opacity-0',
+                          enterActive: '!opacity-100 transition-opacity duration-300 ease-in',
+                          exit: 'opacity-100 transition-opacity duration-300 ease-in',
+                          exitActive: '!opacity-0'
+                      }
                     : props.position === 'top'
-                        ? {
+                      ? {
                             enter: 'translate-x-0 -translate-y-full translate-z-0',
                             enterActive: '!translate-y-0 transition-transform duration-300',
                             exit: 'translate-y-0 transition-transform duration-300',
                             exitActive: 'translate-x-0 !-translate-y-full translate-z-0'
                         }
-                        : props.position === 'bottom'
-                            ? {
-                                enter: 'translate-x-0 translate-y-full translate-z-0',
-                                enterActive: '!translate-y-0 transition-transform duration-300',
-                                exit: 'translate-y-0 transition-transform duration-300',
-                                exitActive: 'translate-x-0 !translate-y-full translate-z-0'
+                      : props.position === 'bottom'
+                        ? {
+                              enter: 'translate-x-0 translate-y-full translate-z-0',
+                              enterActive: '!translate-y-0 transition-transform duration-300',
+                              exit: 'translate-y-0 transition-transform duration-300',
+                              exitActive: 'translate-x-0 !translate-y-full translate-z-0'
+                          }
+                        : props.position === 'left'
+                          ? {
+                                enter: '-translate-x-full translate-y-0 translate-z-0',
+                                enterActive: '!translate-x-0 transition-transform duration-300',
+                                exit: 'translate-x-0 transition-transform duration-300',
+                                exitActive: '!-translate-x-full translate-y-0 translate-z-0'
                             }
-                            : props.position === 'left'
-                                ? {
-                                    enter: '-translate-x-full translate-y-0 translate-z-0',
-                                    enterActive: '!translate-x-0 transition-transform duration-300',
-                                    exit: 'translate-x-0 transition-transform duration-300',
-                                    exitActive: '!-translate-x-full translate-y-0 translate-z-0'
-                                }
-                                : props.position === 'right'
-                                    ? {
-                                        enter: 'translate-x-full translate-y-0 translate-z-0',
-                                        enterActive: '!translate-x-0 transition-transform duration-300',
-                                        exit: 'translate-x-0 transition-transform duration-300',
-                                        exitActive: '!translate-x-full translate-y-0 translate-z-0'
-                                    }
-                                    : undefined
+                          : props.position === 'right'
+                            ? {
+                                  enter: 'translate-x-full translate-y-0 translate-z-0',
+                                  enterActive: '!translate-x-0 transition-transform duration-300',
+                                  exit: 'translate-x-0 transition-transform duration-300',
+                                  exitActive: '!translate-x-full translate-y-0 translate-z-0'
+                              }
+                            : undefined
             };
         }
     },
@@ -845,7 +845,7 @@ const Tailwind = {
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
                 'transition-colors duration-200 rounded-2xl',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                'before:absolute before:content-\'\' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200',
+                "before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
                 {
                     'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.checked,
                     'bg-blue-500 before:transform before:translate-x-5': props.checked
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index 2c4ee1e928..4001cbaae4 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -73,20 +73,20 @@ export const Password = React.memo(
                 let label = null;
 
                 switch (meterState.strength) {
-                case 'weak':
-                    label = weakLabel;
-                    break;
+                    case 'weak':
+                        label = weakLabel;
+                        break;
 
-                case 'medium':
-                    label = mediumLabel;
-                    break;
+                    case 'medium':
+                        label = mediumLabel;
+                        break;
 
-                case 'strong':
-                    label = strongLabel;
-                    break;
+                    case 'strong':
+                        label = strongLabel;
+                        break;
 
-                default:
-                    break;
+                    default:
+                        break;
                 }
 
                 if (label && infoTextState !== label) {
@@ -106,34 +106,34 @@ export const Password = React.memo(
             let meter = null;
 
             switch (testStrength(value)) {
-            case 1:
-                label = weakLabel;
-                meter = {
-                    strength: 'weak',
-                    width: '33.33%'
-                };
-                break;
-
-            case 2:
-                label = mediumLabel;
-                meter = {
-                    strength: 'medium',
-                    width: '66.66%'
-                };
-                break;
-
-            case 3:
-                label = strongLabel;
-                meter = {
-                    strength: 'strong',
-                    width: '100%'
-                };
-                break;
-
-            default:
-                label = promptLabel;
-                meter = null;
-                break;
+                case 1:
+                    label = weakLabel;
+                    meter = {
+                        strength: 'weak',
+                        width: '33.33%'
+                    };
+                    break;
+
+                case 2:
+                    label = mediumLabel;
+                    meter = {
+                        strength: 'medium',
+                        width: '66.66%'
+                    };
+                    break;
+
+                case 3:
+                    label = strongLabel;
+                    meter = {
+                        strength: 'strong',
+                        width: '100%'
+                    };
+                    break;
+
+                default:
+                    label = promptLabel;
+                    meter = null;
+                    break;
             }
 
             setMeterState(meter);
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index cf736710fd..51e0b13c1c 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -65,25 +65,25 @@ export const PickList = React.memo(
         const handleScrollPosition = (listElement, direction) => {
             if (listElement) {
                 switch (direction) {
-                case 'up':
-                    scrollInView(listElement, -1);
-                    break;
+                    case 'up':
+                        scrollInView(listElement, -1);
+                        break;
 
-                case 'top':
-                    listElement.scrollTop = 0;
-                    break;
+                    case 'top':
+                        listElement.scrollTop = 0;
+                        break;
 
-                case 'down':
-                    scrollInView(listElement, 1);
-                    break;
+                    case 'down':
+                        scrollInView(listElement, 1);
+                        break;
 
-                case 'bottom':
-                    /* TODO: improve this code block */
-                    setTimeout(() => (listElement.scrollTop = listElement.scrollHeight), 100);
-                    break;
+                    case 'bottom':
+                        /* TODO: improve this code block */
+                        setTimeout(() => (listElement.scrollTop = listElement.scrollHeight), 100);
+                        break;
 
-                default:
-                    break;
+                    default:
+                        break;
                 }
             }
         };
@@ -104,60 +104,60 @@ export const PickList = React.memo(
             let selectedValue = [];
 
             switch (direction) {
-            case 'toTarget':
-                selectedValue = sourceSelection;
-
-                if (props.onMoveToTarget) {
-                    props.onMoveToTarget({
-                        originalEvent,
-                        value: selectedValue
-                    });
-                }
+                case 'toTarget':
+                    selectedValue = sourceSelection;
+
+                    if (props.onMoveToTarget) {
+                        props.onMoveToTarget({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
 
-                break;
+                    break;
 
-            case 'allToTarget':
-                selectedValue = props.source;
+                case 'allToTarget':
+                    selectedValue = props.source;
 
-                if (props.onMoveAllToTarget) {
-                    props.onMoveAllToTarget({
-                        originalEvent,
-                        value: selectedValue
-                    });
-                }
+                    if (props.onMoveAllToTarget) {
+                        props.onMoveAllToTarget({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
 
-                selectedValue = [];
+                    selectedValue = [];
 
-                break;
+                    break;
 
-            case 'toSource':
-                selectedValue = targetSelection;
+                case 'toSource':
+                    selectedValue = targetSelection;
 
-                if (props.onMoveToSource) {
-                    props.onMoveToSource({
-                        originalEvent,
-                        value: selectedValue
-                    });
-                }
+                    if (props.onMoveToSource) {
+                        props.onMoveToSource({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
 
-                break;
+                    break;
 
-            case 'allToSource':
-                selectedValue = props.target;
+                case 'allToSource':
+                    selectedValue = props.target;
 
-                if (props.onMoveAllToSource) {
-                    props.onMoveAllToSource({
-                        originalEvent,
-                        value: selectedValue
-                    });
-                }
+                    if (props.onMoveAllToSource) {
+                        props.onMoveAllToSource({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
 
-                selectedValue = [];
+                    selectedValue = [];
 
-                break;
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
 
             onSelectionChange({ originalEvent, value: selectedValue }, 'sourceSelection', props.onSourceSelectionChange);
@@ -322,47 +322,47 @@ export const PickList = React.memo(
 
         const onListKeyDown = (event, type) => {
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event, type);
-                break;
+                case 'ArrowDown':
+                    onArrowDownKey(event, type);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event, type);
+                    break;
 
-            case 'ArrowUp':
-                onArrowUpKey(event, type);
-                break;
+                case 'Home':
+                    onHomeKey(event, type);
+                    break;
 
-            case 'Home':
-                onHomeKey(event, type);
-                break;
+                case 'End':
+                    onEndKey(event, type);
+                    break;
 
-            case 'End':
-                onEndKey(event, type);
-                break;
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event, type);
+                    break;
 
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event, type);
-                break;
+                case 'Space':
+                    onSpaceKey(event, type);
+                    break;
 
-            case 'Space':
-                onSpaceKey(event, type);
-                break;
+                case 'KeyA':
+                    if (event.ctrlKey) {
+                        const isSource = type === 'source';
 
-            case 'KeyA':
-                if (event.ctrlKey) {
-                    const isSource = type === 'source';
+                        if (isSource) {
+                            setSourceSelectionState([...sourceList]);
+                        } else {
+                            setTargetSelectionState([...targetList]);
+                        }
 
-                    if (isSource) {
-                        setSourceSelectionState([...sourceList]);
-                    } else {
-                        setTargetSelectionState([...targetList]);
+                        onSelectionChange({ originalEvent: event, value: [...sourceList] }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
+                        event.preventDefault();
                     }
 
-                    onSelectionChange({ originalEvent: event, value: [...sourceList] }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
-                    event.preventDefault();
-                }
-
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/picklist/PickListTransferControls.js b/components/lib/picklist/PickListTransferControls.js
index d3aaa7eddf..b1e2b5ae7b 100644
--- a/components/lib/picklist/PickListTransferControls.js
+++ b/components/lib/picklist/PickListTransferControls.js
@@ -19,16 +19,16 @@ export const PickListTransferControls = React.memo((props) => {
 
     function getIconComponent(iconType) {
         switch (iconType) {
-        case 'moveToTargetIcon':
-            return props.moveToTargetIcon || viewChanged ? props.moveToTargetIcon || <AngleDownIcon /> : props.moveToTargetIcon || <AngleRightIcon />;
-        case 'moveAllToTargetIcon':
-            return props.moveAllToTargetIcon || viewChanged ? props.moveAllToTargetIcon || <AngleDoubleDownIcon /> : props.moveAllToTargetIcon || <AngleDoubleRightIcon />;
-        case 'moveToSourceIcon':
-            return props.moveToSourceIcon || viewChanged ? props.moveToSourceIcon || <AngleUpIcon /> : props.moveToSourceIcon || <AngleLeftIcon />;
-        case 'moveAllToSourceIcon':
-            return props.moveAllToSourceIcon || viewChanged ? props.moveAllToSourceIcon || <AngleDoubleUpIcon /> : props.moveAllToSourceIcon || <AngleDoubleLeftIcon />;
-        default:
-            return null;
+            case 'moveToTargetIcon':
+                return props.moveToTargetIcon || viewChanged ? props.moveToTargetIcon || <AngleDownIcon /> : props.moveToTargetIcon || <AngleRightIcon />;
+            case 'moveAllToTargetIcon':
+                return props.moveAllToTargetIcon || viewChanged ? props.moveAllToTargetIcon || <AngleDoubleDownIcon /> : props.moveAllToTargetIcon || <AngleDoubleRightIcon />;
+            case 'moveToSourceIcon':
+                return props.moveToSourceIcon || viewChanged ? props.moveToSourceIcon || <AngleUpIcon /> : props.moveToSourceIcon || <AngleLeftIcon />;
+            case 'moveAllToSourceIcon':
+                return props.moveAllToSourceIcon || viewChanged ? props.moveAllToSourceIcon || <AngleDoubleUpIcon /> : props.moveAllToSourceIcon || <AngleDoubleLeftIcon />;
+            default:
+                return null;
         }
     }
 
@@ -135,16 +135,7 @@ export const PickListTransferControls = React.memo((props) => {
 
     return (
         <div {...buttonsProps}>
-            <Button
-                disabled={moveRightDisabled}
-                type="button"
-                icon={moveToTargetIcon}
-                onClick={moveRight}
-                pt={ptm('moveToTargetButton')}
-                unstyled={unstyled}
-                aria-label={ariaLabel('moveToTarget')}
-                __parentMetadata={{ parent: props.metaData }}
-            />
+            <Button disabled={moveRightDisabled} type="button" icon={moveToTargetIcon} onClick={moveRight} pt={ptm('moveToTargetButton')} unstyled={unstyled} aria-label={ariaLabel('moveToTarget')} __parentMetadata={{ parent: props.metaData }} />
             <Button
                 disabled={moveAllRightDisabled}
                 type="button"
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 9b958c2444..3087c68ddf 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -113,7 +113,7 @@ export const ProgressBar = React.memo(
             return createIndeterminate();
         }
 
-        throw new Error(props.mode + ' is not a valid mode for the ProgressBar. Valid values are \'determinate\' and \'indeterminate\'');
+        throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
     })
 );
 
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 57c44fc926..e5efe1fc71 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -85,25 +85,25 @@ export const Rating = React.memo(
 
         const onStarKeyDown = (event, value) => {
             switch (event.key) {
-            case 'Enter':
-            case 'Space':
-                rate(event, value);
-                event.preventDefault();
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                event.preventDefault();
-                rate(event, props.value - 1 < 1 ? props.stars : props.value - 1);
-                break;
-
-            case 'ArrowRight':
-            case 'ArrowDown':
-                event.preventDefault();
-                rate(event, props.value + 1 > props.stars ? 1 : props.value + 1);
-                break;
-
-            default:
-                break;
+                case 'Enter':
+                case 'Space':
+                    rate(event, value);
+                    event.preventDefault();
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    rate(event, props.value - 1 < 1 ? props.stars : props.value - 1);
+                    break;
+
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    rate(event, props.value + 1 > props.stars ? 1 : props.value + 1);
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
index 8142971860..41bc187ae0 100644
--- a/components/lib/scrollpanel/ScrollPanel.js
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -175,53 +175,53 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
     const onKeyDown = (event) => {
         if (orientationState === 'vertical') {
             switch (event.code) {
-            case 'ArrowDown': {
-                setTimer('scrollTop', props.step);
-                event.preventDefault();
-                break;
-            }
-
-            case 'ArrowUp': {
-                setTimer('scrollTop', props.step * -1);
-                event.preventDefault();
-                break;
-            }
-
-            case 'ArrowLeft':
-
-            case 'ArrowRight': {
-                event.preventDefault();
-                break;
-            }
-
-            default:
-                //no op
-                break;
+                case 'ArrowDown': {
+                    setTimer('scrollTop', props.step);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    setTimer('scrollTop', props.step * -1);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft':
+
+                case 'ArrowRight': {
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
             }
         } else if (orientationState === 'horizontal') {
             switch (event.code) {
-            case 'ArrowRight': {
-                setTimer('scrollLeft', props.step);
-                event.preventDefault();
-                break;
-            }
-
-            case 'ArrowLeft': {
-                setTimer('scrollLeft', props.step * -1);
-                event.preventDefault();
-                break;
-            }
-
-            case 'ArrowDown':
-
-            case 'ArrowUp': {
-                event.preventDefault();
-                break;
-            }
-
-            default:
-                //no op
-                break;
+                case 'ArrowRight': {
+                    setTimer('scrollLeft', props.step);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    setTimer('scrollLeft', props.step * -1);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown':
+
+                case 'ArrowUp': {
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
             }
         }
     };
diff --git a/components/lib/selectbutton/SelectButtonItem.js b/components/lib/selectbutton/SelectButtonItem.js
index 19c3debb61..6752916a08 100644
--- a/components/lib/selectbutton/SelectButtonItem.js
+++ b/components/lib/selectbutton/SelectButtonItem.js
@@ -40,35 +40,36 @@ export const SelectButtonItem = React.memo((props) => {
 
     const onKeyDown = (event, index) => {
         switch (event.code) {
-        case 'Space': {
-            onClick(event, index);
-            event.preventDefault();
-            break;
-        }
+            case 'Space': {
+                onClick(event, index);
+                event.preventDefault();
+                break;
+            }
 
-        case 'ArrowDown':
+            case 'ArrowDown':
 
-        case 'ArrowRight': {
-            changeTabIndexes(event, 'next');
-            event.preventDefault();
-            break;
-        }
+            case 'ArrowRight': {
+                changeTabIndexes(event, 'next');
+                event.preventDefault();
+                break;
+            }
 
-        case 'ArrowUp':
+            case 'ArrowUp':
 
-        case 'ArrowLeft': {
-            changeTabIndexes(event, 'prev');
-            event.preventDefault();
-            break;
-        }
+            case 'ArrowLeft': {
+                changeTabIndexes(event, 'prev');
+                event.preventDefault();
+                break;
+            }
 
-        default:
-            break;
+            default:
+                break;
         }
     };
 
     const changeTabIndexes = (event, direction) => {
-        let firstTabableChild; let index;
+        let firstTabableChild;
+        let index;
 
         for (let i = 0; i <= props.elementRef.current.children.length - 1; i++) {
             if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') {
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index cc55ab1c17..e291592e6a 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -110,38 +110,38 @@ export const Slider = React.memo(
             const key = event.key;
 
             switch (key) {
-            case 'ArrowRight':
-            case 'ArrowUp':
-                spin(event, 1);
-                break;
-
-            case 'ArrowLeft':
-            case 'ArrowDown':
-                spin(event, -1);
-                break;
-
-            case 'PageUp':
-                spin(event, 10);
-                event.preventDefault();
-                break;
-
-            case 'PageDown':
-                spin(event, -10);
-                event.preventDefault();
-                break;
-
-            case 'Home':
-                spin(event, -value);
-                event.preventDefault();
-                break;
-
-            case 'End':
-                spin(event, props.max);
-                event.preventDefault();
-                break;
-
-            default:
-                break;
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    spin(event, 1);
+                    break;
+
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    spin(event, -1);
+                    break;
+
+                case 'PageUp':
+                    spin(event, 10);
+                    event.preventDefault();
+                    break;
+
+                case 'PageDown':
+                    spin(event, -10);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    spin(event, -value);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    spin(event, props.max);
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index 53e099299f..a7f9cec7fa 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -89,66 +89,66 @@ export const SpeedDial = React.memo(
 
         const onKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDown(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUp(event);
-                break;
-
-            case 'ArrowLeft':
-                onArrowLeft(event);
-                break;
-
-            case 'ArrowRight':
-                onArrowRight(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-                onEscapeKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            default:
-                break;
+                case 'ArrowDown':
+                    onArrowDown(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUp(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeft(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRight(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                default:
+                    break;
             }
         };
 
         const onTogglerKeydown = (event) => {
             switch (event.code) {
-            case 'ArrowDown':
-            case 'ArrowLeft':
-                onTogglerArrowDown(event);
+                case 'ArrowDown':
+                case 'ArrowLeft':
+                    onTogglerArrowDown(event);
 
-                break;
+                    break;
 
-            case 'ArrowUp':
-            case 'ArrowRight':
-                onTogglerArrowUp(event);
+                case 'ArrowUp':
+                case 'ArrowRight':
+                    onTogglerArrowUp(event);
 
-                break;
+                    break;
 
-            case 'Escape':
-                onEscapeKey();
+                case 'Escape':
+                    onEscapeKey();
 
-                break;
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index e2dea589c0..b6f2ec729d 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -116,14 +116,14 @@ export const Splitter = React.memo(
 
         const getStorage = React.useCallback(() => {
             switch (props.stateStorage) {
-            case 'local':
-                return window.localStorage;
+                case 'local':
+                    return window.localStorage;
 
-            case 'session':
-                return window.sessionStorage;
+                case 'session':
+                    return window.sessionStorage;
 
-            default:
-                throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
+                default:
+                    throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
             }
         }, [props.stateStorage]);
 
@@ -170,7 +170,9 @@ export const Splitter = React.memo(
         };
 
         const onResize = (event, step = 0, isKeyDown = false) => {
-            let newPos; let newNextPanelSize; let newPrevPanelSize;
+            let newPos;
+            let newNextPanelSize;
+            let newPrevPanelSize;
             const pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
             const pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
 
@@ -228,72 +230,72 @@ export const Splitter = React.memo(
             const minSize = (props.children[index].props && props.children[index].props.minSize) || 0;
 
             switch (event.code) {
-            case 'ArrowLeft': {
-                if (horizontal) {
-                    setTimer(event, index, props.step * -1);
+                case 'ArrowLeft': {
+                    if (horizontal) {
+                        setTimer(event, index, props.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'ArrowRight': {
+                    if (horizontal) {
+                        setTimer(event, index, props.step);
+                    }
 
-            case 'ArrowRight': {
-                if (horizontal) {
-                    setTimer(event, index, props.step);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'ArrowDown': {
+                    if (!horizontal) {
+                        setTimer(event, index, props.step * -1);
+                    }
 
-            case 'ArrowDown': {
-                if (!horizontal) {
-                    setTimer(event, index, props.step * -1);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'ArrowUp': {
+                    if (!horizontal) {
+                        setTimer(event, index, props.step);
+                    }
 
-            case 'ArrowUp': {
-                if (!horizontal) {
-                    setTimer(event, index, props.step);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
+                case 'Home': {
+                    resizePanel(index, 100 - minSize, minSize);
 
-            case 'Home': {
-                resizePanel(index, 100 - minSize, minSize);
+                    event.preventDefault();
+                    break;
+                }
 
-                event.preventDefault();
-                break;
-            }
+                case 'End': {
+                    resizePanel(index, minSize, 100 - minSize);
 
-            case 'End': {
-                resizePanel(index, minSize, 100 - minSize);
+                    event.preventDefault();
+                    break;
+                }
 
-                event.preventDefault();
-                break;
-            }
+                case 'NumpadEnter':
 
-            case 'NumpadEnter':
+                case 'Enter': {
+                    if (prevSize.current >= 100 - (minSize || 5)) {
+                        resizePanel(index, minSize, 100 - minSize);
+                    } else {
+                        resizePanel(index, 100 - minSize, minSize);
+                    }
 
-            case 'Enter': {
-                if (prevSize.current >= 100 - (minSize || 5)) {
-                    resizePanel(index, minSize, 100 - minSize);
-                } else {
-                    resizePanel(index, 100 - minSize, minSize);
+                    event.preventDefault();
+                    break;
                 }
 
-                event.preventDefault();
-                break;
-            }
-
-            default:
-                //no op
-                break;
+                default:
+                    //no op
+                    break;
             }
         };
 
@@ -372,7 +374,7 @@ export const Splitter = React.memo(
             panelElements.map((panelElement, i) => {
                 prevSize.current = panelSize(panelSizes, 0);
 
-                if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, '[data-pc-name=\'splitter\']') && DomHandler.find(panelElement, '[data-pc-section=\'root\']'))) {
+                if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']") && DomHandler.find(panelElement, "[data-pc-section='root']"))) {
                     !isUnstyled() && DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
                     panelElement.setAttribute('data-p-splitter-panel-nested', true);
                     setNested(true);
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index d0a76ffb8c..d9c64d538b 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -59,39 +59,39 @@ export const Steps = React.memo(
             }
 
             switch (event.code) {
-            case 'ArrowRight':
-                navigateToNextItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'ArrowLeft':
-                navigateToPrevItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'Home':
-                navigateToFirstItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'End':
-                navigateToLastItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'Tab':
-                //no op
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-            case 'Space':
-                itemClick(event, item, index);
-                event.preventDefault();
-                break;
-
-            default:
-                break;
+                case 'ArrowRight':
+                    navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowLeft':
+                    navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    //no op
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    itemClick(event, item, index);
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
index 6673565d85..1ddd679b6b 100644
--- a/components/lib/styleclass/StyleClass.js
+++ b/components/lib/styleclass/StyleClass.js
@@ -161,20 +161,20 @@ export const StyleClass = React.forwardRef((inProps, ref) => {
         }
 
         switch (props.selector) {
-        case '@next':
-            return elementRef.current && elementRef.current.nextElementSibling;
+            case '@next':
+                return elementRef.current && elementRef.current.nextElementSibling;
 
-        case '@prev':
-            return elementRef.current && elementRef.current.previousElementSibling;
+            case '@prev':
+                return elementRef.current && elementRef.current.previousElementSibling;
 
-        case '@parent':
-            return elementRef.current && elementRef.current.parentElement;
+            case '@parent':
+                return elementRef.current && elementRef.current.parentElement;
 
-        case '@grandparent':
-            return elementRef.current && elementRef.current.parentElement.parentElement;
+            case '@grandparent':
+                return elementRef.current && elementRef.current.parentElement.parentElement;
 
-        default:
-            return document.querySelector(props.selector);
+            default:
+                return document.querySelector(props.selector);
         }
     };
 
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index 5c0bf99a81..9a1af9a82f 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -116,39 +116,39 @@ export const TabMenu = React.memo(
 
         const onKeyDownItem = (event, item, index) => {
             switch (event.code) {
-            case 'ArrowRight':
-                navigateToNextItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'ArrowLeft':
-                navigateToPrevItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'Home':
-                navigateToFirstItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'End':
-                navigateToLastItem(event.target);
-                event.preventDefault();
-                break;
-
-            case 'Space':
-            case 'Enter':
-            case 'NumpadEnter':
-                itemClick(event, item, index);
-                event.preventDefault();
-                break;
-
-            case 'Tab':
-                onTabKey();
-                break;
-
-            default:
-                break;
+                case 'ArrowRight':
+                    navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowLeft':
+                    navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Space':
+                case 'Enter':
+                case 'NumpadEnter':
+                    itemClick(event, item, index);
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    onTabKey();
+                    break;
+
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index 8e453fd0c4..fe09014f13 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -127,38 +127,38 @@ export const TabView = React.forwardRef((inProps, ref) => {
 
     const onKeyDown = (event, tab, index) => {
         switch (event.code) {
-        case 'ArrowLeft':
-            onTabArrowLeftKey(event);
-            break;
-
-        case 'ArrowRight':
-            onTabArrowRightKey(event);
-            break;
-
-        case 'Home':
-            onTabHomeKey(event);
-            break;
-
-        case 'End':
-            onTabEndKey(event);
-            break;
-
-        case 'PageDown':
-            onPageDownKey(event);
-            break;
-
-        case 'PageUp':
-            onPageUpKey(event);
-            break;
-
-        case 'Enter':
-        case 'NumpadEnter':
-        case 'Space':
-            onTabEnterKey(event, tab, index);
-            break;
-
-        default:
-            break;
+            case 'ArrowLeft':
+                onTabArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onTabArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onTabHomeKey(event);
+                break;
+
+            case 'End':
+                onTabEndKey(event);
+                break;
+
+            case 'PageDown':
+                onPageDownKey(event);
+                break;
+
+            case 'PageUp':
+                onPageUpKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onTabEnterKey(event, tab, index);
+                break;
+
+            default:
+                break;
         }
     };
 
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index 625c38447b..a1ef9dd084 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -46,35 +46,35 @@ export const Terminal = React.memo(
 
         const onKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowUp':
-                if (commandsState && commandsState.length) {
-                    const prevIndex = indexState - 1 < 0 ? commandsState.length - 1 : indexState - 1;
-                    const command = commandsState[prevIndex];
+                case 'ArrowUp':
+                    if (commandsState && commandsState.length) {
+                        const prevIndex = indexState - 1 < 0 ? commandsState.length - 1 : indexState - 1;
+                        const command = commandsState[prevIndex];
 
-                    setIndexState(prevIndex);
-                    setCommandTextState(command.text);
-                }
+                        setIndexState(prevIndex);
+                        setCommandTextState(command.text);
+                    }
 
-                break;
+                    break;
 
-            case 'Enter':
-            case 'NumpadEnter':
-                if (commandTextState) {
-                    let newCommands = [...commandsState];
+                case 'Enter':
+                case 'NumpadEnter':
+                    if (commandTextState) {
+                        let newCommands = [...commandsState];
 
-                    newCommands.push({ text: commandTextState });
+                        newCommands.push({ text: commandTextState });
 
-                    setIndexState((prevIndex) => prevIndex + 1);
-                    setCommandTextState('');
-                    setCommandsState(newCommands);
-                    setEmittedTextState(commandTextState);
-                    isEmitted.current = true;
-                }
+                        setIndexState((prevIndex) => prevIndex + 1);
+                        setCommandTextState('');
+                        setCommandsState(newCommands);
+                        setEmittedTextState(commandTextState);
+                        isEmitted.current = true;
+                    }
 
-                break;
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index 8659dc9245..81b086c797 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -124,62 +124,62 @@ export const TieredMenu = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'ArrowUp':
-                onArrowUpKey(event);
-                break;
-
-            case 'ArrowLeft':
-                onArrowLeftKey(event);
-                break;
-
-            case 'ArrowRight':
-                onArrowRightKey(event);
-                break;
-
-            case 'Home':
-                onHomeKey(event);
-                break;
-
-            case 'End':
-                onEndKey(event);
-                break;
-
-            case 'Space':
-                onSpaceKey(event);
-                break;
-
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-                props.popup && DomHandler.focus(targetRef.current);
-                onEscapeKey(event);
-                break;
-
-            case 'Tab':
-                onTabKey(event);
-                break;
-
-            case 'PageDown':
-            case 'PageUp':
-            case 'Backspace':
-            case 'ShiftLeft':
-            case 'ShiftRight':
-                //NOOP
-                break;
-
-            default:
-                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                    searchItems(event.key);
-                }
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    props.popup && DomHandler.focus(targetRef.current);
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event.key);
+                    }
 
-                break;
+                    break;
             }
         };
 
diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js
index 4158ae17ce..7c7f4f24a8 100644
--- a/components/lib/toast/ToastMessage.js
+++ b/components/lib/toast/ToastMessage.js
@@ -130,20 +130,20 @@ export const ToastMessage = React.memo(
 
                 if (!_icon) {
                     switch (severity) {
-                    case 'info':
-                        icon = <InfoCircleIcon {...iconProps} />;
-                        break;
-                    case 'warn':
-                        icon = <ExclamationTriangleIcon {...iconProps} />;
-                        break;
-                    case 'error':
-                        icon = <TimesCircleIcon {...iconProps} />;
-                        break;
-                    case 'success':
-                        icon = <CheckIcon {...iconProps} />;
-                        break;
-                    default:
-                        break;
+                        case 'info':
+                            icon = <InfoCircleIcon {...iconProps} />;
+                            break;
+                        case 'warn':
+                            icon = <ExclamationTriangleIcon {...iconProps} />;
+                            break;
+                        case 'error':
+                            icon = <TimesCircleIcon {...iconProps} />;
+                            break;
+                        case 'success':
+                            icon = <CheckIcon {...iconProps} />;
+                            break;
+                        default:
+                            break;
                     }
                 }
 
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 9804229985..489ea2709c 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -229,25 +229,25 @@ export const Tooltip = React.memo(
                 let { top: mouseTrackTop, left: mouseTrackLeft } = getMouseTrackPosition(target);
 
                 switch (currentPosition) {
-                case 'left':
-                    left = left - (_containerSize.width + mouseTrackLeft);
-                    top = top - (_containerSize.height / 2 - mouseTrackTop);
-                    break;
-                case 'right':
-                case 'mouse':
-                    left = left + mouseTrackLeft;
-                    top = top - (_containerSize.height / 2 - mouseTrackTop);
-                    break;
-                case 'top':
-                    left = left - (_containerSize.width / 2 - mouseTrackLeft);
-                    top = top - (_containerSize.height + mouseTrackTop);
-                    break;
-                case 'bottom':
-                    left = left - (_containerSize.width / 2 - mouseTrackLeft);
-                    top = top + mouseTrackTop;
-                    break;
-                default:
-                    break;
+                    case 'left':
+                        left = left - (_containerSize.width + mouseTrackLeft);
+                        top = top - (_containerSize.height / 2 - mouseTrackTop);
+                        break;
+                    case 'right':
+                    case 'mouse':
+                        left = left + mouseTrackLeft;
+                        top = top - (_containerSize.height / 2 - mouseTrackTop);
+                        break;
+                    case 'top':
+                        left = left - (_containerSize.width / 2 - mouseTrackLeft);
+                        top = top - (_containerSize.height + mouseTrackTop);
+                        break;
+                    case 'bottom':
+                        left = left - (_containerSize.width / 2 - mouseTrackLeft);
+                        top = top + mouseTrackTop;
+                        break;
+                    default:
+                        break;
                 }
 
                 if (left <= 0 || containerSize.current.width > _containerSize.width) {
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 6b335e922d..018f46c821 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -304,40 +304,40 @@ export const UITreeNode = React.memo((props) => {
         }
 
         switch (event.code) {
-        case 'Tab':
-            onTabKey(event);
+            case 'Tab':
+                onTabKey(event);
 
-            break;
+                break;
 
-        case 'ArrowDown':
-            onArrowDown(event);
+            case 'ArrowDown':
+                onArrowDown(event);
 
-            break;
+                break;
 
-        case 'ArrowUp':
-            onArrowUp(event);
+            case 'ArrowUp':
+                onArrowUp(event);
 
-            break;
+                break;
 
-        case 'ArrowRight':
-            onArrowRight(event);
+            case 'ArrowRight':
+                onArrowRight(event);
 
-            break;
+                break;
 
-        case 'ArrowLeft':
-            onArrowLeft(event);
+            case 'ArrowLeft':
+                onArrowLeft(event);
 
-            break;
+                break;
 
-        case 'Enter':
-        case 'NumpadEnter':
-        case 'Space':
-            onEnterKey(event);
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onEnterKey(event);
 
-            break;
+                break;
 
-        default:
-            break;
+            default:
+                break;
         }
     };
 
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index c321c69864..5c37ba39d0 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -189,69 +189,69 @@ export const TreeSelect = React.memo(
 
         const onHeaderElementKeyDown = (event, isHideButton) => {
             switch (event.code) {
-            case 'ArrowDown':
-                event.preventDefault();
-                setFocusToFocusableFirstNode();
+                case 'ArrowDown':
+                    event.preventDefault();
+                    setFocusToFocusableFirstNode();
 
-                break;
+                    break;
 
-            case 'ArrowUp':
-                event.preventDefault();
-                focusInputRef.current && DomHandler.focus(focusInputRef.current);
+                case 'ArrowUp':
+                    event.preventDefault();
+                    focusInputRef.current && DomHandler.focus(focusInputRef.current);
 
-                break;
+                    break;
 
-            case 'Space':
-            case 'Enter':
-            case 'NumpadEnter':
-                event.preventDefault();
+                case 'Space':
+                case 'Enter':
+                case 'NumpadEnter':
+                    event.preventDefault();
 
-                if (isHideButton) {
-                    hide();
-                }
+                    if (isHideButton) {
+                        hide();
+                    }
 
-                break;
+                    break;
 
-            case 'Escape':
-                onEscapeKey(event);
-                break;
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
         const onKeyDown = (event) => {
             switch (event.code) {
-            case 'ArrowDown':
-                onArrowDownKey(event);
-                break;
-
-            case 'Space':
-            case 'Enter':
-            case 'NumpadEnter':
-                onEnterKey(event);
-                break;
-
-            case 'Escape':
-                onEscapeKey(event);
-                break;
-
-            case 'Tab':
-                if (overlayVisibleState) {
-                    event.preventDefault();
-
-                    if (event.shiftKey) {
-                        setFocusToFocusableFirstNode();
-                    } else {
-                        onTabKey(event);
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'Space':
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    if (overlayVisibleState) {
+                        event.preventDefault();
+
+                        if (event.shiftKey) {
+                            setFocusToFocusableFirstNode();
+                        } else {
+                            onTabKey(event);
+                        }
                     }
-                }
 
-                break;
+                    break;
 
-            default:
-                break;
+                default:
+                    break;
             }
         };
 
@@ -579,13 +579,13 @@ export const TreeSelect = React.memo(
                 content = (
                     <>
                         {selectedNodes &&
-                                selectedNodes.map((node, index) => {
-                                    return (
-                                        <div {...tokenProps} key={`${node.key}_${index}`}>
-                                            <span {...tokenLabelProps}>{node.label}</span>
-                                        </div>
-                                    );
-                                })}
+                            selectedNodes.map((node, index) => {
+                                return (
+                                    <div {...tokenProps} key={`${node.key}_${index}`}>
+                                        <span {...tokenLabelProps}>{node.label}</span>
+                                    </div>
+                                );
+                            })}
 
                         {isValueEmpty && (props.placeholder || 'empty')}
                     </>
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index 7fc25ced09..3116b163f0 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -755,7 +755,10 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
                 let col = columns[j];
                 let filterMeta = filters ? filters[getColumnProp(col, 'field')] : null;
                 let filterField = getColumnProp(col, 'field');
-                let filterValue; let filterConstraint; let paramsWithoutNode; let options;
+                let filterValue;
+                let filterConstraint;
+                let paramsWithoutNode;
+                let options;
 
                 //local
                 if (filterMeta) {
@@ -1027,7 +1030,8 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
         const columns = getColumns();
         const frozenColumns = getFrozenColumns(columns);
         const scrollableColumns = frozenColumns ? getScrollableColumns(columns) : columns;
-        let frozenView; let scrollableView;
+        let frozenView;
+        let scrollableView;
 
         if (frozenColumns) {
             frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
index d9e39cc291..29912dc233 100644
--- a/components/lib/treetable/TreeTableBase.js
+++ b/components/lib/treetable/TreeTableBase.js
@@ -45,13 +45,13 @@ const classes = {
         options.filterOnly
             ? classNames('p-filter-column', { 'p-frozen-column': frozen })
             : classNames({
-                'p-sortable-column': getColumnProp(column, 'sortable'),
-                'p-highlight': sorted,
-                'p-frozen-column': frozen,
-                'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
-                'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen,
-                [`p-align-${align}`]: !!align
-            }),
+                  'p-sortable-column': getColumnProp(column, 'sortable'),
+                  'p-highlight': sorted,
+                  'p-frozen-column': frozen,
+                  'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
+                  'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen,
+                  [`p-align-${align}`]: !!align
+              }),
     columnResizer: 'p-column-resizer p-clickable',
     sortIcon: 'p-sortable-column-icon',
     row: ({ isSelected, rowProps: props }) => ({
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index 2239a1f5e7..78ad49274f 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -278,45 +278,45 @@ export const TreeTableRow = React.memo((props) => {
 
     const onKeyDown = (event, item) => {
         switch (event.code) {
-        case 'ArrowDown':
-            onArrowDownKey(event);
-            break;
-
-        case 'ArrowUp':
-            onArrowUpKey(event);
-            break;
-
-        case 'ArrowLeft':
-            onArrowLeftKey(event);
-            break;
-
-        case 'ArrowRight':
-            onArrowRightKey(event);
-            break;
-
-        case 'Home':
-            onHomeKey(event);
-            break;
-
-        case 'End':
-            onEndKey(event);
-            break;
-
-        case 'Enter':
-        case 'NumpadEnter':
-        case 'Space':
-            if (!DomHandler.isClickable(event.target)) {
-                onEnterKey(event, item);
-            }
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                if (!DomHandler.isClickable(event.target)) {
+                    onEnterKey(event, item);
+                }
 
-            break;
+                break;
 
-        case 'Tab':
-            onTabKey(event);
-            break;
+            case 'Tab':
+                onTabKey(event);
+                break;
 
-        default:
-            break;
+            default:
+                break;
         }
     };
 
@@ -545,7 +545,8 @@ export const TreeTableRow = React.memo((props) => {
     };
 
     const createCell = (column, index) => {
-        let toggler; let checkbox;
+        let toggler;
+        let checkbox;
 
         if (getColumnProp(column, 'hidden')) {
             return null;
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index 7ca5433a48..cdbabce456 100644
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -362,7 +362,8 @@ export default class DomHandler {
             let windowScrollTop = this.getWindowScrollTop();
             let windowScrollLeft = this.getWindowScrollLeft();
             let viewport = this.getViewport();
-            let top; let left;
+            let top;
+            let left;
 
             if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
                 top = targetOffset.top + windowScrollTop - elementOuterHeight;
@@ -397,7 +398,8 @@ export default class DomHandler {
             const targetHeight = target.offsetHeight;
             const targetOffset = target.getBoundingClientRect();
             const viewport = this.getViewport();
-            let top; let left;
+            let top;
+            let left;
 
             if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
                 top = -1 * elementDimensions.height;
@@ -1162,7 +1164,9 @@ export default class DomHandler {
      * Get the attribute names for an element and sorts them alpha for comparison
      */
     static getAttributeNames(node) {
-        let index; let rv; let attrs;
+        let index;
+        let rv;
+        let attrs;
 
         rv = [];
         attrs = node.attributes;
@@ -1184,7 +1188,11 @@ export default class DomHandler {
      * elem2 = style="font-size: 28px; color: red"
      */
     static isEqualElement(elm1, elm2) {
-        let attrs1; let attrs2; let name; let node1; let node2;
+        let attrs1;
+        let attrs2;
+        let name;
+        let node1;
+        let node2;
 
         // Compare attributes without order sensitivity
         attrs1 = DomHandler.getAttributeNames(elm1);
diff --git a/components/lib/utils/Mask.js b/components/lib/utils/Mask.js
index c485625a68..b0e9a3f191 100644
--- a/components/lib/utils/Mask.js
+++ b/components/lib/utils/Mask.js
@@ -14,10 +14,23 @@ export function mask(el, options) {
     };
 
     options = { ...defaultOptions, ...options };
-    let tests; let partialPosition; let len; let firstNonMaskPos; let defs; let androidChrome; let lastRequiredNonMaskPos; let oldVal; let focusText; let caretTimeoutId; let buffer; let defaultBuffer;
+    let tests;
+    let partialPosition;
+    let len;
+    let firstNonMaskPos;
+    let defs;
+    let androidChrome;
+    let lastRequiredNonMaskPos;
+    let oldVal;
+    let focusText;
+    let caretTimeoutId;
+    let buffer;
+    let defaultBuffer;
 
     const caret = (first, last) => {
-        let range; let begin; let end;
+        let range;
+        let begin;
+        let end;
 
         if (!el.offsetParent || el !== document.activeElement) {
             return;
@@ -73,23 +86,20 @@ export function mask(el, options) {
     };
 
     const seekNext = (pos) => {
-        while (++pos < len && !tests[pos]) {
-
-        }
+        while (++pos < len && !tests[pos]) {}
 
         return pos;
     };
 
     const seekPrev = (pos) => {
-        while (--pos >= 0 && !tests[pos]) {
-
-        }
+        while (--pos >= 0 && !tests[pos]) {}
 
         return pos;
     };
 
     const shiftL = (begin, end) => {
-        let i; let j;
+        let i;
+        let j;
 
         if (begin < 0) {
             return;
@@ -113,7 +123,10 @@ export function mask(el, options) {
     };
 
     const shiftR = (pos) => {
-        let i; let c; let j; let t;
+        let i;
+        let c;
+        let j;
+        let t;
 
         for (i = pos, c = getPlaceholder(pos); i < len; i++) {
             if (tests[i]) {
diff --git a/components/lib/utils/MergeProps.js b/components/lib/utils/MergeProps.js
index 7351e8b0c3..d8ae1e4047 100644
--- a/components/lib/utils/MergeProps.js
+++ b/components/lib/utils/MergeProps.js
@@ -41,9 +41,9 @@ export function mergeProps(props, options = {}) {
 
                 merged[key] = existingFn
                     ? (...args) => {
-                        existingFn(...args);
-                        value(...args);
-                    }
+                          existingFn(...args);
+                          value(...args);
+                      }
                     : value;
             } else {
                 merged[key] = value;
diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
index c50f0bd52f..49b346ad08 100644
--- a/components/lib/utils/ObjectUtils.js
+++ b/components/lib/utils/ObjectUtils.js
@@ -32,7 +32,7 @@ export default class ObjectUtils {
                     return false;
                 }
 
-                for (i = length; i-- !== 0;) {
+                for (i = length; i-- !== 0; ) {
                     if (!this.deepEquals(a[i], b[i])) {
                         return false;
                     }
@@ -75,13 +75,13 @@ export default class ObjectUtils {
                 return false;
             }
 
-            for (i = length; i-- !== 0;) {
+            for (i = length; i-- !== 0; ) {
                 if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
                     return false;
                 }
             }
 
-            for (i = length; i-- !== 0;) {
+            for (i = length; i-- !== 0; ) {
                 key = keys[i];
 
                 if (!this.deepEquals(a[key], b[key])) {
diff --git a/pages/api/data/customers.js b/pages/api/data/customers.js
index e24f433cb3..91f9b15f25 100644
--- a/pages/api/data/customers.js
+++ b/pages/api/data/customers.js
@@ -167,7 +167,9 @@ function equals(obj1, obj2) {
     }
 
     if (obj1 && obj2 && typeof obj1 === 'object' && typeof obj2 === 'object') {
-        let i; let length; let key;
+        let i;
+        let length;
+        let key;
 
         let keys = Object.keys(obj1);
 
@@ -177,13 +179,13 @@ function equals(obj1, obj2) {
             return false;
         }
 
-        for (i = length; i-- !== 0;) {
+        for (i = length; i-- !== 0; ) {
             if (!Object.prototype.hasOwnProperty.call(obj2, keys[i])) {
                 return false;
             }
         }
 
-        for (i = length; i-- !== 0;) {
+        for (i = length; i-- !== 0; ) {
             key = keys[i];
 
             if (!equals(obj1[key], obj2[key])) {
diff --git a/pages/templates/sakai/index.js b/pages/templates/sakai/index.js
index 184d6c0afe..0e9637942b 100644
--- a/pages/templates/sakai/index.js
+++ b/pages/templates/sakai/index.js
@@ -88,7 +88,7 @@ const features1Data = [
     {
         src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-github.png',
         title: 'Open Source and Free to Use',
-        description: 'Explore Sakai, our versatile, open-source React application template. It\'s free for your every innovation.'
+        description: "Explore Sakai, our versatile, open-source React application template. It's free for your every innovation."
     },
     {
         src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-ready.png',

From 65d85d08949caf2377c85e64a161f6d2799f3c4a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 16:44:40 +0300
Subject: [PATCH 063/194] Update changelog.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2db967270..f68756252d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - Enhancement focusOnHover Prop [\#6230](https://github.com/primefaces/primereact/issues/6230)
 - TreeSelect: can't change default text "No results found" when not find data in filter TreeSelect [\#6173](https://github.com/primefaces/primereact/issues/6173)
 - Listbox - focusOnHover prop [\#6171](https://github.com/primefaces/primereact/issues/6171)
+- Upgrade PrimeIcons 7.0.0 [\#6255](https://github.com/primefaces/primereact/issues/6255)
 
 **Fixed bugs:**
 - Paginator: JumpToPageInput is broken by latest changes in Paginator [\#6226](https://github.com/primefaces/primereact/issues/6226)

From a111776c80232b548d7caea8bc8b9b799431baad Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Fri, 29 Mar 2024 11:28:53 -0400
Subject: [PATCH 064/194] Fix #6257: InputNumber SHIFT key fix

---
 components/lib/inputnumber/InputNumber.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 60f595358a..983602005d 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -323,7 +323,7 @@ export const InputNumber = React.memo(
                 return;
             }
 
-            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+            if (event.altKey || event.ctrlKey || event.metaKey) {
                 isSpecialChar.current = true;
 
                 return;

From 21441b7f1a21c37c8ca3307de55cd468d91e7bbd Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 19:21:04 +0300
Subject: [PATCH 065/194] Update imports component base

---
 components/lib/buttongroup/ButtonGroup.js   | 2 +-
 components/lib/floatlabel/FloatLabel.js     | 2 +-
 components/lib/stepper/Stepper.js           | 2 +-
 components/lib/stepperpanel/StepperPanel.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/lib/buttongroup/ButtonGroup.js b/components/lib/buttongroup/ButtonGroup.js
index e62d2ac97d..108ea31a6b 100644
--- a/components/lib/buttongroup/ButtonGroup.js
+++ b/components/lib/buttongroup/ButtonGroup.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { useHandleStyle } from '../componentbase/Componentbase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { classNames } from '../utils/Utils';
 import { ButtonGroupBase } from './ButtonGroupBase';
diff --git a/components/lib/floatlabel/FloatLabel.js b/components/lib/floatlabel/FloatLabel.js
index 82af275a2d..5390c1a96a 100644
--- a/components/lib/floatlabel/FloatLabel.js
+++ b/components/lib/floatlabel/FloatLabel.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { useHandleStyle } from '../componentbase/Componentbase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { classNames } from '../utils/Utils';
 import { FloatLabelBase } from './FloatLabelBase';
diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
index 92213a0ded..5e85e7439d 100644
--- a/components/lib/stepper/Stepper.js
+++ b/components/lib/stepper/Stepper.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { useHandleStyle } from '../componentbase/Componentbase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { UniqueComponentId, classNames } from '../utils/Utils';
diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js
index bf0a4905f3..c8c47e18e1 100644
--- a/components/lib/stepperpanel/StepperPanel.js
+++ b/components/lib/stepperpanel/StepperPanel.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { useHandleStyle } from '../componentbase/Componentbase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { StepperPanelBase } from './StepperPanelBase';
 
 export const StepperPanel = React.memo(

From ae75d6568b803775f8a161fb4389deeba19d691f Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 20:24:39 +0300
Subject: [PATCH 066/194] Update package.json

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 81733d77b8..44842160db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primereact",
-    "version": "10.6.0",
+    "version": "10.6.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primereact",
-            "version": "10.6.0",
+            "version": "10.6.1",
             "dependencies": {
                 "@docsearch/react": "3.5.2",
                 "chart.js": "4.4.1",
diff --git a/package.json b/package.json
index 8b7f8bc31c..2c2c949077 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "primereact",
     "private": false,
-    "version": "10.6.0",
+    "version": "10.6.1",
     "scripts": {
         "dev": "next dev",
         "start": "next start",

From 39e40c753d4e40363e88247857e204c0701346c0 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 20:25:40 +0300
Subject: [PATCH 067/194] Update changelog.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f68756252d..0f78955d5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [10.6.1](https://github.com/primefaces/primereact/tree/10.6.1) (2024-03-29)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.0...10.6.1)
+
 ## [10.6.0](https://github.com/primefaces/primereact/tree/10.6.0) (2024-03-29)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/10.5.3...10.6.0)

From 444ce31a757ed22feb53cb1d6c032fab987d1c08 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 20:44:04 +0300
Subject: [PATCH 068/194] Update import

---
 components/lib/datatable/RowRadioButton.js              | 2 +-
 components/lib/multistatecheckbox/MultiStateCheckbox.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js
index 3d3718bae6..675064af9d 100644
--- a/components/lib/datatable/RowRadioButton.js
+++ b/components/lib/datatable/RowRadioButton.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ColumnBase } from '../column/ColumnBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { RadioButton } from '../radioButton/RadioButton';
+import { RadioButton } from '../radiobutton/RadioButton';
 
 export const RowRadioButton = React.memo((props) => {
     const mergeProps = useMergeProps();
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index a9b7b4b97a..32447863d7 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ariaLabel, PrimeReactContext } from '../api/Api';
+import { Checkbox } from '../checkbox/Checkbox';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 import { MultiStateCheckboxBase } from './MultiStateCheckboxBase';
-import { Checkbox } from '../checkbox/checkbox';
 
 export const MultiStateCheckbox = React.memo(
     React.forwardRef((inProps, ref) => {

From 75b9add3a453038e1cc02900c40e9bb91423fa9a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 29 Mar 2024 20:46:58 +0300
Subject: [PATCH 069/194] Update version | Changelog

---
 CHANGELOG.md      | 4 ++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f78955d5d..f8047b1efa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [10.6.2](https://github.com/primefaces/primereact/tree/10.6.2) (2024-03-29)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.1...10.6.2)
+
 ## [10.6.1](https://github.com/primefaces/primereact/tree/10.6.1) (2024-03-29)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/10.6.0...10.6.1)
diff --git a/package-lock.json b/package-lock.json
index 44842160db..dcfa5a5867 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primereact",
-    "version": "10.6.1",
+    "version": "10.6.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primereact",
-            "version": "10.6.1",
+            "version": "10.6.2",
             "dependencies": {
                 "@docsearch/react": "3.5.2",
                 "chart.js": "4.4.1",
diff --git a/package.json b/package.json
index 2c2c949077..a1bc3c145c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "primereact",
     "private": false,
-    "version": "10.6.1",
+    "version": "10.6.2",
     "scripts": {
         "dev": "next dev",
         "start": "next start",

From 36fb354f64b559699d22217ae9cc141ea67654c6 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Sat, 30 Mar 2024 10:35:21 -0400
Subject: [PATCH 070/194] Fix #6263: ButtonGroup use forwardRef properly

---
 components/lib/buttongroup/ButtonGroup.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/lib/buttongroup/ButtonGroup.js b/components/lib/buttongroup/ButtonGroup.js
index 108ea31a6b..a60de29717 100644
--- a/components/lib/buttongroup/ButtonGroup.js
+++ b/components/lib/buttongroup/ButtonGroup.js
@@ -2,22 +2,28 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { classNames } from '../utils/Utils';
+import { ObjectUtils, classNames } from '../utils/Utils';
 import { ButtonGroupBase } from './ButtonGroupBase';
 
 export const ButtonGroup = React.memo(
-    React.forwardRef((inProps) => {
+    React.forwardRef((inProps, ref) => {
         const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = ButtonGroupBase.getProps(inProps, context);
+        const elementRef = React.useRef(ref);
         const { ptm, cx, isUnstyled } = ButtonGroupBase.setMetaData({
             props
         });
 
         useHandleStyle(ButtonGroupBase.css.styles, isUnstyled, { name: 'buttongroup' });
 
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
         const rootProps = mergeProps(
             {
+                ref: elementRef,
                 className: classNames(cx('root')),
                 role: 'group'
             },

From 21f4ea38689a1d4735652cbb2ae38d9922bcfa7b Mon Sep 17 00:00:00 2001
From: Akshay Antony <akshayantony55@gmail.com>
Date: Sun, 31 Mar 2024 18:56:55 +0530
Subject: [PATCH 071/194] fix: primefaces #6269, Dropdown: (accessiblility)
 cannot access and clear the selected input using using keyboard

---
 components/lib/dropdown/Dropdown.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index fa63f9a3e7..93114d68ec 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
@@ -1099,12 +1099,22 @@ export const Dropdown = React.memo(
             return <span {...inputProps}>{content}</span>;
         };
 
+        const onClearIconKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                clear(event);
+                event.preventDefault();
+            }
+        };
+
         const createClearIcon = () => {
             if (props.value != null && props.showClear && !props.disabled) {
                 const clearIconProps = mergeProps(
                     {
                         className: cx('clearIcon'),
-                        onPointerUp: clear
+                        onPointerUp: clear,
+                        tabIndex: props.tabIndex || '0',
+                        onKeyDown: onClearIconKeyDown,
+                        'aria-label': localeOption('clear')
                     },
                     ptm('clearIcon')
                 );

From 16eb1eee2e7da479c2edd67b44344bdbf108865f Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 1 Apr 2024 09:30:32 +0300
Subject: [PATCH 072/194] Fix #6268 - MeterGroup - InputIcon - IconField:
 Component is not exported from the library

---
 components/lib/iconfield/package.json  | 7 +++++++
 components/lib/inputicon/package.json  | 7 +++++++
 components/lib/metergroup/package.json | 7 +++++++
 3 files changed, 21 insertions(+)
 create mode 100644 components/lib/iconfield/package.json
 create mode 100644 components/lib/inputicon/package.json
 create mode 100644 components/lib/metergroup/package.json

diff --git a/components/lib/iconfield/package.json b/components/lib/iconfield/package.json
new file mode 100644
index 0000000000..e81dc1feeb
--- /dev/null
+++ b/components/lib/iconfield/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./iconfield.cjs.js",
+    "module": "./iconfield.esm.js",
+    "unpkg": "./iconfield.min.js",
+    "types": "./iconfield.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputicon/package.json b/components/lib/inputicon/package.json
new file mode 100644
index 0000000000..58d5a2fc3b
--- /dev/null
+++ b/components/lib/inputicon/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputicon.cjs.js",
+    "module": "./inputicon.esm.js",
+    "unpkg": "./inputicon.min.js",
+    "types": "./inputicon.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/metergroup/package.json b/components/lib/metergroup/package.json
new file mode 100644
index 0000000000..026bfe62cf
--- /dev/null
+++ b/components/lib/metergroup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./metergroup.cjs.js",
+    "module": "./metergroup.esm.js",
+    "unpkg": "./metergroup.min.js",
+    "types": "./metergroup.d.ts",
+    "sideEffects": false
+}

From 7f7f60a3c0fbcde4cc4ac5918b9e8c986d547a36 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 1 Apr 2024 16:07:59 +0300
Subject: [PATCH 073/194] Add filled prop autocomplete

---
 components/lib/autocomplete/AutoComplete.js   |   4 +-
 .../lib/autocomplete/AutoCompleteBase.js      |  12 +-
 components/lib/autocomplete/autocomplete.d.ts |   5 +
 public/themes/arya-blue/theme.css             |  33 +-
 public/themes/arya-green/theme.css            |  33 +-
 public/themes/arya-orange/theme.css           |  33 +-
 public/themes/bootstrap4-dark-blue/theme.css  |  33 +-
 public/themes/bootstrap4-light-blue/theme.css |  33 +-
 public/themes/fluent-light/theme.css          |  33 +-
 public/themes/lara-dark-amber/theme.css       |  33 +-
 public/themes/lara-dark-blue/theme.css        |  33 +-
 public/themes/lara-dark-cyan/theme.css        |  33 +-
 public/themes/lara-dark-green/theme.css       |  33 +-
 public/themes/lara-dark-indigo/theme.css      |  33 +-
 public/themes/lara-dark-pink/theme.css        |  33 +-
 public/themes/lara-dark-teal/theme.css        |  33 +-
 public/themes/lara-light-amber/theme.css      |  33 +-
 public/themes/lara-light-blue/theme.css       |  33 +-
 public/themes/lara-light-cyan/theme.css       |  33 +-
 public/themes/lara-light-green/theme.css      |  33 +-
 public/themes/lara-light-indigo/theme.css     |  33 +-
 public/themes/lara-light-pink/theme.css       |  33 +-
 public/themes/lara-light-teal/theme.css       |  33 +-
 public/themes/luna-amber/theme.css            |  33 +-
 public/themes/luna-blue/theme.css             |  33 +-
 public/themes/luna-green/theme.css            |  33 +-
 public/themes/luna-pink/theme.css             |  33 +-
 public/themes/md-dark-indigo/theme.css        | 323 +++++++++---------
 public/themes/md-light-indigo/theme.css       |  33 +-
 public/themes/mdc-dark-indigo/theme.css       | 323 +++++++++---------
 public/themes/mdc-light-indigo/theme.css      |  33 +-
 public/themes/mira/theme.css                  |  33 +-
 public/themes/nano/theme.css                  |  33 +-
 public/themes/nova-accent/theme.css           |  33 +-
 public/themes/nova-alt/theme.css              |  33 +-
 public/themes/nova/theme.css                  |  33 +-
 public/themes/rhea/theme.css                  |  33 +-
 public/themes/saga-blue/theme.css             |  33 +-
 public/themes/saga-green/theme.css            |  33 +-
 public/themes/saga-orange/theme.css           |  33 +-
 public/themes/soho-dark/theme.css             |  83 ++---
 public/themes/soho-light/theme.css            |  33 +-
 public/themes/tailwind-light/theme.css        |  35 +-
 public/themes/vela-blue/theme.css             |  33 +-
 public/themes/vela-green/theme.css            |  33 +-
 public/themes/vela-orange/theme.css           |  33 +-
 public/themes/viva-dark/theme.css             |  33 +-
 public/themes/viva-light/theme.css            |  33 +-
 48 files changed, 825 insertions(+), 1313 deletions(-)

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/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d27b1e785c..ef610b1515 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 53038d0c89..c4ddf835e6 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index a2d4387a6a..62c4c7afe7 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index eacbd16cfe..09fc9488fe 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 5a0604409c..46ff654306 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 183eb1491d..7ac6f51783 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 3a96c27dad..2fecc48da1 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 9fc3607064..2378e2942d 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index a57900349b..45bcb4cc37 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 882d6424b2..9a5368c5dd 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 13cc223f94..8a2bc35e0a 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 42f435e013..5a38f17821 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index c7d71ddfee..90a7e2126b 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 44d8bebbc3..77e0a944ad 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 71ab9ef24e..aeccacbaf2 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 552e27017b..b7bb2efa49 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index e929fbb116..4f34d65394 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index be84648378..c3a5e2920b 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index ceec59fa62..01b86c9904 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 93f92db6c4..6d79a7222c 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1331,6 +1331,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 +1345,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 +1367,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;
   }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 50de091e7c..ca624727a5 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 8640928be4..8195bd5de9 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 80509a8d03..84eee414d6 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 119822249c..f162878a2a 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 5aa09c8992..e8c0a4735d 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,7 +656,7 @@
   }
   .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;
   }
@@ -723,7 +723,7 @@
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-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-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
@@ -733,13 +733,13 @@
     height: 0.875rem;
   }
   .p-input-filled .p-cascadeselect {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .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);
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-checkbox {
     position: relative;
@@ -771,11 +771,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 +794,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 +834,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 +872,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 +938,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 +1058,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 +1073,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 +1121,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 +1163,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 +1185,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 +1288,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 +1310,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 +1330,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 +1348,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 +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: #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 +1395,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 +1461,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 +1521,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 +1561,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 +1657,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 +1672,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 +1690,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 +1719,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 +1783,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 +1865,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 +1908,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 +2018,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 +2058,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;
   }
@@ -2095,7 +2084,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 +2114,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 +2165,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 +3564,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 +3572,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 +3586,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 +3650,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 +3668,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 +3835,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 +3969,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 +4512,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 +4522,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 +4584,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 +4595,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 +5113,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 +5134,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 +5276,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 +5316,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 +5377,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 +5427,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 +5514,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 +5549,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 +5629,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 +5657,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 +5686,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 +5752,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 +5802,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 +5963,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 +5987,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 +6064,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 +6105,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 +6155,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 +6261,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 +6282,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 +6673,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 +6699,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 +7001,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 +7012,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 +7247,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 +7297,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 +7324,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 +7335,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 +7402,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 +7413,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 +7461,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 +7480,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 +7489,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 +7535,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 +7546,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 +7622,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 +7633,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 +7685,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 +7718,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 +7864,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 +7875,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 +8032,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 +8041,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 +8298,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 +8309,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..52a4648d6d 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1334,6 +1334,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 +1348,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 +1370,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;
   }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 1151d57f1d..23bbff37c9 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,7 +656,7 @@
   }
   .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;
   }
@@ -723,7 +723,7 @@
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-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-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
@@ -733,13 +733,13 @@
     height: 0.875rem;
   }
   .p-input-filled .p-cascadeselect {
-    background: hsla(0, 0%, 100%, 0.06);
+    background: hsla(0deg, 0%, 100%, 0.06);
   }
   .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);
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
+    background-color: hsla(0deg, 0%, 100%, 0.1);
   }
   .p-checkbox {
     position: relative;
@@ -771,11 +771,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 +794,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 +834,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 +872,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 +938,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 +1058,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 +1073,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 +1121,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 +1163,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 +1185,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 +1288,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 +1310,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 +1330,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 +1348,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 +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: #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 +1395,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 +1461,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 +1521,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 +1561,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 +1657,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 +1672,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 +1690,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 +1719,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 +1783,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 +1865,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 +1908,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 +2018,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 +2058,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;
   }
@@ -2095,7 +2084,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 +2114,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 +2165,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 +3564,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 +3572,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 +3586,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 +3650,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 +3668,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 +3835,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 +3969,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 +4512,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 +4522,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 +4584,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 +4595,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 +5113,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 +5134,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 +5276,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 +5316,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 +5377,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 +5427,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 +5514,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 +5549,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 +5629,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 +5657,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 +5686,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 +5752,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 +5802,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 +5963,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 +5987,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 +6064,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 +6105,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 +6155,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 +6261,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 +6282,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 +6673,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 +6699,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 +7001,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 +7012,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 +7247,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 +7297,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 +7324,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 +7335,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 +7402,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 +7413,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 +7461,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 +7480,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 +7489,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 +7535,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 +7546,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 +7622,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 +7633,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 +7685,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 +7718,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 +7864,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 +7875,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 +8032,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 +8041,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 +8298,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 +8309,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..6b7b81957d 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1334,6 +1334,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 +1348,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 +1370,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;
   }
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index fccf607f80..2bbfbe65e2 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1336,6 +1336,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 +1350,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 +1372,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;
   }
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 382547b844..4502cf9e9c 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 5a1369b399..f6c6e52d95 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 30b6a74e7b..c151d91cf5 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f9f75834c2..80e91fe404 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1317,6 +1317,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 +1331,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 +1353,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;
   }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 5bbbc9303e..93d9cf71ba 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 92ed8e13b9..33f1c4091d 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 942ae9fb7a..b75c571a2c 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 6aa2c42475..713a6a36c7 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index b9742543d6..b2410ba81e 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;
@@ -785,7 +785,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 +804,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 +821,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 +1333,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 +1347,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 +1369,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 +1881,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 +1895,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 +1998,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;
@@ -2224,11 +2213,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 +2231,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 +2247,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 +2257,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 +2344,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 +4346,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 +4886,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 +4897,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 +6711,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 +6825,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 +6841,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 +6882,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..b3d7c3cd6c 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1333,6 +1333,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 +1347,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 +1369,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;
   }
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index f5859be644..08ab564816 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1342,6 +1342,7 @@
     transition: none;
     appearance: none;
     border-radius: 0.375rem;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #d4d4d8;
@@ -1355,6 +1356,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 +1378,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;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b4102aafee..7afd32d95c 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 703e012ca8..6fbf50ada4 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 0c801a0ab0..d362309a85 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1314,6 +1314,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 +1328,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 +1350,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;
   }
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 860f9bdf42..aadbe4ea9f 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1340,6 +1340,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 +1354,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 +1376,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;
   }
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 4931c66a7d..a9b9f46eb7 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1340,6 +1340,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 +1354,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 +1376,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;
   }

From b46b55ffaec6767a196ee54fc0496c8eb8d66dbb Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 1 Apr 2024 16:12:31 +0300
Subject: [PATCH 074/194] Add filled doc

---
 components/doc/autocomplete/filleddoc.js | 71 ++++++++++++++++++++++++
 pages/autocomplete/index.js              |  6 ++
 2 files changed, 77 insertions(+)
 create mode 100644 components/doc/autocomplete/filleddoc.js

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/pages/autocomplete/index.js b/pages/autocomplete/index.js
index 008bdb6404..570aae98f8 100644
--- a/pages/autocomplete/index.js
+++ b/pages/autocomplete/index.js
@@ -2,6 +2,7 @@ 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';
@@ -72,6 +73,11 @@ const AutoCompleteDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'invalid',
             label: 'Invalid',

From d70a74a0056827569de1cff52364d45a93daf869 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 1 Apr 2024 16:13:32 +0300
Subject: [PATCH 075/194] Remove Form doc

---
 components/doc/autocomplete/form/formikdoc.js | 234 ------------------
 .../doc/autocomplete/form/hookformdoc.js      | 197 ---------------
 pages/autocomplete/index.js                   |  19 --
 3 files changed, 450 deletions(-)
 delete mode 100644 components/doc/autocomplete/form/formikdoc.js
 delete mode 100644 components/doc/autocomplete/form/hookformdoc.js

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/pages/autocomplete/index.js b/pages/autocomplete/index.js
index 570aae98f8..6643beef47 100644
--- a/pages/autocomplete/index.js
+++ b/pages/autocomplete/index.js
@@ -5,8 +5,6 @@ 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';
@@ -88,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',

From 39f84ff9b652f6b0efd40aea6e5bf39ae20cabae Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 1 Apr 2024 16:17:16 +0300
Subject: [PATCH 076/194] Update invalid doc

---
 components/doc/autocomplete/invaliddoc.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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} />
         </>

From 950f0c17ec470e1042fe8d45257f503415d0cefd Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 1 Apr 2024 23:36:34 +0000
Subject: [PATCH 077/194] Bump typedoc from 0.24.8 to 0.25.12

Bumps [typedoc](https://github.com/TypeStrong/TypeDoc) from 0.24.8 to 0.25.12.
- [Release notes](https://github.com/TypeStrong/TypeDoc/releases)
- [Changelog](https://github.com/TypeStrong/typedoc/blob/master/CHANGELOG.md)
- [Commits](https://github.com/TypeStrong/TypeDoc/compare/v0.24.8...v0.25.12)

---
updated-dependencies:
- dependency-name: typedoc
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dcfa5a5867..f20e8b2c68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -65,7 +65,7 @@
                 "rollup-plugin-postcss": "^4.0.2",
                 "rollup-plugin-terser": "^7.0.2",
                 "sass": "^1.69.5",
-                "typedoc": "0.24.8",
+                "typedoc": "0.25.12",
                 "typescript": "5.1.6"
             },
             "engines": {
@@ -13062,9 +13062,9 @@
             }
         },
         "node_modules/jsonc-parser": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-            "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+            "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
             "dev": true
         },
         "node_modules/jsonfile": {
@@ -17162,9 +17162,9 @@
             }
         },
         "node_modules/shiki": {
-            "version": "0.14.5",
-            "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.5.tgz",
-            "integrity": "sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==",
+            "version": "0.14.7",
+            "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.7.tgz",
+            "integrity": "sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==",
             "dev": true,
             "dependencies": {
                 "ansi-sequence-parser": "^1.1.0",
@@ -18380,24 +18380,24 @@
             "dev": true
         },
         "node_modules/typedoc": {
-            "version": "0.24.8",
-            "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.8.tgz",
-            "integrity": "sha512-ahJ6Cpcvxwaxfu4KtjA8qZNqS43wYt6JL27wYiIgl1vd38WW/KWX11YuAeZhuz9v+ttrutSsgK+XO1CjL1kA3w==",
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.12.tgz",
+            "integrity": "sha512-F+qhkK2VoTweDXd1c42GS/By2DvI2uDF4/EpG424dTexSHdtCH52C6IcAvMA6jR3DzAWZjHpUOW+E02kyPNUNw==",
             "dev": true,
             "dependencies": {
                 "lunr": "^2.3.9",
                 "marked": "^4.3.0",
-                "minimatch": "^9.0.0",
-                "shiki": "^0.14.1"
+                "minimatch": "^9.0.3",
+                "shiki": "^0.14.7"
             },
             "bin": {
                 "typedoc": "bin/typedoc"
             },
             "engines": {
-                "node": ">= 14.14"
+                "node": ">= 16"
             },
             "peerDependencies": {
-                "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x"
+                "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x"
             }
         },
         "node_modules/typedoc/node_modules/brace-expansion": {
diff --git a/package.json b/package.json
index a1bc3c145c..9cab08446c 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-terser": "^7.0.2",
         "sass": "^1.69.5",
-        "typedoc": "0.24.8",
+        "typedoc": "0.25.12",
         "typescript": "5.1.6"
     },
     "engines": {

From fbb173527bc541ae21ec3bd6db2f432a0925f03c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Tue, 2 Apr 2024 16:11:01 +0300
Subject: [PATCH 078/194] Unstyled prop inherited to child components

---
 components/lib/fileupload/FileUpload.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index e06bd9ea17..9dfdb9be7f 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -466,6 +466,7 @@ export const FileUpload = React.memo(
                         disabled={disabled}
                         pt={ptm('removeButton')}
                         __parentMetadata={{ parent: metaData }}
+                        unstyled={isUnstyled()}
                     />
                 </div>
             );
@@ -584,6 +585,7 @@ export const FileUpload = React.memo(
                         className={uploadOptions.className}
                         pt={ptm('uploadButton')}
                         __parentMetadata={{ parent: metaData }}
+                        unstyled={isUnstyled()}
                     />
                 );
                 cancelButton = (
@@ -598,6 +600,7 @@ export const FileUpload = React.memo(
                         className={cancelOptions.className}
                         pt={ptm('cancelButton')}
                         __parentMetadata={{ parent: metaData }}
+                        unstyled={isUnstyled()}
                     />
                 );
             }

From 6153ef62a3cec763a1ee4d301082751b7e73956e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 2 Apr 2024 17:02:24 +0300
Subject: [PATCH 079/194] Update calendar props and demos

---
 components/doc/calendar/filleddoc.js        |  57 +++++
 components/doc/calendar/form/formikdoc.js   | 217 --------------------
 components/doc/calendar/form/hookfromdoc.js | 179 ----------------
 components/doc/calendar/invaliddoc.js       |  10 +-
 components/lib/calendar/Calendar.js         |   2 +-
 components/lib/calendar/CalendarBase.js     |   5 +
 components/lib/calendar/calendar.d.ts       |   5 +
 pages/calendar/index.js                     |  26 +--
 8 files changed, 79 insertions(+), 422 deletions(-)
 create mode 100644 components/doc/calendar/filleddoc.js
 delete mode 100644 components/doc/calendar/form/formikdoc.js
 delete mode 100644 components/doc/calendar/form/hookfromdoc.js

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/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/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/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',

From 0e1bd9d88866f3381855110c6903467f17aec704 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 2 Apr 2024 17:05:07 +0300
Subject: [PATCH 080/194] Update floatlabel doc

---
 components/doc/calendar/floatlabeldoc.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/doc/calendar/floatlabeldoc.js b/components/doc/calendar/floatlabeldoc.js
index 6c19eea8ba..866e4be98f 100644
--- a/components/doc/calendar/floatlabeldoc.js
+++ b/components/doc/calendar/floatlabeldoc.js
@@ -1,6 +1,7 @@
 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 { useState } from 'react';
 
 export function FloatLabelDoc(props) {
@@ -8,24 +9,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 +35,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 +43,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>
     )
 }
@@ -56,10 +59,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">
+                <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} />
         </>

From ed5978f59c15e52214d33675e81e869f95c514be Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 2 Apr 2024 17:14:51 +0300
Subject: [PATCH 081/194] Cascade select update theme and prop

---
 components/lib/cascadeselect/CascadeSelect.js |  2 +-
 .../lib/cascadeselect/CascadeSelectBase.js    | 11 ++---
 public/themes/arya-blue/theme.css             | 41 ++++++++++---------
 public/themes/arya-green/theme.css            | 41 ++++++++++---------
 public/themes/arya-orange/theme.css           | 41 ++++++++++---------
 public/themes/bootstrap4-dark-blue/theme.css  | 41 ++++++++++---------
 public/themes/bootstrap4-light-blue/theme.css | 41 ++++++++++---------
 public/themes/fluent-light/theme.css          | 41 ++++++++++---------
 public/themes/lara-dark-amber/theme.css       | 41 ++++++++++---------
 public/themes/lara-dark-blue/theme.css        | 41 ++++++++++---------
 public/themes/lara-dark-cyan/theme.css        | 41 ++++++++++---------
 public/themes/lara-dark-green/theme.css       | 41 ++++++++++---------
 public/themes/lara-dark-indigo/theme.css      | 41 ++++++++++---------
 public/themes/lara-dark-pink/theme.css        | 41 ++++++++++---------
 public/themes/lara-dark-teal/theme.css        | 41 ++++++++++---------
 public/themes/lara-light-amber/theme.css      | 41 ++++++++++---------
 public/themes/lara-light-blue/theme.css       | 41 ++++++++++---------
 public/themes/lara-light-cyan/theme.css       | 41 ++++++++++---------
 public/themes/lara-light-green/theme.css      | 41 ++++++++++---------
 public/themes/lara-light-indigo/theme.css     | 41 ++++++++++---------
 public/themes/lara-light-pink/theme.css       | 41 ++++++++++---------
 public/themes/lara-light-teal/theme.css       | 41 ++++++++++---------
 public/themes/luna-amber/theme.css            | 41 ++++++++++---------
 public/themes/luna-blue/theme.css             | 41 ++++++++++---------
 public/themes/luna-green/theme.css            | 41 ++++++++++---------
 public/themes/luna-pink/theme.css             | 41 ++++++++++---------
 public/themes/md-dark-indigo/theme.css        | 41 ++++++++++---------
 public/themes/md-light-indigo/theme.css       | 41 ++++++++++---------
 public/themes/mdc-dark-indigo/theme.css       | 41 ++++++++++---------
 public/themes/mdc-light-indigo/theme.css      | 41 ++++++++++---------
 public/themes/mira/theme.css                  | 41 ++++++++++---------
 public/themes/nano/theme.css                  | 41 ++++++++++---------
 public/themes/nova-accent/theme.css           | 41 ++++++++++---------
 public/themes/nova-alt/theme.css              | 41 ++++++++++---------
 public/themes/nova/theme.css                  | 41 ++++++++++---------
 public/themes/rhea/theme.css                  | 41 ++++++++++---------
 public/themes/saga-blue/theme.css             | 41 ++++++++++---------
 public/themes/saga-green/theme.css            | 41 ++++++++++---------
 public/themes/saga-orange/theme.css           | 41 ++++++++++---------
 public/themes/soho-dark/theme.css             | 41 ++++++++++---------
 public/themes/soho-light/theme.css            | 41 ++++++++++---------
 public/themes/tailwind-light/theme.css        | 41 ++++++++++---------
 public/themes/vela-blue/theme.css             | 41 ++++++++++---------
 public/themes/vela-green/theme.css            | 41 ++++++++++---------
 public/themes/vela-orange/theme.css           | 41 ++++++++++---------
 public/themes/viva-dark/theme.css             | 41 ++++++++++---------
 public/themes/viva-light/theme.css            | 41 ++++++++++---------
 47 files changed, 950 insertions(+), 908 deletions(-)

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/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index ef610b1515..d5ea6433f3 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;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index c4ddf835e6..321223b344 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;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 62c4c7afe7..6480e9a829 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;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 09fc9488fe..bf3fb65b69 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;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 46ff654306..67b8c8f606 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;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 7ac6f51783..a6654e1e5d 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;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 2fecc48da1..5c81ed2d74 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;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 2378e2942d..ceafdc54ae 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;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 45bcb4cc37..f422217937 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;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 9a5368c5dd..e13639fc46 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;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 8a2bc35e0a..aa122d587a 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;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 5a38f17821..63be0e5a60 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;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 90a7e2126b..f3d3f8c1f3 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;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 77e0a944ad..443fbf10d2 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;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index aeccacbaf2..78a9b7d04a 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;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index b7bb2efa49..20edb34570 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;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 4f34d65394..216d20bb03 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;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index c3a5e2920b..9c76e5d117 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;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 01b86c9904..64097523a2 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;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 6d79a7222c..303ef9a8ce 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;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index ca624727a5..aaf8c4a085 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;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 8195bd5de9..adae180127 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;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 84eee414d6..b12ba96717 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;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index f162878a2a..15adb5a76b 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;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index e8c0a4735d..a0ee48899b 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -659,6 +659,7 @@
     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(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(0deg, 0%, 100%, 0.06);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 52a4648d6d..1d777e82cc 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;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 23bbff37c9..0cf379ccbc 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -659,6 +659,7 @@
     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(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(0deg, 0%, 100%, 0.06);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 6b7b81957d..fc5fe6f90a 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;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 2bbfbe65e2..e7103cbd8d 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;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 4502cf9e9c..12d87cef7e 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;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index f6c6e52d95..9caa4b9bfc 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;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index c151d91cf5..66e7117b63 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;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 80e91fe404..489633e91a 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;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 93d9cf71ba..6a1faac018 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;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 33f1c4091d..b87eb5b9d3 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;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index b75c571a2c..fa700a4b2b 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;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 713a6a36c7..73db7734b9 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;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index b2410ba81e..3ae78cc28c 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -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;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index b3d7c3cd6c..715f04ee53 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;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 08ab564816..54b34b3c74 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;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 7afd32d95c..33d8b7dc8f 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;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 6fbf50ada4..39eb87ec4b 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;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index d362309a85..1d961c4066 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;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index aadbe4ea9f..4c6ed17f64 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;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index a9b9f46eb7..4c35bbcd1c 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;

From d4377e7e3a3413b266ef46a1b98b152864435406 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 2 Apr 2024 17:17:08 +0300
Subject: [PATCH 082/194] Update d.ts

---
 components/lib/cascadeselect/cascadeselect.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

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.
      */

From 5ff2a399cec2f3235e8661d5e1a7e364b273c702 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 2 Apr 2024 17:18:09 +0300
Subject: [PATCH 083/194] Update filled doc

---
 components/doc/cascadeselect/filleddoc.js     | 316 ++++++++++++
 .../doc/cascadeselect/form/formikdoc.js       | 470 -----------------
 .../doc/cascadeselect/form/hookformdoc.js     | 478 ------------------
 pages/cascadeselect/index.js                  |  26 +-
 4 files changed, 322 insertions(+), 968 deletions(-)
 create mode 100644 components/doc/cascadeselect/filleddoc.js
 delete mode 100644 components/doc/cascadeselect/form/formikdoc.js
 delete mode 100644 components/doc/cascadeselect/form/hookformdoc.js

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/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/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',

From 4dc28910aa33ee5155e535664e31ba4cb1b56c3f Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 2 Apr 2024 17:23:54 +0300
Subject: [PATCH 084/194] Update floatlabel and invalid doc

---
 components/doc/cascadeselect/floatlabeldoc.js | 24 ++++++++++++-------
 components/doc/cascadeselect/invaliddoc.js    | 17 ++++++-------
 2 files changed, 24 insertions(+), 17 deletions(-)

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/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' }}

From 5704c931974a414e96c62745a89d81563de417a6 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:27:55 +0300
Subject: [PATCH 085/194] Update checkbox

---
 components/lib/checkbox/Checkbox.js     | 2 +-
 components/lib/checkbox/CheckboxBase.js | 5 +++--
 components/lib/checkbox/checkbox.d.ts   | 5 +++++
 3 files changed, 9 insertions(+), 3 deletions(-)

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

From 16944710276ca845cee0e54371a86dd744d7b8dc Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:27:59 +0300
Subject: [PATCH 086/194] update checkbox docs

---
 components/doc/checkbox/filleddoc.js        |  56 ++++++
 components/doc/checkbox/form/formikdoc.js   | 208 --------------------
 components/doc/checkbox/form/hookformdoc.js | 205 -------------------
 components/doc/checkbox/invaliddoc.js       |  17 +-
 pages/checkbox/index.js                     |  26 +--
 5 files changed, 74 insertions(+), 438 deletions(-)
 create mode 100644 components/doc/checkbox/filleddoc.js
 delete mode 100644 components/doc/checkbox/form/formikdoc.js
 delete mode 100644 components/doc/checkbox/form/hookformdoc.js

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..4d296682c9 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>
     )
 }
@@ -41,7 +48,7 @@ export default function InvalidDemo() {
                 </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/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',

From 916209c0de4a66fb0fdf4c2308e88dc3902096cb Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:37:34 +0300
Subject: [PATCH 087/194] Update chips

---
 components/lib/chips/Chips.js     | 2 +-
 components/lib/chips/ChipsBase.js | 6 +++++-
 components/lib/chips/chips.d.ts   | 5 +++++
 3 files changed, 11 insertions(+), 2 deletions(-)

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

From 234b7664873c69958e20437a924c17e528df0689 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:38:27 +0300
Subject: [PATCH 088/194] Update docs

---
 components/doc/calendar/floatlabeldoc.js |   5 +-
 components/doc/checkbox/invaliddoc.js    |   2 +-
 components/doc/chips/filleddoc.js        |  56 ++++++
 components/doc/chips/floatlabeldoc.js    |  22 ++-
 components/doc/chips/form/formikdoc.js   | 217 -----------------------
 components/doc/chips/form/hookformdoc.js | 181 -------------------
 components/doc/chips/invaliddoc.js       |  10 +-
 pages/chips/index.js                     |  26 +--
 8 files changed, 85 insertions(+), 434 deletions(-)
 create mode 100644 components/doc/chips/filleddoc.js
 delete mode 100644 components/doc/chips/form/formikdoc.js
 delete mode 100644 components/doc/chips/form/hookformdoc.js

diff --git a/components/doc/calendar/floatlabeldoc.js b/components/doc/calendar/floatlabeldoc.js
index 866e4be98f..6645847e7f 100644
--- a/components/doc/calendar/floatlabeldoc.js
+++ b/components/doc/calendar/floatlabeldoc.js
@@ -2,6 +2,7 @@ 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) {
@@ -56,7 +57,9 @@ 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">
                 <FloatLabel>
diff --git a/components/doc/checkbox/invaliddoc.js b/components/doc/checkbox/invaliddoc.js
index 4d296682c9..900cfddcfe 100644
--- a/components/doc/checkbox/invaliddoc.js
+++ b/components/doc/checkbox/invaliddoc.js
@@ -44,7 +44,7 @@ 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">
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..3c1946d977 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,13 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>A floating label appears on top of the input field when focused.</p>
+                A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
             </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/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',

From e5d678ce6bdaf51d2cac7f48384a7590304184e8 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:39:49 +0300
Subject: [PATCH 089/194] Update colorpicker docs

---
 components/doc/colorpicker/form/formikdoc.js  | 208 ------------------
 .../doc/colorpicker/form/hookformdoc.js       | 181 ---------------
 pages/colorpicker/index.js                    |  20 --
 3 files changed, 409 deletions(-)
 delete mode 100644 components/doc/colorpicker/form/formikdoc.js
 delete mode 100644 components/doc/colorpicker/form/hookformdoc.js

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/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',

From 0f5fdd0087c451bedae867ce842ca457c031c96a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:51:05 +0300
Subject: [PATCH 090/194] Update dropdown filled prop

---
 components/lib/dropdown/Dropdown.js      | 2 +-
 components/lib/dropdown/DropdownBase.js  | 8 ++++++--
 components/lib/dropdown/DropdownPanel.js | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

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..5e81e0b5df 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', {
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),

From 8aef23594ceb0bf1e30ef32c1674851306f90561 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:51:35 +0300
Subject: [PATCH 091/194] Update dropdown docs

---
 components/doc/dropdown/filleddoc.js        |  85 +++++++
 components/doc/dropdown/floatlabeldoc.js    |  19 +-
 components/doc/dropdown/form/formikdoc.js   | 242 -------------------
 components/doc/dropdown/form/hookformdoc.js | 251 --------------------
 components/doc/dropdown/invaliddoc.js       |  16 +-
 pages/dropdown/index.js                     |  26 +-
 6 files changed, 110 insertions(+), 529 deletions(-)
 create mode 100644 components/doc/dropdown/filleddoc.js
 delete mode 100644 components/doc/dropdown/form/formikdoc.js
 delete mode 100644 components/doc/dropdown/form/hookformdoc.js

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/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',

From bb6be00fed2cbc330c02986b12c5210f5029f215 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:52:16 +0300
Subject: [PATCH 092/194] Editor - Remove form docs

---
 components/doc/editor/form/formikdoc.js   | 250 ----------------------
 components/doc/editor/form/hookformdoc.js | 220 -------------------
 pages/editor/index.js                     |  20 --
 3 files changed, 490 deletions(-)
 delete mode 100644 components/doc/editor/form/formikdoc.js
 delete mode 100644 components/doc/editor/form/hookformdoc.js

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/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',

From c86dd05d7046370a760f9629f351f5801ae21e49 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 09:53:25 +0300
Subject: [PATCH 093/194] Update dropdown.d.ts

---
 components/lib/dropdown/dropdown.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

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.
      */

From 60773937b3c51350b21601535db72cd207404ba5 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:02:57 +0300
Subject: [PATCH 094/194] Update inputnumber

---
 components/lib/dropdown/DropdownBase.js       | 1 +
 components/lib/inputnumber/InputNumber.js     | 2 +-
 components/lib/inputnumber/InputNumberBase.js | 5 +++++
 components/lib/inputnumber/inputnumber.d.ts   | 5 +++++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 5e81e0b5df..257e1f976a 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -188,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/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

From 9be65460660025ca3f0ec60831301b4291025d18 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:03:19 +0300
Subject: [PATCH 095/194] Update inputnumber docs

---
 components/doc/chips/floatlabeldoc.js         |   4 +-
 components/doc/inputnumber/filleddoc.js       |  56 ++++
 components/doc/inputnumber/floatlabeldoc.js   |  24 +-
 components/doc/inputnumber/form/formikdoc.js  | 256 ------------------
 .../doc/inputnumber/form/hookformdoc.js       | 186 -------------
 components/doc/inputnumber/invaliddoc.js      |  10 +-
 pages/inputnumber/index.js                    |  26 +-
 7 files changed, 85 insertions(+), 477 deletions(-)
 create mode 100644 components/doc/inputnumber/filleddoc.js
 delete mode 100644 components/doc/inputnumber/form/formikdoc.js
 delete mode 100644 components/doc/inputnumber/form/hookformdoc.js

diff --git a/components/doc/chips/floatlabeldoc.js b/components/doc/chips/floatlabeldoc.js
index 3c1946d977..d0e4d09f99 100644
--- a/components/doc/chips/floatlabeldoc.js
+++ b/components/doc/chips/floatlabeldoc.js
@@ -56,7 +56,9 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                A floating label appears on top of the input field when focused. Visit <Link href="/floatlabel">FloatLabel</Link> documentation for more information.
+                <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">
                 <FloatLabel>
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/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',

From 169b1cffb783075f32cb5b9a00e2629a64ee8207 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:08:35 +0300
Subject: [PATCH 096/194] Update inputmask

---
 components/lib/inputmask/InputMask.js     |  4 +++-
 components/lib/inputmask/InputMaskBase.js | 15 +++++++++++++++
 components/lib/inputmask/inputmask.d.ts   | 12 +++++++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)

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

From 44286744b1032ec5342aeb8a2fe9431f0c40073a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:12:42 +0300
Subject: [PATCH 097/194] Update docs - inputmask

---
 components/doc/inputmask/filleddoc.js        |  56 +++++
 components/doc/inputmask/floatlabeldoc.js    |  24 +-
 components/doc/inputmask/form/formikdoc.js   | 212 -----------------
 components/doc/inputmask/form/hookformdoc.js | 226 -------------------
 components/doc/inputmask/invaliddoc.js       |  10 +-
 pages/inputmask/index.js                     |  26 +--
 6 files changed, 82 insertions(+), 472 deletions(-)
 create mode 100644 components/doc/inputmask/filleddoc.js
 delete mode 100644 components/doc/inputmask/form/formikdoc.js
 delete mode 100644 components/doc/inputmask/form/hookformdoc.js

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/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',

From 6ea506750cccdd834bbcad05d68fd3a557462f4b Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:13:32 +0300
Subject: [PATCH 098/194] Update inputswitch

---
 components/doc/inputswitch/form/formikdoc.js  | 208 ------------------
 .../doc/inputswitch/form/hookformdoc.js       | 204 -----------------
 pages/inputswitch/index.js                    |  20 --
 3 files changed, 432 deletions(-)
 delete mode 100644 components/doc/inputswitch/form/formikdoc.js
 delete mode 100644 components/doc/inputswitch/form/hookformdoc.js

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/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',

From f6a5c9bfd4f85f6d0fd92602675b9422f105790e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:16:05 +0300
Subject: [PATCH 099/194] Update inputtext

---
 components/lib/inputtext/InputText.js     | 2 +-
 components/lib/inputtext/InputTextBase.js | 7 +++++--
 components/lib/inputtext/inputtext.d.ts   | 5 +++++
 3 files changed, 11 insertions(+), 3 deletions(-)

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.
      */

From ba73bdf84a8b3ea5585e97a1de962c4dbcd42a6a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:19:11 +0300
Subject: [PATCH 100/194] Update inputtext docs

---
 components/doc/inputtext/filleddoc.js        |  56 +++++
 components/doc/inputtext/floatlabeldoc.js    |  24 ++-
 components/doc/inputtext/form/formikdoc.js   | 212 ------------------
 components/doc/inputtext/form/hookformdoc.js | 216 -------------------
 components/doc/inputtext/invaliddoc.js       |  10 +-
 pages/inputtext/index.js                     |  26 +--
 6 files changed, 82 insertions(+), 462 deletions(-)
 create mode 100644 components/doc/inputtext/filleddoc.js
 delete mode 100644 components/doc/inputtext/form/formikdoc.js
 delete mode 100644 components/doc/inputtext/form/hookformdoc.js

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/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',

From 1d18512bf94930a1966cc612749f63a3dcb55962 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:21:30 +0300
Subject: [PATCH 101/194] Update textarea

---
 components/lib/inputtextarea/InputTextarea.js     | 2 +-
 components/lib/inputtextarea/InputTextareaBase.js | 6 ++++--
 components/lib/inputtextarea/inputtextarea.d.ts   | 5 +++++
 3 files changed, 10 insertions(+), 3 deletions(-)

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.
      */

From 3d96d218e068ce1a1bba19ceae3addc5464f6793 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:26:05 +0300
Subject: [PATCH 102/194] Update textarea docs

---
 components/doc/inputtextarea/filleddoc.js     |  56 +++++
 components/doc/inputtextarea/floatlabeldoc.js |  24 +-
 .../doc/inputtextarea/form/formikdoc.js       | 216 ------------------
 .../doc/inputtextarea/form/hookformdoc.js     | 180 ---------------
 components/doc/inputtextarea/invaliddoc.js    |  10 +-
 pages/inputtextarea/index.js                  |  26 +--
 6 files changed, 82 insertions(+), 430 deletions(-)
 create mode 100644 components/doc/inputtextarea/filleddoc.js
 delete mode 100644 components/doc/inputtextarea/form/formikdoc.js
 delete mode 100644 components/doc/inputtextarea/form/hookformdoc.js

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/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',

From 1727c1ed205df94b48202fe7182e13ec34ab5399 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:27:44 +0300
Subject: [PATCH 103/194] remove form docs

---
 components/doc/knob/form/formikdoc.js   | 197 ------------------------
 components/doc/knob/form/hookformdoc.js | 188 ----------------------
 pages/knob/index.js                     |  20 ---
 3 files changed, 405 deletions(-)
 delete mode 100644 components/doc/knob/form/formikdoc.js
 delete mode 100644 components/doc/knob/form/hookformdoc.js

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/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',

From 85074218cf4500824e3c4bbfdfbea9fe9411bd4e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:29:27 +0300
Subject: [PATCH 104/194] Update listbox docs

---
 components/doc/listbox/form/formikdoc.js   | 238 ---------------------
 components/doc/listbox/form/hookformdoc.js | 204 ------------------
 components/doc/listbox/invaliddoc.js       |  16 +-
 pages/listbox/index.js                     |  20 --
 4 files changed, 8 insertions(+), 470 deletions(-)
 delete mode 100644 components/doc/listbox/form/formikdoc.js
 delete mode 100644 components/doc/listbox/form/hookformdoc.js

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/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',

From 3e361450085a46ecb3e9978f68a7f5b9e1c6f095 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:31:14 +0300
Subject: [PATCH 105/194] remove form docs - mention

---
 components/doc/mention/form/formikdoc.js   | 385 ---------------------
 components/doc/mention/form/hookformdoc.js | 343 ------------------
 pages/mention/index.js                     |  20 --
 3 files changed, 748 deletions(-)
 delete mode 100644 components/doc/mention/form/formikdoc.js
 delete mode 100644 components/doc/mention/form/hookformdoc.js

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/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',

From d3cf48bc61c36a7dc39fd2337d617f478d6ce75c Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:34:28 +0300
Subject: [PATCH 106/194] Update multiselect

---
 components/lib/multiselect/MultiSelect.js     | 2 +-
 components/lib/multiselect/MultiSelectBase.js | 4 +++-
 components/lib/multiselect/multiselect.d.ts   | 5 +++++
 3 files changed, 9 insertions(+), 2 deletions(-)

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}

From 71b30e015900405099e565cb7600881dc870514c Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:39:00 +0300
Subject: [PATCH 107/194] Update docs - multiselect

---
 components/doc/multiselect/filleddoc.js       |  85 +++++++
 components/doc/multiselect/floatlabeldoc.js   |  32 ++-
 components/doc/multiselect/form/formikdoc.js  | 239 ------------------
 .../doc/multiselect/form/hookformdoc.js       | 219 ----------------
 components/doc/multiselect/invaliddoc.js      |  16 +-
 pages/multiselect/index.js                    |  26 +-
 6 files changed, 118 insertions(+), 499 deletions(-)
 create mode 100644 components/doc/multiselect/filleddoc.js
 delete mode 100644 components/doc/multiselect/form/formikdoc.js
 delete mode 100644 components/doc/multiselect/form/hookformdoc.js

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/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',

From fced6b15588ac68dbb278ed4ec4ab518b80f3e14 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:40:52 +0300
Subject: [PATCH 108/194] Update password

---
 components/lib/password/Password.js     | 3 ++-
 components/lib/password/PasswordBase.js | 1 +
 components/lib/password/password.d.ts   | 5 +++++
 3 files changed, 8 insertions(+), 1 deletion(-)

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.
      */

From 02652993fb631de22a576fb98a2ebf77584f7042 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:44:26 +0300
Subject: [PATCH 109/194] Password update docs

---
 components/doc/password/filleddoc.js        |  56 +++++
 components/doc/password/floatlabeldoc.js    |  24 ++-
 components/doc/password/form/formikdoc.js   | 221 --------------------
 components/doc/password/form/hookformdoc.js | 188 -----------------
 components/doc/password/invaliddoc.js       |  10 +-
 pages/password/index.js                     |  26 +--
 6 files changed, 82 insertions(+), 443 deletions(-)
 create mode 100644 components/doc/password/filleddoc.js
 delete mode 100644 components/doc/password/form/formikdoc.js
 delete mode 100644 components/doc/password/form/hookformdoc.js

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/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',

From 8353f5fc25fe15228b0f821c20dfc650fc52dc0e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:45:41 +0300
Subject: [PATCH 110/194] Update radiobutton

---
 components/lib/radiobutton/RadioButton.js     | 2 +-
 components/lib/radiobutton/RadioButtonBase.js | 6 ++++--
 components/lib/radiobutton/radiobutton.d.ts   | 5 +++++
 3 files changed, 10 insertions(+), 3 deletions(-)

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

From ff904f563b85bffc1f8f6fd5a46b05d61c9c574b Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:48:49 +0300
Subject: [PATCH 111/194] Update radiobutton demo

---
 components/doc/radiobutton/filleddoc.js       |  49 +++
 components/doc/radiobutton/form/formikdoc.js  | 321 ------------------
 .../doc/radiobutton/form/hookformdoc.js       | 302 ----------------
 components/doc/radiobutton/invaliddoc.js      |  10 +-
 pages/radiobutton/index.js                    |  26 +-
 5 files changed, 60 insertions(+), 648 deletions(-)
 create mode 100644 components/doc/radiobutton/filleddoc.js
 delete mode 100644 components/doc/radiobutton/form/formikdoc.js
 delete mode 100644 components/doc/radiobutton/form/hookformdoc.js

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/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',

From 710d3287e1a1420b1e86a0a1c11e92fe8dda5904 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 10:52:15 +0300
Subject: [PATCH 112/194] Update selectbutton demo

---
 components/doc/selectbutton/form/formikdoc.js | 223 ------------------
 .../doc/selectbutton/form/hookformdoc.js      | 187 ---------------
 components/doc/selectbutton/invaliddoc.js     |  10 +-
 pages/selectbutton/index.js                   |  19 --
 4 files changed, 5 insertions(+), 434 deletions(-)
 delete mode 100644 components/doc/selectbutton/form/formikdoc.js
 delete mode 100644 components/doc/selectbutton/form/hookformdoc.js

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/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',

From c50da063819e9d98a2a6780a20921d7ad5a6e13f Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 11:09:23 +0300
Subject: [PATCH 113/194] Add filterdoc - slider

---
 components/doc/slider/filterdoc.js | 126 +++++++++++++++++++++++++++++
 pages/slider/index.js              |   7 +-
 2 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 components/doc/slider/filterdoc.js

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/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',

From 02f575b8423a3286da83f20f4a06fac16cd18d67 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 11:18:15 +0300
Subject: [PATCH 114/194] TreeSelect - add variant

---
 components/lib/treeselect/TreeSelect.js       | 2 +-
 components/lib/treeselect/TreeSelectBase.js   | 4 +++-
 components/lib/treeselect/treeselect.d.ts     | 5 +++++
 public/themes/arya-blue/theme.css             | 9 +++++++++
 public/themes/arya-green/theme.css            | 9 +++++++++
 public/themes/arya-orange/theme.css           | 9 +++++++++
 public/themes/bootstrap4-dark-blue/theme.css  | 9 +++++++++
 public/themes/bootstrap4-light-blue/theme.css | 9 +++++++++
 public/themes/fluent-light/theme.css          | 9 +++++++++
 public/themes/lara-dark-amber/theme.css       | 9 +++++++++
 public/themes/lara-dark-blue/theme.css        | 9 +++++++++
 public/themes/lara-dark-cyan/theme.css        | 9 +++++++++
 public/themes/lara-dark-green/theme.css       | 9 +++++++++
 public/themes/lara-dark-indigo/theme.css      | 9 +++++++++
 public/themes/lara-dark-pink/theme.css        | 9 +++++++++
 public/themes/lara-dark-teal/theme.css        | 9 +++++++++
 public/themes/lara-light-amber/theme.css      | 9 +++++++++
 public/themes/lara-light-blue/theme.css       | 9 +++++++++
 public/themes/lara-light-cyan/theme.css       | 9 +++++++++
 public/themes/lara-light-green/theme.css      | 9 +++++++++
 public/themes/lara-light-indigo/theme.css     | 9 +++++++++
 public/themes/lara-light-pink/theme.css       | 9 +++++++++
 public/themes/lara-light-teal/theme.css       | 9 +++++++++
 public/themes/luna-amber/theme.css            | 9 +++++++++
 public/themes/luna-blue/theme.css             | 9 +++++++++
 public/themes/luna-green/theme.css            | 9 +++++++++
 public/themes/luna-pink/theme.css             | 9 +++++++++
 public/themes/md-dark-indigo/theme.css        | 9 +++++++++
 public/themes/md-light-indigo/theme.css       | 9 +++++++++
 public/themes/mdc-dark-indigo/theme.css       | 9 +++++++++
 public/themes/mdc-light-indigo/theme.css      | 9 +++++++++
 public/themes/mira/theme.css                  | 9 +++++++++
 public/themes/nano/theme.css                  | 9 +++++++++
 public/themes/nova-accent/theme.css           | 9 +++++++++
 public/themes/nova-alt/theme.css              | 9 +++++++++
 public/themes/nova/theme.css                  | 9 +++++++++
 public/themes/rhea/theme.css                  | 9 +++++++++
 public/themes/saga-blue/theme.css             | 9 +++++++++
 public/themes/saga-green/theme.css            | 9 +++++++++
 public/themes/saga-orange/theme.css           | 9 +++++++++
 public/themes/soho-dark/theme.css             | 9 +++++++++
 public/themes/soho-light/theme.css            | 9 +++++++++
 public/themes/tailwind-light/theme.css        | 9 +++++++++
 public/themes/vela-blue/theme.css             | 9 +++++++++
 public/themes/vela-green/theme.css            | 9 +++++++++
 public/themes/vela-orange/theme.css           | 9 +++++++++
 public/themes/viva-dark/theme.css             | 9 +++++++++
 public/themes/viva-light/theme.css            | 9 +++++++++
 48 files changed, 414 insertions(+), 2 deletions(-)

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/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d5ea6433f3..b9886cdb22 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2055,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 321223b344..64cff960cd 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2055,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 6480e9a829..6a8e7ce549 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2055,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 bf3fb65b69..a68b8162bf 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2064,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 67b8c8f606..66d1b837d0 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2064,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 a6654e1e5d..a0d4b82923 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -2055,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 5c81ed2d74..5ab3a789a6 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -2072,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 ceafdc54ae..5cf2622cb4 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -2072,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 f422217937..6387296b93 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -2072,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 e13639fc46..7d44112db0 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -2072,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 aa122d587a..d438317655 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -2072,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 63be0e5a60..7438ea5fb1 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -2072,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 f3d3f8c1f3..4271eb4ab4 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -2072,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 443fbf10d2..c1e0ae7f21 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -2072,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 78a9b7d04a..28f61f3a55 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -2072,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 20edb34570..6b27c9bf6b 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -2072,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 216d20bb03..3dba9f535c 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -2072,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 9c76e5d117..e0588d72fc 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -2072,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 64097523a2..8d2c4ddc4d 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -2072,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 303ef9a8ce..54d296f474 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -2072,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 aaf8c4a085..97efc4189f 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2064,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 adae180127..9cfb769aae 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2064,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 b12ba96717..20e8198f9f 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2064,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 15adb5a76b..21e08fbfd9 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2064,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 a0ee48899b..cfb995cf4a 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -2075,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);
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 1d777e82cc..c25c3a1418 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -2075,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 0cf379ccbc..4fcad7abf7 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -2075,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);
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index fc5fe6f90a..8b63f7fd85 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -2075,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 e7103cbd8d..0c18717ea0 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -2077,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 12d87cef7e..ac4f054ba2 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -2055,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 9caa4b9bfc..0c93fc143e 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -2055,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 66e7117b63..e81e8598ce 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -2064,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 489633e91a..1f7f4c1ae6 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -2064,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 6a1faac018..1d54b22050 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2055,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 b87eb5b9d3..b19ac0e203 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2055,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 fa700a4b2b..8f4f936409 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2055,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 73db7734b9..a31fe592f3 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2055,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 3ae78cc28c..8c77f963a3 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -2074,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;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 715f04ee53..9dbdcbb241 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -2074,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 54b34b3c74..143e6c0904 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -2083,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 33d8b7dc8f..2e9108e8f9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2055,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 39eb87ec4b..d3f374ad6c 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2055,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 1d961c4066..5bb41305ba 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2055,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 4c6ed17f64..91674dfed7 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -2081,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 4c35bbcd1c..a10589e8b0 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -2081,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;

From e0b2de453f1748873c2ec6eed5c2e90913e21441 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 11:22:33 +0300
Subject: [PATCH 115/194] Update TreeSelect docs

---
 components/doc/treeselect/filleddoc.js        | 107 ++++++++
 components/doc/treeselect/floatlabeldoc.js    |  24 +-
 components/doc/treeselect/form/formikdoc.js   | 230 ------------------
 components/doc/treeselect/form/hookformdoc.js | 221 -----------------
 components/doc/treeselect/invaliddoc.js       |  16 +-
 pages/treeselect/index.js                     |  26 +-
 6 files changed, 136 insertions(+), 488 deletions(-)
 create mode 100644 components/doc/treeselect/filleddoc.js
 delete mode 100644 components/doc/treeselect/form/formikdoc.js
 delete mode 100644 components/doc/treeselect/form/hookformdoc.js

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/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',

From 49a03a71f37a6fc9dbc1850219c33cb66b3fdec9 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 11:25:27 +0300
Subject: [PATCH 116/194] Update tristatecheckbox

---
 components/lib/tristatecheckbox/TriStateCheckbox.js     | 2 +-
 components/lib/tristatecheckbox/TriStateCheckboxBase.js | 5 +++--
 components/lib/tristatecheckbox/tristatecheckbox.d.ts   | 5 +++++
 3 files changed, 9 insertions(+), 3 deletions(-)

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

From 32feb05bdd7ffcace6fa721d64698175c7d43c0e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 11:29:45 +0300
Subject: [PATCH 117/194] update docs - tristatecheckbox

---
 components/doc/tristatecheckbox/filleddoc.js  |  56 +++++
 .../doc/tristatecheckbox/form/formikdoc.js    | 209 ------------------
 .../doc/tristatecheckbox/form/hookformdoc.js  | 204 -----------------
 components/doc/tristatecheckbox/invaliddoc.js |  10 +-
 pages/tristatecheckbox/index.js               |  26 +--
 5 files changed, 67 insertions(+), 438 deletions(-)
 create mode 100644 components/doc/tristatecheckbox/filleddoc.js
 delete mode 100644 components/doc/tristatecheckbox/form/formikdoc.js
 delete mode 100644 components/doc/tristatecheckbox/form/hookformdoc.js

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/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',

From 95b9329b26514912d901e370235c485b0bd14177 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 11:34:56 +0300
Subject: [PATCH 118/194] update togglebutton docs

---
 components/doc/togglebutton/disableddoc.js    |  56 +++++
 components/doc/togglebutton/form/formikdoc.js | 204 ------------------
 .../doc/togglebutton/form/hookformdoc.js      | 168 ---------------
 components/doc/togglebutton/invaliddoc.js     |  56 +++++
 pages/togglebutton/index.js                   |  28 +--
 5 files changed, 122 insertions(+), 390 deletions(-)
 create mode 100644 components/doc/togglebutton/disableddoc.js
 delete mode 100644 components/doc/togglebutton/form/formikdoc.js
 delete mode 100644 components/doc/togglebutton/form/hookformdoc.js
 create mode 100644 components/doc/togglebutton/invaliddoc.js

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/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',

From 6f4339fd2a5856ab37953cf82d70ce38ba623e4a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 11:56:03 +0300
Subject: [PATCH 119/194] Update splitbutton

---
 components/doc/splitbutton/iconsdoc.js | 172 +++++++++++++++++++++++++
 pages/splitbutton/index.js             |  18 ++-
 2 files changed, 184 insertions(+), 6 deletions(-)
 create mode 100644 components/doc/splitbutton/iconsdoc.js

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/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',

From 39be6eacfc3fc923aebb4f2694765f73ee089731 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 12:09:22 +0300
Subject: [PATCH 120/194] Update steps doc

---
 components/doc/steps/lineardoc.js | 86 +++++++++++++++++++++++++++++++
 pages/steps/index.js              |  6 +++
 2 files changed, 92 insertions(+)
 create mode 100644 components/doc/steps/lineardoc.js

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/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',

From 138b9d53ef276841318335becb530a9b2bb4afc5 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 12:31:08 +0300
Subject: [PATCH 121/194] Remove hook form & formik demos

---
 components/doc/inputmask/validationdoc.js     | 158 -----------
 .../doc/multistatecheckbox/form/formikdoc.js  | 235 ----------------
 .../multistatecheckbox/form/hookformdoc.js    | 198 --------------
 components/doc/radiobutton/validationdoc.js   | 256 ------------------
 pages/multistatecheckbox/index.js             |  20 --
 5 files changed, 867 deletions(-)
 delete mode 100644 components/doc/inputmask/validationdoc.js
 delete mode 100644 components/doc/multistatecheckbox/form/formikdoc.js
 delete mode 100644 components/doc/multistatecheckbox/form/hookformdoc.js
 delete mode 100644 components/doc/radiobutton/validationdoc.js

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/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/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/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',

From 19a150c79b86ca280f2abc84928b7460c39b5020 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 12:32:15 +0300
Subject: [PATCH 122/194] Remove form packages

---
 package.json | 4 ----
 1 file changed, 4 deletions(-)

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"
     },

From c6506bb224b5426f571fc9c1f00307248c8655e8 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 12:32:38 +0300
Subject: [PATCH 123/194] Update APIDoc

---
 components/doc/common/apidoc/index.json | 126 ++++++++++++++++++++++++
 1 file changed, 126 insertions(+)

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."
                         }
                     ]
                 },

From dcf8db1410f1ee4dcef36b13c8ca9e6e4d60103d Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 13:01:59 +0300
Subject: [PATCH 124/194] Remove pt doc

---
 components/doc/accordion/pt/ptdoc.js          | 144 ------
 components/doc/autocomplete/pt/ptdoc.js       | 111 -----
 components/doc/avatar/pt/ptdoc.js             |  49 --
 components/doc/badge/pt/ptdoc.js              |  46 --
 components/doc/blockui/pt/ptdoc.js            |  83 ----
 components/doc/breadcrumb/pt/ptdoc.js         |  91 ----
 components/doc/button/pt/ptdoc.js             |  67 ---
 components/doc/calendar/pt/ptdoc.js           | 100 ----
 components/doc/card/pt/ptdoc.js               |  85 ----
 components/doc/carousel/pt/ptdoc.js           | 294 -----------
 components/doc/cascadeselect/pt/ptdoc.js      | 343 -------------
 components/doc/chart/pt/ptdoc.js              | 161 ------
 components/doc/checkbox/pt/ptdoc.js           |  84 ----
 components/doc/chip/pt/ptdoc.js               |  73 ---
 components/doc/chips/pt/ptdoc.js              |  84 ----
 components/doc/colorpicker/pt/ptdoc.js        |  81 ---
 components/doc/confirmdialog/pt/ptdoc.js      |  91 ----
 components/doc/confirmpopup/pt/ptdoc.js       | 103 ----
 components/doc/contextmenu/pt/ptdoc.js        | 463 ------------------
 components/doc/datascroller/pt/ptdoc.js       | 263 ----------
 components/doc/datatable/pt/ptdoc.js          | 270 ----------
 components/doc/dataview/pt/ptdoc.js           | 419 ----------------
 components/doc/dialog/pt/ptdoc.js             | 109 -----
 components/doc/divider/pt/ptdoc.js            |  83 ----
 components/doc/dock/pt/ptdoc.js               | 182 -------
 components/doc/dropdown/pt/ptdoc.js           | 126 -----
 components/doc/editor/pt/ptdoc.js             |  80 ---
 components/doc/fieldset/pt/ptdoc.js           |  96 ----
 components/doc/fileupload/pt/ptdoc.js         | 108 ----
 components/doc/galleria/pt/ptdoc.js           | 184 -------
 components/doc/iconfield/pt/ptdoc.js          |  26 -
 components/doc/image/pt/ptdoc.js              |  77 ---
 components/doc/inplace/pt/ptdoc.js            |  93 ----
 components/doc/inputmask/pt/ptdoc.js          |  98 ----
 components/doc/inputnumber/pt/ptdoc.js        | 120 -----
 components/doc/inputswitch/pt/ptdoc.js        |  84 ----
 components/doc/inputtext/pt/ptdoc.js          |  80 ---
 components/doc/inputtextarea/pt/ptdoc.js      |  88 ----
 components/doc/knob/pt/ptdoc.js               |  76 ---
 components/doc/listbox/pt/ptdoc.js            | 122 -----
 components/doc/megamenu/pt/ptdoc.js           | 408 ---------------
 components/doc/mention/pt/ptdoc.js            | 263 ----------
 components/doc/menu/pt/ptdoc.js               | 195 --------
 components/doc/menubar/pt/ptdoc.js            | 454 -----------------
 components/doc/message/pt/ptdoc.js            |  69 ---
 components/doc/messages/pt/ptdoc.js           |  91 ----
 components/doc/metergroup/pt/ptdoc.js         | 454 -----------------
 components/doc/multiselect/pt/ptdoc.js        | 171 -------
 components/doc/multistatecheckbox/pt/ptdoc.js | 115 -----
 components/doc/orderlist/pt/ptdoc.js          | 196 --------
 components/doc/organizationchart/pt/ptdoc.js  | 189 -------
 components/doc/overlaypanel/pt/ptdoc.js       |  86 ----
 components/doc/paginator/pt/ptdoc.js          | 114 -----
 components/doc/panel/pt/ptdoc.js              |  94 ----
 components/doc/panelmenu/pt/ptdoc.js          | 423 ----------------
 components/doc/password/pt/ptdoc.js           |  76 ---
 components/doc/picklist/pt/ptdoc.js           | 246 ----------
 components/doc/progressbar/pt/ptdoc.js        |  65 ---
 components/doc/progressspinner/pt/ptdoc.js    |  65 ---
 components/doc/radiobutton/pt/ptdoc.js        | 155 ------
 components/doc/rating/pt/ptdoc.js             |  76 ---
 components/doc/scrollpanel/pt/ptdoc.js        | 118 -----
 components/doc/scrolltop/pt/ptdoc.js          |  98 ----
 components/doc/selectbutton/pt/ptdoc.js       |  83 ----
 components/doc/sidebar/pt/ptdoc.js            | 105 ----
 components/doc/skeleton/pt/ptdoc.js           |  61 ---
 components/doc/slider/pt/ptdoc.js             |  84 ----
 components/doc/speeddial/pt/ptdoc.js          | 148 ------
 components/doc/splitbutton/pt/ptdoc.js        | 139 ------
 components/doc/splitter/pt/ptdoc.js           |  59 ---
 components/doc/steps/pt/ptdoc.js              | 111 -----
 components/doc/tabmenu/pt/ptdoc.js            | 112 -----
 components/doc/tabview/pt/ptdoc.js            | 137 ------
 components/doc/tag/pt/ptdoc.js                |  63 ---
 components/doc/terminal/pt/ptdoc.js           | 216 --------
 components/doc/tieredmenu/pt/ptdoc.js         | 451 -----------------
 components/doc/timeline/pt/ptdoc.js           |  98 ----
 components/doc/toast/pt/ptdoc.js              |  98 ----
 components/doc/togglebutton/pt/ptdoc.js       |  84 ----
 components/doc/toolbar/pt/ptdoc.js            | 112 -----
 components/doc/tooltip/pt/ptdoc.js            |  87 ----
 components/doc/tree/pt/ptdoc.js               | 128 -----
 components/doc/treeselect/pt/ptdoc.js         | 152 ------
 components/doc/treetable/pt/ptdoc.js          | 203 --------
 components/doc/tristatecheckbox/pt/ptdoc.js   |  91 ----
 components/doc/virtualscroller/pt/ptdoc.js    | 131 -----
 pages/accordion/index.js                      |   6 -
 pages/autocomplete/index.js                   |   6 -
 pages/avatar/index.js                         |   6 -
 pages/badge/index.js                          |   6 -
 pages/blockui/index.js                        |   6 -
 pages/breadcrumb/index.js                     |   8 +-
 pages/button/index.js                         |   6 -
 pages/calendar/index.js                       |   6 -
 pages/card/index.js                           |   6 -
 pages/carousel/index.js                       |   6 -
 pages/cascadeselect/index.js                  |   6 -
 pages/chart/index.js                          |   6 -
 pages/checkbox/index.js                       |   6 -
 pages/chip/index.js                           |   6 -
 pages/chips/index.js                          |   6 -
 pages/colorpicker/index.js                    |   6 -
 pages/confirmdialog/index.js                  |   6 -
 pages/confirmpopup/index.js                   |  10 +-
 pages/contextmenu/index.js                    |  14 +-
 pages/datascroller/index.js                   |   6 -
 pages/datatable/index.js                      |   6 -
 pages/dataview/index.js                       |   6 -
 pages/dialog/index.js                         |  10 +-
 pages/divider/index.js                        |   6 -
 pages/dock/index.js                           |   6 -
 pages/dropdown/index.js                       |   6 -
 pages/editor/index.js                         |   6 -
 pages/fieldset/index.js                       |   6 -
 pages/fileupload/index.js                     |   6 -
 pages/galleria/index.js                       |   6 -
 pages/image/index.js                          |   6 -
 pages/inplace/index.js                        |   6 -
 pages/inputmask/index.js                      |   6 -
 pages/inputnumber/index.js                    |   6 -
 pages/inputswitch/index.js                    |   6 -
 pages/inputtext/index.js                      |   6 -
 pages/inputtextarea/index.js                  |   6 -
 pages/knob/index.js                           |   6 -
 pages/listbox/index.js                        |   6 -
 pages/megamenu/index.js                       |   6 -
 pages/mention/index.js                        |   6 -
 pages/menu/index.js                           |   6 -
 pages/menubar/index.js                        |   6 -
 pages/message/index.js                        |   6 -
 pages/messages/index.js                       |   8 +-
 pages/multiselect/index.js                    |   6 -
 pages/multistatecheckbox/index.js             |   6 -
 pages/orderlist/index.js                      |   6 -
 pages/organizationchart/index.js              |   6 -
 pages/overlaypanel/index.js                   |   6 -
 pages/paginator/index.js                      |   6 -
 pages/panel/index.js                          |   6 -
 pages/panelmenu/index.js                      |   6 -
 pages/password/index.js                       |   6 -
 pages/picklist/index.js                       |   6 -
 pages/progressbar/index.js                    |   6 -
 pages/progressspinner/index.js                |   6 -
 pages/radiobutton/index.js                    |   6 -
 pages/rating/index.js                         |   6 -
 pages/scrollpanel/index.js                    |   6 -
 pages/scrolltop/index.js                      |   6 -
 pages/selectbutton/index.js                   |   6 -
 pages/sidebar/index.js                        |   8 +-
 pages/skeleton/index.js                       |   6 -
 pages/slider/index.js                         |   6 -
 pages/speeddial/index.js                      |   6 -
 pages/splitbutton/index.js                    |   6 -
 pages/splitter/index.js                       |   6 -
 pages/steps/index.js                          |   6 -
 pages/tabmenu/index.js                        |   6 -
 pages/tabview/index.js                        |   6 -
 pages/tag/index.js                            |   6 -
 pages/terminal/index.js                       |   6 -
 pages/tieredmenu/index.js                     |   6 -
 pages/timeline/index.js                       |   6 -
 pages/toast/index.js                          |   6 -
 pages/togglebutton/index.js                   |   6 -
 pages/toolbar/index.js                        |   8 +-
 pages/tooltip/index.js                        |   6 -
 pages/tree/index.js                           |   6 -
 pages/treeselect/index.js                     |   6 -
 pages/treetable/index.js                      |   6 -
 pages/tristatecheckbox/index.js               |   6 -
 pages/virtualscroller/index.js                |   6 -
 170 files changed, 12 insertions(+), 13027 deletions(-)
 delete mode 100644 components/doc/accordion/pt/ptdoc.js
 delete mode 100644 components/doc/autocomplete/pt/ptdoc.js
 delete mode 100644 components/doc/avatar/pt/ptdoc.js
 delete mode 100644 components/doc/badge/pt/ptdoc.js
 delete mode 100644 components/doc/blockui/pt/ptdoc.js
 delete mode 100644 components/doc/breadcrumb/pt/ptdoc.js
 delete mode 100644 components/doc/button/pt/ptdoc.js
 delete mode 100644 components/doc/calendar/pt/ptdoc.js
 delete mode 100644 components/doc/card/pt/ptdoc.js
 delete mode 100644 components/doc/carousel/pt/ptdoc.js
 delete mode 100644 components/doc/cascadeselect/pt/ptdoc.js
 delete mode 100644 components/doc/chart/pt/ptdoc.js
 delete mode 100644 components/doc/checkbox/pt/ptdoc.js
 delete mode 100644 components/doc/chip/pt/ptdoc.js
 delete mode 100644 components/doc/chips/pt/ptdoc.js
 delete mode 100644 components/doc/colorpicker/pt/ptdoc.js
 delete mode 100644 components/doc/confirmdialog/pt/ptdoc.js
 delete mode 100644 components/doc/confirmpopup/pt/ptdoc.js
 delete mode 100644 components/doc/contextmenu/pt/ptdoc.js
 delete mode 100644 components/doc/datascroller/pt/ptdoc.js
 delete mode 100644 components/doc/datatable/pt/ptdoc.js
 delete mode 100644 components/doc/dataview/pt/ptdoc.js
 delete mode 100644 components/doc/dialog/pt/ptdoc.js
 delete mode 100644 components/doc/divider/pt/ptdoc.js
 delete mode 100644 components/doc/dock/pt/ptdoc.js
 delete mode 100644 components/doc/dropdown/pt/ptdoc.js
 delete mode 100644 components/doc/editor/pt/ptdoc.js
 delete mode 100644 components/doc/fieldset/pt/ptdoc.js
 delete mode 100644 components/doc/fileupload/pt/ptdoc.js
 delete mode 100644 components/doc/galleria/pt/ptdoc.js
 delete mode 100644 components/doc/iconfield/pt/ptdoc.js
 delete mode 100644 components/doc/image/pt/ptdoc.js
 delete mode 100644 components/doc/inplace/pt/ptdoc.js
 delete mode 100644 components/doc/inputmask/pt/ptdoc.js
 delete mode 100644 components/doc/inputnumber/pt/ptdoc.js
 delete mode 100644 components/doc/inputswitch/pt/ptdoc.js
 delete mode 100644 components/doc/inputtext/pt/ptdoc.js
 delete mode 100644 components/doc/inputtextarea/pt/ptdoc.js
 delete mode 100644 components/doc/knob/pt/ptdoc.js
 delete mode 100644 components/doc/listbox/pt/ptdoc.js
 delete mode 100644 components/doc/megamenu/pt/ptdoc.js
 delete mode 100644 components/doc/mention/pt/ptdoc.js
 delete mode 100644 components/doc/menu/pt/ptdoc.js
 delete mode 100644 components/doc/menubar/pt/ptdoc.js
 delete mode 100644 components/doc/message/pt/ptdoc.js
 delete mode 100644 components/doc/messages/pt/ptdoc.js
 delete mode 100644 components/doc/metergroup/pt/ptdoc.js
 delete mode 100644 components/doc/multiselect/pt/ptdoc.js
 delete mode 100644 components/doc/multistatecheckbox/pt/ptdoc.js
 delete mode 100644 components/doc/orderlist/pt/ptdoc.js
 delete mode 100644 components/doc/organizationchart/pt/ptdoc.js
 delete mode 100644 components/doc/overlaypanel/pt/ptdoc.js
 delete mode 100644 components/doc/paginator/pt/ptdoc.js
 delete mode 100644 components/doc/panel/pt/ptdoc.js
 delete mode 100644 components/doc/panelmenu/pt/ptdoc.js
 delete mode 100644 components/doc/password/pt/ptdoc.js
 delete mode 100644 components/doc/picklist/pt/ptdoc.js
 delete mode 100644 components/doc/progressbar/pt/ptdoc.js
 delete mode 100644 components/doc/progressspinner/pt/ptdoc.js
 delete mode 100644 components/doc/radiobutton/pt/ptdoc.js
 delete mode 100644 components/doc/rating/pt/ptdoc.js
 delete mode 100644 components/doc/scrollpanel/pt/ptdoc.js
 delete mode 100644 components/doc/scrolltop/pt/ptdoc.js
 delete mode 100644 components/doc/selectbutton/pt/ptdoc.js
 delete mode 100644 components/doc/sidebar/pt/ptdoc.js
 delete mode 100644 components/doc/skeleton/pt/ptdoc.js
 delete mode 100644 components/doc/slider/pt/ptdoc.js
 delete mode 100644 components/doc/speeddial/pt/ptdoc.js
 delete mode 100644 components/doc/splitbutton/pt/ptdoc.js
 delete mode 100644 components/doc/splitter/pt/ptdoc.js
 delete mode 100644 components/doc/steps/pt/ptdoc.js
 delete mode 100644 components/doc/tabmenu/pt/ptdoc.js
 delete mode 100644 components/doc/tabview/pt/ptdoc.js
 delete mode 100644 components/doc/tag/pt/ptdoc.js
 delete mode 100644 components/doc/terminal/pt/ptdoc.js
 delete mode 100644 components/doc/tieredmenu/pt/ptdoc.js
 delete mode 100644 components/doc/timeline/pt/ptdoc.js
 delete mode 100644 components/doc/toast/pt/ptdoc.js
 delete mode 100644 components/doc/togglebutton/pt/ptdoc.js
 delete mode 100644 components/doc/toolbar/pt/ptdoc.js
 delete mode 100644 components/doc/tooltip/pt/ptdoc.js
 delete mode 100644 components/doc/tree/pt/ptdoc.js
 delete mode 100644 components/doc/treeselect/pt/ptdoc.js
 delete mode 100644 components/doc/treetable/pt/ptdoc.js
 delete mode 100644 components/doc/tristatecheckbox/pt/ptdoc.js
 delete mode 100644 components/doc/virtualscroller/pt/ptdoc.js

diff --git a/components/doc/accordion/pt/ptdoc.js b/components/doc/accordion/pt/ptdoc.js
deleted file mode 100644
index b3d7f826a8..0000000000
--- a/components/doc/accordion/pt/ptdoc.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
-
-export function PTDoc(props) {
-    const tabs = [
-        { title: 'Header 1', content: 'Tab 1 Content' },
-        { title: 'Header 2', content: 'Tab 2 Content' },
-        { title: 'Header 3', content: 'Tab 3 Content' }
-    ];
-
-    const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index) {
-            return 'bg-primary';
-        }
-    };
-
-    const code = {
-        basic: `
-<Accordion activeIndex={0}>
-    {tabs.map((tab, i) => {
-        return (
-            <AccordionTab
-                key={i}
-                pt={{
-                    headerAction: ({ parent }) => ({
-                        className: panelClassName(parent, i)
-                    })
-                }}
-                header={tab.title}>
-                <p className="m-0">
-                    {tab.content}
-                </p>
-            </AccordionTab>
-        )
-    })}
-</Accordion>
-        `,
-        javascript: `
-import React from 'react';
-import { Accordion, AccordionTab } from 'primereact/accordion';
-
-export default function PTDemo() {
-    const tabs = [
-        { title: 'Header 1', content: 'Tab 1 Content' },
-        { title: 'Header 2', content: 'Tab 2 Content' },
-        { title: 'Header 3', content: 'Tab 3 Content' }
-    ];
-
-    const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index) return 'bg-primary';
-    };
-
-    return (
-        <div className="card">
-            <Accordion activeIndex={0}>
-                {tabs.map((tab, i) => {
-                    return (
-                        <AccordionTab
-                            key={i}
-                            pt={{
-                                headerAction: ({ parent }) => ({
-                                    className: panelClassName(parent, i)
-                                })
-                            }}
-                            header={tab.title}>
-                            <p className="m-0">
-                                {tab.content}
-                            </p>
-                        </AccordionTab>
-                    )
-                })}
-            </Accordion>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { Accordion, AccordionTab } from 'primereact/accordion';
-
-export default function PTDemo() {
-    const tabs = [
-        { title: 'Header 1', content: 'Tab 1 Content' },
-        { title: 'Header 2', content: 'Tab 2 Content' },
-        { title: 'Header 3', content: 'Tab 3 Content' }
-    ];
-
-    const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index) return 'bg-primary';
-    };
-    
-    return (
-        <div className="card">
-            <Accordion activeIndex={0}>
-                {tabs.map((tab, i) => {
-                    return (
-                        <AccordionTab
-                            key={i}
-                            pt={{
-                                headerAction: ({ parent }) => ({
-                                    className: panelClassName(parent, i)
-                                })
-                            }}
-                            header={tab.title}>
-                            <p className="m-0">
-                                {tab.content}
-                            </p>
-                        </AccordionTab>
-                    )
-                })}
-            </Accordion>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Accordion activeIndex={0}>
-                    {tabs.map((tab, i) => {
-                        return (
-                            <AccordionTab
-                                key={i}
-                                pt={{
-                                    headerAction: ({ parent }) => ({
-                                        className: panelClassName(parent, i)
-                                    })
-                                }}
-                                header={tab.title}
-                            >
-                                <p className="m-0">{tab.content}</p>
-                            </AccordionTab>
-                        );
-                    })}
-                </Accordion>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/autocomplete/pt/ptdoc.js b/components/doc/autocomplete/pt/ptdoc.js
deleted file mode 100644
index 86bf17c447..0000000000
--- a/components/doc/autocomplete/pt/ptdoc.js
+++ /dev/null
@@ -1,111 +0,0 @@
-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 PTDoc(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)}
-    pt={{
-        input: { root: { className: 'w-16rem' } },
-        item: ({ context }) => ({
-            className: context.selected ? 'bg-primary-300' : undefined
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { AutoComplete } from "primereact/autocomplete";
-
-export default function PTDemo() {
-    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)}
-                pt={{
-                    input: { root: { className: 'w-16rem' } },
-                    item: ({ context }) => ({
-                        className: context.selected ? 'bg-primary-300' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-
-export default function PTDemo() {
-    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)}
-                pt={{
-                    input: { root: { className: 'w-16rem' } },
-                    item: ({ context }) => ({
-                        className: context.selected ? 'bg-primary-300' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <AutoComplete
-                    value={value}
-                    suggestions={items}
-                    completeMethod={search}
-                    onChange={(e) => setValue(e.value)}
-                    pt={{
-                        input: { root: { className: 'w-16rem' } },
-                        item: ({ context }) => ({
-                            className: context.selected ? 'bg-primary-300' : undefined
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/avatar/pt/ptdoc.js b/components/doc/avatar/pt/ptdoc.js
deleted file mode 100644
index 084a005b27..0000000000
--- a/components/doc/avatar/pt/ptdoc.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Avatar } from '@/components/lib/avatar/Avatar';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png"
-    pt={{ image: { className: 'w-4rem h-4rem' } }} />
-        `,
-        javascript: `
-import React from 'react';
-import { Avatar } from 'primereact/avatar';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png"
-                pt={{ image: { className: 'w-4rem h-4rem' } }} />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { Avatar } from 'primereact/avatar';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png"
-                pt={{ image: { className: 'w-4rem h-4rem' } }} />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" pt={{ image: { className: 'w-4rem h-4rem' } }} />
-            </div>
-
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/badge/pt/ptdoc.js b/components/doc/badge/pt/ptdoc.js
deleted file mode 100644
index b678a439d6..0000000000
--- a/components/doc/badge/pt/ptdoc.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Badge } from '@/components/lib/badge/Badge';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Badge value="2" 
-    pt={{ root: { className: 'bg-primary border-round-sm' } }} />
-        `,
-        javascript: `
-import React from 'react'; 
-import { Badge } from 'primereact/badge';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Badge value="2" pt={{ root: { className: 'bg-primary border-round-sm' } }} />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Badge } from 'primereact/badge';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Badge value="2" pt={{ root: { className: 'bg-primary border-round-sm' } }} />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Badge value="2" pt={{ root: { className: 'bg-primary border-round-sm' } }} />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/blockui/pt/ptdoc.js b/components/doc/blockui/pt/ptdoc.js
deleted file mode 100644
index 2830a32db6..0000000000
--- a/components/doc/blockui/pt/ptdoc.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { BlockUI } from '@/components/lib/blockui/BlockUI';
-import { Button } from '@/components/lib/button/Button';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [blocked, setBlocked] = useState(false);
-    const code = {
-        basic: `
-<BlockUI blocked={blocked} 
-    pt={{ root: { className: 'surface-ground p-2 border-round-sm' } }}>
-</BlockUI>
-        `,
-        javascript: `
-import React, { useState }  from 'react'; 
-import { BlockUI } from 'primereact/blockui';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const [blocked, setBlocked] = useState(false);
-
-    return (
-        <div className="card">
-            <div className="mb-3">
-                <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
-                <Button label="Unblock" onClick={() => setBlocked(false)}></Button>
-            </div>
-            <BlockUI blocked={blocked} 
-                pt={{ root: { className: 'surface-ground p-2 border-round-sm' } }}>
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </BlockUI>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState }  from 'react'; 
-import { BlockUI } from 'primereact/blockui';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const [blocked, setBlocked] = useState<boolean>(false);
-
-    return (
-        <div className="card">
-            <div className="mb-3">
-                <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
-                <Button label="Unblock" onClick={() => setBlocked(false)}></Button>
-            </div>
-            <BlockUI blocked={blocked} 
-                pt={{ root: { className: 'surface-ground p-2 border-round-sm' } }}>
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </BlockUI>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <div className="mb-3">
-                    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2" />
-                    <Button label="Unblock" onClick={() => setBlocked(false)} />
-                </div>
-                <BlockUI blocked={blocked} pt={{ root: { className: 'surface-ground p-2 border-round-sm' } }}>
-                    <p className="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </BlockUI>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/breadcrumb/pt/ptdoc.js b/components/doc/breadcrumb/pt/ptdoc.js
deleted file mode 100644
index 905c6202e4..0000000000
--- a/components/doc/breadcrumb/pt/ptdoc.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { BreadCrumb } from '@/components/lib/breadcrumb/BreadCrumb';
-
-export function PTDoc(props) {
-    const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
-    const home = { icon: 'pi pi-home', url: 'https://primereact.org' };
-
-    const code = {
-        basic: `
-<BreadCrumb 
-    model={items}
-    home={home}
-    pt={{
-        root: { className: 'surface-ground' },
-        label: ({ props }) => ({
-            className: props.index === items.length - 1 ? 'font-italic' : undefined
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react';
-import { BreadCrumb } from 'primereact/breadcrumb';
-
-export default function PTDemo() {
-    const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
-    const home = { icon: 'pi pi-home', url: 'https://primereact.org' }
-
-    return (
-        <div className="card flex justify-content-center">
-            <BreadCrumb
-                pt={{
-                    root: { className: 'surface-ground' },
-                    label: ({ props }) => ({
-                        className: props.index === items.length - 1 ? 'font-italic' : undefined
-                    })
-                }}
-                model={items}
-                home={home}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { BreadCrumb } from 'primereact/breadcrumb';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
-    const home: MenuItem = { icon: 'pi pi-home', url: 'https://primereact.org' }
-
-    return (
-        <div className="card flex justify-content-center">
-            <BreadCrumb
-                pt={{
-                    root: { className: 'surface-ground' },
-                    label: ({ props }) => ({
-                        className: props.index === items.length - 1 ? 'font-italic' : undefined
-                    })
-                }}
-                model={items}
-                home={home}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <BreadCrumb
-                    pt={{
-                        root: { className: 'surface-ground' },
-                        label: ({ props }) => ({
-                            className: props.index === items.length - 1 ? 'font-italic' : undefined
-                        })
-                    }}
-                    model={items}
-                    home={home}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/button/pt/ptdoc.js b/components/doc/button/pt/ptdoc.js
deleted file mode 100644
index 2245eed621..0000000000
--- a/components/doc/button/pt/ptdoc.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Button label="Submit" icon="pi pi-check"
-    pt={{
-        root: { className: 'bg-blue-500 border-blue-500' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex flex-wrap gap-3 justify-content-center">
-            <Button
-                label="Submit"
-                icon="pi pi-check"
-                pt={{
-                    root: { className: 'bg-blue-500 border-blue-500' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex flex-wrap gap-3 justify-content-center">
-            <Button
-                label="Submit"
-                icon="pi pi-check"
-                pt={{
-                    root: { className: 'bg-blue-500 border-blue-500' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex flex-wrap gap-3 justify-content-center">
-                <Button
-                    label="Submit"
-                    icon="pi pi-check"
-                    pt={{
-                        root: { className: 'bg-blue-500 border-blue-500' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/calendar/pt/ptdoc.js b/components/doc/calendar/pt/ptdoc.js
deleted file mode 100644
index 4929c3fd9a..0000000000
--- a/components/doc/calendar/pt/ptdoc.js
+++ /dev/null
@@ -1,100 +0,0 @@
-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 PTDoc(props) {
-    const [date, setDate] = useState(null);
-
-    const code = {
-        basic: `
-<Calendar
-    value={date}
-    onChange={(e) => setDate(e.value)}
-    showIcon
-    pt={{
-        input: {
-            root: { className: 'border-teal-500' }
-        },
-        dropdownButton: {
-            root: { className: 'bg-teal-500 border-teal-500' }
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Calendar } from 'primereact/calendar';
-
-export default function PTDemo() {
-    const [date, setDate] = useState(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Calendar
-                value={date}
-                onChange={(e) => setDate(e.value)}
-                showIcon
-                pt={{
-                    input: {
-                        root: { className: 'border-teal-500' }
-                    },
-                    dropdownButton: {
-                        root: { className: 'bg-teal-500 border-teal-500' }
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Calendar, CalendarChangeEvent } from 'primereact/calendar';
-
-export default function PTDemo() {
-    const [date, setDate] = useState<string | Date | Date[] | null>(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Calendar
-                value={date}
-                onChange={(e) => setDate(e.value)}
-                showIcon
-                pt={{
-                    input: {
-                        root: { className: 'border-teal-500' }
-                    },
-                    dropdownButton: {
-                        root: { className: 'bg-teal-500 border-teal-500' }
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Calendar
-                    value={date}
-                    onChange={(e) => setDate(e.value)}
-                    showIcon
-                    pt={{
-                        input: {
-                            root: { className: 'border-teal-500' }
-                        },
-                        dropdownButton: {
-                            root: { className: 'bg-teal-500 border-teal-500' }
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/card/pt/ptdoc.js b/components/doc/card/pt/ptdoc.js
deleted file mode 100644
index 2bfb63cac0..0000000000
--- a/components/doc/card/pt/ptdoc.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Card } from '@/components/lib/card/Card';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Card
-    title="Simple Card"
-    pt={{
-        body: { className: 'bg-primary border-round-lg' }
-    }}
->
-    <p className="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-        quas!
-    </p>
-</Card>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Card } from 'primereact/card';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Card
-                title="Simple Card"
-                pt={{
-                    body: { className: 'bg-primary border-round-lg' }
-                }}
-            >
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </Card>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Card } from 'primereact/card';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Card
-                title="Simple Card"
-                pt={{
-                    body: { className: 'bg-primary border-round-lg' }
-                }}
-            >
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </Card>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Card
-                    title="Simple Card"
-                    pt={{
-                        body: { className: 'bg-primary border-round-lg' }
-                    }}
-                >
-                    <p className="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                        quas!
-                    </p>
-                </Card>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/carousel/pt/ptdoc.js b/components/doc/carousel/pt/ptdoc.js
deleted file mode 100644
index a2da2c6f00..0000000000
--- a/components/doc/carousel/pt/ptdoc.js
+++ /dev/null
@@ -1,294 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Carousel } from '@/components/lib/carousel/Carousel';
-import { Tag } from '@/components/lib/tag/Tag';
-import { useEffect, useState } from 'react';
-import { ProductService } from '../../../../service/ProductService';
-
-export function PTDoc(props) {
-    const [products, setProducts] = useState([]);
-    const responsiveOptions = [
-        {
-            breakpoint: '1199px',
-            numVisible: 1,
-            numScroll: 1
-        },
-        {
-            breakpoint: '991px',
-            numVisible: 2,
-            numScroll: 1
-        },
-        {
-            breakpoint: '767px',
-            numVisible: 1,
-            numScroll: 1
-        }
-    ];
-
-    const getSeverity = (product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const productTemplate = (product) => {
-        return (
-            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                <div className="mb-3">
-                    <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
-                </div>
-                <div>
-                    <h4 className="mb-1">{product.name}</h4>
-                    <h6 className="mt-0 mb-3">${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
-                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
-                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
-                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const code = {
-        basic: `
-<Carousel 
-    value={products}
-    numVisible={3}
-    numScroll={3} 
-    responsiveOptions={responsiveOptions} 
-    itemTemplate={productTemplate}
-    pt={{
-        indicatorButton: { className: 'border-round-lg' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { Button } from 'primereact/button';
-import { Carousel } from 'primereact/carousel';
-import { Tag } from 'primereact/tag';
-import { ProductService } from './service/ProductService';
-
-export default function PTDemo() {
-    const [products, setProducts] = useState([]);
-    const responsiveOptions = [
-        {
-            breakpoint: '1199px',
-            numVisible: 1,
-            numScroll: 1
-        },
-        {
-            breakpoint: '991px',
-            numVisible: 2,
-            numScroll: 1
-        },
-        {
-            breakpoint: '767px',
-            numVisible: 1,
-            numScroll: 1
-        }
-    ];
-
-    const getSeverity = (product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
-    }, []);
-
-    const productTemplate = (product) => {
-        return (
-            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                <div className="mb-3">
-                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
-                </div>
-                <div>
-                    <h4 className="mb-1">{product.name}</h4>
-                    <h6 className="mt-0 mb-3">\${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
-                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
-                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
-                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    return (
-        <div className="card">
-            <Carousel 
-                value={products}
-                numVisible={3}
-                numScroll={3} 
-                responsiveOptions={responsiveOptions} 
-                itemTemplate={productTemplate}
-                pt={{
-                    indicatorButton: { className: 'border-round-lg' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { Button } from 'primereact/button';
-import { Carousel, CarouselResponsiveOption } from 'primereact/carousel';
-import { Tag } from 'primereact/tag';
-import { ProductService } from './service/ProductService';
-
-interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
-}
-
-export default function PTDemo() {
-    const [products, setProducts] = useState<Product[]>([]);
-    const responsiveOptions: CarouselResponsiveOption[] = [
-        {
-            breakpoint: '1199px',
-            numVisible: 1,
-            numScroll: 1
-        },
-        {
-            breakpoint: '991px',
-            numVisible: 2,
-            numScroll: 1
-        },
-        {
-            breakpoint: '767px',
-            numVisible: 1,
-            numScroll: 1
-        }
-    ];
-
-    const getSeverity = (product: Product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-    
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
-    }, []);
-
-    const productTemplate = (product: Product) => {
-        return (
-            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                <div className="mb-3">
-                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
-                </div>
-                <div>
-                    <h4 className="mb-1">{product.name}</h4>
-                    <h6 className="mt-0 mb-3">\${product.price}</h6>
-                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
-                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
-                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
-                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
-                    </div>
-                </div>
-            </div>
-        );
-    };
-    
-    return (
-        <div className="card">
-            <Carousel 
-                value={products}
-                numVisible={3}
-                numScroll={3} 
-                responsiveOptions={responsiveOptions} 
-                itemTemplate={productTemplate}
-                pt={{
-                    indicatorButton: { className: 'border-round-lg' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Carousel
-                    value={products}
-                    numVisible={3}
-                    numScroll={3}
-                    responsiveOptions={responsiveOptions}
-                    itemTemplate={productTemplate}
-                    pt={{
-                        indicatorButton: { className: 'border-round-lg' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['ProductService']} />
-        </>
-    );
-}
diff --git a/components/doc/cascadeselect/pt/ptdoc.js b/components/doc/cascadeselect/pt/ptdoc.js
deleted file mode 100644
index f94c1c86cc..0000000000
--- a/components/doc/cascadeselect/pt/ptdoc.js
+++ /dev/null
@@ -1,343 +0,0 @@
-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 PTDoc(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
-    value={selectedCity}
-    onChange={(e) => setSelectedCity(e.value)}
-    options={countries}
-    optionLabel="cname"
-    optionGroupLabel="name"
-    optionGroupChildren={['states', 'cities']}
-    breakpoint="767px"
-    placeholder="Select a City"
-    pt={{
-        root: { style: { minWidth: '14rem' } }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { CascadeSelect } from 'primereact/cascadeselect';
-
-export default function PTDemo() {
-    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
-                value={selectedCity}
-                onChange={(e) => setSelectedCity(e.value)}
-                options={countries}
-                optionLabel="cname"
-                optionGroupLabel="name"
-                optionGroupChildren={['states', 'cities']}
-                breakpoint="767px"
-                placeholder="Select a City"
-                pt={{
-                    root: { 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 PTDemo() {
-    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
-                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"
-                pt={{
-                    root: { style: { minWidth: '14rem' } }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <CascadeSelect
-                    value={selectedCity}
-                    onChange={(e) => setSelectedCity(e.value)}
-                    options={countries}
-                    optionLabel="cname"
-                    optionGroupLabel="name"
-                    optionGroupChildren={['states', 'cities']}
-                    breakpoint="767px"
-                    placeholder="Select a City"
-                    pt={{
-                        root: { style: { minWidth: '14rem' } }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/chart/pt/ptdoc.js b/components/doc/chart/pt/ptdoc.js
deleted file mode 100644
index fdf46301ea..0000000000
--- a/components/doc/chart/pt/ptdoc.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Chart } from '@/components/lib/chart/Chart';
-import { useEffect, useState } from 'react';
-
-export function PTDoc(props) {
-    const [chartData, setChartData] = useState({});
-    const [chartOptions, setChartOptions] = useState({});
-
-    useEffect(() => {
-        const documentStyle = getComputedStyle(document.body);
-        const data = {
-            labels: ['A', 'B', 'C'],
-            datasets: [
-                {
-                    data: [540, 325, 702],
-                    backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
-                    hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
-                }
-            ]
-        };
-        const options = {
-            plugins: {
-                legend: {
-                    labels: {
-                        usePointStyle: true
-                    }
-                }
-            }
-        };
-
-        setChartData(data);
-        setChartOptions(options);
-    }, []);
-
-    const code = {
-        basic: `
-<Chart
-    type="pie"
-    data={chartData}
-    options={chartOptions}
-    pt={{
-        root: { className: 'w-full md:w-30rem' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { Chart } from 'primereact/chart';
-
-export default function PTDemo() {
-    const [chartData, setChartData] = useState({});
-    const [chartOptions, setChartOptions] = useState({});
-
-    useEffect(() => {
-        const documentStyle = getComputedStyle(document.body);
-        const data = {
-            labels: ['A', 'B', 'C'],
-            datasets: [
-                {
-                    data: [540, 325, 702],
-                    backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
-                    hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
-                }
-            ]
-        };
-        const options = {
-            plugins: {
-                legend: {
-                    labels: {
-                        usePointStyle: true
-                    }
-                }
-            }
-        };
-
-        setChartData(data);
-        setChartOptions(options);
-    }, []);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Chart
-                type="pie"
-                data={chartData}
-                options={chartOptions}
-                pt={{
-                    root: { className: 'w-full md:w-30rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { Chart } from 'primereact/chart';
-
-export default function PTDemo() {
-    const [chartData, setChartData] = useState({});
-    const [chartOptions, setChartOptions] = useState({});
-
-    useEffect(() => {
-        const documentStyle = getComputedStyle(document.body);
-        const data = {
-            labels: ['A', 'B', 'C'],
-            datasets: [
-                {
-                    data: [540, 325, 702],
-                    backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
-                    hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
-                }
-            ]
-        };
-        const options = {
-            plugins: {
-                legend: {
-                    labels: {
-                        usePointStyle: true
-                    }
-                }
-            }
-        };
-
-        setChartData(data);
-        setChartOptions(options);
-    }, []);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Chart
-                type="pie"
-                data={chartData}
-                options={chartOptions}
-                pt={{
-                    root: { className: 'w-full md:w-30rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Chart
-                    type="pie"
-                    data={chartData}
-                    options={chartOptions}
-                    pt={{
-                        root: { className: 'w-full md:w-30rem' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
-        </>
-    );
-}
diff --git a/components/doc/checkbox/pt/ptdoc.js b/components/doc/checkbox/pt/ptdoc.js
deleted file mode 100644
index c127dd1102..0000000000
--- a/components/doc/checkbox/pt/ptdoc.js
+++ /dev/null
@@ -1,84 +0,0 @@
-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 PTDoc(props) {
-    const [checked, setChecked] = useState(false);
-
-    const code = {
-        basic: `
-<Checkbox
-    checked={checked}
-    onChange={(e) => setChecked(e.checked)}
-    pt={{
-        input: ({ state }) => ({
-            className: state.focused ? 'border-orange-400' : undefined
-        })
-    }}
-></Checkbox>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Checkbox } from "primereact/checkbox";
-
-export default function PTDemo() {
-    const [checked, setChecked] = useState(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Checkbox
-                checked={checked}
-                onChange={(e) => setChecked(e.checked)}
-                pt={{
-                    input: ({ state }) => ({
-                        className: state.focused ? 'border-orange-400' : undefined
-                    })
-                }}
-            ></Checkbox>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Checkbox } from "primereact/checkbox";
-
-export default function PTDemo() {
-    const [checked, setChecked] = useState<boolean>(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Checkbox
-                checked={checked}
-                onChange={(e) => setChecked(e.checked)}
-                pt={{
-                    input: ({ state }) => ({
-                        className: state.focused ? 'border-orange-400' : undefined
-                    })
-                }}
-            ></Checkbox>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Checkbox
-                    checked={checked}
-                    onChange={(e) => setChecked(e.checked)}
-                    pt={{
-                        input: ({ state }) => ({
-                            className: state.focused ? 'border-orange-400' : undefined
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/chip/pt/ptdoc.js b/components/doc/chip/pt/ptdoc.js
deleted file mode 100644
index 0be031c322..0000000000
--- a/components/doc/chip/pt/ptdoc.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Chip } from '@/components/lib/chip/Chip';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Chip
-    label="Amy Elsner"
-    image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png"
-    pt={{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-        label: { className: 'text-white' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Chip } from 'primereact/chip';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Chip
-                label="Amy Elsner"
-                image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png"
-                pt={{
-                    root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-                    label: { className: 'text-white' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Chip } from 'primereact/chip';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Chip
-                label="Amy Elsner"
-                image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png"
-                pt={{
-                    root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-                    label: { className: 'text-white' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Chip
-                    label="Amy Elsner"
-                    image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png"
-                    pt={{
-                        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-                        label: { className: 'text-white' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/chips/pt/ptdoc.js b/components/doc/chips/pt/ptdoc.js
deleted file mode 100644
index 22dc5ef130..0000000000
--- a/components/doc/chips/pt/ptdoc.js
+++ /dev/null
@@ -1,84 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState([]);
-
-    const code = {
-        basic: `
-<Chips
-    value={value}
-    onChange={(e) => setValue(e.value)}
-    pt={{
-        root: { className: 'flex' },
-        container: { className: 'flex-1' },
-        token: { className: 'bg-primary' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Chips } from "primereact/chips";
-
-export default function PTDemo() {
-    const [value, setValue] = useState([]);
-
-    return (
-        <div className="card p-fluid">
-            <Chips
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    root: { className: 'flex' },
-                    container: { className: 'flex-1' },
-                    token: { className: 'bg-primary' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Chips, ChipsChangeEvent } from "primereact/chips";
-
-export default function PTDemo() {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-        <div className="card p-fluid">
-            <Chips
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    root: { className: 'flex' },
-                    container: { className: 'flex-1' },
-                    token: { className: 'bg-primary' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card p-fluid">
-                <Chips
-                    value={value}
-                    onChange={(e) => setValue(e.value)}
-                    pt={{
-                        root: { className: 'flex' },
-                        container: { className: 'flex-1' },
-                        token: { className: 'bg-primary' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/colorpicker/pt/ptdoc.js b/components/doc/colorpicker/pt/ptdoc.js
deleted file mode 100644
index eddd3c11e4..0000000000
--- a/components/doc/colorpicker/pt/ptdoc.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { ColorPicker } from '@/components/lib/colorpicker/ColorPicker';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [color, setColor] = useState(null);
-
-    const code = {
-        basic: `
-<ColorPicker
-    value={color}
-    onChange={(e) => setColor(e.value)}
-    inline
-    pt={{
-        colorHandler: { className: 'w-1rem h-1rem' }
-    }}
-/>
-
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { ColorPicker } from 'primereact/colorpicker';
-
-export default function PTDemo() {
-    const [color, setColor] = useState(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <ColorPicker
-                value={color}
-                onChange={(e) => setColor(e.value)}
-                inline
-                pt={{
-                    colorHandler: { className: 'w-1rem h-1rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { ColorPicker, ColorPickerChangeEvent } from 'primereact/colorpicker';
-
-export default function PTDemo() {
-    const [color, setColor] = useState<string>(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <ColorPicker
-                value={color}
-                onChange={(e) => setColor(e.value)}
-                inline
-                pt={{
-                    colorHandler: { className: 'w-1rem h-1rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <ColorPicker
-                    value={color}
-                    onChange={(e) => setColor(e.value)}
-                    inline
-                    pt={{
-                        colorHandler: { className: 'w-1rem h-1rem' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/confirmdialog/pt/ptdoc.js b/components/doc/confirmdialog/pt/ptdoc.js
deleted file mode 100644
index 4eadbb6077..0000000000
--- a/components/doc/confirmdialog/pt/ptdoc.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { ConfirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [visible, setVisible] = useState(false);
-
-    const code = {
-        basic: `
-<ConfirmDialog
-    visible={visible}
-    onHide={() => setVisible(false)}
-    message="Are you sure you want to proceed?"
-    header="Confirmation"
-    icon="pi pi-exclamation-triangle"
-    pt={{
-        headerTitle: {
-            className: 'text-primary'
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from 'react';
-import { Button } from 'primereact/button';
-import { ConfirmDialog } from 'primereact/confirmdialog';
-
-export default function PTDemo() {
-    return (
-        <>
-            <ConfirmDialog
-                visible={visible}
-                onHide={() => setVisible(false)}
-                message="Are you sure you want to proceed?"
-                header="Confirmation"
-                icon="pi pi-exclamation-triangle"
-                pt={{
-                    headerTitle: {
-                        className: 'text-primary'
-                    }
-                }}
-            />
-            <div className="card flex justify-content-center">
-                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
-            </div>
-        </>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from 'react';
-import { Button } from 'primereact/button';
-import { ConfirmDialog } from 'primereact/confirmdialog';
-
-export default function PTDemo() {
-    return (
-        <>
-            <ConfirmDialog
-                visible={visible}
-                onHide={() => setVisible(false)}
-                message="Are you sure you want to proceed?"
-                header="Confirmation"
-                icon="pi pi-exclamation-triangle"
-                pt={{
-                    headerTitle: {
-                        className: 'text-primary'
-                    }
-                }}
-            />
-            <div className="card flex justify-content-center">
-                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
-            </div>
-        </>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <ConfirmDialog pt={{ headerTitle: { className: 'text-primary' } }} visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" header="Confirmation" icon="pi pi-exclamation-triangle" />
-            <div className="card flex justify-content-center">
-                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/confirmpopup/pt/ptdoc.js b/components/doc/confirmpopup/pt/ptdoc.js
deleted file mode 100644
index e03eb9d3dc..0000000000
--- a/components/doc/confirmpopup/pt/ptdoc.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { ConfirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
-import { useRef, useState } from 'react';
-
-export function PTDoc(props) {
-    const [visible, setVisible] = useState(false);
-    const buttonEl = useRef(null);
-
-    const code = {
-        basic: `
-<ConfirmPopup
-    pt={{
-        root: { className: 'surface-100' }
-    }}
-    target={buttonEl.current}
-    visible={visible}
-    onHide={() => setVisible(false)}
-    message="Are you sure you want to proceed?"
-    icon="pi pi-exclamation-triangle"
-/>
-        `,
-        javascript: `
-import React, { useRef, useState } from 'react';
-import { Button } from 'primereact/button';
-import { ConfirmPopup } from 'primereact/confirmpopup';
-
-export default function PTDemo() {
-    const [visible, setVisible] = useState(false);
-    const buttonEl = useRef(null);
-
-    return (
-        <>
-            <ConfirmPopup
-                pt={{
-                    root: { className: 'surface-100' }
-                }}
-                target={buttonEl.current}
-                visible={visible}
-                onHide={() => setVisible(false)}
-                message="Are you sure you want to proceed?"
-                icon="pi pi-exclamation-triangle"
-            />
-            <div className="card flex justify-content-center">
-                <Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
-            </div>
-        </>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef, useState } from 'react';
-import { Button } from 'primereact/button';
-import { ConfirmPopup } from 'primereact/confirmpopup';
-
-export default function PTDemo() {
-    const [visible, setVisible] = useState<boolean>(false);
-    const buttonEl = useRef(null);
-
-    return (
-        <>
-            <ConfirmPopup
-                pt={{
-                    root: { className: 'surface-100' }
-                }}
-                target={buttonEl.current}
-                visible={visible}
-                onHide={() => setVisible(false)}
-                message="Are you sure you want to proceed?"
-                icon="pi pi-exclamation-triangle"
-            />
-            <div className="card flex justify-content-center">
-                <Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
-            </div>
-        </>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <>
-                <ConfirmPopup
-                    pt={{
-                        root: { className: 'surface-100' }
-                    }}
-                    target={buttonEl.current}
-                    visible={visible}
-                    onHide={() => setVisible(false)}
-                    message="Are you sure you want to proceed?"
-                    icon="pi pi-exclamation-triangle"
-                />
-                <div className="card flex justify-content-center">
-                    <Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
-                </div>
-            </>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/contextmenu/pt/ptdoc.js b/components/doc/contextmenu/pt/ptdoc.js
deleted file mode 100644
index cff4b4eea5..0000000000
--- a/components/doc/contextmenu/pt/ptdoc.js
+++ /dev/null
@@ -1,463 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
-import { useRef } from 'react';
-
-export function PTDoc(props) {
-    const cm = useRef(null);
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archieve',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            separator: true
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    const code = {
-        basic: `
-<ContextMenu
-    model={items}
-    ref={cm}
-    breakpoint="767px"
-    pt={{
-        action: ({ props, state, context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-    }}
-/>
-<img src="/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
-`,
-        javascript: `
-import React, { useRef } from 'react';
-import { ContextMenu } from 'primereact/contextmenu';
-
-export default function PTDemo() {
-    const cm = useRef(null);
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archieve',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            separator: true
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card flex md:justify-content-center">
-            <ContextMenu
-                model={items}
-                ref={cm}
-                breakpoint="767px"
-                pt={{
-                    action: ({ props, state, context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            />
-            <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { ContextMenu } from 'primereact/contextmenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const cm = useRef<ContextMenu>(null);
-    const items: MenuItem[] = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archieve',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            separator: true
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card flex md:justify-content-center">
-            <ContextMenu
-                model={items}
-                ref={cm}
-                breakpoint="767px"
-                pt={{
-                    action: ({ props, state, context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            />
-            <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current?.show(e)} />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex md:justify-content-center">
-                <ContextMenu
-                    model={items}
-                    ref={cm}
-                    breakpoint="767px"
-                    pt={{
-                        action: ({ props, state, context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                    }}
-                />
-                <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/datascroller/pt/ptdoc.js b/components/doc/datascroller/pt/ptdoc.js
deleted file mode 100644
index 7391df22f1..0000000000
--- a/components/doc/datascroller/pt/ptdoc.js
+++ /dev/null
@@ -1,263 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { DataScroller } from '@/components/lib/datascroller/DataScroller';
-import { Rating } from '@/components/lib/rating/Rating';
-import { Tag } from '@/components/lib/tag/Tag';
-import { useEffect, useState } from 'react';
-import { ProductService } from '../../../../service/ProductService';
-
-export function PTDoc(props) {
-    const [products, setProducts] = useState([]);
-
-    useEffect(() => {
-        ProductService.getProducts().then((data) => setProducts(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const getSeverity = (product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    const itemTemplate = (data) => {
-        return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${data.image}`} alt={data.name} />
-                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
-                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
-                            <div className="flex flex-column gap-1">
-                                <div className="text-2xl font-bold text-900">{data.name}</div>
-                                <div className="text-700">{data.description}</div>
-                            </div>
-                            <div className="flex flex-column gap-2">
-                                <Rating value={data.rating} readOnly cancel={false} />
-                                <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag product-category-icon" />
-                                    <span className="font-semibold">{data.category}</span>
-                                </span>
-                            </div>
-                        </div>
-                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
-                            <span className="text-2xl font-semibold">${data.price}</span>
-                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
-                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const code = {
-        basic: `
-<DataScroller
-    value={products}
-    itemTemplate={itemTemplate}
-    rows={5}
-    buffer={0.4}
-    header="List of Products"
-    pt={{
-        content: { className: 'surface-ground' }
-    }}
-/>
-`,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
-import { Button } from 'primereact/button';
-import { DataScroller } from 'primereact/datascroller';
-import { Rating } from 'primereact/rating';
-import { Tag } from 'primereact/tag';
-
-export default function PTDemo() {
-    const [products, setProducts] = useState([]);
-
-    useEffect(() => {
-        ProductService.getProducts().then((data) => setProducts(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const getSeverity = (product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    const itemTemplate = (data) => {
-        return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
-                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
-                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
-                            <div className="flex flex-column gap-1">
-                                <div className="text-2xl font-bold text-900">{data.name}</div>
-                                <div className="text-700">{data.description}</div>
-                            </div>
-                            <div className="flex flex-column gap-2">
-                                <Rating value={data.rating} readOnly cancel={false}></Rating>
-                                <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag product-category-icon"></i>
-                                    <span className="font-semibold">{data.category}</span>
-                                </span>
-                            </div>
-                        </div>
-                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
-                            <span className="text-2xl font-semibold">\${data.price}</span>
-                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    return (
-        <div className="card">
-            <DataScroller
-                value={products}
-                itemTemplate={itemTemplate}
-                rows={5}
-                buffer={0.4}
-                header="List of Products"
-                pt={{
-                    content: { className: 'surface-ground' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
-import { Button } from 'primereact/button';
-import { DataScroller } from 'primereact/datascroller';
-import { Rating } from 'primereact/rating';
-import { Tag } from 'primereact/tag';
-
-interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
-}
-
-export default function BasicDemo() {
-    const [products, setProducts] = useState<Product[]>([]);
-
-    useEffect(() => {
-        ProductService.getProducts().then((data) => setProducts(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const getSeverity = (product: Product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    const itemTemplate = (data: Product) => {
-        return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
-                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
-                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
-                            <div className="flex flex-column gap-1">
-                                <div className="text-2xl font-bold text-900">{data.name}</div>
-                                <div className="text-700">{data.description}</div>
-                            </div>
-                            <div className="flex flex-column gap-2">
-                                <Rating value={data.rating} readOnly cancel={false}></Rating>
-                                <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag product-category-icon"></i>
-                                    <span className="font-semibold">{data.category}</span>
-                                </span>
-                            </div>
-                        </div>
-                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
-                            <span className="text-2xl font-semibold">\${data.price}</span>
-                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    return (
-        <div className="card">
-            <DataScroller
-                value={products}
-                itemTemplate={itemTemplate}
-                rows={5}
-                buffer={0.4}
-                header="List of Products"
-                pt={{
-                    content: { className: 'surface-ground' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <DataScroller
-                    value={products}
-                    itemTemplate={itemTemplate}
-                    rows={5}
-                    buffer={0.4}
-                    header="List of Products"
-                    pt={{
-                        content: { className: 'surface-ground' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/datatable/pt/ptdoc.js b/components/doc/datatable/pt/ptdoc.js
deleted file mode 100644
index 120f5a8eb7..0000000000
--- a/components/doc/datatable/pt/ptdoc.js
+++ /dev/null
@@ -1,270 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Column } from '@/components/lib/column/Column';
-import { DataTable } from '@/components/lib/datatable/DataTable';
-import { useState } from 'react';
-import { ProductService } from '../../../../service/ProductService';
-import DeferredDemo from '@/components/demo/DeferredDemo';
-
-export function PTDoc(props) {
-    const [products, setProducts] = useState([]);
-
-    const loadDemoData = () => {
-        ProductService.getProductsMini().then((data) => setProducts(data));
-    };
-
-    const code = {
-        basic: `
-<DataTable
-    value={products}
-    sortMode='multiple'
-    pt={{
-        table: { style: { minWidth: '50rem' } }
-    }}
->
-    <Column
-        field="code"
-        header="Code"
-        sortable
-        pt={{
-            sortBadge: { className: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }}
-    ></Column>
-    <Column
-        field="name"
-        header="Name"
-        sortable
-        pt={{
-            sortBadge: { className: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }}
-    ></Column>
-    <Column
-        field="category"
-        header="Category"
-        sortable
-        pt={{
-            sortBadge: { className: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }}
-    ></Column>
-    <Column
-        field="quantity"
-        header="Quantity"
-        sortable
-        pt={{
-            sortBadge: { className: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }}
-    ></Column>
-</DataTable>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { ProductService } from './service/ProductService';
-
-export default function PTDemo() {
-    const [products, setProducts] = useState([]);
-
-    useEffect(() => {
-        ProductService.getProductsMini().then(data => setProducts(data));
-    }, []);
-
-    return (
-        <DataTable
-            value={products}
-            sortMode='multiple'
-            pt={{
-                table: { style: { minWidth: '50rem' } }
-            }}
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-        </DataTable>
-    </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { ProductService } from './service/ProductService';
-
-interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
-}
-
-export default function PTDemo() {
-    const [products, setProducts] = useState<Product[]>([]);
-
-    useEffect(() => {
-        ProductService.getProductsMini().then(data => setProducts(data));
-    }, []);
-
-    return (
-        <DataTable
-            value={products}
-            sortMode='multiple'
-            pt={{
-                table: { style: { minWidth: '50rem' } }
-            }}
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                pt={{
-                    sortBadge: { className: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }}
-            ></Column>
-        </DataTable>
-    );
-}
-        `,
-        data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <DeferredDemo onLoad={loadDemoData}>
-                <div className="card">
-                    <DataTable
-                        value={products}
-                        sortMode="multiple"
-                        pt={{
-                            table: { style: { minWidth: '50rem' } }
-                        }}
-                    >
-                        <Column
-                            field="code"
-                            header="Code"
-                            sortable
-                            pt={{
-                                sortBadge: { className: 'bg-primary' },
-                                headerCell: { style: { width: '25%' } }
-                            }}
-                        />
-                        <Column
-                            field="name"
-                            header="Name"
-                            sortable
-                            pt={{
-                                sortBadge: { className: 'bg-primary' },
-                                headerCell: { style: { width: '25%' } }
-                            }}
-                        />
-                        <Column
-                            field="category"
-                            header="Category"
-                            sortable
-                            pt={{
-                                sortBadge: { className: 'bg-primary' },
-                                headerCell: { style: { width: '25%' } }
-                            }}
-                        />
-                        <Column
-                            field="quantity"
-                            header="Quantity"
-                            sortable
-                            pt={{
-                                sortBadge: { className: 'bg-primary' },
-                                headerCell: { style: { width: '25%' } }
-                            }}
-                        />
-                    </DataTable>
-                </div>
-            </DeferredDemo>
-            <DocSectionCode code={code} service={['ProductService']} />
-        </>
-    );
-}
diff --git a/components/doc/dataview/pt/ptdoc.js b/components/doc/dataview/pt/ptdoc.js
deleted file mode 100644
index d78908c210..0000000000
--- a/components/doc/dataview/pt/ptdoc.js
+++ /dev/null
@@ -1,419 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { DataView, DataViewLayoutOptions } from '@/components/lib/dataview/DataView';
-import { Rating } from '@/components/lib/rating/Rating';
-import { Tag } from '@/components/lib/tag/Tag';
-import { useEffect, useState } from 'react';
-import { ProductService } from '../../../../service/ProductService';
-
-export function PTDoc(props) {
-    const [products, setProducts] = useState([]);
-    const [layout, setLayout] = useState('grid');
-
-    useEffect(() => {
-        ProductService.getProducts().then((data) => setProducts(data.slice(0, 6)));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const getSeverity = (product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    const listItem = (product) => {
-        return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
-                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
-                            <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false} />
-                            <div className="flex align-items-center gap-3">
-                                <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag" />
-                                    <span className="font-semibold">{product.category}</span>
-                                </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
-                            </div>
-                        </div>
-                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                            <span className="text-2xl font-semibold">${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const gridItem = (product) => {
-        return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                <div className="p-4 border-1 surface-border surface-card border-round">
-                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <div className="flex align-items-center gap-2">
-                            <i className="pi pi-tag" />
-                            <span className="font-semibold">{product.category}</span>
-                        </div>
-                        <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
-                    </div>
-                    <div className="flex flex-column align-items-center gap-3 py-5">
-                        <img className="w-9 shadow-2 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
-                        <div className="text-2xl font-bold">{product.name}</div>
-                        <Rating value={product.rating} readOnly cancel={false} />
-                    </div>
-                    <div className="flex align-items-center justify-content-between">
-                        <span className="text-2xl font-semibold">${product.price}</span>
-                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const itemTemplate = (product, layout) => {
-        if (!product) {
-            return;
-        }
-
-        if (layout === 'list') {
-            return listItem(product);
-        } else if (layout === 'grid') {
-            return gridItem(product);
-        }
-    };
-
-    const header = () => {
-        return (
-            <div className="flex justify-content-end">
-                <DataViewLayoutOptions
-                    layout={layout}
-                    onChange={(e) => setLayout(e.value)}
-                    pt={{
-                        listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                        gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                    }}
-                />
-            </div>
-        );
-    };
-
-    const code = {
-        basic: `
-<DataView
-    value={products}
-    itemTemplate={itemTemplate}
-    layout={layout}
-    header={header()}
-    pt={{
-        grid: { className: 'surface-ground' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
-import { Button } from 'primereact/button';
-import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
-import { Rating } from 'primereact/rating';
-import { Tag } from 'primereact/tag';
-
-export default function BasicDemo() {
-    const [products, setProducts] = useState([]);
-    const [layout, setLayout] = useState('grid');
-
-    useEffect(() => {
-        ProductService.getProducts().then((data) => setProducts(data.slice(0, 12)));
-    }, []);
-
-    const getSeverity = (product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    const listItem = (product) => {
-        return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
-                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
-                            <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false}></Rating>
-                            <div className="flex align-items-center gap-3">
-                                <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag"></i>
-                                    <span className="font-semibold">{product.category}</span>
-                                </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
-                            </div>
-                        </div>
-                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                            <span className="text-2xl font-semibold">\${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const gridItem = (product) => {
-        return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                <div className="p-4 border-1 surface-border surface-card border-round">
-                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <div className="flex align-items-center gap-2">
-                            <i className="pi pi-tag"></i>
-                            <span className="font-semibold">{product.category}</span>
-                        </div>
-                        <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
-                    </div>
-                    <div className="flex flex-column align-items-center gap-3 py-5">
-                        <img className="w-9 shadow-2 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
-                        <div className="text-2xl font-bold">{product.name}</div>
-                        <Rating value={product.rating} readOnly cancel={false}></Rating>
-                    </div>
-                    <div className="flex align-items-center justify-content-between">
-                        <span className="text-2xl font-semibold">\${product.price}</span>
-                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const itemTemplate = (product, layout) => {
-        if (!product) {
-            return;
-        }
-
-        if (layout === 'list') return listItem(product);
-        else if (layout === 'grid') return gridItem(product);
-    };
-
-    const header = () => {
-        return (
-            <div className="flex justify-content-end">
-                <DataViewLayoutOptions
-                    layout={layout}
-                    onChange={(e) => setLayout(e.value)}
-                    pt={{
-                        listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                        gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                    }}
-                />
-            </div>
-        );
-    };
-
-    return (
-        <div className="card">
-            <DataView
-                value={products}
-                itemTemplate={itemTemplate}
-                layout={layout}
-                header={header()}
-                pt={{
-                    grid: { className: 'surface-ground' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
-import { Button } from 'primereact/button';
-import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
-import { Rating } from 'primereact/rating';
-import { Tag } from 'primereact/tag';
-
-interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
-}
-
-export default function BasicDemo() {
-    const [products, setProducts] = useState<Product[]>([]);
-    const [layout, setLayout] = useState('grid');
-
-    useEffect(() => {
-        ProductService.getProducts().then((data) => setProducts(data.slice(0, 12)));
-    }, []);
-
-    const getSeverity = (product) => {
-        switch (product.inventoryStatus) {
-            case 'INSTOCK':
-                return 'success';
-
-            case 'LOWSTOCK':
-                return 'warning';
-
-            case 'OUTOFSTOCK':
-                return 'danger';
-
-            default:
-                return null;
-        }
-    };
-
-    const listItem = (product: Product) => {
-        return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
-                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
-                            <div className="text-2xl font-bold text-900">{product.name}</div>
-                            <Rating value={product.rating} readOnly cancel={false}></Rating>
-                            <div className="flex align-items-center gap-3">
-                                <span className="flex align-items-center gap-2">
-                                    <i className="pi pi-tag"></i>
-                                    <span className="font-semibold">{product.category}</span>
-                                </span>
-                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
-                            </div>
-                        </div>
-                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                            <span className="text-2xl font-semibold">\${product.price}</span>
-                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const gridItem = (product: Product) => {
-        return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                <div className="p-4 border-1 surface-border surface-card border-round">
-                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <div className="flex align-items-center gap-2">
-                            <i className="pi pi-tag"></i>
-                            <span className="font-semibold">{product.category}</span>
-                        </div>
-                        <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
-                    </div>
-                    <div className="flex flex-column align-items-center gap-3 py-5">
-                        <img className="w-9 shadow-2 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
-                        <div className="text-2xl font-bold">{product.name}</div>
-                        <Rating value={product.rating} readOnly cancel={false}></Rating>
-                    </div>
-                    <div className="flex align-items-center justify-content-between">
-                        <span className="text-2xl font-semibold">\${product.price}</span>
-                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    const itemTemplate = (product: Product, layout: string) => {
-        if (!product) {
-            return;
-        }
-
-        if (layout === 'list') return listItem(product);
-        else if (layout === 'grid') return gridItem(product);
-    };
-
-    const header = () => {
-        return (
-            <div className="flex justify-content-end">
-                <DataViewLayoutOptions
-                    layout={layout}
-                    onChange={(e) => setLayout(e.value)}
-                    pt={{
-                        listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                        gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                    }}
-                />
-            </div>
-        );
-    };
-
-    return (
-        <div className="card">
-            <DataView
-                value={products}
-                itemTemplate={itemTemplate}
-                layout={layout}
-                header={header()}
-                pt={{
-                    grid: { className: 'surface-ground' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <DataView
-                    value={products}
-                    itemTemplate={itemTemplate}
-                    layout={layout}
-                    header={header()}
-                    pt={{
-                        grid: { className: 'surface-ground' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['ProductService']} />
-        </>
-    );
-}
diff --git a/components/doc/dialog/pt/ptdoc.js b/components/doc/dialog/pt/ptdoc.js
deleted file mode 100644
index 941f7a701c..0000000000
--- a/components/doc/dialog/pt/ptdoc.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Dialog } from '@/components/lib/dialog/Dialog';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [visible, setVisible] = useState(false);
-
-    const code = {
-        basic: `
-<Dialog
-    header="Header"
-    visible={visible}
-    modal
-    onHide={() => setVisible(false)}
-    pt={{
-        root: { className: 'w-12 sm:w-9 md:w-6' }
-    }}
->
-</Dialog>
-        `,
-        javascript: `
-import React, { useState } from 'react';
-import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const [visible, setVisible] = useState(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-
-            <Dialog
-                header="Header"
-                visible={visible}
-                modal
-                onHide={() => setVisible(false)}
-                pt={{
-                    root: { className: 'w-12 sm:w-9 md:w-6' }
-                }}
-            >
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Dialog>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from 'react';
-import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const [visible, setVisible] = useState<boolean>(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-
-            <Dialog
-                header="Header"
-                visible={visible}
-                modal
-                onHide={() => setVisible(false)}
-                pt={{
-                    root: { className: 'w-12 sm:w-9 md:w-6' }
-                }}
-            >
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Dialog>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-
-                <Dialog
-                    header="Header"
-                    visible={visible}
-                    modal
-                    onHide={() => setVisible(false)}
-                    pt={{
-                        root: { className: 'w-12 sm:w-9 md:w-6' }
-                    }}
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </Dialog>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/divider/pt/ptdoc.js b/components/doc/divider/pt/ptdoc.js
deleted file mode 100644
index 5199fdcbcc..0000000000
--- a/components/doc/divider/pt/ptdoc.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Divider } from '@/components/lib/divider/Divider';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaqui officia deserunt mollit anim id est laborum.
-</p>
-<Divider pt={{ content: { className: 'text-primary' } }} align="center">
-    <b>Center</b>
-</Divider>
-<p>
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremquelaudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunturmagni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit,sed quia non numquam eius modi.
-</p>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Divider } from 'primereact/divider';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <Divider pt={{ content: { className: 'text-primary' } }} align="center">
-                <b>Center</b>
-            </Divider>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Divider } from 'primereact/divider';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <Divider pt={{ content: { className: 'text-primary' } }} align="center">
-                <b>Center</b>
-            </Divider>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <Divider pt={{ content: { className: 'text-primary' } }} align="center">
-                    <b>Center</b>
-                </Divider>
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/dock/pt/ptdoc.js b/components/doc/dock/pt/ptdoc.js
deleted file mode 100644
index b90c3babb8..0000000000
--- a/components/doc/dock/pt/ptdoc.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Dock } from '@/components/lib/dock/Dock';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'Finder',
-            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />
-        },
-        {
-            label: 'App Store',
-            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />
-        },
-        {
-            label: 'Photos',
-            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />
-        },
-        {
-            label: 'Trash',
-            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />
-        }
-    ];
-
-    const positions = [
-        {
-            label: 'Bottom',
-            value: 'bottom'
-        },
-        {
-            label: 'Top',
-            value: 'top'
-        },
-        {
-            label: 'Left',
-            value: 'left'
-        },
-        {
-            label: 'Right',
-            value: 'right'
-        }
-    ];
-
-    const code = {
-        basic: `
-<Dock
-    model={items}
-    position={"bottom"}
-    pt={{
-        container: {
-            style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-        }
-    }}
-/>
-`,
-        javascript: `
-import React from 'react';
-import { Dock } from 'primereact/dock';
-import './DockDemo.css';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'Finder',
-            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
-        },
-        {
-            label: 'App Store',
-            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
-        },
-        {
-            label: 'Photos',
-            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
-        },
-        {
-            label: 'Trash',
-            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
-        }
-    ];
-
-    return (
-        <div className="card dock-demo">
-            <div className="dock-window" style={{ backgroundImage: 'url(/images/dock/window.jpg)' }}>
-                <Dock
-                    model={items}
-                    position={"bottom"}
-                    pt={{
-                        container: {
-                            style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                        }
-                    }}
-                />
-            </div>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { Dock } from 'primereact/dock';
-import { MenuItem } from 'primereact/menuitem';
-import './DockDemo.css';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'Finder',
-            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
-        },
-        {
-            label: 'App Store',
-            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
-        },
-        {
-            label: 'Photos',
-            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
-        },
-        {
-            label: 'Trash',
-            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
-        }
-    ];
-
-    return (
-        <div className="card dock-demo">
-            <div className="dock-window" style={{ backgroundImage: 'url(/images/dock/window.jpg)' }}>
-                <Dock
-                    model={items}
-                    position={"bottom"}
-                    pt={{
-                        container: {
-                            style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                        }
-                    }}
-                />
-            </div>
-        </div>
-    )
-}
-        `,
-        extFiles: {
-            'DockDemo.css': `
-/* DockDemo.css */
-.dock-demo .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url('https://primefaces.org/cdn/primereact/images/dock/window.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-.dock-demo .p-dock {
-    z-index: 1000;
-}  
-    `
-        }
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.
-                </p>
-            </DocSectionText>
-            <div className="card">
-                <div className="dock-window" style={{ backgroundImage: 'url(/images/dock/window.jpg)' }}>
-                    <Dock
-                        model={items}
-                        position={'bottom'}
-                        pt={{
-                            container: {
-                                style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                            }
-                        }}
-                    />
-                </div>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/dropdown/pt/ptdoc.js b/components/doc/dropdown/pt/ptdoc.js
deleted file mode 100644
index e5a2d68b02..0000000000
--- a/components/doc/dropdown/pt/ptdoc.js
+++ /dev/null
@@ -1,126 +0,0 @@
-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 PTDoc(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
-    value={selectedCity}
-    onChange={(e) => setSelectedCity(e.value)}
-    options={cities}
-    optionLabel="name"
-    placeholder="Select a City"
-    pt={{
-        root: { className: 'w-full md:w-14rem' },
-        item: ({ context }) => ({
-            className: context.selected ? 'bg-primary' : undefined
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Dropdown } from 'primereact/dropdown';
-
-export default function PTDemo() {
-    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
-                value={selectedCity}
-                onChange={(e) => setSelectedCity(e.value)}
-                options={cities}
-                optionLabel="name"
-                placeholder="Select a City"
-                pt={{
-                    root: { className: 'w-full md:w-14rem' },
-                    item: ({ context }) => ({
-                        className: context.selected ? 'bg-primary' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function PTDemo() {
-    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
-                value={selectedCity}
-                onChange={(e) => setSelectedCity(e.value)}
-                options={cities}
-                optionLabel="name"
-                placeholder="Select a City"
-                pt={{
-                    root: { className: 'w-full md:w-14rem' },
-                    item: ({ context }) => ({
-                        className: context.selected ? 'bg-primary' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Dropdown
-                    value={selectedCity}
-                    onChange={(e) => setSelectedCity(e.value)}
-                    options={cities}
-                    optionLabel="name"
-                    placeholder="Select a City"
-                    pt={{
-                        root: { className: 'w-full md:w-14rem' },
-                        item: ({ context }) => ({
-                            className: context.selected ? 'bg-primary' : undefined
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/editor/pt/ptdoc.js b/components/doc/editor/pt/ptdoc.js
deleted file mode 100644
index 4a5536977e..0000000000
--- a/components/doc/editor/pt/ptdoc.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Editor } from '@/components/lib/editor/Editor';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [text, setText] = useState('');
-
-    const code = {
-        basic: `
-<Editor
-    value={text}
-    onTextChange={(e) => setText(e.htmlValue)}
-    pt={{
-        content: { style: { height: '320px' } },
-        toolbar: { className: 'surface-ground' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Editor } from "primereact/editor";
-
-export default function PTDemo() {
-    const [text, setText] = useState('');
-
-    return (
-        <div className="card">
-            <Editor
-                value={text}
-                onTextChange={(e) => setText(e.htmlValue)}
-                pt={{
-                    content: { style: { height: '320px' } },
-                    toolbar: { className: 'surface-ground' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Editor, EditorTextChangeEvent } from "primereact/editor";
-
-export default function PTDemo() {
-    const [text, setText] = useState<string>('');
-
-    return (
-        <div className="card">
-            <Editor
-                value={text}
-                onTextChange={(e) => setText(e.htmlValue)}
-                pt={{
-                    content: { style: { height: '320px' } },
-                    toolbar: { className: 'surface-ground' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Editor
-                    value={text}
-                    onTextChange={(e) => setText(e.htmlValue)}
-                    pt={{
-                        content: { style: { height: '320px' } },
-                        toolbar: { className: 'surface-ground' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} dependencies={{ quill: '1.3.7' }} />
-        </>
-    );
-}
diff --git a/components/doc/fieldset/pt/ptdoc.js b/components/doc/fieldset/pt/ptdoc.js
deleted file mode 100644
index f7d64e559e..0000000000
--- a/components/doc/fieldset/pt/ptdoc.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Fieldset } from '@/components/lib/fieldset/Fieldset';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Fieldset
-    legend="Header"
-    toggleable
-    pt={{
-        legend: { className: 'bg-primary' },
-        legendTitle: { className: 'text-white' },
-        togglerIcon: { className: 'text-white' }
-    }}
-    >
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, suntin culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Fieldset>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Fieldset } from 'primereact/fieldset';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Fieldset
-            legend="Header"
-            toggleable
-            pt={{
-                legend: { className: 'bg-primary' },
-                legendTitle: { className: 'text-white' },
-                togglerIcon: { className: 'text-white' }
-            }}
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            </Fieldset>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Fieldset } from 'primereact/fieldset';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Fieldset
-            legend="Header"
-            toggleable
-            pt={{
-                legend: { className: 'bg-primary' },
-                legendTitle: { className: 'text-white' },
-                togglerIcon: { className: 'text-white' }
-            }}
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            </Fieldset>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Fieldset
-                    legend="Header"
-                    toggleable
-                    pt={{
-                        legend: { className: 'bg-primary' },
-                        legendTitle: { className: 'text-white' },
-                        togglerIcon: { className: 'text-white' }
-                    }}
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </Fieldset>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/fileupload/pt/ptdoc.js b/components/doc/fileupload/pt/ptdoc.js
deleted file mode 100644
index 5389c59d5e..0000000000
--- a/components/doc/fileupload/pt/ptdoc.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { FileUpload } from '@/components/lib/fileupload/FileUpload';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<FileUpload
-    name="demo[]"
-    url={'/api/upload'}
-    multiple
-    accept="image/*"
-    maxFileSize={1000000}
-    pt={{
-        content: { className: 'surface-ground' },
-        message: {
-            root: {
-                className: "w-1rem"
-            }
-        }
-    }}
-    emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>}
-/>
-        `,
-        javascript: `
-import React from 'react';
-import { FileUpload } from 'primereact/fileupload';
-
-export default function PTDemo() {
-        
-    return (
-        <div className="card">
-            <FileUpload
-                name="demo[]"
-                url={'/api/upload'}
-                multiple
-                accept="image/*"
-                maxFileSize={1000000}
-                pt={{
-                    content: { className: 'surface-ground' },
-                    message: {
-                        root: {
-                            className: "w-1rem"
-                        }
-                    }
-                }}
-                emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { Toast } from 'primereact/toast';
-import { FileUpload } from 'primereact/fileupload';
-
-export default function PTDemo() {
-        
-    return (
-        <div className="card">
-            <FileUpload
-                name="demo[]"
-                url={'/api/upload'}
-                multiple
-                accept="image/*"
-                maxFileSize={1000000}
-                pt={{
-                    content: { className: 'surface-ground' },
-                    message: {
-                        root: {
-                            className: "w-1rem"
-                        }
-                    }
-                }}
-                emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <FileUpload
-                    name="demo[]"
-                    url={'/api/upload'}
-                    multiple
-                    accept="image/*"
-                    maxFileSize={1000000}
-                    pt={{
-                        content: { className: 'surface-ground' },
-                        message: {
-                            root: {
-                                className: 'w-1rem'
-                            }
-                        }
-                    }}
-                    emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/galleria/pt/ptdoc.js b/components/doc/galleria/pt/ptdoc.js
deleted file mode 100644
index 4569135141..0000000000
--- a/components/doc/galleria/pt/ptdoc.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Galleria } from '@/components/lib/galleria/Galleria';
-import { useEffect, useState } from 'react';
-import { PhotoService } from '../../../../service/PhotoService';
-
-export function PTDoc(props) {
-    const [images, setImages] = useState(null);
-
-    const responsiveOptions = [
-        {
-            breakpoint: '991px',
-            numVisible: 4
-        },
-        {
-            breakpoint: '767px',
-            numVisible: 3
-        },
-        {
-            breakpoint: '575px',
-            numVisible: 1
-        }
-    ];
-
-    useEffect(() => {
-        PhotoService.getImages().then((data) => setImages(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const itemTemplate = (item) => {
-        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%' }} />;
-    };
-
-    const thumbnailTemplate = (item) => {
-        return <img src={item.thumbnailImageSrc} alt={item.alt} />;
-    };
-
-    const code = {
-        basic: `
-<Galleria
-    value={images}
-    responsiveOptions={responsiveOptions}
-    numVisible={5}
-    style={{ maxWidth: '640px' }}
-    item={itemTemplate}
-    thumbnail={thumbnailTemplate}
-    pt={{
-        root: { style: { maxWidth: '640px' } }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { Galleria } from 'primereact/galleria';
-import { PhotoService } from './service/PhotoService';
-
-export default function PTDemo() {
-    const [images, setImages] = useState(null);
-    const responsiveOptions = [
-        {
-            breakpoint: '991px',
-            numVisible: 4
-        },
-        {
-            breakpoint: '767px',
-            numVisible: 3
-        },
-        {
-            breakpoint: '575px',
-            numVisible: 1
-        }
-    ];
-
-    useEffect(() => {
-        PhotoService.getImages().then(data => setImages(data));
-    }, [])
-
-    const itemTemplate = (item) => {
-        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%' }} />
-    }
-
-    const thumbnailTemplate = (item) => {
-        return <img src={item.thumbnailImageSrc} alt={item.alt} />
-    }
-
-    return (
-        <div className="card">
-            <Galleria
-                value={images}
-                responsiveOptions={responsiveOptions}
-                numVisible={5}
-                style={{ maxWidth: '640px' }}
-                item={itemTemplate}
-                thumbnail={thumbnailTemplate}
-                pt={{
-                    root: { style: { maxWidth: '640px' } }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
-import { PhotoService } from './service/PhotoService';
-
-export default function PTDemo() {
-    const [images, setImages] = useState(null);
-    const responsiveOptions: GalleriaResponsiveOptions[] = [
-        {
-            breakpoint: '991px',
-            numVisible: 4
-        },
-        {
-            breakpoint: '767px',
-            numVisible: 3
-        },
-        {
-            breakpoint: '575px',
-            numVisible: 1
-        }
-    ];
-
-    useEffect(() => {
-        PhotoService.getImages().then(data => setImages(data));
-    }, []);
-
-    const itemTemplate = (item: any) => {
-        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%' }} />
-    }
-
-    const thumbnailTemplate = (item: any) => {
-        return <img src={item.thumbnailImageSrc} alt={item.alt} />
-    }
-
-    return (
-        <div className="card">
-            <Galleria
-                value={images}
-                responsiveOptions={responsiveOptions}
-                numVisible={5}
-                style={{ maxWidth: '640px' }}
-                item={itemTemplate}
-                thumbnail={thumbnailTemplate}
-                pt={{
-                    root: { style: { maxWidth: '640px' } }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Galleria
-                    value={images}
-                    responsiveOptions={responsiveOptions}
-                    numVisible={5}
-                    style={{ maxWidth: '640px' }}
-                    item={itemTemplate}
-                    thumbnail={thumbnailTemplate}
-                    pt={{
-                        root: { style: { maxWidth: '640px' } }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['PhotoService']} />
-        </>
-    );
-}
diff --git a/components/doc/iconfield/pt/ptdoc.js b/components/doc/iconfield/pt/ptdoc.js
deleted file mode 100644
index 781271232a..0000000000
--- a/components/doc/iconfield/pt/ptdoc.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputText } from '@/components/lib/inputtext/InputText';
-
-export function PTDoc(props) {
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <InputText
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    pt={{
-                        root: { className: 'border-primary-400' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/image/pt/ptdoc.js b/components/doc/image/pt/ptdoc.js
deleted file mode 100644
index 958e41c63a..0000000000
--- a/components/doc/image/pt/ptdoc.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Image } from '@/components/lib/image/Image';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Image
-    src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg"
-    alt="Image"
-    width="250"
-    preview
-    pt={{
-        image: { className: 'w-15rem' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Image } from 'primereact/image';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Image
-                src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg"
-                alt="Image"
-                width="250"
-                preview
-                pt={{
-                    image: { className: 'w-15rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Image } from 'primereact/image';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Image
-                src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg"
-                alt="Image"
-                width="250"
-                preview
-                pt={{
-                    image: { className: 'w-15rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Image
-                    src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg"
-                    alt="Image"
-                    width="250"
-                    preview
-                    pt={{
-                        image: { className: 'w-15rem' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/inplace/pt/ptdoc.js b/components/doc/inplace/pt/ptdoc.js
deleted file mode 100644
index 6f7e45121a..0000000000
--- a/components/doc/inplace/pt/ptdoc.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Inplace, InplaceContent, InplaceDisplay } from '@/components/lib/inplace/Inplace';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Inplace
-    pt={{
-        display: { className: 'bg-cyan-300' }
-    }}
->
-    <InplaceDisplay>View Content</InplaceDisplay>
-    <InplaceContent>
-        <p className="m-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
-    </InplaceContent>
-</Inplace>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Inplace } from 'primereact/inplace';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Inplace
-                pt={{
-                    display: { className: 'bg-cyan-300' }
-                }}
-            >
-                <InplaceDisplay>View Content</InplaceDisplay>
-                <InplaceContent>
-                    <p className="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                        laborum.
-                    </p>
-                </InplaceContent>
-            </Inplace>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Inplace } from 'primereact/inplace';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Inplace
-                pt={{
-                    display: { className: 'bg-cyan-300' }
-                }}
-            >
-                <InplaceDisplay>View Content</InplaceDisplay>
-                <InplaceContent>
-                    <p className="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                        laborum.
-                    </p>
-                </InplaceContent>
-            </Inplace>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Inplace
-                    pt={{
-                        display: { className: 'bg-cyan-300' }
-                    }}
-                >
-                    <InplaceDisplay>View Content</InplaceDisplay>
-                    <InplaceContent>
-                        <p className="m-0">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                            laborum.
-                        </p>
-                    </InplaceContent>
-                </Inplace>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/inputmask/pt/ptdoc.js b/components/doc/inputmask/pt/ptdoc.js
deleted file mode 100644
index b74edd3049..0000000000
--- a/components/doc/inputmask/pt/ptdoc.js
+++ /dev/null
@@ -1,98 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState('');
-
-    const code = {
-        basic: `
-<InputMask
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    mask="99-999999"
-    placeholder="99-999999"
-    pt={{
-        input: {
-            root: {
-                className: 'border-teal-400'
-            }
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { InputMask } from "primereact/inputmask";
-
-export default function PTDemo() {
-    const [value, setValue] = useState('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputMask
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                mask="99-999999"
-                placeholder="99-999999"
-                pt={{
-                    input: {
-                        root: {
-                            className: 'border-teal-400'
-                        }
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
-
-export default function PTDemo() {
-    const [value, setValue] = useState<string>('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputMask
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                mask="99-999999"
-                placeholder="99-999999"
-                pt={{
-                    input: {
-                        root: {
-                            className: 'border-teal-400'
-                        }
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <InputMask
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    mask="99-999999"
-                    placeholder="99-999999"
-                    pt={{
-                        root: {
-                            className: 'border-teal-400'
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/inputnumber/pt/ptdoc.js b/components/doc/inputnumber/pt/ptdoc.js
deleted file mode 100644
index a3ea33023b..0000000000
--- a/components/doc/inputnumber/pt/ptdoc.js
+++ /dev/null
@@ -1,120 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState(20);
-
-    const code = {
-        basic: `
-<InputNumber
-    inputId="horizontal-buttons"
-    value={value}
-    onValueChange={(e) => setValue(e.value)}
-    showButtons
-    buttonLayout="horizontal"
-    step={0.25}
-    decrementButtonClassName="p-button-danger"
-    incrementButtonClassName="p-button-success"
-    incrementButtonIcon="pi pi-plus"
-    decrementButtonIcon="pi pi-minus"
-    mode="currency"
-    currency="EUR"
-    pt={{
-        incrementButton: { className: 'bg-teal-500 border-teal-500' },
-        decrementButton: { className: 'bg-orange-500 border-orange-500' }
-    }}
-/>
-`,
-        javascript: `
-import React, { useState } from "react";
-import { InputNumber } from 'primereact/inputnumber';
-
-export default function PTDemo() {
-    const [value, setValue] = useState(20);
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputNumber
-                inputId="horizontal-buttons"
-                value={value}
-                onValueChange={(e) => setValue(e.value)}
-                showButtons
-                buttonLayout="horizontal"
-                step={0.25}
-                decrementButtonClassName="p-button-danger"
-                incrementButtonClassName="p-button-success"
-                incrementButtonIcon="pi pi-plus"
-                decrementButtonIcon="pi pi-minus"
-                mode="currency"
-                currency="EUR"
-                pt={{
-                    incrementButton: { className: 'bg-teal-500 border-teal-500' },
-                    decrementButton: { className: 'bg-orange-500 border-orange-500' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
-
-export default function PTDemo() {
-    const [value, setValue] = useState<number>(20);
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputNumber
-                inputId="horizontal-buttons"
-                value={value}
-                onValueChange={(e) => setValue(e.value)}
-                showButtons
-                buttonLayout="horizontal"
-                step={0.25}
-                decrementButtonClassName="p-button-danger"
-                incrementButtonClassName="p-button-success"
-                incrementButtonIcon="pi pi-plus"
-                decrementButtonIcon="pi pi-minus"
-                mode="currency"
-                currency="EUR"
-                pt={{
-                    incrementButton: { className: 'bg-teal-500 border-teal-500' },
-                    decrementButton: { className: 'bg-orange-500 border-orange-500' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <InputNumber
-                    inputId="horizontal-buttons"
-                    value={value}
-                    onValueChange={(e) => setValue(e.value)}
-                    showButtons
-                    buttonLayout="horizontal"
-                    step={0.25}
-                    decrementButtonClassName="p-button-danger"
-                    incrementButtonClassName="p-button-success"
-                    incrementButtonIcon="pi pi-plus"
-                    decrementButtonIcon="pi pi-minus"
-                    mode="currency"
-                    currency="EUR"
-                    pt={{
-                        incrementButton: { className: 'bg-teal-500 border-teal-500' },
-                        decrementButton: { className: 'bg-orange-500 border-orange-500' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/inputswitch/pt/ptdoc.js b/components/doc/inputswitch/pt/ptdoc.js
deleted file mode 100644
index fe808de53e..0000000000
--- a/components/doc/inputswitch/pt/ptdoc.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [checked, setChecked] = useState(false);
-
-    const code = {
-        basic: `
-<InputSwitch
-    checked={checked}
-    onChange={(e) => setChecked(e.value)}
-    pt={{
-        slider: ({ props }) => ({
-            className: props.checked ? 'bg-teal-400' : 'bg-red-400'
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { InputSwitch } from "primereact/inputswitch";
-
-export default function PTDemo() {
-    const [checked, setChecked] = useState(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputSwitch
-                checked={checked}
-                onChange={(e) => setChecked(e.value)}
-                pt={{
-                    slider: ({ props }) => ({
-                        className: props.checked ? 'bg-teal-400' : 'bg-red-400'
-                    })
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch";
-
-export default function PTDemo() {
-    const [checked, setChecked] = useState<boolean>(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputSwitch
-                checked={checked}
-                onChange={(e) => setChecked(e.value)}
-                pt={{
-                    slider: ({ props }) => ({
-                        className: props.checked ? 'bg-teal-400' : 'bg-red-400'
-                    })
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <InputSwitch
-                    checked={checked}
-                    onChange={(e) => setChecked(e.value)}
-                    pt={{
-                        slider: ({ props }) => ({
-                            className: props.checked ? 'bg-teal-400' : 'bg-red-400'
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/inputtext/pt/ptdoc.js b/components/doc/inputtext/pt/ptdoc.js
deleted file mode 100644
index 00b97c9e8e..0000000000
--- a/components/doc/inputtext/pt/ptdoc.js
+++ /dev/null
@@ -1,80 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState('');
-
-    const code = {
-        basic: `
-<InputText
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    pt={{
-        root: { className: 'border-primary-400' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { InputText } from "primereact/inputtext";
-
-export default function PTDemo() {
-    const [value, setValue] = useState('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputText
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                pt={{
-                    root: { className: 'border-primary-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { InputText } from "primereact/inputtext";
-
-export default function PTDemo() {
-    const [value, setValue] = useState<string>('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputText
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                pt={{
-                    root: { className: 'border-primary-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <InputText
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    pt={{
-                        root: { className: 'border-primary-400' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/inputtextarea/pt/ptdoc.js b/components/doc/inputtextarea/pt/ptdoc.js
deleted file mode 100644
index 492f002661..0000000000
--- a/components/doc/inputtextarea/pt/ptdoc.js
+++ /dev/null
@@ -1,88 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState('');
-
-    const code = {
-        basic: `
-<InputTextarea
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    pt={{
-        root: {
-            rows: 5,
-            cols: 30
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { InputTextarea } from "primereact/inputtextarea";
-
-export default function PTDemo() {
-    const [value, setValue] = useState('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputTextarea
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                pt={{
-                    root: {
-                        rows: 5,
-                        cols: 30
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { InputTextarea } from "primereact/inputtextarea";
-
-export default function PTDemo() {
-    const [value, setValue] = useState<string>('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <InputTextarea
-                value={value}
-                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}
-                pt={{
-                    root: {
-                        rows: 5,
-                        cols: 30
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <InputTextarea
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    pt={{
-                        root: {
-                            rows: 5,
-                            cols: 30
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/knob/pt/ptdoc.js b/components/doc/knob/pt/ptdoc.js
deleted file mode 100644
index ffe01af20c..0000000000
--- a/components/doc/knob/pt/ptdoc.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Knob } from '@/components/lib/knob/Knob';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [value, setValue] = useState(0);
-
-    const code = {
-        basic: `
-<Knob
-    value={value}
-    onChange={(e) => setValue(e.value)}
-    pt={{
-        value: { style: { stroke: 'var(--cyan-500)' } }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Knob } from 'primereact/knob';
-
-export default function PTDemo() {
-    const [value, setValue] = useState(0);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Knob
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    value: { style: { stroke: 'var(--cyan-500)' } }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Knob, KnobChangeEvent } from 'primereact/knob';
-
-export default function PTDemo() {
-    const [value, setValue] = useState<number>(0);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Knob
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    value: { style: { stroke: 'var(--cyan-500)' } }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Knob
-                    value={value}
-                    onChange={(e) => setValue(e.value)}
-                    pt={{
-                        value: { style: { stroke: 'var(--cyan-500)' } }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/listbox/pt/ptdoc.js b/components/doc/listbox/pt/ptdoc.js
deleted file mode 100644
index 3ecfaca9c9..0000000000
--- a/components/doc/listbox/pt/ptdoc.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { ListBox } from '@/components/lib/listbox/ListBox';
-import { useState } from 'react';
-
-export function PTDoc(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: `
-<ListBox
-    value={selectedCity}
-    onChange={(e) => setSelectedCity(e.value)}
-    options={cities}
-    optionLabel="name"
-    pt={{
-        root: { className: 'w-full md:w-14rem' },
-        item: ({ context }) => ({
-            className: context.selected ? 'bg-primary' : undefined
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { ListBox } from 'primereact/listbox';
-
-export default function PTDemo() {
-    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">
-            <ListBox
-                value={selectedCity}
-                onChange={(e) => setSelectedCity(e.value)}
-                options={cities}
-                optionLabel="name"
-                pt={{
-                    root: { className: 'w-full md:w-14rem' },
-                    item: ({ context }) => ({
-                        className: context.selected ? 'bg-primary' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
-
-interface City {
-    name: string;
-    code: string;
-} 
-
-export default function PTDemo() {
-    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">
-            <ListBox
-                value={selectedCity}
-                onChange={(e: ListBoxChangeEvent) => setSelectedCity(e.value)}
-                options={cities}
-                optionLabel="name"
-                pt={{
-                    root: { className: 'w-full md:w-14rem' },
-                    item: ({ context }) => ({
-                        className: context.selected ? 'bg-primary' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <ListBox
-                    value={selectedCity}
-                    onChange={(e) => setSelectedCity(e.value)}
-                    options={cities}
-                    optionLabel="name"
-                    pt={{
-                        root: { className: 'w-full md:w-14rem' },
-                        item: ({ context }) => ({
-                            className: context.selected ? 'bg-primary' : undefined
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/megamenu/pt/ptdoc.js b/components/doc/megamenu/pt/ptdoc.js
deleted file mode 100644
index 854fcd0260..0000000000
--- a/components/doc/megamenu/pt/ptdoc.js
+++ /dev/null
@@ -1,408 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { MegaMenu } from '@/components/lib/megamenu/MegaMenu';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'Videos',
-            icon: 'pi pi-fw pi-video',
-            items: [
-                [
-                    {
-                        label: 'Video 1',
-                        items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                    },
-                    {
-                        label: 'Video 2',
-                        items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Video 3',
-                        items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                    },
-                    {
-                        label: 'Video 4',
-                        items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-users',
-            items: [
-                [
-                    {
-                        label: 'User 1',
-                        items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                    },
-                    {
-                        label: 'User 2',
-                        items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'User 3',
-                        items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                    },
-                    {
-                        label: 'User 4',
-                        items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'User 5',
-                        items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                    },
-                    {
-                        label: 'User 6',
-                        items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                [
-                    {
-                        label: 'Event 1',
-                        items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                    },
-                    {
-                        label: 'Event 2',
-                        items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Event 3',
-                        items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                    },
-                    {
-                        label: 'Event 4',
-                        items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Settings',
-            icon: 'pi pi-fw pi-cog',
-            items: [
-                [
-                    {
-                        label: 'Setting 1',
-                        items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                    },
-                    {
-                        label: 'Setting 2',
-                        items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                    },
-                    {
-                        label: 'Setting 3',
-                        items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Technology 4',
-                        items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                    }
-                ]
-            ]
-        }
-    ];
-    const code = {
-        basic: `
-<MegaMenu
-    model={items}
-    pt={{
-        headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-    }}
-/>
-`,
-        javascript: `
-import React from 'react';
-import { MegaMenu } from 'primereact/megamenu';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'Videos', icon: 'pi pi-fw pi-video',
-            items: [
-                [
-                    {
-                        label: 'Video 1',
-                        items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                    },
-                    {
-                        label: 'Video 2',
-                        items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Video 3',
-                        items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                    },
-                    {
-                        label: 'Video 4',
-                        items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Users', icon: 'pi pi-fw pi-users',
-            items: [
-                [
-                    {
-                        label: 'User 1',
-                        items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                    },
-                    {
-                        label: 'User 2',
-                        items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                    },
-                ],
-                [
-                    {
-                        label: 'User 3',
-                        items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                    },
-                    {
-                        label: 'User 4',
-                        items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'User 5',
-                        items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                    },
-                    {
-                        label: 'User 6',
-                        items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Events', icon: 'pi pi-fw pi-calendar',
-            items: [
-                [
-                    {
-                        label: 'Event 1',
-                        items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                    },
-                    {
-                        label: 'Event 2',
-                        items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Event 3',
-                        items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                    },
-                    {
-                        label: 'Event 4',
-                        items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Settings', icon: 'pi pi-fw pi-cog',
-            items: [
-                [
-                    {
-                        label: 'Setting 1',
-                        items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                    },
-                    {
-                        label: 'Setting 2',
-                        items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                    },
-                    {
-                        label: 'Setting 3',
-                        items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Technology 4',
-                        items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                    }
-                ]
-            ]
-        }
-    ];
-
-    return (
-        <div className="card">
-            <MegaMenu
-                model={items}
-                pt={{
-                    headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { MegaMenu } from 'primereact/megamenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'Videos', icon: 'pi pi-fw pi-video',
-            items: [
-                [
-                    {
-                        label: 'Video 1',
-                        items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                    },
-                    {
-                        label: 'Video 2',
-                        items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Video 3',
-                        items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                    },
-                    {
-                        label: 'Video 4',
-                        items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Users', icon: 'pi pi-fw pi-users',
-            items: [
-                [
-                    {
-                        label: 'User 1',
-                        items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                    },
-                    {
-                        label: 'User 2',
-                        items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                    },
-                ],
-                [
-                    {
-                        label: 'User 3',
-                        items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                    },
-                    {
-                        label: 'User 4',
-                        items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'User 5',
-                        items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                    },
-                    {
-                        label: 'User 6',
-                        items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Events', icon: 'pi pi-fw pi-calendar',
-            items: [
-                [
-                    {
-                        label: 'Event 1',
-                        items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                    },
-                    {
-                        label: 'Event 2',
-                        items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Event 3',
-                        items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                    },
-                    {
-                        label: 'Event 4',
-                        items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                    }
-                ]
-            ]
-        },
-        {
-            label: 'Settings', icon: 'pi pi-fw pi-cog',
-            items: [
-                [
-                    {
-                        label: 'Setting 1',
-                        items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                    },
-                    {
-                        label: 'Setting 2',
-                        items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                    },
-                    {
-                        label: 'Setting 3',
-                        items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                    }
-                ],
-                [
-                    {
-                        label: 'Technology 4',
-                        items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                    }
-                ]
-            ]
-        }
-    ];
-
-    return (
-        <div className="card">
-            <MegaMenu
-                model={items}
-                pt={{
-                    headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <MegaMenu
-                    model={items}
-                    pt={{
-                        headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/mention/pt/ptdoc.js b/components/doc/mention/pt/ptdoc.js
deleted file mode 100644
index 592204ddeb..0000000000
--- a/components/doc/mention/pt/ptdoc.js
+++ /dev/null
@@ -1,263 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Mention } from '@/components/lib/mention/Mention';
-import { useEffect, useState } from 'react';
-import { CustomerService } from '../../../../service/CustomerService';
-
-export function PTDoc(props) {
-    const [value, setValue] = useState('');
-    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" />
-                <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: `
-<Mention
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    suggestions={suggestions}
-    onSearch={onSearch}
-    field="nickname"
-    placeholder="Enter @ to mention people"
-    rows={5}
-    cols={40}
-    itemTemplate={itemTemplate}
-    autoResize
-    pt={{
-        items: { className: 'bg-orange-400' },
-        item: { className: 'font-bold' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState, useEffect } from "react";
-import { Mention } from 'primereact/mention';
-import { CustomerService } from './service/CustomerService';
-
-export default function BasicDemo() {
-    const [value, setValue] = useState('');
-    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" />
-                <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">
-            <Mention
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                suggestions={suggestions}
-                onSearch={onSearch}
-                field="nickname"
-                placeholder="Enter @ to mention people"
-                rows={5}
-                cols={40}
-                itemTemplate={itemTemplate}
-                autoResize
-                pt={{
-                    items: { className: 'bg-orange-400' },
-                    item: { className: 'font-bold' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from "react";
-import { Mention, MentionSearchEvent } from 'primereact/mention';
-import { CustomerService } from './service/CustomerService';
-
-export default function BasicDemo() {
-    const [value, setValue] = useState<string>('');
-    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: MentionSearchEvent) => {
-        //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: any) => {
-        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">
-            <Mention
-                value={value}
-                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}
-                suggestions={suggestions}
-                onSearch={onSearch}
-                field="nickname"
-                placeholder="Enter @ to mention people"
-                rows={5}
-                cols={40}
-                itemTemplate={itemTemplate}
-                autoResize
-                pt={{
-                    items: { className: 'bg-orange-400' },
-                    item: { className: 'font-bold' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        data: `
-/* CustomerService */ 
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-       `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Mention
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    suggestions={suggestions}
-                    onSearch={onSearch}
-                    field="nickname"
-                    placeholder="Enter @ to mention people"
-                    rows={5}
-                    cols={40}
-                    itemTemplate={itemTemplate}
-                    autoResize
-                    pt={{
-                        items: { className: 'bg-orange-400' },
-                        item: { className: 'font-bold' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['CustomerService']} />
-        </>
-    );
-}
diff --git a/components/doc/menu/pt/ptdoc.js b/components/doc/menu/pt/ptdoc.js
deleted file mode 100644
index 623828401a..0000000000
--- a/components/doc/menu/pt/ptdoc.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Menu } from '@/components/lib/menu/Menu';
-import { Toast } from '@/components/lib/toast/Toast';
-import { useRouter } from 'next/router';
-import { useRef } from 'react';
-
-export function PTDoc(props) {
-    const toast = useRef(null);
-    const router = useRouter();
-    const items = [
-        {
-            label: 'Options',
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: () => {
-                        toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                }
-            ]
-        },
-        {
-            label: 'Navigate',
-            items: [
-                {
-                    label: 'React Website',
-                    icon: 'pi pi-external-link',
-                    url: 'https://reactjs.org/'
-                },
-                {
-                    label: 'Router',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        router.push('/fileupload');
-                    }
-                }
-            ]
-        }
-    ];
-
-    const code = {
-        basic: `
-<Menu
-    model={items}
-    pt={{
-        submenuHeader: { className: 'text-primary' }
-    }}
-/>
-`,
-        javascript: `
-import React, { useRef } from 'react';
-import { useRouter } from 'next/router';
-import { Menu } from 'primereact/menu';
-import { Toast } from 'primereact/toast';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'Options',
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: () => {
-                        toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                }
-            ]
-        },
-        {
-            label: 'Navigate',
-            items: [
-                {
-                    label: 'React Website',
-                    icon: 'pi pi-external-link',
-                    url: 'https://reactjs.org/'
-                },
-                {
-                    label: 'Router',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        router.push('/fileupload');
-                    }
-                }
-            ]
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <Toast ref={toast} />
-            <Menu
-                model={items}
-                pt={{
-                    submenuHeader: { className: 'text-primary' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { useRouter } from 'next/router';
-import { Menu } from 'primereact/menu';
-import { MenuItem } from 'primereact/menuitem';
-import { Toast } from 'primereact/toast';        
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'Options',
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: () => {
-                        toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                }
-            ]
-        },
-        {
-            label: 'Navigate',
-            items: [
-                {
-                    label: 'React Website',
-                    icon: 'pi pi-external-link',
-                    url: 'https://reactjs.org/'
-                },
-                {
-                    label: 'Router',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        router.push('/fileupload');
-                    }
-                }
-            ]
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <Toast ref={toast} />
-            <Menu
-                model={items}
-                pt={{
-                    submenuHeader: { className: 'text-primary' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Toast ref={toast} />
-                <Menu
-                    model={items}
-                    pt={{
-                        submenuHeader: { className: 'text-primary' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/menubar/pt/ptdoc.js b/components/doc/menubar/pt/ptdoc.js
deleted file mode 100644
index 1632dad44f..0000000000
--- a/components/doc/menubar/pt/ptdoc.js
+++ /dev/null
@@ -1,454 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Menubar } from '@/components/lib/menubar/Menubar';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    const code = {
-        basic: `
-<Menubar
-    model={items}
-    pt={{
-        action: ({ props, state, context }) => ({
-            className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-        })
-    }}
-/>   
-`,
-        javascript: `
-import React from 'react'; 
-import { Menubar } from 'primereact/menubar';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        },
-
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                },
-
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus',
-
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus',
-
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card relative z-2">
-            <Menubar
-                model={items}
-                pt={{
-                    action: ({ props, state, context }) => ({
-                        className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Menubar } from 'primereact/menubar';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        },
-
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                },
-
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus',
-
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus',
-
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-    
-    return (
-        <div className="card relative z-2">
-            <Menubar
-                model={items}
-                pt={{
-                    action: ({ props, state, context }) => ({
-                        className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card relative z-2">
-                <Menubar
-                    model={items}
-                    pt={{
-                        action: ({ props, state, context }) => ({
-                            className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/message/pt/ptdoc.js b/components/doc/message/pt/ptdoc.js
deleted file mode 100644
index 9797959510..0000000000
--- a/components/doc/message/pt/ptdoc.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Message } from '@/components/lib/message/Message';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Message
-    text="Message Content"
-    pt={{
-        root: { className: 'bg-yellow-100' },
-        icon: { className: 'hidden' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Message } from 'primereact/message';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Message
-                text="Message Content"
-                pt={{
-                    root: { className: 'bg-yellow-100' },
-                    icon: { className: 'hidden' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Message } from 'primereact/message';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Message
-                text="Message Content"
-                pt={{
-                    root: { className: 'bg-yellow-100' },
-                    icon: { className: 'hidden' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Message
-                    text="Message Content"
-                    pt={{
-                        root: { className: 'bg-yellow-100' },
-                        icon: { className: 'hidden' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/messages/pt/ptdoc.js b/components/doc/messages/pt/ptdoc.js
deleted file mode 100644
index 6c3bc12177..0000000000
--- a/components/doc/messages/pt/ptdoc.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { useMountEffect } from '@/components/lib/hooks/Hooks';
-import { Messages } from '@/components/lib/messages/Messages';
-import { useRef } from 'react';
-
-export function PTDoc(props) {
-    const msgs = useRef(null);
-
-    useMountEffect(() => {
-        msgs.current && msgs.current.show([{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }]);
-    });
-
-    const code = {
-        basic: `
-<Messages
-    ref={msgs}
-    pt={{
-        wrapper: { className: 'bg-yellow-100' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useEffect, useRef } from 'react'; 
-import { useMountEffect } from 'primereact/hooks';
-import { Messages } from 'primereact/messages';
-
-export default function PTDemo() {
-    const msgs = useRef(null);
-
-    useMountEffect(() => {
-        msgs.current && msgs.current.show([
-            { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }
-        ]);
-    });
-
-    return (
-        <div className="card">
-            <Messages
-                ref={msgs}
-                pt={{
-                    wrapper: { className: 'bg-yellow-100' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useEffect, useRef } from 'react'; 
-import { useMountEffect } from 'primereact/hooks';
-import { Messages } from 'primereact/messages';
-
-export default function PTDemo() {
-    const msgs = useRef(null);
-
-    useMountEffect(() => {
-        msgs.current && msgs.current.show([
-            { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }
-        ]);
-    });
-
-    return (
-        <div className="card">
-            <Messages
-                ref={msgs}
-                pt={{
-                    wrapper: { className: 'bg-yellow-100' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Messages
-                    ref={msgs}
-                    pt={{
-                        wrapper: { className: 'bg-yellow-100' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/metergroup/pt/ptdoc.js b/components/doc/metergroup/pt/ptdoc.js
deleted file mode 100644
index 1632dad44f..0000000000
--- a/components/doc/metergroup/pt/ptdoc.js
+++ /dev/null
@@ -1,454 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Menubar } from '@/components/lib/menubar/Menubar';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    const code = {
-        basic: `
-<Menubar
-    model={items}
-    pt={{
-        action: ({ props, state, context }) => ({
-            className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-        })
-    }}
-/>   
-`,
-        javascript: `
-import React from 'react'; 
-import { Menubar } from 'primereact/menubar';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        },
-
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                },
-
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus',
-
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus',
-
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card relative z-2">
-            <Menubar
-                model={items}
-                pt={{
-                    action: ({ props, state, context }) => ({
-                        className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Menubar } from 'primereact/menubar';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        },
-
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                },
-
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus',
-
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus',
-
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-    
-    return (
-        <div className="card relative z-2">
-            <Menubar
-                model={items}
-                pt={{
-                    action: ({ props, state, context }) => ({
-                        className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card relative z-2">
-                <Menubar
-                    model={items}
-                    pt={{
-                        action: ({ props, state, context }) => ({
-                            className: context.active ? 'bg-primary-200 border-round-sm' : undefined
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/multiselect/pt/ptdoc.js b/components/doc/multiselect/pt/ptdoc.js
deleted file mode 100644
index 465d6ba9fe..0000000000
--- a/components/doc/multiselect/pt/ptdoc.js
+++ /dev/null
@@ -1,171 +0,0 @@
-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 PTDoc(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)}
-    showClear={true}
-    options={cities}
-    display="chip"
-    optionLabel="name"
-    placeholder="Select Cities"
-    maxSelectedLabels={3}
-    inputId="multiselect"
-    pt={{
-        root: { className: 'w-full md:w-20rem' },
-        item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
-        token: ({ context }) => {
-            switch (context.value.code) {
-                case 'NY':
-                    return 'bg-red-300';
-                case 'RM':
-                    return 'bg-green-300';
-            }
-            return 'bg-gray-100';
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { MultiSelect } from 'primereact/multiselect';
-
-export default function PTDemo() {
-    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)}
-                showClear={true}
-                options={cities}
-                display="chip"
-                optionLabel="name"
-                placeholder="Select Cities"
-                maxSelectedLabels={3}
-                inputId="multiselect"
-                pt={{
-                    root: { className: 'w-full md:w-20rem' },
-                    item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
-                    token: ({ context }) => {
-                        switch (context.value.code) {
-                            case 'NY':
-                                return 'bg-red-300';
-                            case 'RM':
-                                return 'bg-green-300';
-                        }
-                        return 'bg-gray-100';
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
-
-interface City {
-    name: string;
-    code: string;
-}
-
-export default function PTDemo() {
-    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)}
-                showClear={true}
-                options={cities}
-                display="chip"
-                optionLabel="name"
-                placeholder="Select Cities"
-                maxSelectedLabels={3}
-                inputId="multiselect"
-                pt={{
-                    root: { className: 'w-full md:w-20rem' },
-                    item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
-                    token: ({ context }) => {
-                        switch (context.value.code) {
-                            case 'NY':
-                                return 'bg-red-300';
-                            case 'RM':
-                                return 'bg-green-300';
-                        }
-                        return 'bg-gray-100';
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <MultiSelect
-                    value={selectedCities}
-                    onChange={(e) => setSelectedCities(e.value)}
-                    showClear={true}
-                    options={cities}
-                    display="chip"
-                    optionLabel="name"
-                    placeholder="Select Cities"
-                    maxSelectedLabels={3}
-                    inputId="multiselect"
-                    pt={{
-                        root: { className: 'w-full md:w-20rem' },
-                        item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
-                        token: ({ context }) => {
-                            switch (context.value.code) {
-                                case 'NY':
-                                    return 'bg-red-300';
-                                case 'RM':
-                                    return 'bg-green-300';
-                            }
-
-                            return 'bg-gray-100';
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/multistatecheckbox/pt/ptdoc.js b/components/doc/multistatecheckbox/pt/ptdoc.js
deleted file mode 100644
index b025875313..0000000000
--- a/components/doc/multistatecheckbox/pt/ptdoc.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { MultiStateCheckbox } from '@/components/lib/multistatecheckbox/MultiStateCheckbox';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [value, setValue] = useState('public');
-    const options = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    const code = {
-        basic: `
-<MultiStateCheckbox
-    value={value}
-    onChange={(e) => setValue(e.value)}
-    options={options}
-    optionValue="value"
-    pt={{
-        checkbox: {
-            className: value ? 'bg-orange-400 border-orange-400' : undefined
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
-
-export default function PTDemo() {
-    const [value, setValue] = useState('public');
-    const options = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    return (
-        <div className="card flex flex-column align-items-center gap-3">
-            <MultiStateCheckbox
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                options={options}
-                optionValue="value"
-                pt={{
-                    checkbox: {
-                        className: value ? 'bg-orange-400 border-orange-400' : undefined
-                    }
-                }}
-            />
-            <span>{value || 'no value'}</span>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { MultiStateCheckbox, MultiStateCheckboxChangeEvent } from 'primereact/multistatecheckbox';
-
-interface Item {
-    value: string;
-    icon: string;
-}
-
-export default function PTDemo() {
-    const [value, setValue] = useState<string>('public');
-    const options: Item[] = [
-        { value: 'public', icon: 'pi pi-globe' },
-        { value: 'protected', icon: 'pi pi-lock-open' },
-        { value: 'private', icon: 'pi pi-lock' }
-    ];
-
-    return (
-        <div className="card flex flex-column align-items-center gap-3">
-            <MultiStateCheckbox
-                value={value}
-                onChange={(e: MultiStateCheckboxChangeEvent) => setValue(e.value)}
-                options={options}
-                optionValue="value"
-                pt={{
-                    checkbox: {
-                        className: value ? 'bg-orange-400 border-orange-400' : undefined
-                    }
-                }}
-            />
-            <span>{value || 'no value'}</span>
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex flex-column align-items-center gap-3">
-                <MultiStateCheckbox
-                    value={value}
-                    onChange={(e) => setValue(e.value)}
-                    options={options}
-                    optionValue="value"
-                    pt={{
-                        checkbox: {
-                            className: value ? 'bg-orange-400 border-orange-400' : undefined
-                        }
-                    }}
-                />
-                <span>{value || 'no value'}</span>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/orderlist/pt/ptdoc.js b/components/doc/orderlist/pt/ptdoc.js
deleted file mode 100644
index 1dd8ae5ea7..0000000000
--- a/components/doc/orderlist/pt/ptdoc.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { OrderList } from '@/components/lib/orderlist/OrderList';
-import { useEffect, useState } from 'react';
-import { ProductService } from '../../../../service/ProductService';
-
-export function PTDoc(props) {
-    const [products, setProducts] = useState([]);
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setProducts(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const itemTemplate = (item) => {
-        return (
-            <div className="flex flex-wrap p-2 align-items-center gap-3">
-                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
-                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
-                    <span className="font-bold">{item.name}</span>
-                    <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm" />
-                        <span>{item.category}</span>
-                    </div>
-                </div>
-                <span className="font-bold text-900">${item.price}</span>
-            </div>
-        );
-    };
-
-    const code = {
-        basic: `
-<OrderList
-    dataKey="id" 
-    value={products}
-    onChange={(e) => setProducts(e.value)}
-    itemTemplate={itemTemplate}
-    header="Products"
-    pt={{
-        list: { style: { height: 'auto' } },
-        moveUpButton: {
-            root: { className: 'bg-teal-400 border-teal-400' }
-        },
-        item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-    }}
-></OrderList>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { OrderList } from 'primereact/orderlist';
-import { ProductService } from './service/ProductService';
-
-export default function PTDemo() {
-    const [products, setProducts] = useState([]);
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setProducts(data));
-    }, []);
-
-    const itemTemplate = (item) => {
-        return (
-            <div className="flex flex-wrap p-2 align-items-center gap-3">
-                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
-                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
-                    <span className="font-bold">{item.name}</span>
-                    <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
-                        <span>{item.category}</span>
-                    </div>
-                </div>
-                <span className="font-bold text-900">\${item.price}</span>
-            </div>
-        );
-    };
-    
-    return (
-        <div className="card xl:flex xl:justify-content-center">
-            <OrderList
-                dataKey="id" 
-                value={products}
-                onChange={(e) => setProducts(e.value)}
-                itemTemplate={itemTemplate}
-                header="Products"
-                pt={{
-                    list: { style: { height: 'auto' } },
-                    moveUpButton: {
-                        root: { className: 'bg-teal-400 border-teal-400' }
-                    },
-                    item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-                }}
-            ></OrderList>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { OrderList } from 'primereact/orderlist';
-import { ProductService } from './service/ProductService';
-
-interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: 'string',
-    rating: number;
-}
-
-export default function PTDemo() {
-    const [products, setProducts] = useState<Product[]>([]);
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setProducts(data));
-    }, []);
-
-    const itemTemplate = (item: Product) => {
-        return (
-            <div className="flex flex-wrap p-2 align-items-center gap-3">
-                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
-                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
-                    <span className="font-bold">{item.name}</span>
-                    <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
-                        <span>{item.category}</span>
-                    </div>
-                </div>
-                <span className="font-bold text-900">\${item.price}</span>
-            </div>
-        );
-    };
-    
-    return (
-        <div className="card xl:flex xl:justify-content-center">
-            <OrderList
-                dataKey="id" 
-                value={products}
-                onChange={(e) => setProducts(e.value)}
-                itemTemplate={itemTemplate}
-                header="Products"
-                pt={{
-                    list: { style: { height: 'auto' } },
-                    moveUpButton: {
-                        root: { className: 'bg-teal-400 border-teal-400' }
-                    },
-                    item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-                }}
-            ></OrderList>
-        </div>
-    )
-}
-        `,
-        data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card xl:flex xl:justify-content-center">
-                <OrderList
-                    dataKey="id"
-                    value={products}
-                    onChange={(e) => setProducts(e.value)}
-                    itemTemplate={itemTemplate}
-                    header="Products"
-                    pt={{
-                        list: { style: { height: 'auto' } },
-                        moveUpButton: {
-                            root: { className: 'bg-teal-400 border-teal-400' }
-                        },
-                        item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['ProductService']} />
-        </>
-    );
-}
diff --git a/components/doc/organizationchart/pt/ptdoc.js b/components/doc/organizationchart/pt/ptdoc.js
deleted file mode 100644
index f93fd6b9a6..0000000000
--- a/components/doc/organizationchart/pt/ptdoc.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { OrganizationChart } from '@/components/lib/organizationchart/OrganizationChart';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [selection, setSelection] = useState([]);
-    const [data] = useState([
-        {
-            label: 'Argentina',
-            expanded: true,
-            children: [
-                {
-                    label: 'Argentina',
-                    expanded: true,
-                    children: [
-                        {
-                            label: 'Argentina'
-                        },
-                        {
-                            label: 'Croatia'
-                        }
-                    ]
-                },
-                {
-                    label: 'France',
-                    expanded: true,
-                    children: [
-                        {
-                            label: 'France'
-                        },
-                        {
-                            label: 'Morocco'
-                        }
-                    ]
-                }
-            ]
-        }
-    ]);
-
-    const code = {
-        basic: `
-<OrganizationChart
-    value={data}
-    selectionMode="single"
-    selection={selection}
-    onSelectionChange={(e) => setSelection(e.data)}
-    pt={{
-        node: ({ context }) => ({
-            className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from 'react';
-import { OrganizationChart } from 'primereact/organizationchart';
-
-export default function PTDemo() {
-    const [selection, setSelection] = useState([]);
-    const [data] = useState([
-        {
-            label: 'Argentina',
-            expanded: true,
-            children: [
-                {
-                    label: 'Argentina',
-                    expanded: true,
-                    children: [
-                        {
-                            label: 'Argentina'
-                        },
-                        {
-                            label: 'Croatia'
-                        }
-                    ]
-                },
-                {
-                    label: 'France',
-                    expanded: true,
-                    children: [
-                        {
-                            label: 'France'
-                        },
-                        {
-                            label: 'Morocco'
-                        }
-                    ]
-                }
-            ]
-        }
-    ]);
-
-    return (
-        <div className="card overflow-x-auto">
-            <OrganizationChart
-                value={data}
-                selectionMode="single"
-                selection={selection}
-                onSelectionChange={(e) => setSelection(e.data)}
-                pt={{
-                    node: ({ context }) => ({
-                        className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from 'react';
-import { OrganizationChart } from 'primereact/organizationchart';
-import { TreeNode } from 'primereact/treenode';
-
-export default function PTDemo() {
-    const [selection, setSelection] = useState<TreeNode[]>([]);
-    const [data] = useState<TreeNode[]>([
-        {
-            label: 'Argentina',
-            expanded: true,
-            children: [
-                {
-                    label: 'Argentina',
-                    expanded: true,
-                    children: [
-                        {
-                            label: 'Argentina'
-                        },
-                        {
-                            label: 'Croatia'
-                        }
-                    ]
-                },
-                {
-                    label: 'France',
-                    expanded: true,
-                    children: [
-                        {
-                            label: 'France'
-                        },
-                        {
-                            label: 'Morocco'
-                        }
-                    ]
-                }
-            ]
-        }
-    ]);
-
-    return (
-        <div className="card overflow-x-auto">
-            <OrganizationChart
-                value={data}
-                selectionMode="single"
-                selection={selection}
-                onSelectionChange={(e) => setSelection(e.data)}
-                pt={{
-                    node: ({ context }) => ({
-                        className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card overflow-x-auto">
-                <OrganizationChart
-                    value={data}
-                    selectionMode="single"
-                    selection={selection}
-                    onSelectionChange={(e) => setSelection(e.data)}
-                    pt={{
-                        node: ({ context }) => ({
-                            className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/overlaypanel/pt/ptdoc.js b/components/doc/overlaypanel/pt/ptdoc.js
deleted file mode 100644
index cf8e10bbf7..0000000000
--- a/components/doc/overlaypanel/pt/ptdoc.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { OverlayPanel } from '@/components/lib/overlaypanel/OverlayPanel';
-import { useRef } from 'react';
-
-export function PTDoc(props) {
-    const op = useRef(null);
-
-    const code = {
-        basic: `
-<OverlayPanel ref={op}
-    pt={{
-        root: { className: 'surface-ground' }
-    }}
->
-    <img src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-</OverlayPanel>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const op = useRef(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
-
-            <OverlayPanel ref={op}
-                pt={{
-                    root: { className: 'surface-ground' }
-                }}
-            >
-                <img src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-            </OverlayPanel>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const op = useRef(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
-
-            <OverlayPanel ref={op}
-                pt={{
-                    root: { className: 'surface-ground' }
-                }}
-            >
-                <img src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-            </OverlayPanel>
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
-
-                <OverlayPanel
-                    ref={op}
-                    pt={{
-                        root: { className: 'surface-ground' }
-                    }}
-                >
-                    <img src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-                </OverlayPanel>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/paginator/pt/ptdoc.js b/components/doc/paginator/pt/ptdoc.js
deleted file mode 100644
index 9ec891171d..0000000000
--- a/components/doc/paginator/pt/ptdoc.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Paginator } from '@/components/lib/paginator/Paginator';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [first, setFirst] = useState(0);
-    const [rows, setRows] = useState(10);
-
-    const onPageChange = (event) => {
-        setFirst(event.first);
-        setRows(event.rows);
-    };
-
-    const code = {
-        basic: `
-<Paginator
-    first={first}
-    rows={rows}
-    totalRecords={120}
-    rowsPerPageOptions={[10, 20, 30]}
-    onPageChange={onPageChange}
-    pt={{
-        pageButton: ({ context }) => ({
-            className: context.active ? 'bg-primary' : undefined
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Paginator } from 'primereact/paginator';
-
-export default function PTDemo() {
-    const [first, setFirst] = useState(0);
-    const [rows, setRows] = useState(10);
-
-    const onPageChange = (event) => {
-        setFirst(event.first);
-        setRows(event.rows);
-    };
-
-    return (
-        <div className="card">
-            <Paginator
-                first={first}
-                rows={rows}
-                totalRecords={120}
-                rowsPerPageOptions={[10, 20, 30]}
-                onPageChange={onPageChange}
-                pt={{
-                    pageButton: ({ context }) => ({
-                        className: context.active ? 'bg-primary' : undefined
-                    })
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Paginator, PaginatorPageChangeEvent } from 'primereact/paginator';
-
-export default function PTDemo() {
-    const [first, setFirst] = useState<number>(0);
-    const [rows, setRows] = useState<number>(10);
-
-    const onPageChange = (event: PaginatorPageChangeEvent) => {
-        setFirst(event.first);
-        setRows(event.rows);
-    };
-
-    return (
-        <div className="card">
-            <Paginator
-                first={first}
-                rows={rows}
-                totalRecords={120}
-                rowsPerPageOptions={[10, 20, 30]}
-                onPageChange={onPageChange}
-                pt={{
-                    pageButton: ({ context }) => ({
-                        className: context.active ? 'bg-primary' : undefined
-                    })
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Paginator
-                    first={first}
-                    rows={rows}
-                    totalRecords={120}
-                    rowsPerPageOptions={[10, 20, 30]}
-                    onPageChange={onPageChange}
-                    pt={{
-                        pageButton: ({ context }) => ({
-                            className: context.active ? 'bg-primary' : undefined
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/panel/pt/ptdoc.js b/components/doc/panel/pt/ptdoc.js
deleted file mode 100644
index 18ae0d2aee..0000000000
--- a/components/doc/panel/pt/ptdoc.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Panel } from '@/components/lib/panel/Panel';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Panel
-    header="Header"
-    toggleable
-    pt={{
-        header: { className: 'bg-primary' },
-        title: { className: 'text-white' },
-        toggler: { className: 'text-white hover:bg-primary-reverse' }
-    }}>
-    <p className="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Panel>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Panel } from 'primereact/panel';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Panel
-                header="Header"
-                toggleable
-                pt={{
-                    header: { className: 'bg-primary' },
-                    title: { className: 'text-white' },
-                    toggler: { className: 'text-white hover:bg-primary-reverse' }
-                }}>
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Panel>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Panel } from 'primereact/panel';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <Panel
-                header="Header"
-                toggleable
-                pt={{
-                    header: { className: 'bg-primary' },
-                    title: { className: 'text-white' },
-                    toggler: { className: 'text-white hover:bg-primary-reverse' }
-                }}>
-                <p className="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Panel>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Panel
-                    header="Header"
-                    toggleable
-                    pt={{
-                        header: { className: 'bg-primary' },
-                        title: { className: 'text-white' },
-                        toggler: { className: 'text-white hover:bg-primary-reverse' }
-                    }}
-                >
-                    <p className="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </Panel>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/panelmenu/pt/ptdoc.js b/components/doc/panelmenu/pt/ptdoc.js
deleted file mode 100644
index 888aa68939..0000000000
--- a/components/doc/panelmenu/pt/ptdoc.js
+++ /dev/null
@@ -1,423 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        }
-    ];
-    const code = {
-        basic: `
-<PanelMenu
-    model={items}
-    pt={{
-        root: { className: 'w-full md:w-25rem' },
-        headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
-        action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
-    }}
-/>
-`,
-        javascript: `
-import React from 'react'; 
-import { PanelMenu } from 'primereact/panelmenu';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label:'File',
-            icon:'pi pi-fw pi-file',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-plus',
-                    items:[
-                    {
-                        label:'Bookmark',
-                        icon:'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label:'Video',
-                        icon:'pi pi-fw pi-video'
-                    }
-                    ]
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-trash'
-                },
-                {
-                    label:'Export',
-                    icon:'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label:'Edit',
-            icon:'pi pi-fw pi-pencil',
-            items:[
-                {
-                    label:'Left',
-                    icon:'pi pi-fw pi-align-left'
-                },
-                {
-                    label:'Right',
-                    icon:'pi pi-fw pi-align-right'
-                },
-                {
-                    label:'Center',
-                    icon:'pi pi-fw pi-align-center'
-                },
-                {
-                    label:'Justify',
-                    icon:'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label:'Users',
-            icon:'pi pi-fw pi-user',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-user-plus'
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-user-minus'
-                },
-                {
-                    label:'Search',
-                    icon:'pi pi-fw pi-users',
-                    items:[
-                    {
-                        label:'Filter',
-                        icon:'pi pi-fw pi-filter',
-                        items:[
-                            {
-                                label:'Print',
-                                icon:'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon:'pi pi-fw pi-bars',
-                        label:'List'
-                    }
-                    ]
-                }
-            ]
-        },
-        {
-            label:'Events',
-            icon:'pi pi-fw pi-calendar',
-            items:[
-                {
-                    label:'Edit',
-                    icon:'pi pi-fw pi-pencil',
-                    items:[
-                    {
-                        label:'Save',
-                        icon:'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label:'Delete',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                },
-                {
-                    label:'Archive',
-                    icon:'pi pi-fw pi-calendar-times',
-                    items:[
-                    {
-                        label:'Remove',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                }
-            ]
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <PanelMenu
-                model={items}
-                pt={{
-                    root: { className: 'w-full md:w-25rem' },
-                    headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
-                    action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { PanelMenu } from 'primereact/panelmenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label:'File',
-            icon:'pi pi-fw pi-file',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-plus',
-                    items:[
-                    {
-                        label:'Bookmark',
-                        icon:'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label:'Video',
-                        icon:'pi pi-fw pi-video'
-                    }
-                    ]
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-trash'
-                },
-                {
-                    label:'Export',
-                    icon:'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label:'Edit',
-            icon:'pi pi-fw pi-pencil',
-            items:[
-                {
-                    label:'Left',
-                    icon:'pi pi-fw pi-align-left'
-                },
-                {
-                    label:'Right',
-                    icon:'pi pi-fw pi-align-right'
-                },
-                {
-                    label:'Center',
-                    icon:'pi pi-fw pi-align-center'
-                },
-                {
-                    label:'Justify',
-                    icon:'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label:'Users',
-            icon:'pi pi-fw pi-user',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-user-plus'
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-user-minus'
-                },
-                {
-                    label:'Search',
-                    icon:'pi pi-fw pi-users',
-                    items:[
-                    {
-                        label:'Filter',
-                        icon:'pi pi-fw pi-filter',
-                        items:[
-                            {
-                                label:'Print',
-                                icon:'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon:'pi pi-fw pi-bars',
-                        label:'List'
-                    }
-                    ]
-                }
-            ]
-        },
-        {
-            label:'Events',
-            icon:'pi pi-fw pi-calendar',
-            items:[
-                {
-                    label:'Edit',
-                    icon:'pi pi-fw pi-pencil',
-                    items:[
-                    {
-                        label:'Save',
-                        icon:'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label:'Delete',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                },
-                {
-                    label:'Archive',
-                    icon:'pi pi-fw pi-calendar-times',
-                    items:[
-                    {
-                        label:'Remove',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                }
-            ]
-        }
-    ];
-    return (
-        <div className="card flex justify-content-center">
-            <PanelMenu
-                model={items}
-                pt={{
-                    root: { className: 'w-full md:w-25rem' },
-                    headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
-                    action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <PanelMenu
-                    model={items}
-                    pt={{
-                        root: { className: 'w-full md:w-25rem' },
-                        headerAction: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined }),
-                        action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/password/pt/ptdoc.js b/components/doc/password/pt/ptdoc.js
deleted file mode 100644
index b9c44faed8..0000000000
--- a/components/doc/password/pt/ptdoc.js
+++ /dev/null
@@ -1,76 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState('');
-
-    const code = {
-        basic: `
-<Password
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    pt={{
-        info: { className: 'font-bold' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Password } from 'primereact/password';
-
-export default function PTDemo() {
-    const [value, setValue] = useState('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <Password
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                pt={{
-                    info: { className: 'font-bold' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Password } from 'primereact/password';
-
-export default function PTDemo() {
-    const [value, setValue] = useState<string>('');
-
-    return (
-        <div className="card flex justify-content-center">
-            <Password
-                value={value}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
-                pt={{
-                    info: { className: 'font-bold' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Password
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    pt={{
-                        info: { className: 'font-bold' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/picklist/pt/ptdoc.js b/components/doc/picklist/pt/ptdoc.js
deleted file mode 100644
index 54ff0572cc..0000000000
--- a/components/doc/picklist/pt/ptdoc.js
+++ /dev/null
@@ -1,246 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { PickList } from '@/components/lib/picklist/PickList';
-import { useEffect, useState } from 'react';
-import { ProductService } from '../../../../service/ProductService';
-
-export function PTDoc(props) {
-    const [source, setSource] = useState([]);
-    const [target, setTarget] = useState([]);
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setSource(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const onChange = (event) => {
-        setSource(event.source);
-        setTarget(event.target);
-    };
-
-    const itemTemplate = (item) => {
-        return (
-            <div className="flex flex-wrap p-2 align-items-center gap-3">
-                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
-                <div className="flex-1 flex flex-column gap-2">
-                    <span className="font-bold">{item.name}</span>
-                    <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm" />
-                        <span>{item.category}</span>
-                    </div>
-                </div>
-                <span className="font-bold text-900">${item.price}</span>
-            </div>
-        );
-    };
-
-    const code = {
-        basic: `
-<PickList
-    dataKey="id"
-    source={source}
-    target={target}
-    onChange={onChange}
-    itemTemplate={itemTemplate}
-    breakpoint="1280px"
-    sourceHeader="Available"
-    targetHeader="Selected"
-    sourceStyle={{ height: '24rem' }}
-    targetStyle={{ height: '24rem' }}
-    pt={{
-        list: { style: { height: '342px' } },
-        moveAllToTargetButton: {
-            root: { className: 'bg-teal-400 border-teal-400' }
-        },
-        moveAllToSourceButton: {
-            root: { className: 'bg-teal-400 border-teal-400' }
-        },
-        item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { PickList } from 'primereact/picklist';
-import { ProductService } from './service/ProductService';
-
-export default function PTDemo() {
-    const [source, setSource] = useState([]);
-    const [target, setTarget] = useState([]);
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setSource(data));
-    }, []);
-
-    const onChange = (event) => {
-        setSource(event.source);
-        setTarget(event.target);
-    };
-
-    const itemTemplate = (item) => {
-        return (
-            <div className="flex flex-wrap p-2 align-items-center gap-3">
-                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
-                <div className="flex-1 flex flex-column gap-2">
-                    <span className="font-bold">{item.name}</span>
-                    <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
-                        <span>{item.category}</span>
-                    </div>
-                </div>
-                <span className="font-bold text-900">\${item.price}</span>
-            </div>
-        );
-    };
-
-    return (
-        <div className="card">
-            <PickList
-                dataKey="id"
-                source={source}
-                target={target}
-                onChange={onChange}
-                itemTemplate={itemTemplate}
-                breakpoint="1280px"
-                sourceHeader="Available"
-                targetHeader="Selected"
-                sourceStyle={{ height: '24rem' }}
-                targetStyle={{ height: '24rem' }}
-                pt={{
-                    list: { style: { height: '342px' } },
-                    moveAllToTargetButton: {
-                        root: { className: 'bg-teal-400 border-teal-400' }
-                    },
-                    moveAllToSourceButton: {
-                        root: { className: 'bg-teal-400 border-teal-400' }
-                    },
-                    item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { PickList } from 'primereact/picklist';
-import { ProductService } from './service/ProductService';
-
-interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: 'string',
-    rating: number;
-}
-
-export default function PTDemo() {
-    const [source, setSource] = useState<Product>([]);
-    const [target, setTarget] = useState<Product>([]);
-
-    useEffect(() => {
-        ProductService.getProductsSmall().then((data) => setSource(data));
-    }, []);
-
-    const onChange = (event) => {
-        setSource(event.source);
-        setTarget(event.target);
-    };
-
-    const itemTemplate = (item: Product) => {
-        return (
-            <div className="flex flex-wrap p-2 align-items-center gap-3">
-                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
-                <div className="flex-1 flex flex-column gap-2">
-                    <span className="font-bold">{item.name}</span>
-                    <div className="flex align-items-center gap-2">
-                        <i className="pi pi-tag text-sm"></i>
-                        <span>{item.category}</span>
-                    </div>
-                </div>
-                <span className="font-bold text-900">\${item.price}</span>
-            </div>
-        );
-    };
-
-    return (
-        <div className="card">
-            <PickList
-                dataKey="id"
-                source={source}
-                target={target}
-                onChange={onChange}
-                itemTemplate={itemTemplate}
-                breakpoint="1280px"
-                sourceHeader="Available"
-                targetHeader="Selected"
-                sourceStyle={{ height: '24rem' }}
-                targetStyle={{ height: '24rem' }}
-                pt={{
-                    list: { style: { height: '342px' } },
-                    moveAllToTargetButton: {
-                        root: { className: 'bg-teal-400 border-teal-400' }
-                    },
-                    moveAllToSourceButton: {
-                        root: { className: 'bg-teal-400 border-teal-400' }
-                    },
-                    item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: '/bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <PickList
-                    dataKey="id"
-                    source={source}
-                    target={target}
-                    onChange={onChange}
-                    itemTemplate={itemTemplate}
-                    breakpoint="1280px"
-                    sourceHeader="Available"
-                    targetHeader="Selected"
-                    sourceStyle={{ height: '24rem' }}
-                    targetStyle={{ height: '24rem' }}
-                    pt={{
-                        list: { style: { height: '342px' } },
-                        moveAllToTargetButton: {
-                            root: { className: 'bg-teal-400 border-teal-400' }
-                        },
-                        moveAllToSourceButton: {
-                            root: { className: 'bg-teal-400 border-teal-400' }
-                        },
-                        item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['ProductService']} />
-        </>
-    );
-}
diff --git a/components/doc/progressbar/pt/ptdoc.js b/components/doc/progressbar/pt/ptdoc.js
deleted file mode 100644
index cdf47c9ca2..0000000000
--- a/components/doc/progressbar/pt/ptdoc.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<ProgressBar
-    value={50}
-    pt={{
-        value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-    }}
-></ProgressBar>
-        `,
-        javascript: `
-import React from 'react';
-import { ProgressBar } from 'primereact/progressbar';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <ProgressBar
-                value={50}
-                pt={{
-                    value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-                }}
-            ></ProgressBar>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React from 'react';
-import { ProgressBar } from 'primereact/progressbar';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <ProgressBar
-                value={50}
-                pt={{
-                    value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-                }}
-            ></ProgressBar>
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <ProgressBar
-                    value={50}
-                    pt={{
-                        value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/progressspinner/pt/ptdoc.js b/components/doc/progressspinner/pt/ptdoc.js
deleted file mode 100644
index 4b1a93a44e..0000000000
--- a/components/doc/progressspinner/pt/ptdoc.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { ProgressSpinner } from '@/components/lib/progressspinner/ProgressSpinner';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<ProgressSpinner
-    pt={{
-        spinner: { style: { animationDuration: '0s' } },
-        circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-    }}
-></ProgressSpinner>
-        `,
-        javascript: `
-import React from 'react';
-import { ProgressSpinner } from 'primereact/progressspinner';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <ProgressSpinner
-                pt={{
-                    spinner: { style: { animationDuration: '0s' } },
-                    circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-                }}
-            ></ProgressSpinner>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React from 'react';
-import { ProgressSpinner } from 'primereact/progressspinner';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <ProgressSpinner
-                pt={{
-                    spinner: { style: { animationDuration: '0s' } },
-                    circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-                }}
-            ></ProgressSpinner>
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <ProgressSpinner
-                    pt={{
-                        spinner: { style: { animationDuration: '0s' } },
-                        circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/radiobutton/pt/ptdoc.js b/components/doc/radiobutton/pt/ptdoc.js
deleted file mode 100644
index 899a0b08f5..0000000000
--- a/components/doc/radiobutton/pt/ptdoc.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const categories = [
-        { name: 'Accounting', key: 'A' },
-        { name: 'Marketing', key: 'M' },
-        { name: 'Production', key: 'P' },
-        { name: 'Research', key: 'R' }
-    ];
-    const [selectedCategory, setSelectedCategory] = useState(categories[1]);
-
-    const code = {
-        basic: `
-<RadioButton
-    inputId={category.key}
-    name="category"
-    value={category}
-    onChange={(e) => setSelectedCategory(e.value)}
-    checked={selectedCategory.key === category.key}
-    pt={{
-        input: {
-            className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { RadioButton } from "primereact/radiobutton";
-
-export default function PTDemo() {
-    const categories = [
-        { name: 'Accounting', key: 'A' },
-        { name: 'Marketing', key: 'M' },
-        { name: 'Production', key: 'P' },
-        { name: 'Research', key: 'R' }
-    ];
-    const [selectedCategory, setSelectedCategory] = useState(categories[1]);
-
-
-    return (
-        <div className="card flex justify-content-center">
-            <div className="flex flex-column gap-3">
-                {categories.map((category) => {
-                    return (
-                        <div key={category.key} className="flex align-items-center">
-                            <RadioButton
-                                inputId={category.key}
-                                name="category"
-                                value={category}
-                                onChange={(e) => setSelectedCategory(e.value)}
-                                checked={selectedCategory.key === category.key}
-                                pt={{
-                                    input: {
-                                        className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
-                                    }
-                                }}
-                            />
-                            <label htmlFor={category.key} className="ml-2">
-                                {category.name}
-                            </label>
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { RadioButton } from "primereact/radiobutton";
-import { RadioButton, RadioButtonChangeEvent } from "primereact/radiobutton";
-
-interface Category {
-    name: string;
-    key: string;
-}
-
-export default function PTDemo() {
-    const categories = [
-        { name: 'Accounting', key: 'A' },
-        { name: 'Marketing', key: 'M' },
-        { name: 'Production', key: 'P' },
-        { name: 'Research', key: 'R' }
-    ];
-    const [selectedCategory, setSelectedCategory] = useState<Category>(categories[1]);
-
-
-    return (
-        <div className="card flex justify-content-center">
-            <div className="flex flex-column gap-3">
-                {categories.map((category) => {
-                    return (
-                        <div key={category.key} className="flex align-items-center">
-                            <RadioButton
-                                inputId={category.key}
-                                name="category"
-                                value={category}
-                                onChange={(e) => setSelectedCategory(e.value)}
-                                checked={selectedCategory.key === category.key}
-                                pt={{
-                                    input: {
-                                        className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
-                                    }
-                                }}
-                            />
-                            <label htmlFor={category.key} className="ml-2">
-                                {category.name}
-                            </label>
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <div className="flex flex-column gap-3">
-                    {categories.map((category) => {
-                        return (
-                            <div key={category.key} className="flex align-items-center">
-                                <RadioButton
-                                    inputId={category.key}
-                                    name="category"
-                                    value={category}
-                                    onChange={(e) => setSelectedCategory(e.value)}
-                                    checked={selectedCategory.key === category.key}
-                                    pt={{
-                                        input: {
-                                            className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
-                                        }
-                                    }}
-                                />
-                                <label htmlFor={category.key} className="ml-2">
-                                    {category.name}
-                                </label>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/rating/pt/ptdoc.js b/components/doc/rating/pt/ptdoc.js
deleted file mode 100644
index 469453e0b4..0000000000
--- a/components/doc/rating/pt/ptdoc.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Rating } from '@/components/lib/rating/Rating';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [value, setValue] = useState(null);
-
-    const code = {
-        basic: `
-<Rating
-    value={value}
-    onChange={(e) => setValue(e.value)}
-    pt={{
-        onIcon: { className: 'text-orange-400' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Rating } from "primereact/rating";
-
-export default function PTDemo() {
-    const [value, setValue] = useState(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Rating
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    onIcon: { className: 'text-orange-400' }
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Rating, RatingChangeEvent } from "primereact/rating";
-
-export default function PTDemo() {
-    const [value, setValue] = useState<number>(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Rating
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    onIcon: { className: 'text-orange-400' }
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Rating
-                    value={value}
-                    onChange={(e) => setValue(e.value)}
-                    pt={{
-                        onIcon: { className: 'text-orange-400' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/scrollpanel/pt/ptdoc.js b/components/doc/scrollpanel/pt/ptdoc.js
deleted file mode 100644
index b352fa9268..0000000000
--- a/components/doc/scrollpanel/pt/ptdoc.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { ScrollPanel } from '@/components/lib/scrollpanel/ScrollPanel';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<ScrollPanel pt={{
-    root: {
-        style: { width: '100%', height: '200px' }
-    },
-    barY: {
-        className: 'bg-primary'
-    }
-}}>
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-    <p>
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-    </p>
-    <p>
-        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-    </p>
-</ScrollPanel>
-        `,
-        javascript: `
-import React from 'react';
-import { ScrollPanel } from 'primereact/scrollpanel';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <ScrollPanel pt={{
-                root: {
-                    style: { width: '100%', height: '200px' }
-                },
-                barY: {
-                    className: 'bg-primary'
-                }
-            }}>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-                <p>
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                    qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
-            </ScrollPanel>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { ScrollPanel } from 'primereact/scrollpanel';
-
-export default function PTDemo() {
-    return (
-        <div className="card">
-            <ScrollPanel pt={{
-                root: {
-                    style: { width: '100%', height: '200px' }
-                },
-                barY: {
-                    className: 'bg-primary'
-                }
-            }}>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-                <p>
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                    qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
-            </ScrollPanel>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <ScrollPanel pt={{ root: { style: { width: '100%', height: '200px' } }, bary: { className: 'bg-primary' } }}>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <p>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </ScrollPanel>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/scrolltop/pt/ptdoc.js b/components/doc/scrolltop/pt/ptdoc.js
deleted file mode 100644
index 921483e84d..0000000000
--- a/components/doc/scrolltop/pt/ptdoc.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { ScrollTop } from '@/components/lib/scrolltop/ScrollTop';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<ScrollTop
-    pt={{
-        root: { className: 'w-2rem h-2rem bg-primary' },
-        icon: { className: 'w-1rem h-1rem' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react';
-import { ScrollTop } from 'primereact/scrolltop';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <div style={{ width: '250px', height: '200px', overflow: 'auto' }}>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
-                    adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
-                    augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
-                    nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
-                    viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-                </p>
-                <ScrollTop
-                    pt={{
-                        root: { className: 'w-2rem h-2rem bg-primary' },
-                        icon: { className: 'w-1rem h-1rem' }
-                    }}
-                    target="parent"
-                    threshold={100}
-                />
-            </div>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React from 'react';
-import { ScrollTop } from 'primereact/scrolltop';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <div style={{ width: '250px', height: '200px', overflow: 'auto' }}>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
-                    adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
-                    augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
-                    nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
-                    viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-                </p>
-                <ScrollTop
-                    pt={{
-                        root: { className: 'w-2rem h-2rem bg-primary' },
-                        icon: { className: 'w-1rem h-1rem' }
-                    }}
-                    target="parent"
-                    threshold={100}
-                />
-            </div>
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <div style={{ width: '250px', height: '200px', overflow: 'auto' }}>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
-                        adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
-                        augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
-                        nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
-                        viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-                    </p>
-                    <ScrollTop
-                        pt={{
-                            root: { className: 'w-2rem h-2rem bg-primary' },
-                            icon: { className: 'w-1rem h-1rem' }
-                        }}
-                        target="parent"
-                        threshold={100}
-                    />
-                </div>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/selectbutton/pt/ptdoc.js b/components/doc/selectbutton/pt/ptdoc.js
deleted file mode 100644
index 454b1a8930..0000000000
--- a/components/doc/selectbutton/pt/ptdoc.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const options = ['Off', 'On'];
-    const [value, setValue] = useState(options[0]);
-
-    const code = {
-        basic: `
-<SelectButton
-    value={value}
-    onChange={(e) => setValue(e.value)}
-    options={options}
-    pt={{
-        button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { SelectButton } from 'primereact/selectbutton';
-
-export default function PTDemo() {
-    const options = ['Off', 'On'];
-    const [value, setValue] = useState(options[0]);
-
-    return (
-        <div className="card flex justify-content-center">
-            <SelectButton
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                options={options}
-                pt={{
-                    button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
-
-export default function PTDemo() {
-    const options: string[] = ['Off', 'On'];
-    const [value, setValue] = useState<string>(options[0]);
-
-    return (
-        <div className="card flex justify-content-center">
-            <SelectButton
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                options={options}
-                pt={{
-                    button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <SelectButton
-                    value={value}
-                    onChange={(e) => setValue(e.value)}
-                    options={options}
-                    pt={{
-                        button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/sidebar/pt/ptdoc.js b/components/doc/sidebar/pt/ptdoc.js
deleted file mode 100644
index f9655970f3..0000000000
--- a/components/doc/sidebar/pt/ptdoc.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Sidebar } from '@/components/lib/sidebar/Sidebar';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [visible, setVisible] = useState(false);
-    const code = {
-        basic: `
-<Sidebar
-    pt={{
-        root: { className: 'w-25rem' }
-    }}
-    visible={visible}
-    onHide={() => setVisible(false)}
->
-    <h2>Sidebar</h2>
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-    </p>
-</Sidebar>
-        `,
-        javascript: `
-import React, { useState } from 'react';
-import { Sidebar } from 'primereact/sidebar';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const [visible, setVisible] = useState(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Sidebar
-                pt={{
-                    root: { className: 'w-25rem' }
-                }}
-                visible={visible}
-                onHide={() => setVisible(false)}
-            >
-                <h2>Sidebar</h2>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat.
-                </p>
-            </Sidebar>
-            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from 'react';
-import { Sidebar } from 'primereact/sidebar';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const [visible, setVisible] = useState(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Sidebar
-                pt={{
-                    root: { className: 'w-25rem' }
-                }}
-                visible={visible}
-                onHide={() => setVisible(false)}
-            >
-                <h2>Sidebar</h2>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat.
-                </p>
-            </Sidebar>
-            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Sidebar
-                    pt={{
-                        root: { className: 'w-25rem' }
-                    }}
-                    visible={visible}
-                    onHide={() => setVisible(false)}
-                >
-                    <h2>Sidebar</h2>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat.
-                    </p>
-                </Sidebar>
-                <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/skeleton/pt/ptdoc.js b/components/doc/skeleton/pt/ptdoc.js
deleted file mode 100644
index 82328a9e97..0000000000
--- a/components/doc/skeleton/pt/ptdoc.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Skeleton } from '@/components/lib/skeleton/Skeleton';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Skeleton
-    pt={{
-        root: { className: 'w-3rem h-3rem' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react';
-import { Skeleton } from 'primereact/skeleton';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Skeleton
-                pt={{
-                    root: { className: 'w-3rem h-3rem' }
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React from 'react';
-import { Skeleton } from 'primereact/skeleton';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Skeleton
-                pt={{
-                    root: { className: 'w-3rem h-3rem' }
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Skeleton
-                    pt={{
-                        root: { className: 'w-3rem h-3rem' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/slider/pt/ptdoc.js b/components/doc/slider/pt/ptdoc.js
deleted file mode 100644
index 2dcdd49498..0000000000
--- a/components/doc/slider/pt/ptdoc.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Slider } from '@/components/lib/slider/Slider';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [value, setValue] = useState(null);
-
-    const code = {
-        basic: `
-<Slider
-    value={value}
-    onChange={(e) => setValue(e.value)}
-    pt={{
-        root: { className: 'w-14rem' },
-        handle: { className: 'bg-orange-400 border-900' },
-        range: { className: 'bg-orange-400' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { Slider } from "primereact/slider";
-
-export default function PTDemo() {
-    const [value, setValue] = useState(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Slider
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    root: { className: 'w-14rem' },
-                    handle: { className: 'bg-orange-400 border-900' },
-                    range: { className: 'bg-orange-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { Slider, SliderChangeEvent } from "primereact/slider";
-
-export default function PTDemo() {
-    const [value, setValue] = useState<number>(null);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Slider
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    root: { className: 'w-14rem' },
-                    handle: { className: 'bg-orange-400 border-900' },
-                    range: { className: 'bg-orange-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Slider
-                    value={value}
-                    onChange={(e) => setValue(e.value)}
-                    pt={{
-                        root: { className: 'w-14rem' },
-                        handle: { className: 'bg-orange-400 border-900' },
-                        range: { className: 'bg-orange-400' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/speeddial/pt/ptdoc.js b/components/doc/speeddial/pt/ptdoc.js
deleted file mode 100644
index 480a9203f9..0000000000
--- a/components/doc/speeddial/pt/ptdoc.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
-import { classNames } from '@/components/lib/utils/Utils';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'Add',
-            icon: 'pi pi-pencil'
-        },
-        {
-            label: 'Update',
-            icon: 'pi pi-refresh'
-        },
-        {
-            label: 'Delete',
-            icon: 'pi pi-trash'
-        },
-        {
-            label: 'React Website',
-            icon: 'pi pi-external-link'
-        }
-    ];
-
-    const code = {
-        basic: `
-<SpeedDial
-    pt={{
-        menu: ({ state }) => ({
-            className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible })
-        })
-    }}
-    model={items}
-    radius={80}
-    direction='down'
-/>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { SpeedDial } from 'primereact/speeddial';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'Add',
-            icon: 'pi pi-pencil'
-        },
-        {
-            label: 'Update',
-            icon: 'pi pi-refresh'
-        },
-        {
-            label: 'Delete',
-            icon: 'pi pi-trash'
-        },
-        {
-            label: 'React Website',
-            icon: 'pi pi-external-link'
-        }
-    ];
-
-    return (
-        <div className="card">
-            <div style={{ height: '500px' }} className="flex align-items-center justify-content-center">
-                <SpeedDial
-                    pt={{
-                        menu: ({ state }) => ({
-                            className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible })
-                        })
-                    }}
-                    model={items}
-                    radius={80}
-                    direction='down'
-
-                />
-            </div>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { SpeedDial } from 'primereact/speeddial';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'Add',
-            icon: 'pi pi-pencil'
-        },
-        {
-            label: 'Update',
-            icon: 'pi pi-refresh'
-        },
-        {
-            label: 'Delete',
-            icon: 'pi pi-trash'
-        },
-        {
-            label: 'React Website',
-            icon: 'pi pi-external-link'
-        }
-    ];
-
-    return (
-        <div className="card">
-            <div style={{ height: '500px' }} className="flex align-items-center justify-content-center">
-                <SpeedDial
-                    pt={{
-                        menu: ({ state }) => ({
-                            className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible })
-                        })
-                    }}
-                    model={items}
-                    radius={80}
-                    direction='down'
-
-                />
-            </div>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <div style={{ height: '500px' }} className="flex align-items-center justify-content-center">
-                    <SpeedDial
-                        pt={{
-                            menu: ({ state }) => ({
-                                className: classNames('mt-2', { 'border-1 border-primary surface-border border-round surface-ground': state.visible })
-                            })
-                        }}
-                        model={items}
-                        radius={80}
-                        direction="down"
-                    />
-                </div>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/splitbutton/pt/ptdoc.js b/components/doc/splitbutton/pt/ptdoc.js
deleted file mode 100644
index c087f0486c..0000000000
--- a/components/doc/splitbutton/pt/ptdoc.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'Update',
-            icon: 'pi pi-refresh'
-        },
-        {
-            label: 'Delete',
-            icon: 'pi pi-times'
-        },
-        {
-            label: 'React Website',
-            icon: 'pi pi-external-link'
-        },
-        {
-            label: 'Upload',
-            icon: 'pi pi-upload'
-        }
-    ];
-
-    const code = {
-        basic: `
-<SplitButton
-    pt={{
-        menu: {
-            className: 'surface-ground'
-        }
-    }}
-    label="Save"
-    icon="pi pi-plus"
-    model={items}
-/>
-        `,
-        javascript: `
-import React from 'react';
-import { SplitButton } from 'primereact/splitbutton';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'Update',
-            icon: 'pi pi-refresh'
-        },
-        {
-            label: 'Delete',
-            icon: 'pi pi-times'
-        },
-        {
-            label: 'React Website',
-            icon: 'pi pi-external-link'
-        },
-        {
-            label: 'Upload',
-            icon: 'pi pi-upload'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <SplitButton
-                pt={{
-                    menu: {
-                        className: 'surface-ground'
-                    }
-                }}
-                label="Save"
-                icon="pi pi-plus"
-                model={items}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { SplitButton } from 'primereact/splitbutton';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'Update',
-            icon: 'pi pi-refresh'
-        },
-        {
-            label: 'Delete',
-            icon: 'pi pi-times'
-        },
-        {
-            label: 'React Website',
-            icon: 'pi pi-external-link'
-        },
-        {
-            label: 'Upload',
-            icon: 'pi pi-upload'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <SplitButton
-                pt={{
-                    menu: {
-                        className: 'surface-ground'
-                    }
-                }}
-                label="Save"
-                icon="pi pi-plus"
-                model={items}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <SplitButton
-                    pt={{
-                        menu: {
-                            className: 'surface-ground'
-                        }
-                    }}
-                    label="Save"
-                    icon="pi pi-plus"
-                    model={items}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/splitter/pt/ptdoc.js b/components/doc/splitter/pt/ptdoc.js
deleted file mode 100644
index 412b5c9f1d..0000000000
--- a/components/doc/splitter/pt/ptdoc.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Splitter, SplitterPanel } from '@/components/lib/splitter/Splitter';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Splitter pt={{ root: { style: { height: '300px' } }, gutterHandler: { className: 'bg-primary' } }}>
-    <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 1 </SplitterPanel>
-    <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 2 </SplitterPanel>
-</Splitter>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Splitter, SplitterPanel } from 'primereact/tabview';
-
-export default function PTDemo() {
-
-    return (
-        <div className="card">
-            <Splitter pt={{ root: { style: { height: '300px' } }, gutterHandler: { className: 'bg-primary' } }}>
-                <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 1 </SplitterPanel>
-                <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 2 </SplitterPanel>
-            </Splitter>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Splitter, SplitterPanel } from 'primereact/tabview';
-
-export default function PTDemo() {
-
-    return (
-        <div className="card">
-            <Splitter pt={{ root: { style: { height: '300px' } }, gutterHandler: { className: 'bg-primary' } }}>
-                <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 1 </SplitterPanel>
-                <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 2 </SplitterPanel>
-            </Splitter>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Splitter pt={{ root: { style: { height: '300px' } }, gutterHandler: { className: 'bg-primary' } }}>
-                    <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 1 </SplitterPanel>
-                    <SplitterPanel pt={{ root: { className: 'flex align-items-center justify-content-center' } }}> Panel 2 </SplitterPanel>
-                </Splitter>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/steps/pt/ptdoc.js b/components/doc/steps/pt/ptdoc.js
deleted file mode 100644
index 542ed5ea1c..0000000000
--- a/components/doc/steps/pt/ptdoc.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Steps } from '@/components/lib/steps/Steps';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'Personal'
-        },
-        {
-            label: 'Seat'
-        },
-        {
-            label: 'Payment'
-        },
-        {
-            label: 'Confirmation'
-        }
-    ];
-
-    const code = {
-        basic: `
-<Steps
-    model={items}
-    pt={{
-    root: { className: 'w-30rem' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Steps } from 'primereact/steps';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'Personal'
-        },
-        {
-            label: 'Seat'
-        },
-        {
-            label: 'Payment'
-        },
-        {
-            label: 'Confirmation'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <Steps
-                model={items}
-                pt={{
-                    root: { className: 'w-30rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Steps } from 'primereact/steps';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'Personal'
-        },
-        {
-            label: 'Seat'
-        },
-        {
-            label: 'Payment'
-        },
-        {
-            label: 'Confirmation'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <Steps
-                model={items}
-                pt={{
-                    root: { className: 'w-30rem' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Steps
-                    model={items}
-                    pt={{
-                        root: { className: 'w-30rem' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/tabmenu/pt/ptdoc.js b/components/doc/tabmenu/pt/ptdoc.js
deleted file mode 100644
index ba71017513..0000000000
--- a/components/doc/tabmenu/pt/ptdoc.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { TabMenu } from '@/components/lib/tabmenu/TabMenu';
-
-export function PTDoc(props) {
-    const items = [
-        { label: 'Home', icon: 'pi pi-fw pi-home' },
-        { label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
-        { label: 'Edit', icon: 'pi pi-fw pi-pencil' },
-        { label: 'Documentation', icon: 'pi pi-fw pi-file' },
-        { label: 'Settings', icon: 'pi pi-fw pi-cog' }
-    ];
-
-    const code = {
-        basic: `
-<TabMenu
-    model={items}
-    pt={{
-        action: {
-            className: 'surface-ground'
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { TabMenu } from 'primereact/tabmenu';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'Personal'
-        },
-        {
-            label: 'Seat'
-        },
-        {
-            label: 'Payment'
-        },
-        {
-            label: 'Confirmation'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <TabMenu
-                model={items}
-                pt={{
-                    action: {
-                        className: 'surface-ground'
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { TabMenu } from 'primereact/tabmenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'Personal'
-        },
-        {
-            label: 'Seat'
-        },
-        {
-            label: 'Payment'
-        },
-        {
-            label: 'Confirmation'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <TabMenu
-                model={items}
-                pt={{
-                    action: {
-                        className: 'surface-ground'
-                    }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <TabMenu
-                    model={items}
-                    pt={{
-                        action: {
-                            className: 'surface-ground'
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/tabview/pt/ptdoc.js b/components/doc/tabview/pt/ptdoc.js
deleted file mode 100644
index 6eb0887d50..0000000000
--- a/components/doc/tabview/pt/ptdoc.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
-
-export function PTDoc(props) {
-    const tabs = [
-        { title: 'Header 1', content: 'Tab 1 Content' },
-        { title: 'Header 2', content: 'Tab 2 Content' },
-        { title: 'Header 3', content: 'Tab 3 Content' }
-    ];
-
-    const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index) {
-            return 'bg-primary';
-        }
-    };
-
-    const code = {
-        basic: `
-<TabView>
-    {tabs.map((tab, i) => {
-        return (
-            <TabPanel
-                pt={{
-                    headerAction: ({ parent }) => ({
-                        className: panelClassName(parent, i)
-                    })
-                }}
-                key={i} header={tab.title}>
-                <p className="m-0">{tab.content}</p>
-            </TabPanel>
-        )
-    })}
-</TabView>
-        `,
-        javascript: `
-import React from 'react'; 
-import { TabView, TabPanel } from 'primereact/tabview';
-
-export default function PTDemo() {
-    const tabs = [
-        { title: 'Header 1', content: 'Tab 1 Content' },
-        { title: 'Header 2', content: 'Tab 2 Content' },
-        { title: 'Header 3', content: 'Tab 3 Content' }
-    ];
-
-    const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index)
-            return 'bg-primary'
-    }
-
-    return (
-        <div className="card">
-            <TabView>
-                {tabs.map((tab, i) => {
-                    return (
-                        <TabPanel
-                            pt={{
-                                headerAction: ({ parent }) => ({
-                                    className: panelClassName(parent, i)
-                                })
-                            }}
-                            key={i} header={tab.title}>
-                            <p className="m-0">{tab.content}</p>
-                        </TabPanel>
-                    )
-                })}
-            </TabView>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { TabView, TabPanel } from 'primereact/tabview';
-
-export default function PTDemo() {
-    const tabs = [
-        { title: 'Header 1', content: 'Tab 1 Content' },
-        { title: 'Header 2', content: 'Tab 2 Content' },
-        { title: 'Header 3', content: 'Tab 3 Content' }
-    ];
-
-    const panelClassName = (parent, index) => {
-        if (parent.state.activeIndex === index)
-            return 'bg-primary'
-    }
-
-    return (
-        <div className="card">
-            <TabView>
-                {tabs.map((tab, i) => {
-                    return (
-                        <TabPanel
-                            pt={{
-                                headerAction: ({ parent }) => ({
-                                    className: panelClassName(parent, i)
-                                })
-                            }}
-                            key={i} header={tab.title}>
-                            <p className="m-0">{tab.content}</p>
-                        </TabPanel>
-                    )
-                })}
-            </TabView>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <TabView>
-                    {tabs.map((tab, i) => {
-                        return (
-                            <TabPanel
-                                pt={{
-                                    headerAction: ({ parent }) => ({
-                                        className: panelClassName(parent, i)
-                                    })
-                                }}
-                                key={i}
-                                header={tab.title}
-                            >
-                                <p className="m-0">{tab.content}</p>
-                            </TabPanel>
-                        );
-                    })}
-                </TabView>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/tag/pt/ptdoc.js b/components/doc/tag/pt/ptdoc.js
deleted file mode 100644
index a9209a367c..0000000000
--- a/components/doc/tag/pt/ptdoc.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Tag } from '@/components/lib/tag/Tag';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<Tag
-    value="New"
-    pt={{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-    }}
-></Tag>
-        `,
-        javascript: `
-import React from 'react';
-import { Tag } from 'primereact/tag';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Tag value="New"
-                pt={{
-                    root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-                }}
-            ></Tag>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React from 'react';
-import { Tag } from 'primereact/tag';
-
-export default function PTDemo() {
-    return (
-        <div className="card flex justify-content-center">
-            <Tag value="New"
-                pt={{
-                    root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-                }}
-            ></Tag>
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Tag
-                    value="New"
-                    pt={{
-                        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/terminal/pt/ptdoc.js b/components/doc/terminal/pt/ptdoc.js
deleted file mode 100644
index 0b9c1bfa7a..0000000000
--- a/components/doc/terminal/pt/ptdoc.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Terminal } from '@/components/lib/terminal/Terminal';
-import { TerminalService } from '@/components/lib/terminalservice/TerminalService';
-import { useEffect } from 'react';
-
-export function PTDoc(props) {
-    const commandHandler = (text) => {
-        let response;
-        let argsIndex = text.indexOf(' ');
-        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-        switch (command) {
-            case 'date':
-                response = 'Today is ' + new Date().toDateString();
-                break;
-
-            case 'greet':
-                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-                break;
-
-            case 'random':
-                response = Math.floor(Math.random() * 100);
-                break;
-
-            case 'clear':
-                response = null;
-                break;
-
-            default:
-                response = 'Unknown command: ' + command;
-                break;
-        }
-
-        if (response) {
-            TerminalService.emit('response', response);
-        } else {
-            TerminalService.emit('clear');
-        }
-    };
-
-    useEffect(() => {
-        TerminalService.on('command', commandHandler);
-
-        return () => {
-            TerminalService.off('command', commandHandler);
-        };
-    }, []);
-
-    const code = {
-        basic: `
-<Terminal
-    pt={{
-        root: { className: 'surface-900 text-white' },
-        command: { className: 'text-blue-500' },
-        prompt: { className: 'text-yellow-500' },
-        response: { className: 'text-purple-500' }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useEffect } from 'react';
-import { Terminal } from 'primereact/terminal';
-import { TerminalService } from 'primereact/terminalservice';
-
-export default function PTDemo() {
-    const commandHandler = (text) => {
-        let response;
-        let argsIndex = text.indexOf(' ');
-        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-        switch (command) {
-            case 'date':
-                response = 'Today is ' + new Date().toDateString();
-                break;
-
-            case 'greet':
-                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-                break;
-
-            case 'random':
-                response = Math.floor(Math.random() * 100);
-                break;
-
-            case 'clear':
-                response = null;
-                break;
-
-            default:
-                response = 'Unknown command: ' + command;
-                break;
-        }
-
-        if (response)
-            TerminalService.emit('response', response);
-        else
-            TerminalService.emit('clear');
-    };
-
-    useEffect(() => {
-        TerminalService.on('command', commandHandler);
-
-        return () => {
-            TerminalService.off('command', commandHandler);
-        };
-    }, []);
-
-    return (
-        <div className="card">
-            <p>
-                Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
-            </p>
-            <Terminal
-                welcomeMessage="Welcome to PrimeReact"
-                prompt="primereact $"
-                pt={{
-                    root: { className: 'surface-900 text-white' },
-                    command: { className: 'text-blue-500' },
-                    prompt: { className: 'text-yellow-500' },
-                    response: { className: 'text-purple-500' }
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useEffect } from 'react';
-import { Terminal } from 'primereact/terminal';
-import { TerminalService } from 'primereact/terminalservice';
-
-export default function PTDemo() {
-    const commandHandler = (text: string) => {
-        let response: string;
-        let argsIndex: number = text.indexOf(' ');
-        let command: string = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-        switch (command) {
-            case 'date':
-                response = 'Today is ' + new Date().toDateString();
-                break;
-
-            case 'greet':
-                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
-                break;
-
-            case 'random':
-                response = Math.floor(Math.random() * 100);
-                break;
-
-            case 'clear':
-                response = null;
-                break;
-
-            default:
-                response = 'Unknown command: ' + command;
-                break;
-        }
-
-        if (response)
-            TerminalService.emit('response', response);
-        else
-            TerminalService.emit('clear');
-    };
-
-    useEffect(() => {
-        TerminalService.on('command', commandHandler);
-
-        return () => {
-            TerminalService.off('command', commandHandler);
-        };
-    }, []);
-
-    return (
-            <div className="card">
-                <p>
-                    Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
-                </p>
-                <Terminal
-                    welcomeMessage="Welcome to PrimeReact"
-                    prompt="primereact $"
-                    pt={{
-                        root: { className: 'surface-900 text-white' },
-                        command: { className: 'text-blue-500' },
-                        prompt: { className: 'text-yellow-500' },
-                        response: { className: 'text-purple-500' }
-                    }}
-                />
-            </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <p>
-                    Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
-                </p>
-                <Terminal
-                    welcomeMessage="Welcome to PrimeReact"
-                    prompt="primereact $"
-                    pt={{
-                        root: { className: 'surface-900 text-white' },
-                        command: { className: 'text-blue-500' },
-                        prompt: { className: 'text-yellow-500' },
-                        response: { className: 'text-purple-500' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/tieredmenu/pt/ptdoc.js b/components/doc/tieredmenu/pt/ptdoc.js
deleted file mode 100644
index b5b7efadea..0000000000
--- a/components/doc/tieredmenu/pt/ptdoc.js
+++ /dev/null
@@ -1,451 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { TieredMenu } from '@/components/lib/tieredmenu/TieredMenu';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            separator: true
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    const code = {
-        basic: `
-<TieredMenu
-    model={items}
-    breakpoint="767px"
-    pt={{
-        action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react';
-import { TieredMenu } from 'primereact/tieredmenu';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            separator: true
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <TieredMenu
-                model={items}
-                breakpoint="767px"
-                pt={{
-                    action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react';
-import { TieredMenu } from 'primereact/tieredmenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            separator: true
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <TieredMenu
-                model={items}
-                breakpoint="767px"
-                pt={{
-                    action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <TieredMenu
-                    model={items}
-                    breakpoint="767px"
-                    pt={{
-                        action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/timeline/pt/ptdoc.js b/components/doc/timeline/pt/ptdoc.js
deleted file mode 100644
index 4e01f6042b..0000000000
--- a/components/doc/timeline/pt/ptdoc.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Timeline } from '@/components/lib/timeline/Timeline';
-
-export function PTDoc(props) {
-    const events = [
-        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
-        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-    ];
-
-    const code = {
-        basic: `
-<Timeline
-    value={events}
-    content={(item) => item.status}
-    pt={{
-        marker: { className: 'border-orange-400' }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Timeline } from 'primereact/timeline';
-
-export default function PTDemo() {
-    const events = [
-        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
-        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-    ];
-        
-    return (
-        <div className="card">
-            <Timeline
-                value={events}
-                content={(item) => item.status}
-                pt={{
-                    marker: { className: 'border-orange-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Timeline } from 'primereact/timeline';
-
-interface TimelineEvent {
-    status?: string;
-    date?: string;
-    icon?: string;
-    color?: string;
-    image?: string;
-}
-
-export default function PTDemo() {
-    const events: TimelineEvent[] = [
-        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
-        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-    ];
-        
-    return (
-        <div className="card">
-            <Timeline
-                value={events}
-                content={(item) => item.status}
-                pt={{
-                    marker: { className: 'border-orange-400' }
-                }}
-            />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Timeline
-                    value={events}
-                    content={(item) => item.status}
-                    pt={{
-                        marker: { className: 'border-orange-400' }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/toast/pt/ptdoc.js b/components/doc/toast/pt/ptdoc.js
deleted file mode 100644
index e88cee172c..0000000000
--- a/components/doc/toast/pt/ptdoc.js
+++ /dev/null
@@ -1,98 +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 { useRef } from 'react';
-
-export function PTDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({
-            severity: 'info',
-            summary: 'Info',
-            detail: 'Message Content',
-            pt: {
-                root: ({ index }) => ({ className: `bg-yellow-${((index > 5 && 5) || index || 1) * 100}` })
-            }
-        });
-    };
-
-    const code = {
-        basic: `
-<Toast 
-    ref={toast} 
-    pt={{ 
-        message: ({ index }) => ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` }) 
-        }} 
-    />
-<Button onClick={show} label="Show" />
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function PTDemo() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <Toast 
-            ref={toast} 
-            pt={{ 
-                message: ({ index }) => ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` }) 
-                }} 
-            />
-            <Button onClick={show} label="Show" />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function PTDemo() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <Toast 
-            ref={toast} 
-            pt={{ 
-                message: ({ index }) => ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` }) 
-                }} 
-            />
-            <Button onClick={show} label="Show" />
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <Toast
-                    ref={toast}
-                    pt={{
-                        message: ({ index }) => ({ className: `bg-yellow-${((index > 5 && 5) || index || 1) * 100}` })
-                    }}
-                />
-                <Button onClick={show} label="Show" />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/togglebutton/pt/ptdoc.js b/components/doc/togglebutton/pt/ptdoc.js
deleted file mode 100644
index ba8b090691..0000000000
--- a/components/doc/togglebutton/pt/ptdoc.js
+++ /dev/null
@@ -1,84 +0,0 @@
-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 PTDoc(props) {
-    const [checked, setChecked] = useState(false);
-
-    const code = {
-        basic: `
-<ToggleButton
-    checked={checked}
-    onChange={(e) => setChecked(e.value)}
-    pt={{
-        root: {
-            className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { ToggleButton } from 'primereact/togglebutton';
-
-export default function PTDemo() {
-    const [checked, setChecked] = useState(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <ToggleButton
-                checked={checked}
-                onChange={(e) => setChecked(e.value)}
-                pt={{
-                    root: {
-                        className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
-
-export default function PTDemo() {
-    const [checked, setChecked] = useState<boolean>(false);
-
-    return (
-        <div className="card flex justify-content-center">
-            <ToggleButton
-                checked={checked}
-                onChange={(e) => setChecked(e.value)}
-                pt={{
-                    root: {
-                        className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <ToggleButton
-                    checked={checked}
-                    onChange={(e) => setChecked(e.value)}
-                    pt={{
-                        root: {
-                            className: `w-8rem ${checked ? 'bg-teal-400 border-white' : ''}`
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/toolbar/pt/ptdoc.js b/components/doc/toolbar/pt/ptdoc.js
deleted file mode 100644
index 3fe406dcdf..0000000000
--- a/components/doc/toolbar/pt/ptdoc.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Toolbar } from '@/components/lib/toolbar/Toolbar';
-import React from 'react';
-
-export function PTDoc(props) {
-    const startContent = (
-        <React.Fragment>
-            <Button label="New" icon="pi pi-plus" severity="help" />
-        </React.Fragment>
-    );
-
-    const endContent = (
-        <React.Fragment>
-            <Button icon="pi pi-search" className="mr-2" />
-            <Button icon="pi pi-times" severity="danger" />
-        </React.Fragment>
-    );
-
-    const code = {
-        basic: `
-<Toolbar
-    pt={{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-    }}
-    start={startContent}
-    end={endContent}
-></Toolbar>
-        `,
-        javascript: `
-import React from 'react'; 
-import { Toolbar } from 'primereact/toolbar';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const startContent = (
-        <React.Fragment>
-            <Button label="New" icon="pi pi-plus" severity='help' />
-        </React.Fragment>
-    );
-
-    const endContent = (
-        <React.Fragment>
-            <Button icon="pi pi-search" className="mr-2" />
-            <Button icon="pi pi-times" severity="danger" />
-        </React.Fragment>
-    );
-
-    return (
-        <div className="card">
-            <Toolbar
-                pt={{
-                    root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-                }}
-                start={startContent}
-                end={endContent}
-            ></Toolbar>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { Toolbar } from 'primereact/toolbar';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
-    const startContent = (
-        <React.Fragment>
-            <Button label="New" icon="pi pi-plus" severity='help' />
-        </React.Fragment>
-    );
-
-    const endContent = (
-        <React.Fragment>
-            <Button icon="pi pi-search" className="mr-2" />
-            <Button icon="pi pi-times" severity="danger" />
-        </React.Fragment>
-    );
-
-    return (
-        <div className="card">
-            <Toolbar
-                pt={{
-                    root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-                }}
-                start={startContent}
-                end={endContent}
-            ></Toolbar>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card">
-                <Toolbar
-                    pt={{
-                        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-                    }}
-                    start={startContent}
-                    end={endContent}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/tooltip/pt/ptdoc.js b/components/doc/tooltip/pt/ptdoc.js
deleted file mode 100644
index d224fdf0f4..0000000000
--- a/components/doc/tooltip/pt/ptdoc.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputText } from '@/components/lib/inputtext/InputText';
-
-export function PTDoc(props) {
-    const code = {
-        basic: `
-<InputText
-    type="text"
-    tooltip="Enter your username"
-    tooltipOptions={{
-        pt: {
-            text: {
-                className: 'bg-orange-500'
-            }
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React from 'react';
-import { InputText } from 'primereact/inputtext';
-
-export default function PTDemo() {
-
-    return (
-        <div className="card flex flex-wrap align-items-center justify-content-center gap-2">
-            <InputText
-                type="text"
-                tooltip="Enter your username"
-                tooltipOptions={{
-                    pt: {
-                        text: {
-                            className: 'bg-orange-500'
-                        }
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React from 'react';
-import { InputText } from 'primereact/inputtext';
-
-export default function PTDemo() {
-
-    return (
-        <div className="card flex flex-wrap align-items-center justify-content-center gap-2">
-            <InputText
-                type="text"
-                tooltip="Enter your username"
-                tooltipOptions={{
-                    pt: {
-                        text: {
-                            className: 'bg-orange-500'
-                        }
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex flex-wrap align-items-center justify-content-center gap-2">
-                <InputText
-                    type="text"
-                    tooltip="Enter your username"
-                    tooltipOptions={{
-                        pt: {
-                            text: {
-                                className: 'bg-orange-500'
-                            }
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/tree/pt/ptdoc.js b/components/doc/tree/pt/ptdoc.js
deleted file mode 100644
index a6dfc11bb7..0000000000
--- a/components/doc/tree/pt/ptdoc.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Tree } from '@/components/lib/tree/Tree';
-import { useEffect, useState } from 'react';
-import { NodeService } from '../../../../service/NodeService';
-
-export function PTDoc(props) {
-    const [nodes, setNodes] = useState([]);
-
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const code = {
-        basic: `
-<Tree
-    value={nodes}
-    pt={{
-        root: { className: 'w-full md:w-30rem' },
-        content: ({ context }) => ({
-            className: context.expanded ? 'bg-blue-100' : 'undefined'
-        })
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { Tree } from 'primereact/tree';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
-    const [nodes, setNodes] = useState([]);
-    
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Tree
-                value={nodes}
-                pt={{
-                    root: { className: 'w-full md:w-30rem' },
-                    content: ({ context }) => ({
-                        className: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { Tree } from 'primereact/tree';
-import { TreeNode } from 'primereact/treenode';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
-    const [nodes, setNodes] = useState<TreeNode[]>([]);
-    
-    useEffect(() => {
-        NodeService.getTreeNodes().then((data) => setNodes(data));
-    }, []);
-
-    return (
-        <div className="card flex justify-content-center">
-            <Tree
-                value={nodes}
-                pt={{
-                    root: { className: 'w-full md:w-30rem' },
-                    content: ({ context }) => ({
-                        className: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }}
-            />
-        </div>
-    )
-}
-        `,
-        data: `
-{
-    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} />
-            <div className="card flex justify-content-center">
-                <Tree
-                    value={nodes}
-                    pt={{
-                        root: { className: 'w-full md:w-30rem' },
-                        content: ({ context }) => ({
-                            className: context.expanded ? 'bg-blue-100' : 'undefined'
-                        })
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['NodeService']} />
-        </>
-    );
-}
diff --git a/components/doc/treeselect/pt/ptdoc.js b/components/doc/treeselect/pt/ptdoc.js
deleted file mode 100644
index ad270aeaf2..0000000000
--- a/components/doc/treeselect/pt/ptdoc.js
+++ /dev/null
@@ -1,152 +0,0 @@
-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 PTDoc(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
-    value={selectedNodeKey}
-    onChange={(e) => setSelectedNodeKey(e.value)}
-    options={nodes}
-    placeholder="Select Item"
-    pt={{
-        root: { className: 'w-full md:w-30rem' },
-        tree: {
-            content: ({ context }) => ({
-                className: context.expanded ? 'bg-blue-100' : 'undefined'
-            })
-        }
-    }}
-></TreeSelect>
-        `,
-        javascript: `
-import React, { useState, useEffect } from "react";
-import { TreeSelect } from 'primereact/treeselect';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
-    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
-            value={selectedNodeKey}
-            onChange={(e) => setSelectedNodeKey(e.value)}
-            options={nodes}
-            placeholder="Select Item"
-            pt={{
-                root: { className: 'w-full md:w-30rem' },
-                tree: {
-                    content: ({ context }) => ({
-                        className: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }
-            }}
-        ></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 PTDemo() {
-    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
-                value={selectedNodeKey}
-                onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)}
-                options={nodes}
-                placeholder="Select Item"
-                pt={{
-                    root: { className: 'w-full md:w-30rem' },
-                    tree: {
-                        content: ({ context }) => ({
-                            className: context.expanded ? 'bg-blue-100' : 'undefined'
-                        })
-                    }
-                }}
-            ></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} />
-            <div className="card flex justify-content-center">
-                <TreeSelect
-                    value={selectedNodeKey}
-                    onChange={(e) => setSelectedNodeKey(e.value)}
-                    options={nodes}
-                    placeholder="Select Item"
-                    pt={{
-                        root: { className: 'w-full md:w-30rem' },
-                        tree: {
-                            content: ({ context }) => ({
-                                className: context.expanded ? 'bg-blue-100' : 'undefined'
-                            })
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} service={['NodeService']} />
-        </>
-    );
-}
diff --git a/components/doc/treetable/pt/ptdoc.js b/components/doc/treetable/pt/ptdoc.js
deleted file mode 100644
index 98f66217f5..0000000000
--- a/components/doc/treetable/pt/ptdoc.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Column } from '@/components/lib/column/Column';
-import { TreeTable } from '@/components/lib/treetable/TreeTable';
-import { useEffect, useState } from 'react';
-import { NodeService } from '../../../../service/NodeService';
-
-export function PTDoc(props) {
-    const [nodes, setNodes] = useState([]);
-
-    useEffect(() => {
-        NodeService.getTreeTableNodes().then((data) => setNodes(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const code = {
-        basic: `
-<TreeTable sortMode="multiple" value={nodes} tableStyle={{ minWidth: '50rem' }}>
-    <Column
-        field="name"
-        header="Name"
-        sortable
-        expander
-        pt={{
-            sortBadge: { className: 'text-orange-400' }
-        }}
-    ></Column>
-    <Column
-        field="size"
-        header="Size"
-        sortable
-        pt={{
-            sortBadge: { className: 'text-orange-400' }
-        }}
-    ></Column>
-    <Column
-        field="type"
-        header="Type"
-        sortable
-        pt={{
-            sortBadge: { className: 'text-orange-400' }
-        }}
-    ></Column>
-</TreeTable>
-        `,
-        javascript: `
-import React, { useState, useEffect } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from 'primereact/column';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
-    const [nodes, setNodes] = useState([]);
-
-    useEffect(() => {
-        NodeService.getTreeTableNodes().then((data) => setNodes(data));
-    }, []);
-
-    return (
-        <div className="card">
-            <TreeTable sortMode="multiple" value={nodes} tableStyle={{ minWidth: '50rem' }}>
-                <Column
-                    field="name"
-                    header="Name"
-                    sortable
-                    expander
-                    pt={{
-                        sortBadge: { className: 'text-orange-400' }
-                    }}
-                ></Column>
-                <Column
-                    field="size"
-                    header="Size"
-                    sortable
-                    pt={{
-                        sortBadge: { className: 'text-orange-400' }
-                    }}
-                ></Column>
-                <Column
-                    field="type"
-                    header="Type"
-                    sortable
-                    pt={{
-                        sortBadge: { className: 'text-orange-400' }
-                    }}
-                ></Column>
-            </TreeTable>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState, useEffect } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from 'primereact/column';
-import { TreeNode } from 'primereact/treenode';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
-    const [nodes, setNodes] = useState<TreeNode[]>([]);
-
-    useEffect(() => {
-        NodeService.getTreeTableNodes().then((data) => setNodes(data));
-    }, []);
-
-    return (
-        <div className="card">
-            <TreeTable sortMode="multiple" value={nodes} tableStyle={{ minWidth: '50rem' }}>
-                <Column
-                    field="name"
-                    header="Name"
-                    sortable
-                    expander
-                    pt={{
-                        sortBadge: { className: 'text-orange-400' }
-                    }}
-                ></Column>
-                <Column
-                    field="size"
-                    header="Size"
-                    sortable
-                    pt={{
-                        sortBadge: { className: 'text-orange-400' }
-                    }}
-                ></Column>
-                <Column
-                    field="type"
-                    header="Type"
-                    sortable
-                    pt={{
-                        sortBadge: { className: 'text-orange-400' }
-                    }}
-                ></Column>
-            </TreeTable>
-        </div>
-    );
-}
-        `,
-        data: `
-{
-    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} />
-            <div className="card">
-                <TreeTable sortMode="multiple" value={nodes} tableStyle={{ minWidth: '50rem' }}>
-                    <Column
-                        field="name"
-                        header="Name"
-                        sortable
-                        expander
-                        pt={{
-                            sortBadge: { className: 'text-orange-400' }
-                        }}
-                    />
-                    <Column
-                        field="size"
-                        header="Size"
-                        sortable
-                        pt={{
-                            sortBadge: { className: 'text-orange-400' }
-                        }}
-                    />
-                    <Column
-                        field="type"
-                        header="Type"
-                        sortable
-                        pt={{
-                            sortBadge: { className: 'text-orange-400' }
-                        }}
-                    />
-                </TreeTable>
-            </div>
-            <DocSectionCode code={code} service={['NodeService']} />
-        </>
-    );
-}
diff --git a/components/doc/tristatecheckbox/pt/ptdoc.js b/components/doc/tristatecheckbox/pt/ptdoc.js
deleted file mode 100644
index e0088c62c9..0000000000
--- a/components/doc/tristatecheckbox/pt/ptdoc.js
+++ /dev/null
@@ -1,91 +0,0 @@
-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 PTDoc(props) {
-    const [value, setValue] = useState(null);
-
-    const code = {
-        basic: `
-<TriStateCheckbox
-    value={value}
-    onChange={(e) => setValue(e.value)}
-    pt={{
-        checkbox: {
-            className: value ? 'bg-teal-500 border-white' : undefined
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from "react";
-import { TriStateCheckbox } from 'primereact/tristatecheckbox';
-
-export default function PTDemo() {
-    const [value, setValue] = useState(null);
-
-    return (
-        <div className="card flex flex-column align-items-center gap-3">
-            <TriStateCheckbox
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    checkbox: {
-                        className: value ? 'bg-teal-500 border-white' : undefined
-                    }
-                }}
-            />
-            <label>{String(value)}</label>
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from "react";
-import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
-
-export default function PTDemo() {
-    const [value, setValue] = useState<boolean | undefined | null>(null);
-
-    return (
-        <div className="card flex flex-column align-items-center gap-3">
-            <TriStateCheckbox
-                value={value}
-                onChange={(e) => setValue(e.value)}
-                pt={{
-                    checkbox: {
-                        className: value ? 'bg-teal-500 border-white' : undefined
-                    }
-                }}
-            />
-            <label>{String(value)}</label>
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    TriStateCheckbox is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
-                </p>
-            </DocSectionText>
-            <div className="card flex flex-column align-items-center gap-3">
-                <TriStateCheckbox
-                    value={value}
-                    onChange={(e) => setValue(e.value)}
-                    pt={{
-                        checkbox: {
-                            className: value ? 'bg-teal-500 border-white' : undefined
-                        }
-                    }}
-                />
-                <label>{String(value)}</label>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/doc/virtualscroller/pt/ptdoc.js b/components/doc/virtualscroller/pt/ptdoc.js
deleted file mode 100644
index 9ca0e68f8e..0000000000
--- a/components/doc/virtualscroller/pt/ptdoc.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { classNames } from '@/components/lib/utils/Utils';
-import { VirtualScroller } from '@/components/lib/virtualscroller/VirtualScroller';
-import { useState } from 'react';
-
-export function PTDoc(props) {
-    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => `Item #${i}`));
-
-    const itemTemplate = (item, options) => {
-        const className = classNames('flex align-items-center p-2', {
-            'surface-hover': options.odd
-        });
-
-        return (
-            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
-                {item}
-            </div>
-        );
-    };
-
-    const code = {
-        basic: `
-<VirtualScroller
-    items={items}
-    itemSize={50}
-    itemTemplate={itemTemplate}
-    pt={{
-        root: {
-            className: 'border-1 surface-border border-round',
-            style: { width: '200px', height: '200px' }
-        }
-    }}
-/>
-        `,
-        javascript: `
-import React, { useState } from 'react';
-import { VirtualScroller } from 'primereact/virtualscroller';
-import { classNames } from 'primereact/utils';
-
-export default function PTDemo() {
-    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-
-    const itemTemplate = (item, options) => {
-        const className = classNames('flex align-items-center p-2', {
-            'surface-hover': options.odd
-        });
-
-        return (
-            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
-                {item}
-            </div>
-        );
-    };
-
-    return ( 
-        <div className="card flex justify-content-center">
-            <VirtualScroller
-                items={items}
-                itemSize={50}
-                itemTemplate={itemTemplate}
-                pt={{
-                    root: {
-                        className: 'border-1 surface-border border-round',
-                        style: { width: '200px', height: '200px' }
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `,
-        typescript: `
-import React, { useState } from 'react';
-import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import { classNames } from 'primereact/utils';
-
-export default function PTDemo() {
-    const [items] = useState<string[]>(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-
-    const itemTemplate = (item: string, options: VirtualScrollerTemplateOptions) => {
-        const className = classNames('flex align-items-center p-2', {
-            'surface-hover': options.odd
-        });
-
-        return (
-            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
-                {item}
-            </div>
-        );
-    };
-
-    return ( 
-        <div className="card flex justify-content-center">
-            <VirtualScroller
-                items={items}
-                itemSize={50}
-                itemTemplate={itemTemplate}
-                pt={{
-                    root: {
-                        className: 'border-1 surface-border border-round',
-                        style: { width: '200px', height: '200px' }
-                    }
-                }}
-            />
-        </div>
-    );
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props} />
-            <div className="card flex justify-content-center">
-                <VirtualScroller
-                    items={items}
-                    itemSize={50}
-                    itemTemplate={itemTemplate}
-                    pt={{
-                        root: {
-                            className: 'border-1 surface-border border-round',
-                            style: { width: '200px', height: '200px' }
-                        }
-                    }}
-                />
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/pages/accordion/index.js b/pages/accordion/index.js
index 083896cfa4..93a2945d49 100644
--- a/pages/accordion/index.js
+++ b/pages/accordion/index.js
@@ -5,7 +5,6 @@ import { DisabledDoc } from '@/components/doc/accordion/disableddoc';
 import { DynamicDoc } from '@/components/doc/accordion/dynamicdoc';
 import { ImportDoc } from '@/components/doc/accordion/importdoc';
 import { MultipleDoc } from '@/components/doc/accordion/multipledoc';
-import { PTDoc } from '@/components/doc/accordion/pt/ptdoc';
 import { Wireframe } from '@/components/doc/accordion/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/accordion/templatedoc';
 import { StyledDoc } from '@/components/doc/accordion/theming/styleddoc';
@@ -73,11 +72,6 @@ const AccordionDemo = () => {
             id: 'pt.accordiontab.options',
             label: 'AccordionTab PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js
index 6643beef47..bc9250a599 100644
--- a/pages/autocomplete/index.js
+++ b/pages/autocomplete/index.js
@@ -10,7 +10,6 @@ import { ImportDoc } from '@/components/doc/autocomplete/importdoc';
 import { InvalidDoc } from '@/components/doc/autocomplete/invaliddoc';
 import { MultipleDoc } from '@/components/doc/autocomplete/multipledoc';
 import { ObjectsDoc } from '@/components/doc/autocomplete/objectsdoc';
-import { PTDoc } from '@/components/doc/autocomplete/pt/ptdoc';
 import { Wireframe } from '@/components/doc/autocomplete/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/autocomplete/templatedoc';
 import { StyledDoc } from '@/components/doc/autocomplete/theming/styleddoc';
@@ -102,11 +101,6 @@ const AutoCompleteDemo = () => {
             id: 'pt.autocomplete.options',
             label: 'AutoComplete PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/avatar/index.js b/pages/avatar/index.js
index 4edf8c992c..edef08f29e 100644
--- a/pages/avatar/index.js
+++ b/pages/avatar/index.js
@@ -4,7 +4,6 @@ import { IconDoc } from '@/components/doc/avatar/icondoc';
 import { ImageDoc } from '@/components/doc/avatar/imagedoc';
 import { ImportDoc } from '@/components/doc/avatar/importdoc';
 import { LabelDoc } from '@/components/doc/avatar/labeldoc';
-import { PTDoc } from '@/components/doc/avatar/pt/ptdoc';
 import { Wireframe } from '@/components/doc/avatar/pt/wireframe';
 import { StyledDoc } from '@/components/doc/avatar/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/avatar/theming/tailwinddoc';
@@ -60,11 +59,6 @@ const AvatarDemo = () => {
             id: 'pt.avatargroup.options',
             label: 'AvatarGroup PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/badge/index.js b/pages/badge/index.js
index f48b11bab5..7cb5158ea1 100644
--- a/pages/badge/index.js
+++ b/pages/badge/index.js
@@ -3,7 +3,6 @@ import { BasicDoc } from '@/components/doc/badge/basicdoc';
 import { ButtonDoc } from '@/components/doc/badge/buttondoc';
 import { ImportDoc } from '@/components/doc/badge/importdoc';
 import { PositionDoc } from '@/components/doc/badge/positiondoc';
-import { PTDoc } from '@/components/doc/badge/pt/ptdoc';
 import { Wireframe } from '@/components/doc/badge/pt/wireframe';
 import { SeverityDoc } from '@/components/doc/badge/severitydoc';
 import { SizeDoc } from '@/components/doc/badge/sizedoc';
@@ -62,11 +61,6 @@ const BadgeDemo = () => {
             id: 'pt.badge.options',
             label: 'Badge PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/blockui/index.js b/pages/blockui/index.js
index 8b94049911..c24cd1e93a 100644
--- a/pages/blockui/index.js
+++ b/pages/blockui/index.js
@@ -2,7 +2,6 @@ import { AccessibilityDoc } from '@/components/doc/blockui/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/blockui/basicdoc';
 import { DocumentDoc } from '@/components/doc/blockui/documentdoc';
 import { ImportDoc } from '@/components/doc/blockui/importdoc';
-import { PTDoc } from '@/components/doc/blockui/pt/ptdoc';
 import { Wireframe } from '@/components/doc/blockui/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/blockui/templatedoc';
 import { StyledDoc } from '@/components/doc/blockui/theming/styleddoc';
@@ -50,11 +49,6 @@ const BlockUIDemo = () => {
             id: 'pt.blockui.options',
             label: 'BlockUI PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/breadcrumb/index.js b/pages/breadcrumb/index.js
index ef67f4d484..5178eb1f60 100644
--- a/pages/breadcrumb/index.js
+++ b/pages/breadcrumb/index.js
@@ -1,14 +1,13 @@
 import { AccessibilityDoc } from '@/components/doc/breadcrumb/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/breadcrumb/basicdoc';
 import { ImportDoc } from '@/components/doc/breadcrumb/importdoc';
-import { PTDoc } from '@/components/doc/breadcrumb/pt/ptdoc';
 import { Wireframe } from '@/components/doc/breadcrumb/pt/wireframe';
+import { RouterDoc } from '@/components/doc/breadcrumb/routerdoc';
 import { TemplateDoc } from '@/components/doc/breadcrumb/templatedoc';
 import { StyledDoc } from '@/components/doc/breadcrumb/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/breadcrumb/theming/tailwinddoc';
 import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
-import { RouterDoc } from '@/components/doc/breadcrumb/routerdoc';
 
 const BreadCrumbDemo = () => {
     const docs = [
@@ -49,11 +48,6 @@ const BreadCrumbDemo = () => {
             id: 'pt.breadcrumb.options',
             label: 'BreadCrumb PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/button/index.js b/pages/button/index.js
index b6922ff363..13d49486eb 100644
--- a/pages/button/index.js
+++ b/pages/button/index.js
@@ -9,7 +9,6 @@ import { ImportDoc } from '@/components/doc/button/importdoc';
 import { LinkDoc } from '@/components/doc/button/linkdoc';
 import { LoadingDoc } from '@/components/doc/button/loadingdoc';
 import { OutlinedDoc } from '@/components/doc/button/outlineddoc';
-import { PTDoc } from '@/components/doc/button/pt/ptdoc';
 import { Wireframe } from '@/components/doc/button/pt/wireframe';
 import { RaisedDoc } from '@/components/doc/button/raiseddoc';
 import { RaisedTextDoc } from '@/components/doc/button/raisedtextdoc';
@@ -128,11 +127,6 @@ const ButtonDemo = () => {
             id: 'pt.button.options',
             label: 'Button PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/calendar/index.js b/pages/calendar/index.js
index 5e05036b8d..37274a3a4b 100644
--- a/pages/calendar/index.js
+++ b/pages/calendar/index.js
@@ -15,7 +15,6 @@ import { MinMaxDoc } from '@/components/doc/calendar/minmaxdoc';
 import { MonthPickerDoc } from '@/components/doc/calendar/monthpickerdoc';
 import { MultipleDoc } from '@/components/doc/calendar/multipledoc';
 import { MultipleMonthsDoc } from '@/components/doc/calendar/multiplemonthsdoc';
-import { PTDoc } from '@/components/doc/calendar/pt/ptdoc';
 import { Wireframe } from '@/components/doc/calendar/pt/wireframe';
 import { RangeDoc } from '@/components/doc/calendar/rangedoc';
 import { StyledDoc } from '@/components/doc/calendar/theming/styleddoc';
@@ -144,11 +143,6 @@ const CalendarDemo = () => {
             id: 'pt.calendar.options',
             label: 'Calendar PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/card/index.js b/pages/card/index.js
index 25ed58e27a..2c8a042a0e 100644
--- a/pages/card/index.js
+++ b/pages/card/index.js
@@ -2,7 +2,6 @@ import { AccessibilityDoc } from '@/components/doc/card/accessibilitydoc';
 import { AdvancedDoc } from '@/components/doc/card/advanceddoc';
 import { BasicDoc } from '@/components/doc/card/basicdoc';
 import { ImportDoc } from '@/components/doc/card/importdoc';
-import { PTDoc } from '@/components/doc/card/pt/ptdoc';
 import { Wireframe } from '@/components/doc/card/pt/wireframe';
 import { StyledDoc } from '@/components/doc/card/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/card/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const CardDemo = () => {
             id: 'pt.card.options',
             label: 'Card PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/carousel/index.js b/pages/carousel/index.js
index 712c154858..0d182d23d2 100644
--- a/pages/carousel/index.js
+++ b/pages/carousel/index.js
@@ -3,7 +3,6 @@ import { BasicDoc } from '@/components/doc/carousel/basicdoc';
 import { CircularDoc } from '@/components/doc/carousel/circulardoc';
 import { ImportDoc } from '@/components/doc/carousel/importdoc';
 import { NumScrollDoc } from '@/components/doc/carousel/numscrolldoc';
-import { PTDoc } from '@/components/doc/carousel/pt/ptdoc';
 import { Wireframe } from '@/components/doc/carousel/pt/wireframe';
 import { ResponsiveDoc } from '@/components/doc/carousel/responsivedoc';
 import { StyledDoc } from '@/components/doc/carousel/theming/styleddoc';
@@ -61,11 +60,6 @@ const CarouselDemo = () => {
             id: 'pt.carousel.options',
             label: 'Carousel PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/cascadeselect/index.js b/pages/cascadeselect/index.js
index dcbe97e7ee..c2a4a3aa1e 100644
--- a/pages/cascadeselect/index.js
+++ b/pages/cascadeselect/index.js
@@ -6,7 +6,6 @@ import { FloatLabelDoc } from '@/components/doc/cascadeselect/floatlabeldoc';
 import { ImportDoc } from '@/components/doc/cascadeselect/importdoc';
 import { InvalidDoc } from '@/components/doc/cascadeselect/invaliddoc';
 import { LoadingDoc } from '@/components/doc/cascadeselect/loadingdoc';
-import { PTDoc } from '@/components/doc/cascadeselect/pt/ptdoc';
 import { Wireframe } from '@/components/doc/cascadeselect/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/cascadeselect/templatedoc';
 import { StyledDoc } from '@/components/doc/cascadeselect/theming/styleddoc';
@@ -72,11 +71,6 @@ const CascadeSelectDemo = () => {
             id: 'pt.cascadeselect.options',
             label: 'CascadeSelect PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/chart/index.js b/pages/chart/index.js
index 065d5b3e2c..47df34d927 100644
--- a/pages/chart/index.js
+++ b/pages/chart/index.js
@@ -10,7 +10,6 @@ import { LineStylesDoc } from '@/components/doc/chart/linestylesdoc';
 import { MultiAxisDoc } from '@/components/doc/chart/multiaxisdoc';
 import { PieChartDoc } from '@/components/doc/chart/piechartdoc';
 import { PolarAreaDoc } from '@/components/doc/chart/polarareadoc';
-import { PTDoc } from '@/components/doc/chart/pt/ptdoc';
 import { Wireframe } from '@/components/doc/chart/pt/wireframe';
 import { RadarDoc } from '@/components/doc/chart/radardoc';
 import { StackedBarDoc } from '@/components/doc/chart/stackedbardoc';
@@ -108,11 +107,6 @@ const ChartDemo = () => {
             id: 'pt.chart.options',
             label: 'Chart PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/checkbox/index.js b/pages/checkbox/index.js
index 8873c6c17c..ef4aedec8e 100644
--- a/pages/checkbox/index.js
+++ b/pages/checkbox/index.js
@@ -6,7 +6,6 @@ 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';
-import { PTDoc } from '@/components/doc/checkbox/pt/ptdoc';
 import { Wireframe } from '@/components/doc/checkbox/pt/wireframe';
 import { StyledDoc } from '@/components/doc/checkbox/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/checkbox/theming/tailwinddoc';
@@ -67,11 +66,6 @@ const CheckboxDemo = () => {
             id: 'pt.checkbox.options',
             label: 'Checkbox PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/chip/index.js b/pages/chip/index.js
index 3cc140893c..dcc07014e6 100644
--- a/pages/chip/index.js
+++ b/pages/chip/index.js
@@ -3,7 +3,6 @@ import { BasicDoc } from '@/components/doc/chip/basicdoc';
 import { IconDoc } from '@/components/doc/chip/icondoc';
 import { ImageDoc } from '@/components/doc/chip/imagedoc';
 import { ImportDoc } from '@/components/doc/chip/importdoc';
-import { PTDoc } from '@/components/doc/chip/pt/ptdoc';
 import { Wireframe } from '@/components/doc/chip/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/chip/templatedoc';
 import { StyledDoc } from '@/components/doc/chip/theming/styleddoc';
@@ -56,11 +55,6 @@ const ChipDemo = () => {
             id: 'pt.chip.options',
             label: 'Chip PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/chips/index.js b/pages/chips/index.js
index 9d88a5fb75..f8fd2799b0 100644
--- a/pages/chips/index.js
+++ b/pages/chips/index.js
@@ -6,7 +6,6 @@ import { FloatLabelDoc } from '@/components/doc/chips/floatlabeldoc';
 import { ImportDoc } from '@/components/doc/chips/importdoc';
 import { InvalidDoc } from '@/components/doc/chips/invaliddoc';
 import { KeyFilterDoc } from '@/components/doc/chips/keyfilterdoc';
-import { PTDoc } from '@/components/doc/chips/pt/ptdoc';
 import { Wireframe } from '@/components/doc/chips/pt/wireframe';
 import { SeparatorDoc } from '@/components/doc/chips/separatordoc';
 import { TemplateDoc } from '@/components/doc/chips/templatedoc';
@@ -78,11 +77,6 @@ const ChipsDemo = () => {
             id: 'pt.chips.options',
             label: 'Chips PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/colorpicker/index.js b/pages/colorpicker/index.js
index b73d529d44..c00df6f651 100644
--- a/pages/colorpicker/index.js
+++ b/pages/colorpicker/index.js
@@ -4,7 +4,6 @@ import { DisabledDoc } from '@/components/doc/colorpicker/disableddoc';
 import { FormatDoc } from '@/components/doc/colorpicker/formatdoc';
 import { ImportDoc } from '@/components/doc/colorpicker/importdoc';
 import { InlineDoc } from '@/components/doc/colorpicker/inlinedoc';
-import { PTDoc } from '@/components/doc/colorpicker/pt/ptdoc';
 import { Wireframe } from '@/components/doc/colorpicker/pt/wireframe';
 import { StyledDoc } from '@/components/doc/colorpicker/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/colorpicker/theming/tailwinddoc';
@@ -54,11 +53,6 @@ const ColorPickerDemo = () => {
             id: 'pt.colorpicker.options',
             label: 'ColorPicker PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/confirmdialog/index.js b/pages/confirmdialog/index.js
index cce3c9c8d6..400d8a63be 100644
--- a/pages/confirmdialog/index.js
+++ b/pages/confirmdialog/index.js
@@ -6,7 +6,6 @@ import { DeclarativeDoc } from '@/components/doc/confirmdialog/declarativedoc';
 import { HeadlessDoc } from '@/components/doc/confirmdialog/headlessdoc';
 import { ImportDoc } from '@/components/doc/confirmdialog/importdoc';
 import { PositionDoc } from '@/components/doc/confirmdialog/positiondoc';
-import { PTDoc } from '@/components/doc/confirmdialog/pt/ptdoc';
 import { Wireframe } from '@/components/doc/confirmdialog/pt/wireframe';
 import { ResponsiveDoc } from '@/components/doc/confirmdialog/responsivedoc';
 import { TemplateDoc } from '@/components/doc/confirmdialog/templatedoc';
@@ -68,11 +67,6 @@ const ConfirmDialogDemo = () => {
             id: 'pt.confirmdialog.options',
             label: 'ConfirmDialog PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/confirmpopup/index.js b/pages/confirmpopup/index.js
index 70d93740d5..33fb476998 100644
--- a/pages/confirmpopup/index.js
+++ b/pages/confirmpopup/index.js
@@ -3,14 +3,13 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/confirmpopup/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/confirmpopup/basicdoc';
 import { DeclarativeDoc } from '@/components/doc/confirmpopup/declarativedoc';
+import { HeadlessDoc } from '@/components/doc/confirmpopup/headlessdoc';
 import { ImportDoc } from '@/components/doc/confirmpopup/importdoc';
-import { PTDoc } from '@/components/doc/confirmpopup/pt/ptdoc';
 import { Wireframe } from '@/components/doc/confirmpopup/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/confirmpopup/templatedoc';
 import { StyledDoc } from '@/components/doc/confirmpopup/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/confirmpopup/theming/tailwinddoc';
 import { ConfirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
-import { TemplateDoc } from '@/components/doc/confirmpopup/templatedoc';
-import { HeadlessDoc } from '@/components/doc/confirmpopup/headlessdoc';
 
 const ConfirmPopupDemo = () => {
     const docs = [
@@ -56,11 +55,6 @@ const ConfirmPopupDemo = () => {
             id: 'pt.confirmpopup.options',
             label: 'ConfirmPopup PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/contextmenu/index.js b/pages/contextmenu/index.js
index 0438bde266..bd697e10d8 100644
--- a/pages/contextmenu/index.js
+++ b/pages/contextmenu/index.js
@@ -2,16 +2,15 @@ import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/contextmenu/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/contextmenu/basicdoc';
+import { CommandDoc } from '@/components/doc/contextmenu/commanddoc';
+import { DataTableDoc } from '@/components/doc/contextmenu/datatabledoc';
 import { DocumentDoc } from '@/components/doc/contextmenu/documentdoc';
 import { ImportDoc } from '@/components/doc/contextmenu/importdoc';
-import { PTDoc } from '@/components/doc/contextmenu/pt/ptdoc';
 import { Wireframe } from '@/components/doc/contextmenu/pt/wireframe';
-import { StyledDoc } from '@/components/doc/contextmenu/theming/styleddoc';
+import { RouterDoc } from '@/components/doc/contextmenu/routerdoc';
 import { TemplateDoc } from '@/components/doc/contextmenu/templatedoc';
+import { StyledDoc } from '@/components/doc/contextmenu/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/contextmenu/theming/tailwinddoc';
-import { CommandDoc } from '@/components/doc/contextmenu/commanddoc';
-import { DataTableDoc } from '@/components/doc/contextmenu/datatabledoc';
-import { RouterDoc } from '@/components/doc/contextmenu/routerdoc';
 
 const ContextMenuDemo = () => {
     const docs = [
@@ -66,11 +65,6 @@ const ContextMenuDemo = () => {
             id: 'pt.contextmenu.options',
             label: 'ContextMenu PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/datascroller/index.js b/pages/datascroller/index.js
index baa0d43e97..6b27828969 100644
--- a/pages/datascroller/index.js
+++ b/pages/datascroller/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/datascroller/basicdoc';
 import { ImportDoc } from '@/components/doc/datascroller/importdoc';
 import { InlineDataScrollerDoc } from '@/components/doc/datascroller/inlinedoc';
 import { LoaderDataScrollerDoc } from '@/components/doc/datascroller/loaderdoc';
-import { PTDoc } from '@/components/doc/datascroller/pt/ptdoc';
 import { StyledDoc } from '@/components/doc/datascroller/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/datascroller/theming/tailwinddoc';
 import { Wireframe } from '@/components/doc/timeline/pt/wireframe';
@@ -49,11 +48,6 @@ const DataScrollerDemo = () => {
             id: 'pt.datascroller.options',
             label: 'DataScroller PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/datatable/index.js b/pages/datatable/index.js
index 08b74f26ae..2baf0303e5 100644
--- a/pages/datatable/index.js
+++ b/pages/datatable/index.js
@@ -24,7 +24,6 @@ import { ImportDoc } from '@/components/doc/datatable/importdoc';
 import { LazyLoadDoc } from '@/components/doc/datatable/lazyloaddoc';
 import { PaginatorBasicDoc } from '@/components/doc/datatable/paginator/basicdoc';
 import { PaginatorTemplateDoc } from '@/components/doc/datatable/paginator/templatedoc';
-import { PTDoc } from '@/components/doc/datatable/pt/ptdoc';
 import { Wireframe } from '@/components/doc/datatable/pt/wireframe';
 import { ReorderDoc } from '@/components/doc/datatable/reorderdoc';
 import { RowExpansionDoc } from '@/components/doc/datatable/rowexpansiondoc';
@@ -412,11 +411,6 @@ const DataTableDemo = () => {
             id: 'pt.row.options',
             label: 'Row PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/dataview/index.js b/pages/dataview/index.js
index 5b78814dbb..3b8015aeac 100644
--- a/pages/dataview/index.js
+++ b/pages/dataview/index.js
@@ -6,7 +6,6 @@ import { ImportDoc } from '@/components/doc/dataview/importdoc';
 import { LayoutDoc } from '@/components/doc/dataview/layoutdoc';
 import { LoadingDoc } from '@/components/doc/dataview/loadingdoc';
 import { PaginationDoc } from '@/components/doc/dataview/paginationdoc';
-import { PTDoc } from '@/components/doc/dataview/pt/ptdoc';
 import { Wireframe } from '@/components/doc/dataview/pt/wireframe';
 import { SortingDoc } from '@/components/doc/dataview/sortingdoc';
 import { StyledDoc } from '@/components/doc/dataview/theming/styleddoc';
@@ -66,11 +65,6 @@ const DataViewDemo = () => {
             id: 'pt.dataviewlayoutoptions.options',
             label: 'DataViewLayoutOptions PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/dialog/index.js b/pages/dialog/index.js
index 0cc2986079..3a094d42f3 100644
--- a/pages/dialog/index.js
+++ b/pages/dialog/index.js
@@ -3,18 +3,17 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/dialog/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/dialog/basicdoc';
 import { FooterDoc } from '@/components/doc/dialog/footerdoc';
+import { HeadlessDoc } from '@/components/doc/dialog/headlessdoc';
 import { ImportDoc } from '@/components/doc/dialog/importdoc';
 import { LongContentDoc } from '@/components/doc/dialog/longcontentdoc';
 import { MaximizableDoc } from '@/components/doc/dialog/maximizabledoc';
 import { PositionDoc } from '@/components/doc/dialog/positiondoc';
-import { PTDoc } from '@/components/doc/dialog/pt/ptdoc';
 import { Wireframe } from '@/components/doc/dialog/pt/wireframe';
 import { ResponsiveDoc } from '@/components/doc/dialog/responsivedoc';
+import { TemplateDoc } from '@/components/doc/dialog/templatedoc';
 import { StyledDoc } from '@/components/doc/dialog/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/dialog/theming/tailwinddoc';
 import { WithoutModalDoc } from '@/components/doc/dialog/withoutmodaldoc';
-import { TemplateDoc } from '@/components/doc/dialog/templatedoc';
-import { HeadlessDoc } from '@/components/doc/dialog/headlessdoc';
 
 const DialogDemo = () => {
     const docs = [
@@ -85,11 +84,6 @@ const DialogDemo = () => {
             id: 'pt.dialog.options',
             label: 'Dialog PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/divider/index.js b/pages/divider/index.js
index 808b0cdb0c..455f98ddc5 100644
--- a/pages/divider/index.js
+++ b/pages/divider/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/divider/basicdoc';
 import { ContentDoc } from '@/components/doc/divider/contentdoc';
 import { ImportDoc } from '@/components/doc/divider/importdoc';
 import { LoginDoc } from '@/components/doc/divider/logindoc';
-import { PTDoc } from '@/components/doc/divider/pt/ptdoc';
 import { Wireframe } from '@/components/doc/divider/pt/wireframe';
 import { TailwindDoc } from '@/components/doc/divider/theming/tailwinddoc';
 import { TypeDoc } from '@/components/doc/divider/typedoc';
@@ -62,11 +61,6 @@ const DividerDemo = () => {
             id: 'pt.divider.options',
             label: 'Divider PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/dock/index.js b/pages/dock/index.js
index 23f7f27509..b94c2e5d27 100644
--- a/pages/dock/index.js
+++ b/pages/dock/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/dock/accessibilitydoc';
 import { AdvancedDoc } from '@/components/doc/dock/advanceddoc';
 import { BasicDoc } from '@/components/doc/dock/basicdoc';
 import { ImportDoc } from '@/components/doc/dock/importdoc';
-import { PTDoc } from '@/components/doc/dock/pt/ptdoc';
 import { Wireframe } from '@/components/doc/dock/pt/wireframe';
 import { StyledDoc } from '@/components/doc/dock/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/dock/theming/tailwinddoc';
@@ -43,11 +42,6 @@ const DockDemo = () => {
             id: 'pt.dock.options',
             label: 'Dock PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/dropdown/index.js b/pages/dropdown/index.js
index 873f7d16d5..c310ac725e 100644
--- a/pages/dropdown/index.js
+++ b/pages/dropdown/index.js
@@ -14,7 +14,6 @@ import { ImportDoc } from '@/components/doc/dropdown/importdoc';
 import { InvalidDoc } from '@/components/doc/dropdown/invaliddoc';
 import { LazyVirtualScrollDoc } from '@/components/doc/dropdown/lazyvirtualscrolldoc';
 import { LoadingDoc } from '@/components/doc/dropdown/loadingdoc';
-import { PTDoc } from '@/components/doc/dropdown/pt/ptdoc';
 import { Wireframe } from '@/components/doc/dropdown/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/dropdown/templatedoc';
 import { StyledDoc } from '@/components/doc/dropdown/theming/styleddoc';
@@ -114,11 +113,6 @@ const DropdownDemo = () => {
             id: 'pt.dropdown.options',
             label: 'Dropdown PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/editor/index.js b/pages/editor/index.js
index 056ef3c529..47b8559524 100644
--- a/pages/editor/index.js
+++ b/pages/editor/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/editor/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/editor/basicdoc';
 import { ImportDoc } from '@/components/doc/editor/importdoc';
-import { PTDoc } from '@/components/doc/editor/pt/ptdoc';
 import { Wireframe } from '@/components/doc/editor/pt/wireframe';
 import { QuillDoc } from '@/components/doc/editor/quilldoc';
 import { ReadOnlyDoc } from '@/components/doc/editor/readonlydoc';
@@ -54,11 +53,6 @@ const EditorDemo = () => {
             id: 'pt.editor.options',
             label: 'Editor PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/fieldset/index.js b/pages/fieldset/index.js
index b06bd7a740..c27260f6d3 100644
--- a/pages/fieldset/index.js
+++ b/pages/fieldset/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/fieldset/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/fieldset/basicdoc';
 import { ImportDoc } from '@/components/doc/fieldset/importdoc';
-import { PTDoc } from '@/components/doc/fieldset/pt/ptdoc';
 import { Wireframe } from '@/components/doc/fieldset/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/fieldset/templatedoc';
 import { StyledDoc } from '@/components/doc/fieldset/theming/styleddoc';
@@ -50,11 +49,6 @@ const FieldsetDemo = () => {
             id: 'pt.fieldset.options',
             label: 'Fieldset PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/fileupload/index.js b/pages/fileupload/index.js
index b8d4efce43..887827f6a9 100644
--- a/pages/fileupload/index.js
+++ b/pages/fileupload/index.js
@@ -6,7 +6,6 @@ import { AutoDoc } from '@/components/doc/fileupload/autodoc';
 import { BasicDoc } from '@/components/doc/fileupload/basicdoc';
 import { CustomUploadDoc } from '@/components/doc/fileupload/customuploaddoc';
 import { ImportDoc } from '@/components/doc/fileupload/importdoc';
-import { PTDoc } from '@/components/doc/fileupload/pt/ptdoc';
 import { Wireframe } from '@/components/doc/fileupload/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/fileupload/templatedoc';
 import { StyledDoc } from '@/components/doc/fileupload/theming/styleddoc';
@@ -61,11 +60,6 @@ const FileUploadDemo = () => {
             id: 'pt.fileupload.options',
             label: 'FileUpload PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/galleria/index.js b/pages/galleria/index.js
index 8dd08ebaf0..bb5cebdd00 100644
--- a/pages/galleria/index.js
+++ b/pages/galleria/index.js
@@ -18,7 +18,6 @@ import { HoverDoc } from '@/components/doc/galleria/navigator/hoverdoc';
 import { IndicatorsDoc } from '@/components/doc/galleria/navigator/indicatorsdoc';
 import { ItemThumbnailsDoc } from '@/components/doc/galleria/navigator/itemthumbnailsdoc';
 import { ItemWithoutThumbnailsDoc } from '@/components/doc/galleria/navigator/itemwithouthumbnailsdoc';
-import { PTDoc } from '@/components/doc/galleria/pt/ptdoc';
 import { Wireframe } from '@/components/doc/galleria/pt/wireframe';
 import { ResponsiveDoc } from '@/components/doc/galleria/responsivedoc';
 import { StyledDoc } from '@/components/doc/galleria/theming/styleddoc';
@@ -160,11 +159,6 @@ const GalleriaDemo = () => {
             id: 'pt.galleria.options',
             label: 'Galleria PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/image/index.js b/pages/image/index.js
index e5c44764db..3d2e6ecbb4 100644
--- a/pages/image/index.js
+++ b/pages/image/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/image/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/image/basicdoc';
 import { ImportDoc } from '@/components/doc/image/importdoc';
 import { PreviewDoc } from '@/components/doc/image/previewdoc';
-import { PTDoc } from '@/components/doc/image/pt/ptdoc';
 import { Wireframe } from '@/components/doc/image/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/image/templatedoc';
 import { StyledDoc } from '@/components/doc/image/theming/styleddoc';
@@ -55,11 +54,6 @@ const ImageDemo = () => {
             id: 'pt.image.options',
             label: 'Image PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/inplace/index.js b/pages/inplace/index.js
index 207214c2e7..0ab9901d95 100644
--- a/pages/inplace/index.js
+++ b/pages/inplace/index.js
@@ -6,7 +6,6 @@ import { ImageDoc } from '@/components/doc/inplace/imagedoc';
 import { ImportDoc } from '@/components/doc/inplace/importdoc';
 import { InputDoc } from '@/components/doc/inplace/inputdoc';
 import { LazyDoc } from '@/components/doc/inplace/lazydoc';
-import { PTDoc } from '@/components/doc/inplace/pt/ptdoc';
 import { Wireframe } from '@/components/doc/inplace/pt/wireframe';
 import { StyledDoc } from '@/components/doc/inplace/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/inplace/theming/tailwinddoc';
@@ -56,11 +55,6 @@ const ChipDemo = () => {
             id: 'pt.Inplace.options',
             label: 'Inplace PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/inputmask/index.js b/pages/inputmask/index.js
index eb73652392..3725e0c08e 100644
--- a/pages/inputmask/index.js
+++ b/pages/inputmask/index.js
@@ -9,7 +9,6 @@ import { ImportDoc } from '@/components/doc/inputmask/importdoc';
 import { InvalidDoc } from '@/components/doc/inputmask/invaliddoc';
 import { MaskDoc } from '@/components/doc/inputmask/maskdoc';
 import { OptionalDoc } from '@/components/doc/inputmask/optionaldoc';
-import { PTDoc } from '@/components/doc/inputmask/pt/ptdoc';
 import { Wireframe } from '@/components/doc/inputmask/pt/wireframe';
 import { SlotCharDoc } from '@/components/doc/inputmask/slotchardoc';
 import { StyledDoc } from '@/components/doc/inputmask/theming/styleddoc';
@@ -79,11 +78,6 @@ const InputMaskDemo = () => {
             id: 'pt.inputmask.options',
             label: 'InputMask PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/inputnumber/index.js b/pages/inputnumber/index.js
index 6e2d45e932..1a65566b03 100644
--- a/pages/inputnumber/index.js
+++ b/pages/inputnumber/index.js
@@ -11,7 +11,6 @@ import { InvalidDoc } from '@/components/doc/inputnumber/invaliddoc';
 import { LocaleDoc } from '@/components/doc/inputnumber/localedoc';
 import { NumeralsDoc } from '@/components/doc/inputnumber/numberalsdoc';
 import { PrefixSuffixDoc } from '@/components/doc/inputnumber/prefixsuffixdoc';
-import { PTDoc } from '@/components/doc/inputnumber/pt/ptdoc';
 import { Wireframe } from '@/components/doc/inputnumber/pt/wireframe';
 import { StyledDoc } from '@/components/doc/inputnumber/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/inputnumber/theming/tailwinddoc';
@@ -90,11 +89,6 @@ const InputNumberDemo = () => {
             id: 'pt.inputnumber.options',
             label: 'InputNumber PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/inputswitch/index.js b/pages/inputswitch/index.js
index 431d1bd1eb..30704ec00f 100644
--- a/pages/inputswitch/index.js
+++ b/pages/inputswitch/index.js
@@ -6,7 +6,6 @@ import { DisabledDoc } from '@/components/doc/inputswitch/disableddoc';
 import { ImportDoc } from '@/components/doc/inputswitch/importdoc';
 import { InvalidDoc } from '@/components/doc/inputswitch/invaliddoc';
 import { PreselectionDoc } from '@/components/doc/inputswitch/preselectiondoc';
-import { PTDoc } from '@/components/doc/inputswitch/pt/ptdoc';
 import { Wireframe } from '@/components/doc/inputswitch/pt/wireframe';
 import { StyledDoc } from '@/components/doc/inputswitch/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/inputswitch/theming/tailwinddoc';
@@ -54,11 +53,6 @@ const InputSwitchDemo = () => {
             id: 'pt.inputswitch.options',
             label: 'InputSwitch PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
index ed20ed267c..1f2aa9e58e 100644
--- a/pages/inputtext/index.js
+++ b/pages/inputtext/index.js
@@ -9,7 +9,6 @@ import { HelpTextDoc } from '@/components/doc/inputtext/helptextdoc';
 import { ImportDoc } from '@/components/doc/inputtext/importdoc';
 import { InvalidDoc } from '@/components/doc/inputtext/invaliddoc';
 import { KeyFilterDoc } from '@/components/doc/inputtext/keyfilterdoc';
-import { PTDoc } from '@/components/doc/inputtext/pt/ptdoc';
 import { Wireframe } from '@/components/doc/inputtext/pt/wireframe';
 import { SizesDoc } from '@/components/doc/inputtext/sizesdoc';
 import { StyledDoc } from '@/components/doc/inputtext/theming/styleddoc';
@@ -78,11 +77,6 @@ const InputTextDemo = () => {
             id: 'pt.inputtext.options',
             label: 'InputText PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/inputtextarea/index.js b/pages/inputtextarea/index.js
index 5ca02af3cb..cbeaa4b085 100644
--- a/pages/inputtextarea/index.js
+++ b/pages/inputtextarea/index.js
@@ -9,7 +9,6 @@ import { FloatLabelDoc } from '@/components/doc/inputtextarea/floatlabeldoc';
 import { ImportDoc } from '@/components/doc/inputtextarea/importdoc';
 import { InvalidDoc } from '@/components/doc/inputtextarea/invaliddoc';
 import { KeyFilterDoc } from '@/components/doc/inputtextarea/keyfilterdoc';
-import { PTDoc } from '@/components/doc/inputtextarea/pt/ptdoc';
 import { Wireframe } from '@/components/doc/inputtextarea/pt/wireframe';
 import { StyledDoc } from '@/components/doc/inputtextarea/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/inputtextarea/theming/tailwinddoc';
@@ -72,11 +71,6 @@ const InputTextareaDemo = () => {
             id: 'pt.inputtextarea.options',
             label: 'InputTextarea PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/knob/index.js b/pages/knob/index.js
index 6fb7845822..75fd4f3a08 100644
--- a/pages/knob/index.js
+++ b/pages/knob/index.js
@@ -6,7 +6,6 @@ import { ColorDoc } from '@/components/doc/knob/colordoc';
 import { DisabledDoc } from '@/components/doc/knob/disableddoc';
 import { ImportDoc } from '@/components/doc/knob/importdoc';
 import { MinMaxDoc } from '@/components/doc/knob/minmaxdoc';
-import { PTDoc } from '@/components/doc/knob/pt/ptdoc';
 import { Wireframe } from '@/components/doc/knob/pt/wireframe';
 import { ReactiveDoc } from '@/components/doc/knob/reactivedoc';
 import { ReadOnlyDoc } from '@/components/doc/knob/readonlydoc';
@@ -90,11 +89,6 @@ const KnobDemo = () => {
             id: 'pt.knob.options',
             label: 'Knob PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/listbox/index.js b/pages/listbox/index.js
index 49ad9e8fa9..041bc60fb4 100644
--- a/pages/listbox/index.js
+++ b/pages/listbox/index.js
@@ -8,7 +8,6 @@ import { GroupDoc } from '@/components/doc/listbox/groupdoc';
 import { ImportDoc } from '@/components/doc/listbox/importdoc';
 import { InvalidDoc } from '@/components/doc/listbox/invaliddoc';
 import { MultipleDoc } from '@/components/doc/listbox/multipledoc';
-import { PTDoc } from '@/components/doc/listbox/pt/ptdoc';
 import { Wireframe } from '@/components/doc/listbox/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/listbox/templatedoc';
 import { StyledDoc } from '@/components/doc/listbox/theming/styleddoc';
@@ -78,11 +77,6 @@ const ListBoxDemo = () => {
             id: 'pt.listbox.options',
             label: 'Listbox PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/megamenu/index.js b/pages/megamenu/index.js
index b7a0c105fb..7e12fa3f04 100644
--- a/pages/megamenu/index.js
+++ b/pages/megamenu/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/megamenu/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/megamenu/basicdoc';
 import { CommandDoc } from '@/components/doc/megamenu/commanddoc';
 import { ImportDoc } from '@/components/doc/megamenu/importdoc';
-import { PTDoc } from '@/components/doc/megamenu/pt/ptdoc';
 import { Wireframe } from '@/components/doc/megamenu/pt/wireframe';
 import { RouterDoc } from '@/components/doc/megamenu/routerdoc';
 import { TemplateDoc } from '@/components/doc/megamenu/templatedoc';
@@ -60,11 +59,6 @@ const MegaMenuDemo = () => {
             id: 'pt.megamenu.options',
             label: 'MegaMenu PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/mention/index.js b/pages/mention/index.js
index 8359db0a74..3a0b375b6c 100644
--- a/pages/mention/index.js
+++ b/pages/mention/index.js
@@ -7,7 +7,6 @@ import { DisabledDoc } from '@/components/doc/mention/disableddoc';
 import { FloatLabelDoc } from '@/components/doc/mention/floatlabeldoc';
 import { ImportDoc } from '@/components/doc/mention/importdoc';
 import { InvalidDoc } from '@/components/doc/mention/invaliddoc';
-import { PTDoc } from '@/components/doc/mention/pt/ptdoc';
 import { Wireframe } from '@/components/doc/mention/pt/wireframe';
 import { StyledDoc } from '@/components/doc/mention/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/mention/theming/tailwinddoc';
@@ -66,11 +65,6 @@ const MentionDemo = () => {
             id: 'pt.mention.options',
             label: 'Mention PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/menu/index.js b/pages/menu/index.js
index 132e0bcaf6..4ba7cafcbd 100644
--- a/pages/menu/index.js
+++ b/pages/menu/index.js
@@ -6,7 +6,6 @@ import { CommandDoc } from '@/components/doc/menu/commanddoc';
 import { GroupDoc } from '@/components/doc/menu/groupdoc';
 import { ImportDoc } from '@/components/doc/menu/importdoc';
 import { PopupDoc } from '@/components/doc/menu/popupdoc';
-import { PTDoc } from '@/components/doc/menu/pt/ptdoc';
 import { Wireframe } from '@/components/doc/menu/pt/wireframe';
 import { RouterDoc } from '@/components/doc/menu/routerdoc';
 import { TemplateDoc } from '@/components/doc/menu/templatedoc';
@@ -66,11 +65,6 @@ const MenuDemo = () => {
             id: 'pt.menu.options',
             label: 'Menu PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/menubar/index.js b/pages/menubar/index.js
index 2962a6e9e5..50323997cd 100644
--- a/pages/menubar/index.js
+++ b/pages/menubar/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/menubar/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/menubar/basicdoc';
 import { CommandDoc } from '@/components/doc/menubar/commanddoc';
 import { ImportDoc } from '@/components/doc/menubar/importdoc';
-import { PTDoc } from '@/components/doc/menubar/pt/ptdoc';
 import { Wireframe } from '@/components/doc/menubar/pt/wireframe';
 import { RouterDoc } from '@/components/doc/menubar/routerdoc';
 import { TemplateDoc } from '@/components/doc/menubar/templatedoc';
@@ -54,11 +53,6 @@ const MenubarDemo = () => {
             id: 'pt.menubar.options',
             label: 'Menubar PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/message/index.js b/pages/message/index.js
index 0da117aff1..d69b034d92 100644
--- a/pages/message/index.js
+++ b/pages/message/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/message/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/message/basicdoc';
 import { ImportDoc } from '@/components/doc/message/importdoc';
-import { PTDoc } from '@/components/doc/message/pt/ptdoc';
 import { Wireframe } from '@/components/doc/message/pt/wireframe';
 import { SeverityDoc } from '@/components/doc/message/severitydoc';
 import { TemplateDoc } from '@/components/doc/message/templatedoc';
@@ -55,11 +54,6 @@ const MessageDemo = () => {
             id: 'pt.message.options',
             label: 'Message PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/messages/index.js b/pages/messages/index.js
index f44f36c209..5c1f0df665 100644
--- a/pages/messages/index.js
+++ b/pages/messages/index.js
@@ -3,13 +3,12 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/messages/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/messages/basicdoc';
 import { ClosableDoc } from '@/components/doc/messages/closeabledoc';
+import { CustomIcon } from '@/components/doc/messages/customicon';
 import { DynamicDoc } from '@/components/doc/messages/dynamicdoc';
 import { ImportDoc } from '@/components/doc/messages/importdoc';
-import { PTDoc } from '@/components/doc/messages/pt/ptdoc';
 import { Wireframe } from '@/components/doc/messages/pt/wireframe';
 import { SeverityDoc } from '@/components/doc/messages/severitydoc';
 import { StickyDoc } from '@/components/doc/messages/stickydoc';
-import { CustomIcon } from '@/components/doc/messages/customicon';
 import { TemplateDoc } from '@/components/doc/messages/templatedoc';
 import { StyledDoc } from '@/components/doc/messages/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/messages/theming/tailwinddoc';
@@ -72,11 +71,6 @@ const MessagesDemo = () => {
             id: 'pt.messages.options',
             label: 'Messages PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/multiselect/index.js b/pages/multiselect/index.js
index 463ba7a4a0..e69c160e43 100644
--- a/pages/multiselect/index.js
+++ b/pages/multiselect/index.js
@@ -11,7 +11,6 @@ import { GroupDoc } from '@/components/doc/multiselect/groupdoc';
 import { ImportDoc } from '@/components/doc/multiselect/importdoc';
 import { InvalidDoc } from '@/components/doc/multiselect/invaliddoc';
 import { LoadingDoc } from '@/components/doc/multiselect/loadingdoc';
-import { PTDoc } from '@/components/doc/multiselect/pt/ptdoc';
 import { Wireframe } from '@/components/doc/multiselect/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/multiselect/templatedoc';
 import { StyledDoc } from '@/components/doc/multiselect/theming/styleddoc';
@@ -96,11 +95,6 @@ const MultiSelectDemo = () => {
             id: 'pt.multiselect.options',
             label: 'MultiSelect PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/multistatecheckbox/index.js b/pages/multistatecheckbox/index.js
index 787c19f4a8..26c9e29b15 100644
--- a/pages/multistatecheckbox/index.js
+++ b/pages/multistatecheckbox/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/multistatecheckbox/basicdoc';
 import { DisabledDoc } from '@/components/doc/multistatecheckbox/disableddoc';
 import { ImportDoc } from '@/components/doc/multistatecheckbox/importdoc';
 import { InvalidDoc } from '@/components/doc/multistatecheckbox/invaliddoc';
-import { PTDoc } from '@/components/doc/multistatecheckbox/pt/ptdoc';
 import { Wireframe } from '@/components/doc/multistatecheckbox/pt/wireframe';
 import { StyledDoc } from '@/components/doc/multistatecheckbox/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/multistatecheckbox/theming/tailwinddoc';
@@ -48,11 +47,6 @@ const MultiStateCheckboxDemo = () => {
             id: 'pt.multistatecheckbox.options',
             label: 'MultiStateCheckbox PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/orderlist/index.js b/pages/orderlist/index.js
index 5932cb7369..434f38b04c 100644
--- a/pages/orderlist/index.js
+++ b/pages/orderlist/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/orderlist/basicdoc';
 import { DragDropDoc } from '@/components/doc/orderlist/dragdropdoc';
 import { FilterDoc } from '@/components/doc/orderlist/filterdoc';
 import { ImportDoc } from '@/components/doc/orderlist/importdoc';
-import { PTDoc } from '@/components/doc/orderlist/pt/ptdoc';
 import { Wireframe } from '@/components/doc/orderlist/pt/wireframe';
 import { StyledDoc } from '@/components/doc/orderlist/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/orderlist/theming/tailwinddoc';
@@ -49,11 +48,6 @@ const OrderListDemo = () => {
             id: 'pt.orderlist.options',
             label: 'OrderList PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
     const themingDocs = [
diff --git a/pages/organizationchart/index.js b/pages/organizationchart/index.js
index bad4f4f06e..9d41de7bc6 100644
--- a/pages/organizationchart/index.js
+++ b/pages/organizationchart/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/organizationchart/accessibili
 import { BasicDoc } from '@/components/doc/organizationchart/basicdoc';
 import { ColoredDoc } from '@/components/doc/organizationchart/coloreddoc';
 import { ImportDoc } from '@/components/doc/organizationchart/importdoc';
-import { PTDoc } from '@/components/doc/organizationchart/pt/ptdoc';
 import { Wireframe } from '@/components/doc/organizationchart/pt/wireframe';
 import { SelectionDoc } from '@/components/doc/organizationchart/selectiondoc';
 import { TemplateDoc } from '@/components/doc/organizationchart/templatedoc';
@@ -55,11 +54,6 @@ const OrganizationChartDemo = () => {
             id: 'pt.organizationchart.options',
             label: 'OrganizationChart PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/overlaypanel/index.js b/pages/overlaypanel/index.js
index 38b45c0103..21fddd7259 100644
--- a/pages/overlaypanel/index.js
+++ b/pages/overlaypanel/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/overlaypanel/accessibilitydoc
 import { BasicDoc } from '@/components/doc/overlaypanel/basicdoc';
 import { DataTableDoc } from '@/components/doc/overlaypanel/datatabledoc';
 import { ImportDoc } from '@/components/doc/overlaypanel/importdoc';
-import { PTDoc } from '@/components/doc/overlaypanel/pt/ptdoc';
 import { Wireframe } from '@/components/doc/overlaypanel/pt/wireframe';
 import { StyledDoc } from '@/components/doc/overlaypanel/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/overlaypanel/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const OverlayPanelDemo = () => {
             id: 'pt.overlaypanel.options',
             label: 'OverlayPanel PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/paginator/index.js b/pages/paginator/index.js
index 8cfbaa3141..4218653db7 100644
--- a/pages/paginator/index.js
+++ b/pages/paginator/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/paginator/basicdoc';
 import { ImagesDoc } from '@/components/doc/paginator/imagesdoc';
 import { ImportDoc } from '@/components/doc/paginator/importdoc';
 import { LayoutDoc } from '@/components/doc/paginator/layoutdoc';
-import { PTDoc } from '@/components/doc/paginator/pt/ptdoc';
 import { Wireframe } from '@/components/doc/paginator/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/paginator/templatedoc';
 import { StyledDoc } from '@/components/doc/paginator/theming/styleddoc';
@@ -55,11 +54,6 @@ const PaginatorDemo = () => {
             id: 'pt.paginator.options',
             label: 'Paginator PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/panel/index.js b/pages/panel/index.js
index 141ae2883a..8685e06a64 100644
--- a/pages/panel/index.js
+++ b/pages/panel/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/panel/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/panel/basicdoc';
 import { ImportDoc } from '@/components/doc/panel/importdoc';
-import { PTDoc } from '@/components/doc/panel/pt/ptdoc';
 import { Wireframe } from '@/components/doc/panel/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/panel/templatedoc';
 import { StyledDoc } from '@/components/doc/panel/theming/styleddoc';
@@ -50,11 +49,6 @@ const PanelDemo = () => {
             id: 'pt.panel.options',
             label: 'Panel PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/panelmenu/index.js b/pages/panelmenu/index.js
index 1b2a09a9d3..a7b169c0ba 100644
--- a/pages/panelmenu/index.js
+++ b/pages/panelmenu/index.js
@@ -6,7 +6,6 @@ import { CommandDoc } from '@/components/doc/panelmenu/commanddoc';
 import { ControlledDoc } from '@/components/doc/panelmenu/controlleddoc';
 import { ImportDoc } from '@/components/doc/panelmenu/importdoc';
 import { MultipleDoc } from '@/components/doc/panelmenu/multipledoc';
-import { PTDoc } from '@/components/doc/panelmenu/pt/ptdoc';
 import { Wireframe } from '@/components/doc/panelmenu/pt/wireframe';
 import { RouterDoc } from '@/components/doc/panelmenu/routerdoc';
 import { TemplateDoc } from '@/components/doc/panelmenu/templatedoc';
@@ -66,11 +65,6 @@ const PanelMenuDemo = () => {
             id: 'pt.panelmenu.options',
             label: 'PanelMenu PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/password/index.js b/pages/password/index.js
index c1695e516a..eba85cb655 100644
--- a/pages/password/index.js
+++ b/pages/password/index.js
@@ -9,7 +9,6 @@ import { ImportDoc } from '@/components/doc/password/importdoc';
 import { InvalidDoc } from '@/components/doc/password/invaliddoc';
 import { LocaleDoc } from '@/components/doc/password/localedoc';
 import { MeterDoc } from '@/components/doc/password/meterdoc';
-import { PTDoc } from '@/components/doc/password/pt/ptdoc';
 import { Wireframe } from '@/components/doc/password/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/password/templatedoc';
 import { StyledDoc } from '@/components/doc/password/theming/styleddoc';
@@ -84,11 +83,6 @@ const PasswordDemo = () => {
             id: 'pt.password.options',
             label: 'Password PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/picklist/index.js b/pages/picklist/index.js
index 2364e299ba..4aacc22421 100644
--- a/pages/picklist/index.js
+++ b/pages/picklist/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/picklist/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/picklist/basicdoc';
 import { FilterDoc } from '@/components/doc/picklist/filterdoc';
 import { ImportDoc } from '@/components/doc/picklist/importdoc';
-import { PTDoc } from '@/components/doc/picklist/pt/ptdoc';
 import { Wireframe } from '@/components/doc/picklist/pt/wireframe';
 import { StyledDoc } from '@/components/doc/picklist/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/picklist/theming/tailwinddoc';
@@ -43,11 +42,6 @@ const PickListDemo = () => {
             id: 'pt.picklist.options',
             label: 'PickList PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/progressbar/index.js b/pages/progressbar/index.js
index 64c6856343..120623105a 100644
--- a/pages/progressbar/index.js
+++ b/pages/progressbar/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/progressbar/basicdoc';
 import { DynamicDoc } from '@/components/doc/progressbar/dynamicdoc';
 import { ImportDoc } from '@/components/doc/progressbar/importdoc';
 import { IndeterminateDoc } from '@/components/doc/progressbar/indeterminatedoc';
-import { PTDoc } from '@/components/doc/progressbar/pt/ptdoc';
 import { Wireframe } from '@/components/doc/progressbar/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/progressbar/templatedoc';
 import { StyledDoc } from '@/components/doc/progressbar/theming/styleddoc';
@@ -56,11 +55,6 @@ const ProgressBarDemo = () => {
             id: 'pt.progressbar.options',
             label: 'ProgressBar PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/progressspinner/index.js b/pages/progressspinner/index.js
index 5c05b655c4..e9e4edcf35 100644
--- a/pages/progressspinner/index.js
+++ b/pages/progressspinner/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/progressspinner/accessibility
 import { BasicDoc } from '@/components/doc/progressspinner/basicdoc';
 import { CustomDoc } from '@/components/doc/progressspinner/customdoc';
 import { ImportDoc } from '@/components/doc/progressspinner/importdoc';
-import { PTDoc } from '@/components/doc/progressspinner/pt/ptdoc';
 import { Wireframe } from '@/components/doc/progressspinner/pt/wireframe';
 import { StyledDoc } from '@/components/doc/progressspinner/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/progressspinner/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const SkeletonDemo = () => {
             id: 'pt.progressspinner.options',
             label: 'ProgressSpinner PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/radiobutton/index.js b/pages/radiobutton/index.js
index 883a210365..83a8ff6f48 100644
--- a/pages/radiobutton/index.js
+++ b/pages/radiobutton/index.js
@@ -7,7 +7,6 @@ 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';
-import { PTDoc } from '@/components/doc/radiobutton/pt/ptdoc';
 import { Wireframe } from '@/components/doc/radiobutton/pt/wireframe';
 import { StyledDoc } from '@/components/doc/radiobutton/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/radiobutton/theming/tailwinddoc';
@@ -60,11 +59,6 @@ const RadioButtonDemo = () => {
             id: 'pt.radiobutton.options',
             label: 'RadioButton PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/rating/index.js b/pages/rating/index.js
index f379a7fb1c..83ff46ad1d 100644
--- a/pages/rating/index.js
+++ b/pages/rating/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/rating/basicdoc';
 import { DisabledDoc } from '@/components/doc/rating/disableddoc';
 import { ImportDoc } from '@/components/doc/rating/importdoc';
 import { NumberOfStarsDoc } from '@/components/doc/rating/numberofstarsdoc';
-import { PTDoc } from '@/components/doc/rating/pt/ptdoc';
 import { Wireframe } from '@/components/doc/rating/pt/wireframe';
 import { ReadOnlyDoc } from '@/components/doc/rating/readonlydoc';
 import { TemplateDoc } from '@/components/doc/rating/templatedoc';
@@ -67,11 +66,6 @@ const RatingDemo = () => {
             id: 'pt.rating.options',
             label: 'Rating PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/scrollpanel/index.js b/pages/scrollpanel/index.js
index afc639d4ef..16832be1b5 100644
--- a/pages/scrollpanel/index.js
+++ b/pages/scrollpanel/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/scrollpanel/accessibilitydoc'
 import { BasicDoc } from '@/components/doc/scrollpanel/basicdoc';
 import { CustomDemo } from '@/components/doc/scrollpanel/customdoc';
 import { ImportDoc } from '@/components/doc/scrollpanel/importdoc';
-import { PTDoc } from '@/components/doc/scrollpanel/pt/ptdoc';
 import { Wireframe } from '@/components/doc/scrollpanel/pt/wireframe';
 import { StyledDoc } from '@/components/doc/scrollpanel/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/scrollpanel/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const ScrollPanelDemo = () => {
             id: 'pt.scrollpanel.options',
             label: 'ScrollPanel PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/scrolltop/index.js b/pages/scrolltop/index.js
index 0087b31259..ad54bc601b 100644
--- a/pages/scrolltop/index.js
+++ b/pages/scrolltop/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/scrolltop/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/scrolltop/basicdoc';
 import { ElementDoc } from '@/components/doc/scrolltop/elementdoc';
 import { ImportDoc } from '@/components/doc/scrolltop/importdoc';
-import { PTDoc } from '@/components/doc/scrolltop/pt/ptdoc';
 import { Wireframe } from '@/components/doc/scrolltop/pt/wireframe';
 import { StyledDoc } from '@/components/doc/scrolltop/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/scrolltop/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const ScrollTopDemo = () => {
             id: 'pt.scrolltop.options',
             label: 'ScrollTop PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/selectbutton/index.js b/pages/selectbutton/index.js
index dfe016caf9..0f941ca469 100644
--- a/pages/selectbutton/index.js
+++ b/pages/selectbutton/index.js
@@ -6,7 +6,6 @@ import { DisabledDoc } from '@/components/doc/selectbutton/disableddoc';
 import { ImportDoc } from '@/components/doc/selectbutton/importdoc';
 import { InvalidDoc } from '@/components/doc/selectbutton/invaliddoc';
 import { MultipleDoc } from '@/components/doc/selectbutton/multipledoc';
-import { PTDoc } from '@/components/doc/selectbutton/pt/ptdoc';
 import { Wireframe } from '@/components/doc/selectbutton/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/selectbutton/templatedoc';
 import { StyledDoc } from '@/components/doc/selectbutton/theming/styleddoc';
@@ -60,11 +59,6 @@ const SelectButtonDemo = () => {
             id: 'pt.selectbutton.options',
             label: 'SelectButton PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/sidebar/index.js b/pages/sidebar/index.js
index 32ad349cd1..d733079f60 100644
--- a/pages/sidebar/index.js
+++ b/pages/sidebar/index.js
@@ -3,15 +3,14 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/sidebar/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/sidebar/basicdoc';
 import { FullScreenDoc } from '@/components/doc/sidebar/fullscreendoc';
+import { HeadlessDoc } from '@/components/doc/sidebar/headlessdoc';
 import { ImportDoc } from '@/components/doc/sidebar/importdoc';
 import { PositionDoc } from '@/components/doc/sidebar/positiondoc';
-import { PTDoc } from '@/components/doc/sidebar/pt/ptdoc';
 import { Wireframe } from '@/components/doc/sidebar/pt/wireframe';
 import { SizeDoc } from '@/components/doc/sidebar/sizedoc';
 import { TemplateDoc } from '@/components/doc/sidebar/templatedoc';
 import { StyledDoc } from '@/components/doc/sidebar/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/sidebar/theming/tailwinddoc';
-import { HeadlessDoc } from '@/components/doc/sidebar/headlessdoc';
 
 const SidebarDemo = () => {
     const docs = [
@@ -67,11 +66,6 @@ const SidebarDemo = () => {
             id: 'pt.sidebar.options',
             label: 'Sidebar PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/skeleton/index.js b/pages/skeleton/index.js
index 46bd378163..4a77eedb53 100644
--- a/pages/skeleton/index.js
+++ b/pages/skeleton/index.js
@@ -5,7 +5,6 @@ import { CardDoc } from '@/components/doc/skeleton/carddoc';
 import { DataTableDoc } from '@/components/doc/skeleton/datatabledoc';
 import { ImportDoc } from '@/components/doc/skeleton/importdoc';
 import { ListDoc } from '@/components/doc/skeleton/listdoc';
-import { PTDoc } from '@/components/doc/skeleton/pt/ptdoc';
 import { Wireframe } from '@/components/doc/skeleton/pt/wireframe';
 import { ShapesDoc } from '@/components/doc/skeleton/shapesdoc';
 import { StyledDoc } from '@/components/doc/skeleton/theming/styleddoc';
@@ -56,11 +55,6 @@ const SkeletonDemo = () => {
             id: 'pt.skeleton.options',
             label: 'Skeleton PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/slider/index.js b/pages/slider/index.js
index d3c9d15bc4..c25be71691 100644
--- a/pages/slider/index.js
+++ b/pages/slider/index.js
@@ -5,7 +5,6 @@ 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';
 import { Wireframe } from '@/components/doc/slider/pt/wireframe';
 import { RangeDoc } from '@/components/doc/slider/rangedoc';
 import { StepDoc } from '@/components/doc/slider/stepdoc';
@@ -66,11 +65,6 @@ const SliderDemo = () => {
             id: 'pt.slider.options',
             label: 'Slider PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/speeddial/index.js b/pages/speeddial/index.js
index 0c8f41a695..082e599bed 100644
--- a/pages/speeddial/index.js
+++ b/pages/speeddial/index.js
@@ -6,7 +6,6 @@ import { CustomDoc } from '@/components/doc/speeddial/customdoc';
 import { ImportDoc } from '@/components/doc/speeddial/importdoc';
 import { LinearDoc } from '@/components/doc/speeddial/lineardoc';
 import { MaskDoc } from '@/components/doc/speeddial/maskdoc';
-import { PTDoc } from '@/components/doc/speeddial/pt/ptdoc';
 import { Wireframe } from '@/components/doc/speeddial/pt/wireframe';
 import { QuarterCircleDoc } from '@/components/doc/speeddial/quartercircledoc';
 import { SemiCircleDoc } from '@/components/doc/speeddial/semicircledoc';
@@ -74,11 +73,6 @@ const SpeedDialDemo = () => {
             id: 'pt.speeddial.options',
             label: 'SpeedDial PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/splitbutton/index.js b/pages/splitbutton/index.js
index c3e8a3d5b0..0c849d254f 100644
--- a/pages/splitbutton/index.js
+++ b/pages/splitbutton/index.js
@@ -7,7 +7,6 @@ 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';
-import { PTDoc } from '@/components/doc/splitbutton/pt/ptdoc';
 import { Wireframe } from '@/components/doc/splitbutton/pt/wireframe';
 import { RaisedDoc } from '@/components/doc/splitbutton/raiseddoc';
 import { RaisedTextDoc } from '@/components/doc/splitbutton/raisedtextdoc';
@@ -103,11 +102,6 @@ const SplitButtonDemo = () => {
             id: 'pt.splitbutton.options',
             label: 'SplitButton PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/splitter/index.js b/pages/splitter/index.js
index eddfc72fd5..56cc8c925c 100644
--- a/pages/splitter/index.js
+++ b/pages/splitter/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/splitter/accessibilitydoc';
 import { HorizontalDoc } from '@/components/doc/splitter/horizontaldoc';
 import { ImportDoc } from '@/components/doc/splitter/importdoc';
 import { NestedDoc } from '@/components/doc/splitter/nesteddoc';
-import { PTDoc } from '@/components/doc/splitter/pt/ptdoc';
 import { Wireframe } from '@/components/doc/splitter/pt/wireframe';
 import { SizeDoc } from '@/components/doc/splitter/sizedoc';
 import { StyledDoc } from '@/components/doc/splitter/theming/styleddoc';
@@ -61,11 +60,6 @@ const SplitterDemo = () => {
             id: 'pt.splitterpanel.options',
             label: 'SplitterPanel PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/steps/index.js b/pages/steps/index.js
index d26a60e255..d90fe58c00 100644
--- a/pages/steps/index.js
+++ b/pages/steps/index.js
@@ -6,7 +6,6 @@ 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';
 import { StyledDoc } from '@/components/doc/steps/theming/styleddoc';
@@ -61,11 +60,6 @@ const StepsDemo = () => {
             id: 'pt.steps.options',
             label: 'Steps PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/tabmenu/index.js b/pages/tabmenu/index.js
index c22f5b17c0..fedcd9258f 100644
--- a/pages/tabmenu/index.js
+++ b/pages/tabmenu/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/tabmenu/basicdoc';
 import { CommandDoc } from '@/components/doc/tabmenu/commanddoc';
 import { ControlledDoc } from '@/components/doc/tabmenu/controlleddoc';
 import { ImportDoc } from '@/components/doc/tabmenu/importdoc';
-import { PTDoc } from '@/components/doc/tabmenu/pt/ptdoc';
 import { Wireframe } from '@/components/doc/tabmenu/pt/wireframe';
 import { RouterDoc } from '@/components/doc/tabmenu/routerdoc';
 import { TemplateDoc } from '@/components/doc/tabmenu/templatedoc';
@@ -61,11 +60,6 @@ const TabMenuDemo = () => {
             id: 'pt.tabmenu.options',
             label: 'TabMenu PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/tabview/index.js b/pages/tabview/index.js
index 6b6fc70fe7..c4b0e808ae 100644
--- a/pages/tabview/index.js
+++ b/pages/tabview/index.js
@@ -7,7 +7,6 @@ import { ControlledDoc } from '@/components/doc/tabview/controlleddoc';
 import { DisabledDoc } from '@/components/doc/tabview/disableddoc';
 import { HeaderIconDoc } from '@/components/doc/tabview/headericondoc';
 import { ImportDoc } from '@/components/doc/tabview/importdoc';
-import { PTDoc } from '@/components/doc/tabview/pt/ptdoc';
 import { Wireframe } from '@/components/doc/tabview/pt/wireframe';
 import { ScrollableDoc } from '@/components/doc/tabview/scrollabledoc';
 import { TemplateDoc } from '@/components/doc/tabview/templatedoc';
@@ -79,11 +78,6 @@ const TabViewDemo = () => {
             id: 'pt.tabpanel.options',
             label: 'TabPanel PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/tag/index.js b/pages/tag/index.js
index fd61d253ec..80365487b1 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/tag/basicdoc';
 import { IconDoc } from '@/components/doc/tag/icondoc';
 import { ImportDoc } from '@/components/doc/tag/importdoc';
 import { PillDoc } from '@/components/doc/tag/pilldoc';
-import { PTDoc } from '@/components/doc/tag/pt/ptdoc';
 import { Wireframe } from '@/components/doc/tag/pt/wireframe';
 import { SeverityDoc } from '@/components/doc/tag/severitydoc';
 import { TemplateDoc } from '@/components/doc/tag/templatedoc';
@@ -62,11 +61,6 @@ const TerminalDemo = () => {
             id: 'pt.tag.options',
             label: 'Tag PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/terminal/index.js b/pages/terminal/index.js
index 8e90a43eea..29eb0e685c 100644
--- a/pages/terminal/index.js
+++ b/pages/terminal/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/terminal/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/terminal/basicdoc';
 import { ImportDoc } from '@/components/doc/terminal/importdoc';
-import { PTDoc } from '@/components/doc/terminal/pt/ptdoc';
 import { Wireframe } from '@/components/doc/terminal/pt/wireframe';
 import { StyledDoc } from '@/components/doc/terminal/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/terminal/theming/tailwinddoc';
@@ -38,11 +37,6 @@ const TerminalDemo = () => {
             id: 'pt.terminal.options',
             label: 'Terminal PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/tieredmenu/index.js b/pages/tieredmenu/index.js
index 81fa55a0a2..5246716b9a 100644
--- a/pages/tieredmenu/index.js
+++ b/pages/tieredmenu/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/tieredmenu/basicdoc';
 import { CommandDoc } from '@/components/doc/tieredmenu/commanddoc';
 import { ImportDoc } from '@/components/doc/tieredmenu/importdoc';
 import { PopupDoc } from '@/components/doc/tieredmenu/popupdoc';
-import { PTDoc } from '@/components/doc/tieredmenu/pt/ptdoc';
 import { Wireframe } from '@/components/doc/tieredmenu/pt/wireframe';
 import { RouterDoc } from '@/components/doc/tieredmenu/routerdoc';
 import { TemplateDoc } from '@/components/doc/tieredmenu/templatedoc';
@@ -60,11 +59,6 @@ const TieredMenuDemo = () => {
             id: 'pt.tieredmenu.options',
             label: 'TieredMenu PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/timeline/index.js b/pages/timeline/index.js
index 497150b24b..99a21c6ab8 100644
--- a/pages/timeline/index.js
+++ b/pages/timeline/index.js
@@ -6,7 +6,6 @@ import { BasicDoc } from '@/components/doc/timeline/basicdoc';
 import { HorizontalDoc } from '@/components/doc/timeline/horizontaldoc';
 import { ImportDoc } from '@/components/doc/timeline/importdoc';
 import { OppositeDoc } from '@/components/doc/timeline/oppositedoc';
-import { PTDoc } from '@/components/doc/timeline/pt/ptdoc';
 import { Wireframe } from '@/components/doc/timeline/pt/wireframe';
 import { TemplateDoc } from '@/components/doc/timeline/templatedoc';
 import { StyledDoc } from '@/components/doc/timeline/theming/styleddoc';
@@ -61,11 +60,6 @@ const TimelineDemo = () => {
             id: 'pt.timeline.options',
             label: 'Timeline PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/toast/index.js b/pages/toast/index.js
index 4c26035924..27f26a509b 100644
--- a/pages/toast/index.js
+++ b/pages/toast/index.js
@@ -6,7 +6,6 @@ import { HeadlessDoc } from '@/components/doc/toast/headlessdoc';
 import { ImportDoc } from '@/components/doc/toast/importdoc';
 import { MultipleDoc } from '@/components/doc/toast/multipledoc';
 import { PositionDoc } from '@/components/doc/toast/positiondoc';
-import { PTDoc } from '@/components/doc/toast/pt/ptdoc';
 import { Wireframe } from '@/components/doc/toast/pt/wireframe';
 import { SeverityDoc } from '@/components/doc/toast/severitydoc';
 import { StickyDoc } from '@/components/doc/toast/stickydoc';
@@ -72,11 +71,6 @@ const ToastDemo = () => {
             id: 'pt.toast.options',
             label: 'Toast PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/togglebutton/index.js b/pages/togglebutton/index.js
index 6577f6e37e..92b0e17cef 100644
--- a/pages/togglebutton/index.js
+++ b/pages/togglebutton/index.js
@@ -6,7 +6,6 @@ import { CustomizedDoc } from '@/components/doc/togglebutton/customizeddoc';
 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';
 import { TailwindDoc } from '@/components/doc/togglebutton/theming/tailwinddoc';
@@ -54,11 +53,6 @@ const ToggleButtonDemo = () => {
             id: 'pt.togglebutton.options',
             label: 'ToggleButton PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/toolbar/index.js b/pages/toolbar/index.js
index 555ba88f5a..684583a379 100644
--- a/pages/toolbar/index.js
+++ b/pages/toolbar/index.js
@@ -2,11 +2,10 @@ import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/toolbar/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/toolbar/basicdoc';
+import { CustomDoc } from '@/components/doc/toolbar/customdoc';
 import { ImportDoc } from '@/components/doc/toolbar/importdoc';
-import { PTDoc } from '@/components/doc/toolbar/pt/ptdoc';
 import { Wireframe } from '@/components/doc/toolbar/pt/wireframe';
 import { StyledDoc } from '@/components/doc/toolbar/theming/styleddoc';
-import { CustomDoc } from '@/components/doc/toolbar/customdoc';
 import { TailwindDoc } from '@/components/doc/toolbar/theming/tailwinddoc';
 
 const ToolbarDemo = () => {
@@ -43,11 +42,6 @@ const ToolbarDemo = () => {
             id: 'pt.toolbar.options',
             label: 'Toolbar PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/tooltip/index.js b/pages/tooltip/index.js
index 288883ce37..d7d1b806f7 100644
--- a/pages/tooltip/index.js
+++ b/pages/tooltip/index.js
@@ -8,7 +8,6 @@ import { EventDoc } from '@/components/doc/tooltip/eventdoc';
 import { ImportDoc } from '@/components/doc/tooltip/importdoc';
 import { MouseTrackDoc } from '@/components/doc/tooltip/mousetrackdoc';
 import { PositionDoc } from '@/components/doc/tooltip/positiondoc';
-import { PTDoc } from '@/components/doc/tooltip/pt/ptdoc';
 import { Wireframe } from '@/components/doc/tooltip/pt/wireframe';
 import { ReactiveDoc } from '@/components/doc/tooltip/reactivedoc';
 import { TargetDoc } from '@/components/doc/tooltip/targetdoc';
@@ -85,11 +84,6 @@ const TooltipDemo = () => {
             id: 'pt.tooltip.options',
             label: 'Tooltip PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/tree/index.js b/pages/tree/index.js
index b25b07f84e..330b9105d2 100644
--- a/pages/tree/index.js
+++ b/pages/tree/index.js
@@ -9,7 +9,6 @@ import { EventsDoc } from '@/components/doc/tree/eventsdoc';
 import { FilterDoc } from '@/components/doc/tree/filterdoc';
 import { ImportDoc } from '@/components/doc/tree/importdoc';
 import { LazyDoc } from '@/components/doc/tree/lazydoc';
-import { PTDoc } from '@/components/doc/tree/pt/ptdoc';
 import { Wireframe } from '@/components/doc/tree/pt/wireframe';
 import { CheckboxSelectionDoc } from '@/components/doc/tree/selection/checkboxselectiondoc';
 import { MultipleSelectionDoc } from '@/components/doc/tree/selection/multipleselectiondoc';
@@ -104,11 +103,6 @@ const TreeDemo = () => {
             id: 'pt.tree.options',
             label: 'Tree PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/treeselect/index.js b/pages/treeselect/index.js
index 51d76c209a..bff38fd61f 100644
--- a/pages/treeselect/index.js
+++ b/pages/treeselect/index.js
@@ -12,7 +12,6 @@ import { FloatLabelDoc } from '@/components/doc/treeselect/floatlabeldoc';
 import { ImportDoc } from '@/components/doc/treeselect/importdoc';
 import { InvalidDoc } from '@/components/doc/treeselect/invaliddoc';
 import { MultipleDoc } from '@/components/doc/treeselect/multipledoc';
-import { PTDoc } from '@/components/doc/treeselect/pt/ptdoc';
 import { Wireframe } from '@/components/doc/treeselect/pt/wireframe';
 import { StyledDoc } from '@/components/doc/treeselect/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/treeselect/theming/tailwinddoc';
@@ -90,11 +89,6 @@ const TreeSelectDemo = () => {
             id: 'pt.treeselect.options',
             label: 'TreeSelect PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/treetable/index.js b/pages/treetable/index.js
index 0ac91feaf3..2eb25707ef 100644
--- a/pages/treetable/index.js
+++ b/pages/treetable/index.js
@@ -14,7 +14,6 @@ import { ImportDoc } from '@/components/doc/treetable/importdoc';
 import { LazyLoadDoc } from '@/components/doc/treetable/lazyloaddoc';
 import { PaginatorBasicDoc } from '@/components/doc/treetable/paginator/basicdoc';
 import { PaginatorTemplateDoc } from '@/components/doc/treetable/paginator/templatedoc';
-import { PTDoc } from '@/components/doc/treetable/pt/ptdoc';
 import { Wireframe } from '@/components/doc/treetable/pt/wireframe';
 import { ReorderDoc } from '@/components/doc/treetable/reorderdoc';
 import { ExpandModeDoc } from '@/components/doc/treetable/resize/expandmodedoc';
@@ -216,11 +215,6 @@ const TreeTableDemo = () => {
             id: 'pt.column.options',
             label: 'Column PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/tristatecheckbox/index.js b/pages/tristatecheckbox/index.js
index edd2880e29..cb3de8d065 100644
--- a/pages/tristatecheckbox/index.js
+++ b/pages/tristatecheckbox/index.js
@@ -6,7 +6,6 @@ import { DisabledDoc } from '@/components/doc/tristatecheckbox/disableddoc';
 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';
 import { Wireframe } from '@/components/doc/tristatecheckbox/pt/wireframe';
 import { StyledDoc } from '@/components/doc/tristatecheckbox/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/tristatecheckbox/theming/tailwinddoc';
@@ -54,11 +53,6 @@ const TriStateCheckboxDemo = () => {
             id: 'pt.tristatecheckbox.options',
             label: 'TriStateCheckbox PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 
diff --git a/pages/virtualscroller/index.js b/pages/virtualscroller/index.js
index 4a4ecc4e39..2b078c6835 100644
--- a/pages/virtualscroller/index.js
+++ b/pages/virtualscroller/index.js
@@ -8,7 +8,6 @@ import { HorizontalDoc } from '@/components/doc/virtualscroller/horizontaldoc';
 import { ImportDoc } from '@/components/doc/virtualscroller/importdoc';
 import { LazyDoc } from '@/components/doc/virtualscroller/lazydoc';
 import { LoadingDoc } from '@/components/doc/virtualscroller/loadingdoc';
-import { PTDoc } from '@/components/doc/virtualscroller/pt/ptdoc';
 import { Wireframe } from '@/components/doc/virtualscroller/pt/wireframe';
 import { StyledDoc } from '@/components/doc/virtualscroller/theming/styleddoc';
 
@@ -66,11 +65,6 @@ const VirtualScrollerDemo = () => {
             id: 'pt.virtualscroller.options',
             label: 'VirtualScroller PT Options',
             component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
         }
     ];
 

From abce492efd2c7492a3245fc9bfde5a36e6d81410 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Wed, 3 Apr 2024 07:42:12 -0400
Subject: [PATCH 125/194] Fix #6285: Calendar multiple months with
 yearNavigator

---
 components/doc/calendar/multiplemonthsdoc.js | 8 ++++----
 components/lib/calendar/Calendar.js          | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/doc/calendar/multiplemonthsdoc.js b/components/doc/calendar/multiplemonthsdoc.js
index c80fbb6832..c85f7e86b9 100644
--- a/components/doc/calendar/multiplemonthsdoc.js
+++ b/components/doc/calendar/multiplemonthsdoc.js
@@ -8,7 +8,7 @@ export function MultipleMonthsDoc(props) {
 
     const code = {
         basic: `
-<Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={2} />
+<Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -19,7 +19,7 @@ export default function MultipleMonthsDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={2} />
+            <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
         </div>
     )
 }
@@ -34,7 +34,7 @@ export default function MultipleMonthsDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={2} />
+            <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
         </div>
     )
 }
@@ -49,7 +49,7 @@ export default function MultipleMonthsDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={2} />
+                <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 73e56920ea..4b28434ec2 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -3238,6 +3238,7 @@ export const Calendar = React.memo(
         const createTitleYearElement = (metaYear) => {
             const viewDate = getViewDate();
             const viewYear = viewDate.getFullYear();
+            const displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
 
             if (props.yearNavigator) {
                 let yearOptions = [];
@@ -3263,7 +3264,7 @@ export const Calendar = React.memo(
                     {
                         className: cx('select'),
                         onChange: (e) => onYearDropdownChange(e, e.target.value),
-                        value: viewYear
+                        value: displayYear
                     },
                     ptm('select')
                 );
@@ -3305,7 +3306,6 @@ export const Calendar = React.memo(
                 return content;
             }
 
-            const displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
             const yearTitleProps = mergeProps(
                 {
                     className: cx('yearTitle'),

From 31b5a9ad6db9dc782f00a682cd1a0c689023293a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 3 Apr 2024 16:26:45 +0300
Subject: [PATCH 126/194] Fix #6287 - Tree: Checkboxes use wrong color in the
 check mark.

---
 components/lib/tree/TreeBase.js   | 2 +-
 components/lib/tree/UITreeNode.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js
index 4d5c7f98da..48b9f37ea9 100644
--- a/components/lib/tree/TreeBase.js
+++ b/components/lib/tree/TreeBase.js
@@ -31,7 +31,7 @@ const classes = {
     nodeIcon: 'p-treenode-icon',
     label: 'p-treenode-label',
     subgroup: 'p-treenode-children',
-
+    checkIcon: 'p-checkbox-icon',
     emptyMessage: 'p-treenode p-tree-empty-message',
     droppoint: 'p-treenode-droppoint',
     header: 'p-tree-header',
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 018f46c821..d671a8b7a0 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -681,8 +681,11 @@ export const UITreeNode = React.memo((props) => {
         if (isCheckboxSelectionMode() && props.node.selectable !== false) {
             const checked = isChecked();
             const partialChecked = isPartialChecked();
-            const icon = checked ? props.checkboxIcon || <CheckIcon /> : partialChecked ? props.checkboxIcon || <MinusIcon /> : null;
-            const checkboxIcon = IconUtils.getJSXIcon(icon, {}, props);
+            const checkboxIconProps = mergeProps({
+                className: cx('checkIcon')
+            });
+            const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon {...checkboxIconProps} /> : null;
+            const checkboxIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, props);
             const checkboxProps = mergeProps(
                 {
                     className: cx('nodeCheckbox', { partialChecked }),

From 6af7a11ba0fffecf95c1ef29fc4333021240058b Mon Sep 17 00:00:00 2001
From: vaelu <72358141+vaelu@users.noreply.github.com>
Date: Thu, 4 Apr 2024 12:51:42 +0200
Subject: [PATCH 127/194] Core: Merging PT props only respects lower-case props
 (#6292)

* Splitter: fix wrong case in tailwind preset

* Toast: fix wrong case in tailwind preset

* Calendar: fix wrong case in tailwind preset

* Chips: removed newline

* ColorPicker: fix wrong case in tailwind preset

* Terminal: fix wrong case in tailwind preset

* Menu: fix wrong case in tailwind preset

* MegaMenu: fix wrong case in tailwind preset

* PanelMenu: fix wrong case in tailwind preset

* SlideMenu: fix wrong case in tailwind preset

* TieredMenu: fix wrong case in tailwind preset

* Image: fix wrong case in tailwind preset

* Galleria: fix wrong case in tailwind preset

* Carousel: fix wrong case in tailwind preset

* Tree: fix wrong case in tailwind preset

* DataView: fix wrong case in tailwind preset

* OrganizationChart: fix wrong case in tailwind preset

* OrderList: fix wrong case in tailwind preset

* PickList: fix wrong case in tailwind preset

* Paginator: fix wrong case in tailwind preset

* TreeTable: fix wrong case in tailwind preset

* DataTable: fix wrong case in tailwind preset

* MeterGroup: fix wrong PT props
---
 components/lib/passthrough/tailwind/index.js | 305 ++++++++-----------
 1 file changed, 130 insertions(+), 175 deletions(-)

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 37fabb860f..6c9c8fd86d 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -290,7 +290,7 @@ const Tailwind = {
                 'cursor-row-resize': props.layout !== 'horizontal'
             })
         }),
-        gutterhandler: ({ props }) => ({
+        gutterHandler: ({ props }) => ({
             className: classNames('bg-gray-300 dark:bg-gray-600 transition-all duration-200', {
                 'h-7 w-[0.3rem]': props.layout == 'horizontal',
                 'w-7 h-[0.3rem]': props.layout == 'vertical'
@@ -610,7 +610,7 @@ const Tailwind = {
         text: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4',
         summary: 'font-bold block',
         detail: 'mt-1 block',
-        closebutton: {
+        closeButton: {
             className: classNames('w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30')
         },
         transition: {
@@ -1199,7 +1199,7 @@ const Tailwind = {
             className: classNames('border-collapse w-full', 'my-2')
         },
         tableHeaderCell: 'p-2',
-        weekday: 'text-gray-600 dark:text-white/70',
+        weekDay: 'text-gray-600 dark:text-white/70',
         day: 'p-2',
         dayLabel: ({ context }) => ({
             className: classNames(
@@ -1540,7 +1540,6 @@ const Tailwind = {
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             )
         },
-
         inputToken: {
             className: classNames('py-1.5 px-0', 'flex flex-1 inline-flex')
         },
@@ -1577,14 +1576,14 @@ const Tailwind = {
             className: 'h-44 w-40',
             style: { background: 'linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' }
         },
-        colorhandle: {
+        colorHandle: {
             className: classNames('rounded-full border border-solid cursor-pointer h-3 w-3 absolute  opacity-85', 'border-white')
         },
         hue: {
             className: 'h-44 w-6 absolute top-2 left-44 opacity-85',
             style: { background: 'linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' }
         },
-        huehandle: 'border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute',
+        hueHandle: 'border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute',
         transition: TRANSITIONS.overlay
     },
     editor: {
@@ -1742,7 +1741,7 @@ const Tailwind = {
         },
         container: 'flex items-center',
         prompt: 'text-yellow-400',
-        commandtext: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
+        commandText: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
     },
     blockui: {
         root: 'relative',
@@ -1862,7 +1861,7 @@ const Tailwind = {
             className: classNames('hover:bg-gray-200')
         },
         icon: 'text-gray-600 dark:text-white/70 mr-2',
-        submenuheader: {
+        submenuHeader: {
             className: classNames('m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none')
         },
         separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
@@ -1907,7 +1906,7 @@ const Tailwind = {
             })
         }),
         icon: 'mr-2',
-        submenuicon: ({ props }) => ({
+        submenuIcon: ({ props }) => ({
             className: classNames({
                 'ml-auto sm:ml-2': props.root,
                 'ml-auto': !props.root
@@ -1970,7 +1969,7 @@ const Tailwind = {
                 'no-underline w-8 h-8 items-center justify-center rounded-full transition hover:bg-gray-200 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         }),
-        headeraction: {
+        headerAction: {
             className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
         },
         action: {
@@ -1982,7 +1981,7 @@ const Tailwind = {
         submenuItem: {
             className: classNames('text-gray-700 hover:bg-gray-200')
         },
-        submenuicon: ({ props }) => ({
+        submenuIcon: ({ props }) => ({
             className: classNames({
                 'ml-2': props.orientation === 'horizontal',
                 'ml-auto': props.orientation !== 'horizontal'
@@ -1998,7 +1997,7 @@ const Tailwind = {
         submenu: {
             className: classNames('m-0 list-none', 'py-1 w-48')
         },
-        submenuheader: {
+        submenuHeader: {
             className: classNames('m-0 py-3 px-5 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold rounded-tr-md rounded-tl-md')
         }
     },
@@ -2015,16 +2014,16 @@ const Tailwind = {
                 'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80' // Focus
             )
         },
-        headeraction: {
+        headerAction: {
             className: classNames('flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold')
         },
-        headersubmenuicon: {
+        headerSubmenuIcon: {
             className: classNames('mr-2')
         },
-        headericon: {
+        headerIcon: {
             className: classNames('mr-2')
         },
-        menucontent: {
+        menuContent: {
             className: classNames('py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md')
         },
         menu: {
@@ -2048,7 +2047,7 @@ const Tailwind = {
         submenu: {
             className: classNames('p-0 pl-4 m-0 list-none')
         },
-        submenuicon: {
+        submenuIcon: {
             className: classNames('mr-2')
         },
         transition: TRANSITIONS.toggleable
@@ -2120,7 +2119,7 @@ const Tailwind = {
             })
         }),
         icon: 'mr-2',
-        submenuicon: 'ml-auto',
+        submenuIcon: 'ml-auto',
         separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
         submenu: {
             className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0')
@@ -2154,7 +2153,7 @@ const Tailwind = {
             })
         }),
         icon: 'mr-2',
-        submenuicon: 'ml-auto',
+        submenuIcon: 'ml-auto',
         separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
         submenu: {
             className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0')
@@ -2163,99 +2162,55 @@ const Tailwind = {
     },
     metergroup: {
         root: ({ props }) => ({
-            class: [
-                // Flexbox
+            className: classNames(
                 'flex gap-4',
-
                 { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
-            ]
+            )
         }),
         metercontainer: ({ props }) => ({
-            class: [
-                // Flexbox
+            className: classNames(
                 'flex',
-
                 { 'flex-col': props.orientation === 'vertical' },
-
-                // Sizing
                 { 'w-2 h-full': props.orientation === 'vertical' },
                 { 'h-2': props.orientation === 'horizontal' },
-
-                // Colors
                 'bg-gray-200 dark:bg-gray-700',
-
-                // Border Radius
                 'rounded-lg'
-            ]
+            )
         }),
         meter: ({ props }) => ({
-            class: [
-                // Shape
+            className: classNames(
                 'border-0',
-
-                // Rounded Corners - Horizontal
                 {
                     'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
                 },
-
-                // Rounded Corners - Vertical
                 {
                     'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
                 },
-
-                // Colors
                 'bg-primary-500 dark:bg-primary-400'
-            ]
+            )
         }),
         labellist: ({ props }) => ({
-            class: [
-                // Display & Flexbox
+            className: classNames(
                 'flex flex-wrap',
-
                 { 'gap-4': props.labelOrientation === 'horizontal' },
-
                 { 'gap-2': props.labelOrientation === 'vertical' },
-
                 { 'flex-col': props.labelOrientation === 'vertical' },
-
-                // Conditional Alignment - Horizontal
                 {
                     'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
                     'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
                 },
-
-                // Conditional Alignment - Vertical
                 {
                     'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
                     'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
                 },
-
-                // List Styling
                 'm-0 p-0 list-none'
-            ]
+            )
         }),
         labellistitem: {
-            class: [
-                // Flexbox
-                'inline-flex',
-                'items-center',
-                'gap-2'
-            ]
+            className: 'inline-flex items-center gap-2'
         },
         labellisttype: {
-            class: [
-                // Display
-                'inline-flex',
-
-                // Background Color
-                'bg-primary-500 dark:bg-primary-400',
-
-                // Size
-                'w-2 h-2',
-
-                // Rounded Shape
-                'rounded-full'
-            ]
+            className: 'inline-flex bg-primary-500 dark:bg-primary-400 w-2 h-2 rounded-full'
         }
     },
     //MEDIA
@@ -2274,7 +2229,7 @@ const Tailwind = {
         toolbar: {
             className: classNames('absolute top-0 right-0 z-10 flex', 'p-4')
         },
-        rotaterightbutton: {
+        rotateRightButton: {
             className: classNames(
                 'flex justify-center items-center',
                 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
@@ -2282,8 +2237,8 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        rotaterighticon: 'w-6 h-6',
-        rotateleftbutton: {
+        rotateRightIcon: 'w-6 h-6',
+        rotateLeftButton: {
             className: classNames(
                 'flex justify-center items-center',
                 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
@@ -2291,8 +2246,8 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        rotatelefticon: 'w-6 h-6',
-        zoomoutbutton: {
+        rotateLeftIcon: 'w-6 h-6',
+        zoomOutButton: {
             className: classNames(
                 'flex justify-center items-center',
                 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
@@ -2300,8 +2255,8 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        zoomouticon: 'w-6 h-6',
-        zoominbutton: {
+        zoomOutIcon: 'w-6 h-6',
+        zoomInButton: {
             className: classNames(
                 'flex justify-center items-center',
                 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
@@ -2309,8 +2264,8 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        zoominicon: 'w-6 h-6',
-        closebutton: {
+        zoomInIcon: 'w-6 h-6',
+        closeButton: {
             className: classNames(
                 'flex justify-center items-center',
                 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
@@ -2318,7 +2273,7 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        closeicon: 'w-6 h-6',
+        closeIcon: 'w-6 h-6',
         transition: {
             timeout: 150,
             classNames: {
@@ -2332,14 +2287,14 @@ const Tailwind = {
     galleria: {
         root: 'flex flex-col',
         content: 'flex flex-col',
-        itemwrapper: 'flex flex-col relative',
-        itemcontainer: 'relative flex h-full',
+        itemWrapper: 'flex flex-col relative',
+        itemContainer: 'relative flex h-full',
         item: 'flex justify-center items-center h-full w-full',
-        thumbnailwrapper: 'flex flex-col overflow-auto shrink-0',
-        thumbnailcontainer: {
+        thumbnailWrapper: 'flex flex-col overflow-auto shrink-0',
+        thumbnailContainer: {
             className: classNames('flex flex-row', 'bg-black/90 p-4')
         },
-        previousthumbnailbutton: {
+        previousThumbnailButton: {
             className: classNames(
                 'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
                 'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
@@ -2347,12 +2302,12 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        thumbnailitemscontainer: 'overflow-hidden w-full',
-        thumbnailitems: 'flex',
-        thumbnailitem: {
+        thumbnailItemsContainer: 'overflow-hidden w-full',
+        thumbnailItems: 'flex',
+        thumbnailItem: {
             className: classNames('overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 grow-0 shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300')
         },
-        nextthumbnailbutton: {
+        nextThumbnailButton: {
             className: classNames(
                 'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
                 'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
@@ -2373,7 +2328,7 @@ const Tailwind = {
         mask: ({ state }) => ({
             className: classNames({ 'fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-90': state.visible })
         }),
-        closebutton: {
+        closeButton: {
             className: classNames(
                 'absolute top-0 right-0 flex justify-center items-center overflow-hidden m-2',
                 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
@@ -2381,8 +2336,8 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        closeicon: 'w-6 h-6',
-        previousitembutton: {
+        closeIcon: 'w-6 h-6',
+        previousItemButton: {
             className: classNames(
                 'inline-flex justify-center items-center overflow-hidden',
                 'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
@@ -2392,7 +2347,7 @@ const Tailwind = {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             )
         },
-        nextitembutton: {
+        nextItemButton: {
             className: classNames(
                 'inline-flex justify-center items-center overflow-hidden',
                 'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
@@ -2424,11 +2379,11 @@ const Tailwind = {
                 'flex-col': props.orientation == 'vertical'
             })
         }),
-        previousbutton: {
+        previousButton: {
             className: classNames('flex justify-center items-center self-center overflow-hidden relative shrink-0 grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2')
         },
-        itemscontent: 'overflow-hidden w-full',
-        itemscontainer: ({ props }) => ({
+        itemsContent: 'overflow-hidden w-full',
+        itemsContainer: ({ props }) => ({
             className: classNames('flex ', {
                 'flex-row': props.orientation !== 'vertical',
                 'flex-col h-full': props.orientation == 'vertical'
@@ -2444,7 +2399,7 @@ const Tailwind = {
             className: classNames('flex flex-row justify-center flex-wrap')
         },
         indicator: 'mr-2 mb-2',
-        indicatorbutton: ({ context }) => ({
+        indicatorButton: ({ context }) => ({
             className: classNames('w-8 h-2 transition duration-200 rounded-0', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]', {
                 'bg-blue-500 hover:bg-blue-600': context.active,
                 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.active
@@ -2483,7 +2438,7 @@ const Tailwind = {
                 }
             )
         }),
-        checkboxcontainer: 'mr-2',
+        checkboxContainer: 'mr-2',
         checkbox: ({ context, props }) => ({
             className: classNames(
                 'cursor-pointer inline-flex relative select-none align-bottom',
@@ -2500,11 +2455,11 @@ const Tailwind = {
                 }
             )
         }),
-        nodeicon: 'mr-2 text-gray-600 dark:text-white/70',
+        nodeIcon: 'mr-2 text-gray-600 dark:text-white/70',
         subgroup: {
             className: classNames('m-0 list-none', 'p-0 pl-4')
         },
-        filtercontainer: {
+        filterContainer: {
             className: classNames('mb-2', 'relative block w-full')
         },
         input: {
@@ -2514,7 +2469,7 @@ const Tailwind = {
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             )
         },
-        searchicon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
+        searchIcon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
     },
     // DATA
     timeline: {
@@ -2586,7 +2541,7 @@ const Tailwind = {
         header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
     },
     dataviewlayoutoptions: {
-        listbutton: ({ props }) => ({
+        listButton: ({ props }) => ({
             className: classNames(
                 'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
                 'transition duration-200',
@@ -2594,7 +2549,7 @@ const Tailwind = {
                 props.layout === 'list' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
             )
         }),
-        gridbutton: ({ props }) => ({
+        gridButton: ({ props }) => ({
             className: classNames(
                 'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
                 'transition duration-200',
@@ -2622,14 +2577,14 @@ const Tailwind = {
                 'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' // Dark Mode
             )
         },
-        linecell: 'text-center align-top py-0 px-3',
-        linedown: {
+        lineCell: 'text-center align-top py-0 px-3',
+        lineDown: {
             className: classNames(
                 'mx-auto my-0 w-px h-[20px] bg-gray-300',
                 'dark:bg-blue-900/40' //Dark Mode
             )
         },
-        lineleft: ({ context }) => ({
+        lineLeft: ({ context }) => ({
             className: classNames(
                 'text-center align-top py-0 px-3 rounded-none border-r border-gray-300',
                 'dark:border-blue-900/40', //Dark Mode
@@ -2638,7 +2593,7 @@ const Tailwind = {
                 }
             )
         }),
-        lineright: ({ context }) => ({
+        lineRight: ({ context }) => ({
             className: classNames(
                 'text-center align-top py-0 px-3 rounded-none',
                 'dark:border-blue-900/40', //Dark Mode
@@ -2647,19 +2602,19 @@ const Tailwind = {
                 }
             )
         }),
-        nodecell: 'text-center align-top py-0 px-3',
-        nodetoggler: {
+        nodeCell: 'text-center align-top py-0 px-3',
+        nodeToggler: {
             className: classNames(
                 'absolute bottom-[-0.75rem] left-2/4 -ml-3 w-6 h-6 bg-inherit text-inherit rounded-full z-2 cursor-pointer no-underline select-none',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus styles
             )
         },
-        nodetogglericon: 'relative inline-block w-4 h-4'
+        nodeTogglerIcon: 'relative inline-block w-4 h-4'
     },
     orderlist: {
         root: 'flex',
         controls: 'flex flex-col justify-center p-5',
-        moveupbutton: {
+        moveUpButton: {
             root: ({ context }) => ({
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2675,7 +2630,7 @@ const Tailwind = {
             }),
             label: () => ({ className: classNames('flex-initial w-0') })
         },
-        movetopbutton: {
+        moveTopButton: {
             root: ({ context }) => ({
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2691,7 +2646,7 @@ const Tailwind = {
             }),
             label: () => ({ className: classNames('flex-initial w-0') })
         },
-        movedownbutton: {
+        moveDownButton: {
             root: ({ context }) => ({
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2707,7 +2662,7 @@ const Tailwind = {
             }),
             label: () => ({ className: classNames('flex-initial w-0') })
         },
-        movebottombutton: {
+        moveBottomButton: {
             root: ({ context }) => ({
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2819,7 +2774,7 @@ const Tailwind = {
             })
         }),
         buttons: 'flex flex-row xl:flex-col justify-center p-5',
-        movetotargetbutton: {
+        moveToTargetButton: {
             root: {
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2832,7 +2787,7 @@ const Tailwind = {
             },
             label: 'flex-initial w-0'
         },
-        movealltotargetbutton: {
+        moveAllToTargetButton: {
             root: {
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2845,7 +2800,7 @@ const Tailwind = {
             },
             label: 'flex-initial w-0'
         },
-        movetosourcebutton: {
+        moveToSourceButton: {
             root: {
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2858,7 +2813,7 @@ const Tailwind = {
             },
             label: 'flex-initial w-0'
         },
-        movealltosourcebutton: {
+        moveAllToSourceButton: {
             root: {
                 className: classNames(
                     'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
@@ -2904,7 +2859,7 @@ const Tailwind = {
                 'dark:bg-gray-900 dark:text-white/60 dark:border-blue-900/40' // Dark Mode
             )
         },
-        firstpagebutton: ({ context }) => ({
+        firstPageButton: ({ context }) => ({
             className: classNames(
                 'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
                 'border-0 text-gray-500  min-w-[3rem] h-12 m-[0.143rem] rounded-md',
@@ -2916,7 +2871,7 @@ const Tailwind = {
                 }
             )
         }),
-        previouspagebutton: ({ context }) => ({
+        prevPageButton: ({ context }) => ({
             className: classNames(
                 'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
                 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
@@ -2928,7 +2883,7 @@ const Tailwind = {
                 }
             )
         }),
-        nextpagebutton: ({ context }) => ({
+        nextPageButton: ({ context }) => ({
             className: classNames(
                 'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
                 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
@@ -2940,7 +2895,7 @@ const Tailwind = {
                 }
             )
         }),
-        lastpagebutton: ({ context }) => ({
+        lastPageButton: ({ context }) => ({
             className: classNames(
                 'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
                 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
@@ -2952,7 +2907,7 @@ const Tailwind = {
                 }
             )
         }),
-        pagebutton: ({ context }) => ({
+        pageButton: ({ context }) => ({
             className: classNames(
                 'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
                 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
@@ -2964,7 +2919,7 @@ const Tailwind = {
                 }
             )
         }),
-        rowperpagedropdown: {
+        RPPDropdown: {
             root: ({ props, state }) => ({
                 className: classNames(
                     'inline-flex relative cursor-pointer user-none',
@@ -3012,7 +2967,7 @@ const Tailwind = {
                 )
             })
         },
-        jumptopageinput: {
+        JTPInput: {
             root: 'inline-flex mx-2',
             input: {
                 className: classNames(
@@ -3079,7 +3034,7 @@ const Tailwind = {
                 'flex flex-col h-full': props.scrollHeight
             })
         }),
-        loadingoverlay: {
+        loadingOverlay: {
             className: classNames(
                 'fixed w-full h-full t-0 l-0 bg-gray-100/40',
                 'transition duration-200',
@@ -3087,14 +3042,14 @@ const Tailwind = {
                 'dark:bg-gray-950/40' // Dark Mode
             )
         },
-        loadingicon: 'w-8 h-8',
+        loadingIcon: 'w-8 h-8',
         header: {
             className: classNames(
                 'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
                 'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
             )
         },
-        scrollablewrapper: ({ props }) => ({
+        scrollableWrapper: ({ props }) => ({
             className: classNames({
                 'relative overflow-auto': props.scrollable,
                 'overflow-x-auto': props.resizableColumns
@@ -3128,7 +3083,7 @@ const Tailwind = {
                 block: props.scrollable
             })
         }),
-        headerrow: ({ props }) => ({
+        headerRow: ({ props }) => ({
             className: classNames({
                 'flex flex-nowrap w-full': props.scrollable
             })
@@ -3145,7 +3100,7 @@ const Tailwind = {
             )
         }),
         column: {
-            headercell: ({ context }) => ({
+            headerCell: ({ context }) => ({
                 className: classNames(
                     'text-left border-gray-300 border font-bold',
                     'transition duration-200 p-4',
@@ -3161,7 +3116,7 @@ const Tailwind = {
                     }
                 )
             }),
-            bodycell: ({ context }) => ({
+            bodyCell: ({ context }) => ({
                 className: classNames(
                     'text-left border-gray-300 border',
                     'transition duration-200 p-4',
@@ -3175,7 +3130,7 @@ const Tailwind = {
                     }
                 )
             }),
-            rowtoggler: ({ context }) => ({
+            rowToggler: ({ context }) => ({
                 className: classNames(
                     'relative inline-flex items-center justify-center align-center cursor-pointer select-none overflow-hidden bg-transparent',
                     'w-8 h-8 border-0 rounded mr-0.5',
@@ -3189,20 +3144,20 @@ const Tailwind = {
             sort: {
                 className: 'inline-block align-middle'
             },
-            sorticon: ({ context }) => ({
+            sortIcon: ({ context }) => ({
                 className: classNames('ml-2 inline-block align-middle', {
                     'text-blue-700 dark:text-white/80': context.sorted,
                     'text-slate-700 dark:text-white/70': !context.sorted
                 })
             }),
-            sortbadge: {
+            sortBadge: {
                 className: classNames(
                     'h-[1.143rem] min-w-[1.143rem] leading-[1.143rem] text-blue-700 bg-blue-50 ml-2 rounded-[50%]',
                     'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
                 )
             },
-            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
-            checkboxwrapper: {
+            columnResizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            checkboxWrapper: {
                 className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2')
             },
             checkbox: ({ context }) => ({
@@ -3218,13 +3173,13 @@ const Tailwind = {
                     }
                 )
             }),
-            checkboxicon: ({ context }) => ({
+            checkboxIcon: ({ context }) => ({
                 className: classNames('w-4 h-4 transition-all duration-200 text-base dark:text-gray-900', {
                     'text-white': context.checked
                 })
             })
         },
-        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+        resizeHelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
     },
     datatable: {
         root: ({ props }) => ({
@@ -3232,7 +3187,7 @@ const Tailwind = {
                 'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex'
             })
         }),
-        loadingoverlay: {
+        loadingOverlay: {
             className: classNames(
                 'fixed w-full h-full t-0 l-0 bg-gray-100/40',
                 'transition duration-200',
@@ -3240,7 +3195,7 @@ const Tailwind = {
                 'dark:bg-gray-950/40' // Dark Mode
             )
         },
-        loadingicon: 'w-8 h-8',
+        loadingIcon: 'w-8 h-8',
         wrapper: ({ props }) => ({
             className: classNames({
                 relative: props.scrollable,
@@ -3277,7 +3232,7 @@ const Tailwind = {
             )
         },
         column: {
-            headercell: ({ context, props }) => ({
+            headerCell: ({ context, props }) => ({
                 className: classNames(
                     'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
                     'transition duration-200',
@@ -3291,8 +3246,8 @@ const Tailwind = {
                     }
                 )
             }),
-            headercontent: 'flex items-center',
-            bodycell: ({ props, context }) => ({
+            headerContent: 'flex items-center',
+            bodyCell: ({ props, context }) => ({
                 className: classNames(
                     'text-left border-0 border-b border-solid border-gray-300',
                     context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
@@ -3303,7 +3258,7 @@ const Tailwind = {
                     }
                 )
             }),
-            footercell: ({ context }) => ({
+            footerCell: ({ context }) => ({
                 className: classNames(
                     'text-left border-0 border-b border-solid border-gray-300 font-bold',
                     'bg-slate-50 text-slate-700',
@@ -3315,10 +3270,10 @@ const Tailwind = {
                     }
                 )
             }),
-            sorticon: ({ context }) => ({
+            sortIcon: ({ context }) => ({
                 className: classNames('ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70')
             }),
-            sortbadge: {
+            sortBadge: {
                 className: classNames(
                     'flex items-center justify-center align-middle',
                     'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2',
@@ -3326,52 +3281,52 @@ const Tailwind = {
                     'dark:text-white/80 dark:bg-blue-400' // Dark Mode
                 )
             },
-            columnfilter: 'inline-flex items-center ml-auto',
-            filteroverlay: {
+            columnFilter: 'inline-flex items-center ml-auto',
+            filterOverlay: {
                 className: classNames(
                     'bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
                     'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //Dark Mode
                 )
             },
-            filtermatchmodedropdown: {
+            filterMatchModeDropdown: {
                 root: 'min-[0px]:flex mb-2'
             },
-            filterrowitems: 'm-0 p-0 py-3 list-none ',
-            filterrowitem: ({ context }) => ({
+            filterRowItems: 'm-0 p-0 py-3 list-none ',
+            filterRowItem: ({ context }) => ({
                 className: classNames(
                     'm-0 py-3 px-5 bg-transparent',
                     'transition duration-200',
                     context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent'
                 )
             }),
-            filteroperator: {
+            filterOperator: {
                 className: classNames(
                     'px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md',
                     'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
                 )
             },
-            filteroperatordropdown: {
+            filterOperatorDropdown: {
                 root: 'min-[0px]:flex'
             },
-            filterconstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
-            filteraddrule: 'py-3 px-5',
-            filteraddrulebutton: {
+            filterConstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
+            filterAddRule: 'py-3 px-5',
+            filterAddRuleButton: {
                 root: 'justify-center w-full min-[0px]:text-sm',
                 label: 'flex-auto grow-0',
                 icon: 'mr-2'
             },
-            filterremovebutton: {
+            filterRemoveButton: {
                 root: 'ml-2',
                 label: 'grow-0'
             },
-            filterbuttonbar: 'flex items-center justify-between p-5',
-            filterclearbutton: {
+            filterButtonbar: 'flex items-center justify-between p-5',
+            filterClearButton: {
                 root: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
             },
-            filterapplybutton: {
+            filterApplyButton: {
                 root: 'w-auto min-[0px]:text-sm px-4 py-3'
             },
-            filtermenubutton: ({ context }) => ({
+            filterMenuButton: ({ context }) => ({
                 className: classNames(
                     'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2',
                     'w-8 h-8 rounded-[50%]',
@@ -3384,14 +3339,14 @@ const Tailwind = {
                     }
                 )
             }),
-            headerfilterclearbutton: ({ context }) => ({
+            headerFilterClearButton: ({ context }) => ({
                 className: classNames('inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative', 'text-left bg-transparent m-0 p-0 border-none select-none ml-2', {
                     invisible: !context.hidden
                 })
             }),
-            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            columnResizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
             rowreordericon: 'cursor-move',
-            roweditorinitbutton: {
+            rowEditorInitButton: {
                 className: classNames(
                     'inline-flex items-center justify-center overflow-hidden relative',
                     'text-left cursor-pointer select-none',
@@ -3403,7 +3358,7 @@ const Tailwind = {
                     'dark:text-white/70' // Dark Mode
                 )
             },
-            roweditorsavebutton: {
+            rowEditorSaveButton: {
                 className: classNames(
                     'inline-flex items-center justify-center overflow-hidden relative',
                     'text-left cursor-pointer select-none',
@@ -3415,7 +3370,7 @@ const Tailwind = {
                     'dark:text-white/70' // Dark Mode
                 )
             },
-            roweditorcancelbutton: {
+            rowEditorCancelButton: {
                 className: classNames(
                     'inline-flex items-center justify-center overflow-hidden relative',
                     'text-left cursor-pointer select-none',
@@ -3450,7 +3405,7 @@ const Tailwind = {
             headercheckboxwrapper: {
                 className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
             },
-            headercheckbox: ({ context }) => ({
+            headerCheckbox: ({ context }) => ({
                 className: classNames(
                     'flex items-center justify-center',
                     'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
@@ -3479,7 +3434,7 @@ const Tailwind = {
             checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
             transition: TRANSITIONS.overlay
         },
-        bodyrow: ({ context }) => ({
+        bodyRow: ({ context }) => ({
             className: classNames(
                 context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
                 context.stripedRows ? (context.index % 2 === 0 ? 'bg-white text-gray-600 dark:bg-gray-900' : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950') : '',
@@ -3492,11 +3447,11 @@ const Tailwind = {
                 }
             )
         }),
-        rowexpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
-        rowgroupheader: {
+        rowExpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+        rowGroupHeader: {
             className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
         },
-        rowgroupfooter: {
+        rowgroupFooter: {
             className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
         },
         rowgrouptoggler: {
@@ -3509,7 +3464,7 @@ const Tailwind = {
             )
         },
         rowgrouptogglericon: 'inline-block w-4 h-4',
-        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+        resizeHelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
     },
     // CHART
     chart: {

From c1b397f7b03ff42370283101712d1e8bf229fc4e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Thu, 4 Apr 2024 13:53:48 +0300
Subject: [PATCH 128/194] Fix #6272 - DataTable: Drag Selection Highlight
 Doesnt Appear

---
 components/lib/datatable/DataTableBase.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
index f94a71e8a1..76277da93f 100644
--- a/components/lib/datatable/DataTableBase.js
+++ b/components/lib/datatable/DataTableBase.js
@@ -335,6 +335,7 @@ const classes = {
     columnTitle: 'p-column-title',
     bodyRow: ({ rowProps: props }) =>
         classNames({
+            'p-highlight': (!props.allowCellSelection && props.selected) || props.contextMenuSelected,
             'p-highlight-contextmenu': props.contextMenuSelected,
             'p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }),
             'p-row-odd': props.rowIndex % 2 !== 0

From 308e350423d177e5c6ca2964c888141a65d8a5a3 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Thu, 4 Apr 2024 12:06:56 +0000
Subject: [PATCH 129/194] Update API doc

---
 package-lock.json | 124 +++-------------------------------------------
 1 file changed, 7 insertions(+), 117 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dcfa5a5867..03f23ad902 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,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",
@@ -23,8 +21,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"
             },
@@ -4472,15 +4468,6 @@
                 "@types/node": "*"
             }
         },
-        "node_modules/@types/hoist-non-react-statics": {
-            "version": "3.3.5",
-            "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
-            "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
-            "dependencies": {
-                "@types/react": "*",
-                "hoist-non-react-statics": "^3.3.0"
-            }
-        },
         "node_modules/@types/istanbul-lib-coverage": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -4540,7 +4527,8 @@
         "node_modules/@types/prop-types": {
             "version": "15.7.10",
             "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz",
-            "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A=="
+            "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==",
+            "devOptional": true
         },
         "node_modules/@types/raf": {
             "version": "3.4.3",
@@ -4552,6 +4540,7 @@
             "version": "18.2.39",
             "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
             "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
+            "devOptional": true,
             "dependencies": {
                 "@types/prop-types": "*",
                 "@types/scheduler": "*",
@@ -4585,7 +4574,8 @@
         "node_modules/@types/scheduler": {
             "version": "0.16.6",
             "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz",
-            "integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA=="
+            "integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA==",
+            "devOptional": true
         },
         "node_modules/@types/semver": {
             "version": "7.5.6",
@@ -8705,21 +8695,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/final-form": {
-            "version": "4.20.10",
-            "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.20.10.tgz",
-            "integrity": "sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==",
-            "dependencies": {
-                "@babel/runtime": "^7.10.0"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/final-form"
-            }
-        },
         "node_modules/find-up": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -8995,38 +8970,6 @@
                 "node": ">= 6"
             }
         },
-        "node_modules/formik": {
-            "version": "2.4.5",
-            "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.5.tgz",
-            "integrity": "sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==",
-            "funding": [
-                {
-                    "type": "individual",
-                    "url": "https://opencollective.com/formik"
-                }
-            ],
-            "dependencies": {
-                "@types/hoist-non-react-statics": "^3.3.1",
-                "deepmerge": "^2.1.1",
-                "hoist-non-react-statics": "^3.3.0",
-                "lodash": "^4.17.21",
-                "lodash-es": "^4.17.21",
-                "react-fast-compare": "^2.0.1",
-                "tiny-warning": "^1.0.2",
-                "tslib": "^2.0.0"
-            },
-            "peerDependencies": {
-                "react": ">=16.8.0"
-            }
-        },
-        "node_modules/formik/node_modules/deepmerge": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-            "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/fragment-cache": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -9844,14 +9787,6 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/hoist-non-react-statics": {
-            "version": "3.3.2",
-            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-            "dependencies": {
-                "react-is": "^16.7.0"
-            }
-        },
         "node_modules/homedir-polyfill": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -13362,12 +13297,8 @@
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-        },
-        "node_modules/lodash-es": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "dev": true
         },
         "node_modules/lodash.camelcase": {
             "version": "4.3.0",
@@ -15824,42 +15755,6 @@
                 "react": "^18.2.0"
             }
         },
-        "node_modules/react-fast-compare": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-            "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-        },
-        "node_modules/react-final-form": {
-            "version": "6.5.9",
-            "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz",
-            "integrity": "sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==",
-            "dependencies": {
-                "@babel/runtime": "^7.15.4"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/final-form"
-            },
-            "peerDependencies": {
-                "final-form": "^4.20.4",
-                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-            }
-        },
-        "node_modules/react-hook-form": {
-            "version": "7.48.2",
-            "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz",
-            "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==",
-            "engines": {
-                "node": ">=12.22.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/react-hook-form"
-            },
-            "peerDependencies": {
-                "react": "^16.8.0 || ^17 || ^18"
-            }
-        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -18023,11 +17918,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/tiny-warning": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-            "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-        },
         "node_modules/tmpl": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

From f0d1f1c0fe9a2fdf94bcfcdd80a511dc9e5952dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Fri, 5 Apr 2024 04:13:39 +0300
Subject: [PATCH 130/194] InputOtp Init

---
 components/doc/inputotp/basicdoc.js     |  49 +++++++
 components/layout/menu.json             |   5 +
 components/lib/inputotp/BaseInputOtp.js |  26 ++++
 components/lib/inputotp/InputOtp.js     | 182 ++++++++++++++++++++++++
 pages/inputotp/index.js                 | 118 +++++++++++++++
 5 files changed, 380 insertions(+)
 create mode 100644 components/doc/inputotp/basicdoc.js
 create mode 100644 components/lib/inputotp/BaseInputOtp.js
 create mode 100644 components/lib/inputotp/InputOtp.js
 create mode 100644 pages/inputotp/index.js

diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js
new file mode 100644
index 0000000000..9b5b9df1d2
--- /dev/null
+++ b/components/doc/inputotp/basicdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Tag value="New"></Tag>
+        `,
+        javascript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tag value="New"></Tag>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tag value="New"></Tag>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Label of the tag is defined with the <i>value</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputOtp length={5} onChange={(e) => {console.log(e)}} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/layout/menu.json b/components/layout/menu.json
index 88cd2ac1fb..b7d5ba133c 100644
--- a/components/layout/menu.json
+++ b/components/layout/menu.json
@@ -83,6 +83,11 @@
                             "name": "InputNumber",
                             "to": "/inputnumber"
                         },
+                        {
+                            "name": "InputOtp",
+                            "to": "/inputotp",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "InputText",
                             "to": "/inputtext"
diff --git a/components/lib/inputotp/BaseInputOtp.js b/components/lib/inputotp/BaseInputOtp.js
new file mode 100644
index 0000000000..b0a1078d12
--- /dev/null
+++ b/components/lib/inputotp/BaseInputOtp.js
@@ -0,0 +1,26 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-inputotp p-component',
+    input: 'p-inputotp-input'
+};
+
+export const InputOtpBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputOtp',
+        __parentMetadata: null,
+        className: null,
+        modelValue: false,
+        invalid: false,
+        disabled: false,
+        readOnly: false,
+        variant: null,
+        tabIndex: null,
+        length: 4,
+        mask: false,
+        integerOnly: false
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
new file mode 100644
index 0000000000..1d17535c5f
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.js
@@ -0,0 +1,182 @@
+import React, { useRef, useContext, useState } from 'react'
+import { useMergeProps } from '../hooks/Hooks';
+import { PrimeReactContext } from '../api/Api';
+import { InputOtpBase } from './BaseInputOtp';
+
+export const InputOtp = React.memo(
+    React.forwardRef((inProps, ref) => {
+	const elementRef = useRef(ref);
+	const mergeProps = useMergeProps();
+	const context = useContext(PrimeReactContext);
+	const props = InputOtpBase.getProps(inProps, context);
+	const { ptm, cx } = InputOtpBase.setMetaData({
+		props,
+		...props.__parentMetadata,
+	});
+
+	const defaultValue = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
+	const [tokens, setTokens] = useState(defaultValue);
+
+	const moveToNextInput = (event) => {
+		const nextInput = event.target.nextElementSibling;
+
+		if (!nextInput) return;
+
+		if (nextInput.nodeName === 'INPUT') {
+			nextInput.focus();
+			nextInput.select();
+		}
+	}
+
+	const moveToPrevInput = (event) => {
+		const prevInput = event.target.previousElementSibling;
+
+		if (!prevInput) return;
+
+		if (prevInput.nodeName === 'INPUT') {
+			prevInput.focus();
+			prevInput.select();
+		}
+	}
+
+	const onChange = (event, value) => {
+		props?.onChange?.({
+			originalEvent: event,
+			value: value.join('')
+		})
+	}
+
+	const updateTokens = (event, index) => {
+		const inputValue = event.target.value;
+		const newTokens = [...tokens];
+		newTokens[index] = inputValue;
+		newTokens = newTokens.join('');
+		newTokens = newTokens ? newTokens.split('') : new Array(props.length);
+
+		setTokens(newTokens);
+		onChange(event, newTokens);
+	}
+
+	const onInput = (event,index) => {
+		updateTokens(event, index);
+		
+
+		if (event.nativeEvent.inputType === 'deleteContentBackward') {
+			moveToPrevInput(event);
+		} else if (event.nativeEvent.inputType === 'insertText' || event.nativeEvent.inputType === 'deleteContentForward') {
+			moveToNextInput(event);
+		}
+	}
+
+	const onPaste = (event) => {
+		let paste = event.clipboardData.getData('text');
+
+		if (paste.lenght) {
+			let pastedCode = paste.substring(0, props.length + 1);
+
+			if (!props.integerOnly || !isNaN(pastedCode)) {
+				const newTokens = pastedCode.split('');
+
+				setTokens(newTokens);
+				onChange(event, newTokens);
+			}
+		}
+	}
+
+	const onFocus = (event) => {
+		event.target.select();
+		props?.focus?.(event);
+	}
+
+	const onBlur = (event) => {
+		props?.blur?.(event);
+	}
+
+	const onKeydown = (event) => {
+		switch (event.code) {
+			case 'ArrowLeft': {
+				moveToPrevInput(event);
+				event.preventDefault();
+				break;
+			}
+
+			case 'ArrowRight': {
+				moveToNextInput(event);
+				event.preventDefault();
+				break;
+			}
+
+			case 'Backspace': {
+				if (event.target.value.length === 0) {
+					moveToPrevInput(event);
+					event.preventDefault();
+				}
+
+				break;
+			}
+
+			case 'ArrowUp':
+			case 'ArrowDown': {
+				event.preventDefault();
+
+				break;
+			}
+
+			default: {
+				// Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length
+				if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) {
+					event.preventDefault();
+				}
+
+				break;
+			}
+		}
+	}
+
+	const createInputElements = (remainingInputs) => {
+		if (remainingInputs <= 0) {
+			return [];
+		}
+
+		const inputElementIndex = props.length - remainingInputs;
+		const inputElementProps = mergeProps(
+            {
+				id: inputElementIndex,
+				key: inputElementIndex,
+				value: tokens[inputElementIndex] || '',
+				inputMode: props?.integerOnly ? 'numeric' : 'text',
+				type: props?.mask ? 'password' : 'text',
+				variant: props?.variant,
+				readOnly: props?.readOnly,
+				disabled: props?.disabled,
+				invalid: props?.invalid,
+				tabIndex: props?.tabIndex,
+				onInput: (event) => onInput(event, inputElementIndex),
+				onKeyDown: onKeydown,
+				onFocus,
+				onBlur,
+				onPaste,
+                className: cx('input'),
+            },
+            ptm('input')
+        );		
+		const inputElement = <input {...inputElementProps} />;
+		const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)];
+
+		return inputElements;
+	}
+
+	const rootElementProps = mergeProps(
+		{
+			className: cx('root'),
+			ref: elementRef
+		},
+		ptm('root')
+	);
+
+    return (
+        <div {...rootElementProps}>
+            {createInputElements(props.length)}
+        </div>
+    );
+}));
diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js
new file mode 100644
index 0000000000..023fb2e2bc
--- /dev/null
+++ b/pages/inputotp/index.js
@@ -0,0 +1,118 @@
+// import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/inputotp/basicdoc';
+// import { ControlledDoc } from '@/components/doc/inputotp/controlleddoc';
+// import { DisabledDoc } from '@/components/doc/inputotp/disableddoc';
+// import { DynamicDoc } from '@/components/doc/inputotp/dynamicdoc';
+// import { ImportDoc } from '@/components/doc/inputotp/importdoc';
+// import { MultipleDoc } from '@/components/doc/inputotp/multipledoc';
+// import { PTDoc } from '@/components/doc/inputotp/pt/ptdoc';
+// import { Wireframe } from '@/components/doc/inputotp/pt/wireframe';
+// import { TemplateDoc } from '@/components/doc/inputotp/templatedoc';
+// import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc';
+// import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const InputOtpDemo = () => {
+    const docs = [
+        // {
+        //     id: 'import',
+        //     label: 'Import',
+        //     component: ImportDoc
+        // },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        // {
+        //     id: 'dynamic',
+        //     label: 'Dynamic',
+        //     component: DynamicDoc
+        // },
+        // {
+        //     id: 'multiple',
+        //     label: 'Multiple',
+        //     component: MultipleDoc
+        // },
+        // {
+        //     id: 'disabled',
+        //     label: 'Disabled',
+        //     component: DisabledDoc
+        // },
+        // {
+        //     id: 'controlled',
+        //     label: 'Controlled',
+        //     component: ControlledDoc
+        // },
+        // {
+        //     id: 'template',
+        //     label: 'Template',
+        //     component: TemplateDoc
+        // },
+
+        // {
+        //     id: 'accessibility',
+        //     label: 'Accessibility',
+        //     component: AccessibilityDoc
+        // }
+    ];
+
+    // const ptDocs = [
+    //     {
+    //         id: 'pt.wireframe',
+    //         label: 'Wireframe',
+    //         component: Wireframe
+    //     },
+    //     {
+    //         id: 'pt.inputotp.options',
+    //         label: 'InputOtp PT Options',
+    //         component: DocApiTable
+    //     },
+    //     {
+    //         id: 'pt.inputotptab.options',
+    //         label: 'InputOtpTab PT Options',
+    //         component: DocApiTable
+    //     },
+    //     {
+    //         id: 'pt.demo',
+    //         label: 'Example',
+    //         component: PTDoc
+    //     }
+    // ];
+
+    // const themingDocs = [
+    //     {
+    //         id: 'styled',
+    //         label: 'Styled',
+    //         component: StyledDoc
+    //     },
+    //     {
+    //         id: 'unstyled',
+    //         label: 'Unstyled',
+    //         description: 'Theming is implemented with the pass through properties in unstyled mode.',
+    //         children: [
+    //             {
+    //                 id: 'tailwind',
+    //                 label: 'Tailwind',
+    //                 component: TailwindDoc
+    //             }
+    //         ]
+    //     }
+    // ];
+
+    return (
+        <DocComponent
+            title="React InputOtp Component"
+            header="InputOtp"
+            description="InputOtp groups a collection of contents in tabs."
+            componentDocs={docs}
+            apiDocs={['InputOtp', 'InputOtpTab']}
+            // ptDocs={ptDocs}
+            ptDescription=""
+            // themingDocs={themingDocs}
+        />
+    );
+};
+
+export default InputOtpDemo;

From 3518c8c685fd3067bcac43e922867bbde5bd000f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Fri, 5 Apr 2024 04:17:20 +0300
Subject: [PATCH 131/194] demo update

---
 components/doc/inputotp/basicdoc.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js
index 9b5b9df1d2..11dab9b0bd 100644
--- a/components/doc/inputotp/basicdoc.js
+++ b/components/doc/inputotp/basicdoc.js
@@ -5,28 +5,28 @@ import { InputOtp } from '@/components/lib/inputotp/InputOtp';
 export function BasicDoc(props) {
     const code = {
         basic: `
-<Tag value="New"></Tag>
+<InputOtp />
         `,
         javascript: `
 import React from 'react';
-import { Tag } from 'primereact/tag';
+import { InputOtp } from 'primereact/inputotp';
 
 export default function BasicDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Tag value="New"></Tag>
+            <InputOtp />
         </div>
     );
 }
         `,
         typescript: `
 import React from 'react';
-import { Tag } from 'primereact/tag';
+import { InputOtp } from 'primereact/inputotp';
 
 export default function BasicDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Tag value="New"></Tag>
+            <InputOtp />
         </div>
     );
 }
@@ -37,11 +37,11 @@ export default function BasicDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Label of the tag is defined with the <i>value</i> property.
+                    The number of characters is defined with the <i>length</i> property, which is set to 4 by default.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputOtp length={5} onChange={(e) => {console.log(e)}} />
+                <InputOtp />
             </div>
             <DocSectionCode code={code} />
         </>

From 7fa273c28984af8acfc1337c49180d92463c935e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Lagstr=C3=B6m?= <joakim@lagstrom.org>
Date: Fri, 5 Apr 2024 09:08:45 +0200
Subject: [PATCH 132/194] Set key to undefined so index get correct value when
 creating list items

---
 components/lib/autocomplete/AutoCompletePanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
index f26f39a264..e3175da483 100644
--- a/components/lib/autocomplete/AutoCompletePanel.js
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -153,7 +153,7 @@ export const AutoCompletePanel = React.memo(
                 getPTOptions(suggestion, 'item')
             );
 
-            return createListItem(suggestion, index, itemProps);
+            return createListItem(suggestion, undefined, index, itemProps);
         };
 
         const createItems = () => {

From 340fe9816a28c0e482e00629ef9123a12ab55bc3 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Fri, 5 Apr 2024 11:24:25 +0300
Subject: [PATCH 133/194] Remove Related Layouts Section

---
 pages/templates/apollo/index.js   | 20 +-------------------
 pages/templates/atlantis/index.js | 20 +-------------------
 pages/templates/avalon/index.js   | 20 +-------------------
 pages/templates/diamond/index.js  | 20 +-------------------
 pages/templates/freya/index.js    | 20 +-------------------
 pages/templates/ultima/index.js   | 20 +-------------------
 pages/templates/verona/index.js   | 20 +-------------------
 7 files changed, 7 insertions(+), 133 deletions(-)

diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js
index d74fd9f0e3..0bfdbadb6a 100644
--- a/pages/templates/apollo/index.js
+++ b/pages/templates/apollo/index.js
@@ -1,28 +1,12 @@
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateLicense from '@/components/templates/TemplateLicense';
-import TemplateRelated from '@/components/templates/TemplateRelated';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
-import ApolloLogo from './ApolloLogo';
 import Link from 'next/link';
-
-const apolloRelatedData = [
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond-react.jpg',
-        href: '/templates/diamond'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon-react.jpg',
-        href: '/templates/avalon'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/babylon-react.jpg',
-        href: '/templates/babylon'
-    }
-];
+import ApolloLogo from './ApolloLogo';
 
 const apolloFeatures2Data = [
     {
@@ -243,8 +227,6 @@ const ApolloPage = () => {
             <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
             <ApolloSeparator />
             <TemplateFeatures featuresData={apolloFeatures2Data} displayType="vertical" />
-            <ApolloSeparator />
-            <TemplateRelated relatedData={apolloRelatedData} />
         </div>
     );
 };
diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js
index f2721c8075..f083a70539 100644
--- a/pages/templates/atlantis/index.js
+++ b/pages/templates/atlantis/index.js
@@ -1,13 +1,12 @@
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateLicense from '@/components/templates/TemplateLicense';
-import TemplateRelated from '@/components/templates/TemplateRelated';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
-import AtlantisLogo from './AtlantisLogo';
 import Link from 'next/link';
+import AtlantisLogo from './AtlantisLogo';
 
 const features2Data = [
     {
@@ -44,21 +43,6 @@ const features2Data = [
     }
 ];
 
-const relatedData = [
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/freya-react.jpg',
-        href: '/templates/freya'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima-react.jpg',
-        href: '/templates/ultima'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/roma-react.jpg',
-        href: '/templates/roma'
-    }
-];
-
 const animationFeaturesData1 = [
     {
         id: 1,
@@ -220,8 +204,6 @@ const AtlantisPage = () => {
             <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
             <AtlantisSeperator />
             <TemplateFeatures featuresData={features2Data} displayType="vertical" />
-            <AtlantisSeperator />
-            <TemplateRelated relatedData={relatedData} />
         </div>
     );
 };
diff --git a/pages/templates/avalon/index.js b/pages/templates/avalon/index.js
index 127f922bf8..f98bc66cab 100644
--- a/pages/templates/avalon/index.js
+++ b/pages/templates/avalon/index.js
@@ -1,12 +1,11 @@
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateLicense from '@/components/templates/TemplateLicense';
-import TemplateRelated from '@/components/templates/TemplateRelated';
 import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
 import AvalonLogo from './AvalonLogo';
 import AvalonSeparator from './AvalonSeparator';
-import Link from 'next/link';
 
 const features2Data = [
     {
@@ -44,21 +43,6 @@ const features2Data = [
     }
 ];
 
-const relatedData = [
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/babylon-react.jpg',
-        href: '/templates/babylon'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo-react.jpg',
-        href: '/templates/apollo'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/roma-react.jpg',
-        href: '/templates/roma'
-    }
-];
-
 const animationFeaturesData1 = [
     {
         id: 1,
@@ -227,8 +211,6 @@ const AvalonPage = () => {
             <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
             <AvalonSeparator />
             <TemplateFeatures featuresData={features2Data} displayType="vertical" />
-            <AvalonSeparator />
-            <TemplateRelated relatedData={relatedData} />
         </div>
     );
 };
diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js
index 77f39bfb76..d5991a33f9 100644
--- a/pages/templates/diamond/index.js
+++ b/pages/templates/diamond/index.js
@@ -1,13 +1,12 @@
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateLicense from '@/components/templates/TemplateLicense';
-import TemplateRelated from '@/components/templates/TemplateRelated';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
-import DiamondLogo from './DiamondLogo';
 import Link from 'next/link';
+import DiamondLogo from './DiamondLogo';
 
 const features2Data = [
     {
@@ -44,21 +43,6 @@ const features2Data = [
     }
 ];
 
-const relatedData = [
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo-react.jpg',
-        href: '/templates/apollo'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon-react.jpg',
-        href: '/templates/avalon'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/roma-react.jpg',
-        href: '/templates/roma'
-    }
-];
-
 const animationFeaturesData1 = [
     {
         id: 1,
@@ -231,8 +215,6 @@ const DiamondPage = () => {
             <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
             <DiamondSeperator />
             <TemplateFeatures featuresData={features2Data} displayType="vertical" />
-            <DiamondSeperator />
-            <TemplateRelated relatedData={relatedData} />
         </div>
     );
 };
diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js
index 55f6f2f01b..8675dfe51f 100644
--- a/pages/templates/freya/index.js
+++ b/pages/templates/freya/index.js
@@ -1,13 +1,12 @@
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateLicense from '@/components/templates/TemplateLicense';
-import TemplateRelated from '@/components/templates/TemplateRelated';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
-import FreyaLogo from './FreyaLogo';
 import Link from 'next/link';
+import FreyaLogo from './FreyaLogo';
 
 const features2Data = [
     {
@@ -44,21 +43,6 @@ const features2Data = [
     }
 ];
 
-const relatedData = [
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond-react.jpg',
-        href: '/templates/diamond'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/babylon-react.jpg',
-        href: '/templates/babylon'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima-react.jpg',
-        href: '/templates/ultima'
-    }
-];
-
 const animationFeaturesData1 = [
     {
         id: 1,
@@ -215,8 +199,6 @@ const FreyaPage = () => {
             <TemplateFeatures featuresData={features2Data} displayType="vertical" />
             <FreyaSeparator />
             <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
-            <FreyaSeparator />
-            <TemplateRelated relatedData={relatedData} />
         </div>
     );
 };
diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js
index 77e6605946..f31b496689 100644
--- a/pages/templates/ultima/index.js
+++ b/pages/templates/ultima/index.js
@@ -1,13 +1,12 @@
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateLicense from '@/components/templates/TemplateLicense';
-import TemplateRelated from '@/components/templates/TemplateRelated';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
-import UltimaLogo from './UltimaLogo';
 import Link from 'next/link';
+import UltimaLogo from './UltimaLogo';
 
 const features2Data = [
     {
@@ -44,21 +43,6 @@ const features2Data = [
     }
 ];
 
-const relatedData = [
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond-react.jpg',
-        href: '/templates/diamond'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo-react.jpg',
-        href: '/templates/apollo'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/babylon-react.jpg',
-        href: '/templates/babylon'
-    }
-];
-
 const animationFeaturesData1 = [
     {
         id: 1,
@@ -218,8 +202,6 @@ const UltimaPage = () => {
             <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
             <UltimaSeperator />
             <TemplateFeatures featuresData={features2Data} displayType="vertical" />
-            <UltimaSeperator />
-            <TemplateRelated relatedData={relatedData} />
         </div>
     );
 };
diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js
index 0f90672ed1..c803314dd8 100644
--- a/pages/templates/verona/index.js
+++ b/pages/templates/verona/index.js
@@ -1,13 +1,12 @@
 import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
 import TemplateFeatures from '@/components/templates/TemplateFeatures';
 import TemplateLicense from '@/components/templates/TemplateLicense';
-import TemplateRelated from '@/components/templates/TemplateRelated';
 import TemplateSeparator from '@/components/templates/TemplateSeparator';
 import TemplateYoutube from '@/components/templates/TemplateYoutube';
 import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
 import TemplateHero from '@/components/templates/templateHero/TemplateHero';
-import VeronaLogo from './VeronaLogo';
 import Link from 'next/link';
+import VeronaLogo from './VeronaLogo';
 
 const features2Data = [
     {
@@ -44,21 +43,6 @@ const features2Data = [
     }
 ];
 
-const relatedData = [
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/freya-react.jpg',
-        href: '/templates/freya'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo-react.jpg',
-        href: '/templates/apollo'
-    },
-    {
-        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis-react.jpg',
-        href: '/templates/atlantis'
-    }
-];
-
 const animationFeaturesData1 = [
     {
         id: 1,
@@ -230,8 +214,6 @@ const VeronaPage = () => {
             <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
             <VeronaSeperator />
             <TemplateFeatures featuresData={features2Data} displayType="vertical" />
-            <VeronaSeperator />
-            <TemplateRelated relatedData={relatedData} />
         </div>
     );
 };

From f28218541ae83e189fe7cf7271fd576cdcbcbdf9 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Fri, 5 Apr 2024 11:03:55 -0400
Subject: [PATCH 134/194] Fix #6233: Column MatchMode Typescript fix (#6314)

---
 components/lib/column/column.d.ts            |  2 +-
 components/lib/passthrough/tailwind/index.js | 14 ++------------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index e22d645a7b..a5513a6624 100644
--- a/components/lib/column/column.d.ts
+++ b/components/lib/column/column.d.ts
@@ -776,7 +776,7 @@ interface ColumnFilterMatchModeOptions {
     /**
      * Type of filter match; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
      */
-    matchMode: FilterMatchMode | string;
+    value: FilterMatchMode | string;
 }
 
 /**
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 6c9c8fd86d..2c9f51575f 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -2162,20 +2162,10 @@ const Tailwind = {
     },
     metergroup: {
         root: ({ props }) => ({
-            className: classNames(
-                'flex gap-4',
-                { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
-            )
+            className: classNames('flex gap-4', { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' })
         }),
         metercontainer: ({ props }) => ({
-            className: classNames(
-                'flex',
-                { 'flex-col': props.orientation === 'vertical' },
-                { 'w-2 h-full': props.orientation === 'vertical' },
-                { 'h-2': props.orientation === 'horizontal' },
-                'bg-gray-200 dark:bg-gray-700',
-                'rounded-lg'
-            )
+            className: classNames('flex', { 'flex-col': props.orientation === 'vertical' }, { 'w-2 h-full': props.orientation === 'vertical' }, { 'h-2': props.orientation === 'horizontal' }, 'bg-gray-200 dark:bg-gray-700', 'rounded-lg')
         }),
         meter: ({ props }) => ({
             className: classNames(

From b23a0d67a1da1d2d5691e32d248829097f2c4374 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Fri, 5 Apr 2024 15:04:39 +0000
Subject: [PATCH 135/194] Update API doc

---
 components/doc/common/apidoc/index.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 806d2336c8..2e08e993df 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -13932,7 +13932,7 @@
                             "description": "The label to display for the match mode"
                         },
                         {
-                            "name": "matchMode",
+                            "name": "value",
                             "optional": false,
                             "readonly": false,
                             "type": "string",

From 3816be012069655d755b3b0320e25161fda061d1 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Sun, 7 Apr 2024 08:03:54 -0400
Subject: [PATCH 136/194] Fix #6305: Multiselect proper scrollIntoView handling

---
 components/lib/multiselect/MultiSelect.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index b0290a6882..5a544535ab 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -465,11 +465,20 @@ export const MultiSelect = React.memo(
             props.onFilter && props.onFilter({ filter: '' });
         };
 
-        const scrollInView = () => {
-            const highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+        const scrollInView = (event) => {
+            if (!overlayVisibleState) {
+                return;
+            }
+
+            let focusedItem;
+            if (event) {
+                focusedItem = event.currentTarget;
+            } else {
+                focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+            }
 
-            if (highlightItem && highlightItem.scrollIntoView) {
-                highlightItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            if (focusedItem && focusedItem.scrollIntoView) {
+                focusedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
             }
         };
 
@@ -792,7 +801,7 @@ export const MultiSelect = React.memo(
         const changeFocusedOptionIndex = (event, index) => {
             if (focusedOptionIndex !== index) {
                 setFocusedOptionIndex(index);
-                scrollInView();
+                scrollInView(event);
 
                 if (props.selectOnFocus) {
                     onOptionSelect(event, visibleOptions[index], false);

From 4a7abc15f597552e54f887e753144798c95a18b4 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Sun, 7 Apr 2024 09:55:06 -0400
Subject: [PATCH 137/194] Fix #6288: MultiSelect focus checkbox on focus of
 list item

---
 components/lib/multiselect/MultiSelectItem.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
index d8ad24ad01..36d073c371 100644
--- a/components/lib/multiselect/MultiSelectItem.js
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
 import { useMergeProps } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { Ripple } from '../ripple/Ripple';
-import { Checkbox } from '../checkbox/Checkbox';
 import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 
 export const MultiSelectItem = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
+    const checkboxRef = React.useRef(null);
     const mergeProps = useMergeProps();
     const { ptm, cx, isUnstyled } = props;
 
@@ -25,6 +26,7 @@ export const MultiSelectItem = React.memo((props) => {
 
     const onFocus = (event) => {
         setFocusedState(true);
+        checkboxRef?.current?.getInput().focus();
     };
 
     const onBlur = (event) => {
@@ -80,7 +82,7 @@ export const MultiSelectItem = React.memo((props) => {
     return (
         <li {...itemProps}>
             <div {...checkboxContainerProps}>
-                <Checkbox checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} />
+                <Checkbox ref={checkboxRef} checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} />
             </div>
             <span>{content}</span>
             <Ripple />

From 02243ee1c4f0afa94d2b75ec39c70a836c77ce83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 12:55:12 +0300
Subject: [PATCH 138/194] InputOtp templating update

---
 components/doc/common/apidoc/index.json | 276 ++++++++++++++++++++++++
 components/doc/inputotp/basicdoc.js     |  14 +-
 components/lib/inputotp/InputOtp.d.ts   | 179 +++++++++++++++
 components/lib/inputotp/InputOtp.js     |  25 ++-
 components/lib/inputotp/package.json    |   7 +
 5 files changed, 492 insertions(+), 9 deletions(-)
 create mode 100644 components/lib/inputotp/InputOtp.d.ts
 create mode 100644 components/lib/inputotp/package.json

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index b3b7adcb8a..e1c0be0816 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -31058,6 +31058,282 @@
             }
         }
     },
+    "inputotp": {
+        "description": "InputOtp is an extension to standard input element with theming and keyfiltering.\n\n[Live Demo](https://www.primereact.org/inputotp/)",
+        "components": {
+            "InputOtp": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in InputOtp component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "inputTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TemplateType<InputOtpProps>",
+                            "default": "",
+                            "description": "Template of an item."
+                        },
+                        {
+                            "name": "integerOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is integer-only."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "length",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "4",
+                            "description": "Number of characters to initiate."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Mask pattern."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | number",
+                            "default": "false",
+                            "description": "Specifies whether a inputotp should be checked or not."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputOtpChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete gets focus."
+                        },
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke while typing value on input"
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "InputOtpChangeEvent": {
+                    "description": "Custom change event",
+                    "relatedProp": "InputNumberProps.onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "null | number",
+                            "description": "New value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputOtpPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputOtpPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the Tooltip component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputOtpContext": {
+                    "description": "Defines current options in InputOtp component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputOtpPassThroughType": {
+                    "values": "PassThroughType<T, InputOtpPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
     "inputswitch": {
         "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primereact.org/inputswitch/)",
         "components": {
diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js
index 11dab9b0bd..62f894d77d 100644
--- a/components/doc/inputotp/basicdoc.js
+++ b/components/doc/inputotp/basicdoc.js
@@ -1,8 +1,12 @@
+import React, { useState } from 'react';
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { InputText } from '@/components/lib/inputtext/InputText';
 
 export function BasicDoc(props) {
+    const [token, setTokens] = useState('12');
+
     const code = {
         basic: `
 <InputOtp />
@@ -33,6 +37,14 @@ export default function BasicDemo() {
         `
     };
 
+    const inputTemplate = (options) => {     
+        return (
+            <InputText
+                {...options?.props}
+            />
+        );
+    }
+
     return (
         <>
             <DocSectionText {...props}>
@@ -41,7 +53,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputOtp />
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={inputTemplate}/>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts
new file mode 100644
index 0000000000..ebe316004e
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.d.ts
@@ -0,0 +1,179 @@
+/**
+ *
+ * InputOtp is an extension to standard input element with theming and keyfiltering.
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ *
+ * @module inputotp
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { KeyFilterType } from '../keyfilter';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { PassThroughType, TemplateType } from '../utils/utils';
+
+export declare type InputOtpPassThroughType<T> = PassThroughType<T, InputOtpPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputOtpPassThroughMethodOptions {
+    props: InputOtpProps;
+    context: InputOtpContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputOtpProps.pt}
+ */
+export interface InputOtpPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputOtpPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    input?: InputOtpPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in InputOtp component.
+ */
+export interface InputOtpContext {
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+
+/**
+ * Custom change event
+ * @see {@link InputNumberProps.onChange}
+ * @event
+ */
+interface InputOtpChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value: number | null;
+}
+
+/**
+ * Defines valid properties in InputOtp component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'value' | 'size' | 'onChange'> {
+    /**
+     * Specifies whether a inputotp should be checked or not.
+     * @defaultValue false
+     */
+    value?: string | number;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * Number of characters to initiate.
+     * @defaultValue 4
+     */
+    length?: number | undefined;
+    /**
+     * Mask pattern.
+     * @defaultValue false
+     */
+    mask?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is integer-only.
+     * @defaultValue false
+     */
+    integerOnly?: boolean | undefined;
+    /**
+     * Template of an item.
+     */
+    inputTemplate?: TemplateType<InputOtpProps> | undefined;
+    /**
+     * Callback to invoke while typing value on input
+     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
+     * @param {boolean} validatePattern - Whether to validate the value
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete gets focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputNumberChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputOtpChangeEvent): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputOtpPassThroughOptions}
+     */
+    pt?: InputOtpPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputOtp**
+ *
+ * _InputOtp is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputOtp: React.ForwardRefExoticComponent<InputOtpProps & React.RefAttributes<HTMLInputElement>>;
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index 1d17535c5f..cae6afe061 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -2,6 +2,8 @@ import React, { useRef, useContext, useState } from 'react'
 import { useMergeProps } from '../hooks/Hooks';
 import { PrimeReactContext } from '../api/Api';
 import { InputOtpBase } from './BaseInputOtp';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { ObjectUtils } from '../primereact.all';
 
 export const InputOtp = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -12,6 +14,9 @@ export const InputOtp = React.memo(
 	const { ptm, cx } = InputOtpBase.setMetaData({
 		props,
 		...props.__parentMetadata,
+		context: {
+			disabled: props.disabled,		
+		}
 	});
 
 	const defaultValue = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
@@ -49,6 +54,7 @@ export const InputOtp = React.memo(
 	const updateTokens = (event, index) => {
 		const inputValue = event.target.value;
 		const newTokens = [...tokens];
+
 		newTokens[index] = inputValue;
 		newTokens = newTokens.join('');
 		newTokens = newTokens ? newTokens.split('') : new Array(props.length);
@@ -116,9 +122,9 @@ export const InputOtp = React.memo(
 			}
 
 			case 'ArrowUp':
+
 			case 'ArrowDown': {
 				event.preventDefault();
-
 				break;
 			}
 
@@ -139,6 +145,13 @@ export const InputOtp = React.memo(
 		}
 
 		const inputElementIndex = props.length - remainingInputs;
+		const inputElementActions = {
+			onInput: (event) => onInput(event, inputElementIndex),
+			onKeyDown: onKeydown,
+			onFocus,
+			onBlur,
+			onPaste,
+		}
 		const inputElementProps = mergeProps(
             {
 				id: inputElementIndex,
@@ -150,17 +163,13 @@ export const InputOtp = React.memo(
 				readOnly: props?.readOnly,
 				disabled: props?.disabled,
 				invalid: props?.invalid,
-				tabIndex: props?.tabIndex,
-				onInput: (event) => onInput(event, inputElementIndex),
-				onKeyDown: onKeydown,
-				onFocus,
-				onBlur,
-				onPaste,
+				tabIndex: props?.tabIndex,  
                 className: cx('input'),
+				...inputElementActions
             },
             ptm('input')
         );		
-		const inputElement = <input {...inputElementProps} />;
+		const inputElement = props?.inputTemplate ? ObjectUtils.getJSXElement(props?.inputTemplate, {...inputElementActions, props: inputElementProps}) : <InputText {...inputElementProps} />;
 		const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)];
 
 		return inputElements;
diff --git a/components/lib/inputotp/package.json b/components/lib/inputotp/package.json
new file mode 100644
index 0000000000..4424ca5c99
--- /dev/null
+++ b/components/lib/inputotp/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputotp.cjs.js",
+    "module": "./inputotp.esm.js",
+    "unpkg": "./inputotp.min.js",
+    "types": "./InputOtp.d.ts",
+    "sideEffects": false
+}

From ff74da5c46c6d41789843565157361c148263e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 12:55:51 +0300
Subject: [PATCH 139/194] Theme update for inputotp

---
 public/themes/arya-blue/theme.css             | 112 ++-------------
 public/themes/arya-green/theme.css            | 112 ++-------------
 public/themes/arya-orange/theme.css           | 112 ++-------------
 public/themes/bootstrap4-dark-blue/theme.css  | 112 ++-------------
 .../themes/bootstrap4-dark-purple/theme.css   |   9 ++
 public/themes/bootstrap4-light-blue/theme.css | 112 ++-------------
 .../themes/bootstrap4-light-purple/theme.css  |   9 ++
 public/themes/fluent-light/theme.css          | 106 ++------------
 public/themes/lara-dark-amber/theme.css       | 120 ++--------------
 public/themes/lara-dark-blue/theme.css        | 120 ++--------------
 public/themes/lara-dark-cyan/theme.css        | 120 ++--------------
 public/themes/lara-dark-green/theme.css       | 120 ++--------------
 public/themes/lara-dark-indigo/theme.css      | 120 ++--------------
 public/themes/lara-dark-pink/theme.css        | 120 ++--------------
 public/themes/lara-dark-teal/theme.css        | 120 ++--------------
 public/themes/lara-light-amber/theme.css      | 116 ++--------------
 public/themes/lara-light-blue/theme.css       | 116 ++--------------
 public/themes/lara-light-cyan/theme.css       | 116 ++--------------
 public/themes/lara-light-green/theme.css      | 116 ++--------------
 public/themes/lara-light-indigo/theme.css     | 116 ++--------------
 public/themes/lara-light-pink/theme.css       | 116 ++--------------
 public/themes/lara-light-teal/theme.css       | 116 ++--------------
 public/themes/luna-amber/theme.css            | 112 ++-------------
 public/themes/luna-blue/theme.css             | 112 ++-------------
 public/themes/luna-green/theme.css            | 112 ++-------------
 public/themes/luna-pink/theme.css             | 112 ++-------------
 public/themes/md-dark-deeppurple/theme.css    |   9 ++
 public/themes/md-dark-indigo/theme.css        | 130 ++----------------
 public/themes/md-light-deeppurple/theme.css   |   9 ++
 public/themes/md-light-indigo/theme.css       | 130 ++----------------
 public/themes/mdc-dark-deeppurple/theme.css   |   9 ++
 public/themes/mdc-dark-indigo/theme.css       | 130 ++----------------
 public/themes/mdc-light-deeppurple/theme.css  |   9 ++
 public/themes/mdc-light-indigo/theme.css      | 130 ++----------------
 public/themes/mira/theme.css                  | 112 ++-------------
 public/themes/nano/theme.css                  | 112 ++-------------
 public/themes/nova-accent/theme.css           | 112 ++-------------
 public/themes/nova-alt/theme.css              | 112 ++-------------
 public/themes/nova/theme.css                  | 112 ++-------------
 public/themes/rhea/theme.css                  | 112 ++-------------
 public/themes/saga-blue/theme.css             | 112 ++-------------
 public/themes/saga-green/theme.css            | 112 ++-------------
 public/themes/saga-orange/theme.css           | 112 ++-------------
 public/themes/soho-dark/theme.css             | 112 ++-------------
 public/themes/soho-light/theme.css            | 112 ++-------------
 public/themes/tailwind-light/theme.css        | 112 ++-------------
 public/themes/vela-blue/theme.css             | 112 ++-------------
 public/themes/vela-green/theme.css            | 112 ++-------------
 public/themes/vela-orange/theme.css           | 112 ++-------------
 public/themes/viva-dark/theme.css             | 112 ++-------------
 public/themes/viva-light/theme.css            | 112 ++-------------
 51 files changed, 459 insertions(+), 4785 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d27b1e785c..282c0dce4a 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #64b5f6;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1e1e1e;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #383838;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1e1e1e;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #64b5f6;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 53038d0c89..e10f8259a5 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #a7d8a9;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(129, 199, 132, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #a7d8a9;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #81c784;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1e1e1e;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #383838;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1e1e1e;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #81c784;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index a2d4387a6a..1f9e894917 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #ffe284;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(255, 213, 79, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #ffe284;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #ffd54f;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1e1e1e;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #383838;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1e1e1e;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #ffd54f;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index eacbd16cfe..d005deb2ab 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4597,109 +4606,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.15s;
-    border-radius: 4px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid #3f4b5b;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 4px;
-    transition: color 0.15s, box-shadow 0.15s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: color 0.15s, box-shadow 0.15s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #e3f3fe;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #8dd0ff;
-    color: #151515;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #e3f3fe;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #8dd0ff;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #2a323d;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #3f4b5b;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.15s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #2a323d;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #8dd0ff;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f4b5b;
     border: 0 none;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index fed099ed0f..dd90fb688e 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 5a0604409c..3a0b984f90 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.75rem;
     color: #495057;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4597,109 +4606,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.15s;
-    border-radius: 4px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #212529;
-    border: 1px solid #dee2e6;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 4px;
-    transition: box-shadow 0.15s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6c757d;
-    font-weight: 600;
-    transition: box-shadow 0.15s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #007bff;
-    color: #ffffff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #212529;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #007bff;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #212529;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #dee2e6;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.15s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #212529;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #007bff;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #efefef;
     border: 0 none;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 3bf2b505bd..958904640b 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.75rem;
     color: #495057;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 183eb1491d..1c3b74c7fa 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: #605e5c;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4515,103 +4524,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #edebe9;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 2px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #323130;
-    border: 1px solid #f3f2f1;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #605e5c;
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #605e5c;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #edebe9;
-    color: #323130;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #323130;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #605e5c;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1rem;
-    color: #323130;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #a19f9d;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #323130;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f3f2f1;
     border: 0 none;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 3a96c27dad..dc3d06bcc3 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(251, 191, 36, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #fbbf24;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2937;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #424b57;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2937;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #fbbf24;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6996,12 +6902,4 @@
     background: #fbbf24;
     color: #030712;
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    border-style: solid;
-    border-color: #424b57;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background: #fbbf24;
-    color: #030712;
-  }
 }
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 9fc3607064..080802e9aa 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(96, 165, 250, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #60a5fa;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2937;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #424b57;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2937;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #60a5fa;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6996,12 +6902,4 @@
     background: #60a5fa;
     color: #030712;
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    border-style: solid;
-    border-color: #424b57;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background: #60a5fa;
-    color: #030712;
-  }
 }
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index a57900349b..7bc5ce5a23 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(34, 211, 238, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #22d3ee;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2937;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #424b57;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2937;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #22d3ee;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6996,12 +6902,4 @@
     background: #22d3ee;
     color: #030712;
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    border-style: solid;
-    border-color: #424b57;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background: #22d3ee;
-    color: #030712;
-  }
 }
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 882d6424b2..b4332778c9 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(52, 211, 153, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #34d399;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2937;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #424b57;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2937;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #34d399;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6996,12 +6902,4 @@
     background: #34d399;
     color: #030712;
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    border-style: solid;
-    border-color: #424b57;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background: #34d399;
-    color: #030712;
-  }
 }
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 13cc223f94..95e341d452 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(129, 140, 248, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #818cf8;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2937;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #424b57;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2937;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #818cf8;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6996,12 +6902,4 @@
     background: #818cf8;
     color: #030712;
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    border-style: solid;
-    border-color: #424b57;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background: #818cf8;
-    color: #030712;
-  }
 }
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 42f435e013..c96f2a8545 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(244, 114, 182, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #f472b6;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2937;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #424b57;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2937;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #f472b6;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6996,12 +6902,4 @@
     background: #f472b6;
     color: #030712;
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    border-style: solid;
-    border-color: #424b57;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background: #f472b6;
-    color: #030712;
-  }
 }
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index c7d71ddfee..015c581d94 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(45, 212, 191, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #2dd4bf;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2937;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #424b57;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2937;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #2dd4bf;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6996,12 +6902,4 @@
     background: #2dd4bf;
     color: #030712;
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    border-style: solid;
-    border-color: #424b57;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background: #2dd4bf;
-    color: #030712;
-  }
 }
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 44d8bebbc3..6ac1097c7f 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4b5563;
-    border: 1px solid #f3f4f6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6b7280;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #fef08a;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #fffbeb;
-    color: #b45309;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #fef08a;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #f59e0b;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4b5563;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #f59e0b;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6990,8 +6896,4 @@
     background: #f59e0b;
     color: #ffffff;
   }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #f59e0b;
-    color: #ffffff;
-  }
 }
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 71ab9ef24e..04c4416798 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4b5563;
-    border: 1px solid #f3f4f6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6b7280;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #bfdbfe;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #eff6ff;
-    color: #1d4ed8;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #bfdbfe;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #3b82f6;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4b5563;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #3b82f6;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6990,8 +6896,4 @@
     background: #3b82f6;
     color: #ffffff;
   }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #3b82f6;
-    color: #ffffff;
-  }
 }
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 552e27017b..e2911386e3 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4b5563;
-    border: 1px solid #f3f4f6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6b7280;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #a5f3fc;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #ecfeff;
-    color: #0e7490;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #a5f3fc;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #06b6d4;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4b5563;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #06b6d4;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6990,8 +6896,4 @@
     background: #06b6d4;
     color: #ffffff;
   }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #06b6d4;
-    color: #ffffff;
-  }
 }
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index e929fbb116..1f56490056 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4b5563;
-    border: 1px solid #f3f4f6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6b7280;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #a7f3d0;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #f0fdfa;
-    color: #047857;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #a7f3d0;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #10b981;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4b5563;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #10b981;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6990,8 +6896,4 @@
     background: #10b981;
     color: #ffffff;
   }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #10b981;
-    color: #ffffff;
-  }
 }
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index be84648378..be9966460d 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4b5563;
-    border: 1px solid #f3f4f6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6b7280;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #c7d2fe;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #eef2ff;
-    color: #4338ca;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #c7d2fe;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #6366f1;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4b5563;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #6366f1;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6990,8 +6896,4 @@
     background: #6366f1;
     color: #ffffff;
   }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #6366f1;
-    color: #ffffff;
-  }
 }
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index ceec59fa62..5c28ccada9 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4b5563;
-    border: 1px solid #f3f4f6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6b7280;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #fbcfe8;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #fdf2f8;
-    color: #be185d;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #fbcfe8;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #ec4899;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4b5563;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #ec4899;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6990,8 +6896,4 @@
     background: #ec4899;
     color: #ffffff;
   }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #ec4899;
-    color: #ffffff;
-  }
 }
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 93f92db6c4..71a4cf9ac0 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1439,6 +1439,15 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4580,109 +4589,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4b5563;
-    border: 1px solid #f3f4f6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6b7280;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #99f6e4;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #0f766e;
-    color: #0f766e;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #99f6e4;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #14b8a6;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #4b5563;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4b5563;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #14b8a6;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6990,8 +6896,4 @@
     background: #14b8a6;
     color: #ffffff;
   }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #14b8a6;
-    color: #ffffff;
-  }
 }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 50de091e7c..ea30349137 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.429rem;
     color: #888888;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4524,109 +4533,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    background: #191919;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #dedede;
-    border: 1px solid #191919;
-    border-width: 2px;
-    background: #191919;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #888888;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #ffe082;
-    color: #212529;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #ffe082;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #323232;
-    padding: 0.571rem 1rem;
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #191919;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #323232;
-    color: #dedede;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #ffe082;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 8640928be4..461a88d9ff 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.429rem;
     color: #888888;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4524,109 +4533,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    background: #191919;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #dedede;
-    border: 1px solid #191919;
-    border-width: 2px;
-    background: #191919;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #888888;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #81d4fa;
-    color: #212529;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #81d4fa;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #323232;
-    padding: 0.571rem 1rem;
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #191919;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #323232;
-    color: #dedede;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #81d4fa;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 80509a8d03..91b8f8caa7 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.429rem;
     color: #888888;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4524,109 +4533,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    background: #191919;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #dedede;
-    border: 1px solid #191919;
-    border-width: 2px;
-    background: #191919;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #888888;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #c5e1a5;
-    color: #212529;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #c5e1a5;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #323232;
-    padding: 0.571rem 1rem;
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #191919;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #323232;
-    color: #dedede;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #c5e1a5;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 119822249c..a8bd354060 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.429rem;
     color: #888888;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4524,109 +4533,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    background: #191919;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #dedede;
-    border: 1px solid #191919;
-    border-width: 2px;
-    background: #191919;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #888888;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #f48fb1;
-    color: #212529;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem white;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #f48fb1;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #323232;
-    padding: 0.571rem 1rem;
-    color: #dedede;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #191919;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #323232;
-    color: #dedede;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #f48fb1;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 006e53e72c..f7723d86e1 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1442,6 +1442,15 @@
     right: 1rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 5aa09c8992..013b9ada28 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1442,6 +1442,15 @@
     right: 1rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4608,109 +4617,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0, 0%, 100%, 0.12);
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: none;
-    border-radius: 4px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid transparent;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.87);
-    font-weight: 500;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(159, 168, 218, 0.16);
-    color: #9FA8DA;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #9FA8DA;
-  }
-  .p-stepper .p-stepper-panels {
-    background: transparent;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #bdbdbd;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: none;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #9FA8DA;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -8181,24 +8087,6 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    background-color: #9e9d9e;
-    color: #ffffff;
-    font-size: 0.857rem;
-    min-width: 1.714rem;
-    height: 1.714rem;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background-color: #9FA8DA;
-    color: #121212;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    margin-inline-start: 1.75rem;
-  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 1f65ee80da..b3bbec11b5 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1442,6 +1442,15 @@
     right: 1rem;
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 22f3ff1824..6aacfd502f 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1442,6 +1442,15 @@
     right: 1rem;
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4608,109 +4617,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: none;
-    border-radius: 4px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(0, 0, 0, 0.87);
-    border: 1px solid transparent;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(0, 0, 0, 0.87);
-    font-weight: 500;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(63, 81, 181, 0.12);
-    color: #3F51B5;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #3F51B5;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1rem;
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #bdbdbd;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: none;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #3F51B5;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -8181,24 +8087,6 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    background-color: #9e9d9e;
-    color: #ffffff;
-    font-size: 0.857rem;
-    min-width: 1.714rem;
-    height: 1.714rem;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background-color: #3F51B5;
-    color: #ffffff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    margin-inline-start: 1.75rem;
-  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 673c5f3249..f3f5f02562 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1442,6 +1442,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 1151d57f1d..ee6af421f4 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1442,6 +1442,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4608,109 +4617,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0, 0%, 100%, 0.12);
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: none;
-    border-radius: 4px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 1px solid transparent;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.87);
-    font-weight: 500;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(159, 168, 218, 0.16);
-    color: #9FA8DA;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #9FA8DA;
-  }
-  .p-stepper .p-stepper-panels {
-    background: transparent;
-    padding: 0.75rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #bdbdbd;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: none;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #9FA8DA;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -8181,24 +8087,6 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    background-color: #9e9d9e;
-    color: #ffffff;
-    font-size: 0.857rem;
-    min-width: 1.714rem;
-    height: 1.714rem;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background-color: #9FA8DA;
-    color: #121212;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    margin-inline-start: 1.75rem;
-  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 0429403da8..6c46aa41f6 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1442,6 +1442,15 @@
     right: 0.75rem;
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 123a2154b9..204de2a644 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1442,6 +1442,15 @@
     right: 0.75rem;
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4608,109 +4617,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: none;
-    border-radius: 4px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(0, 0, 0, 0.87);
-    border: 1px solid transparent;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(0, 0, 0, 0.87);
-    font-weight: 500;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(63, 81, 181, 0.12);
-    color: #3F51B5;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #3F51B5;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 0.75rem;
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #bdbdbd;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: none;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #3F51B5;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -8181,24 +8087,6 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    background-color: #9e9d9e;
-    color: #ffffff;
-    font-size: 0.857rem;
-    min-width: 1.714rem;
-    height: 1.714rem;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
-    background-color: #3F51B5;
-    color: #ffffff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    margin-inline-start: 1.75rem;
-  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index fccf607f80..5db3bb8d67 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1444,6 +1444,15 @@
     right: 0.5rem;
     color: #81a1c1;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4562,109 +4571,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #c2c7d1;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: none;
-    border-radius: 4px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #4c566a;
-    border: 1px solid #ffffff;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #81a1c1;
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #c0d0e0;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #d8dee9;
-    color: #2e3440;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #4c566a;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #c0d0e0;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #5e81ac;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1rem;
-    color: #4c566a;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e9f0;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: none;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #4c566a;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #5e81ac;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eceff4;
     border: 0 none;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 382547b844..3cbfc8cd67 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.25rem;
     color: #697077;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 1px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #343a3f;
-    border: 1px solid #dde1e6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #697077;
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #90c9f5;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #44a1d9;
-    color: #ffffff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #343a3f;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #90c9f5;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #1174c0;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 0.5rem;
-    color: #343a3f;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #dee2e6;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #343a3f;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #1174c0;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f2f4f8;
     border: 0 none;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 5a1369b399..98bbcaa66f 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.429rem;
     color: #848484;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4515,109 +4524,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #333333;
-    border: 1px solid #dee2e6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #848484;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #8dcdff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #e02365;
-    color: #ffffff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #333333;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #8dcdff;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #007ad9;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 0.571rem 1rem;
-    color: #333333;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #c8c8c8;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #333333;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #007ad9;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 30b6a74e7b..e4f872b543 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.429rem;
     color: #848484;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4524,109 +4533,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #333333;
-    border: 1px solid #dee2e6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #848484;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #8dcdff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #007ad9;
-    color: #ffffff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #333333;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #8dcdff;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #007ad9;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 0.571rem 1rem;
-    color: #333333;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #c8c8c8;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #333333;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #007ad9;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f9f75834c2..e893b00a3b 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1425,6 +1425,15 @@
     right: 0.429rem;
     color: #848484;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4524,109 +4533,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, box-shadow 0.2s;
-    border-radius: 3px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #333333;
-    border: 1px solid #dee2e6;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #848484;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #8dcdff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #007ad9;
-    color: #ffffff;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #333333;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #8dcdff;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #007ad9;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 0.571rem 1rem;
-    color: #333333;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #c8c8c8;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #333333;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #007ad9;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 5bbbc9303e..2f2c17c115 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.429rem;
     color: #a6a6a6;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4515,109 +4524,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dadada;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border-radius: 2px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #a6a6a6;
-    border: 1px solid #c8c8c8;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #a6a6a6;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #e4e9ec;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #afd3c8;
-    color: #385048;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #666666;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #e4e9ec;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #7b95a3;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 0.571rem 1rem;
-    color: #666666;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #c8c8c8;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #666666;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #7b95a3;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 92ed8e13b9..4249136504 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: #6c757d;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #495057;
-    border: 1px solid #e9ecef;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6c757d;
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #a6d5fa;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #e3f2fd;
-    color: #495057;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #495057;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #a6d5fa;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #2196f3;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1rem;
-    color: #495057;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #dee2e6;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #495057;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #2196f3;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 942ae9fb7a..b153819961 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: #6c757d;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #495057;
-    border: 1px solid #e9ecef;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6c757d;
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #b7e0b8;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #e8f5e9;
-    color: #495057;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #495057;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #b7e0b8;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #4caf50;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1rem;
-    color: #495057;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #dee2e6;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #495057;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #4caf50;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 6aa2c42475..cb6f72e854 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: #6c757d;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #495057;
-    border: 1px solid #e9ecef;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #6c757d;
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ffe69c;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #fff3e0;
-    color: #495057;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #495057;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ffe69c;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #ffc107;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1rem;
-    color: #495057;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #dee2e6;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #495057;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #ffc107;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index b9742543d6..50a8f4a4b4 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -1441,6 +1441,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4582,109 +4591,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #3e4053;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #e0d8fc;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(177, 157, 247, 0.16);
-    color: #b19df7;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #e0d8fc;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #b19df7;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #282936;
-    padding: 1.25rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #3e4053;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #282936;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #b19df7;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3e4053;
     border: 0 none;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index e8d4ee3988..f22b6d6117 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1441,6 +1441,15 @@
     right: 0.75rem;
     color: #708da9;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4582,109 +4591,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dfe7ef;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #043d75;
-    border: 1px solid #f6f9fc;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #708da9;
-    font-weight: 700;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #c7bbfa;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #e2dcfc;
-    color: #7254f3;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #043d75;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #c7bbfa;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #7254f3;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #043d75;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #dfe7ef;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #043d75;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #7254f3;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eff3f8;
     border: 0 none;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index f5859be644..b2ac9cfebf 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1450,6 +1450,15 @@
     right: 0.75rem;
     color: #71717a;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4568,109 +4577,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: none;
-    border-radius: 0.375rem;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #3f3f46;
-    border: 1px solid #f4f4f5;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: none;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #71717a;
-    font-weight: 600;
-    transition: none;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #6366f1;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #eef2ff;
-    color: #312e81;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #3f3f46;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #6366f1;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #4f46e5;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1.25rem;
-    color: #3f3f46;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #e5e7eb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: none;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #3f3f46;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #4f46e5;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #fafafa;
     border: 0 none;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b4102aafee..fcd02cce61 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(100, 181, 246, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #93cbf9;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #64b5f6;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2d40;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #304562;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #64b5f6;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 703e012ca8..0f282533aa 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #a7d8a9;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(129, 199, 132, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #a7d8a9;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #81c784;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2d40;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #304562;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #81c784;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 0c801a0ab0..657f5f6d16 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1422,6 +1422,15 @@
     right: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4540,109 +4549,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.2s;
-    border-radius: 3px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 0 none;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #ffe284;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(255, 213, 79, 0.16);
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #ffe284;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #ffd54f;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #1f2d40;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #304562;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.2s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #1f2d40;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #ffd54f;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 860f9bdf42..0f08483e35 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1448,6 +1448,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4614,109 +4623,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #263238;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.3s;
-    border-radius: 6px;
-    background: transparent;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: rgba(255, 255, 255, 0.87);
-    border: 2px solid #263238;
-    border-width: 2px;
-    background: transparent;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 600;
-    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #9eade6;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: rgba(158, 173, 230, 0.16);
-    color: #9eade6;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #9eade6;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #9eade6;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #161d21;
-    padding: 1rem;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #263238;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.3s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #161d21;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #9eade6;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #263238;
     border: 0 none;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 4931c66a7d..dda82fbeea 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1448,6 +1448,15 @@
     right: 0.75rem;
     color: #898989;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -4614,109 +4623,6 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #ebebeb;
   }
-  .p-stepper .p-stepper-nav {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .p-stepper .p-stepper-header {
-    padding: 0.5rem;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action {
-    transition: box-shadow 0.3s;
-    border-radius: 6px;
-    background: #ffffff;
-    outline-color: transparent;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
-    color: #6c6c6c;
-    border: 2px solid #ebebeb;
-    border-width: 2px;
-    background: #ffffff;
-    min-width: 2rem;
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.143rem;
-    border-radius: 50%;
-    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
-    margin-left: 0.5rem;
-    color: #898989;
-    font-weight: 600;
-    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  }
-  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem #bbc7ee;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
-    background: #ced6f1;
-    color: #585858;
-  }
-  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
-    color: #6c6c6c;
-  }
-  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.1rem #bbc7ee;
-  }
-  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background-color: #5472d4;
-  }
-  .p-stepper .p-stepper-panels {
-    background: #ffffff;
-    padding: 1rem;
-    color: #6c6c6c;
-  }
-  .p-stepper .p-stepper-separator {
-    background-color: #ebebeb;
-    width: 100%;
-    height: 2px;
-    margin-inline-start: 1rem;
-    transition: box-shadow 0.3s;
-  }
-  .p-stepper.p-stepper-vertical {
-    display: flex;
-    flex-direction: column;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
-    display: flex;
-    flex: 1 1 auto;
-    background: #ffffff;
-    color: #6c6c6c;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
-    flex: 1 1 auto;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
-    flex: initial;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
-    width: 100%;
-    padding-left: 1rem;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
-    flex: 0 0 auto;
-    width: 2px;
-    height: auto;
-    margin-inline-start: calc(1.75rem + 2px);
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background-color: #5472d4;
-  }
-  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
-    padding-left: 3rem;
-  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f5f5f5;
     border: 0 none;

From 915eef1c51d2e8cc03a90fc0cf711688a244b855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 13:27:24 +0300
Subject: [PATCH 140/194] removed dts

---
 components/lib/inputotp/InputOtp.d.ts | 179 --------------------------
 1 file changed, 179 deletions(-)
 delete mode 100644 components/lib/inputotp/InputOtp.d.ts

diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts
deleted file mode 100644
index ebe316004e..0000000000
--- a/components/lib/inputotp/InputOtp.d.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- *
- * InputOtp is an extension to standard input element with theming and keyfiltering.
- *
- * [Live Demo](https://www.primereact.org/inputotp/)
- *
- * @module inputotp
- *
- */
-import * as React from 'react';
-import { ComponentHooks } from '../componentbase/componentbase';
-import { KeyFilterType } from '../keyfilter';
-import { PassThroughOptions } from '../passthrough';
-import { TooltipPassThroughOptions } from '../tooltip/tooltip';
-import { TooltipOptions } from '../tooltip/tooltipoptions';
-import { PassThroughType, TemplateType } from '../utils/utils';
-
-export declare type InputOtpPassThroughType<T> = PassThroughType<T, InputOtpPassThroughMethodOptions>;
-
-/**
- * Custom passthrough(pt) option method.
- */
-export interface InputOtpPassThroughMethodOptions {
-    props: InputOtpProps;
-    context: InputOtpContext;
-}
-
-/**
- * Custom passthrough(pt) options.
- * @see {@link InputOtpProps.pt}
- */
-export interface InputOtpPassThroughOptions {
-    /**
-     * Uses to pass attributes to the root's DOM element.
-     */
-    root?: InputOtpPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the Tooltip component.
-     * @see {@link TooltipPassThroughOptions}
-     */
-    input?: InputOtpPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
-    /**
-     * Used to manage all lifecycle hooks
-     * @see {@link ComponentHooks}
-     */
-    hooks?: ComponentHooks;
-}
-
-/**
- * Defines current options in InputOtp component.
- */
-export interface InputOtpContext {
-    /**
-     * Current disabled state of the component as a boolean.
-     * @defaultValue false
-     */
-    disabled: boolean;
-}
-
-
-/**
- * Custom change event
- * @see {@link InputNumberProps.onChange}
- * @event
- */
-interface InputOtpChangeEvent {
-    /**
-     * Browser event
-     */
-    originalEvent: React.SyntheticEvent;
-    /**
-     * New value
-     */
-    value: number | null;
-}
-
-/**
- * Defines valid properties in InputOtp component. In addition to these, all properties of HTMLInputElement can be used in this component.
- * @group Properties
- */
-export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'value' | 'size' | 'onChange'> {
-    /**
-     * Specifies whether a inputotp should be checked or not.
-     * @defaultValue false
-     */
-    value?: string | number;
-    /**
-     * When present, it specifies that the component should have invalid state style.
-     * @defaultValue false
-     */
-    invalid?: boolean | undefined;
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @defaultValue false
-     */
-    disabled?: boolean | undefined;
-    /**
-     * When present, it specifies that an input field is read-only.
-     * @defaultValue false
-     */
-    readonly?: boolean | undefined;
-    /**
-     * Specifies the input variant of the component.
-     * @defaultValue outlined
-     */
-    variant?: 'outlined' | 'filled' | undefined;
-    /**
-     * Index of the element in tabbing order.
-     */
-    tabindex?: number | undefined;
-    /**
-     * Number of characters to initiate.
-     * @defaultValue 4
-     */
-    length?: number | undefined;
-    /**
-     * Mask pattern.
-     * @defaultValue false
-     */
-    mask?: boolean | undefined;
-    /**
-     * When present, it specifies that an input field is integer-only.
-     * @defaultValue false
-     */
-    integerOnly?: boolean | undefined;
-    /**
-     * Template of an item.
-     */
-    inputTemplate?: TemplateType<InputOtpProps> | undefined;
-    /**
-     * Callback to invoke while typing value on input
-     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
-     * @param {boolean} validatePattern - Whether to validate the value
-     */
-    onInput?(event: React.FormEvent<HTMLInputElement>): void;
-    /**
-     * Callback to invoke when autocomplete gets focus.
-     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
-     */
-    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
-    /**
-     * Callback to invoke when autocomplete loses focus.
-     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
-     */
-    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
-    /**
-     * Callback to invoke on value change.
-     * @param {InputNumberChangeEvent} event - Custom change event
-     */
-    onChange?(event: InputOtpChangeEvent): void;
-    /**
-     * Uses to pass attributes to DOM elements inside the component.
-     * @type {InputOtpPassThroughOptions}
-     */
-    pt?: InputOtpPassThroughOptions;
-    /**
-     * Used to configure passthrough(pt) options of the component.
-     * @type {PassThroughOptions}
-     */
-    ptOptions?: PassThroughOptions;
-    /**
-     * When enabled, it removes component related styles in the core.
-     * @defaultValue false
-     */
-    unstyled?: boolean;
-}
-
-/**
- * **PrimeReact - InputOtp**
- *
- * _InputOtp is an extension to standard input element with theming and keyfiltering._
- *
- * [Live Demo](https://www.primereact.org/inputotp/)
- * --- ---
- * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
- *
- * @group Component
- */
-export declare const InputOtp: React.ForwardRefExoticComponent<InputOtpProps & React.RefAttributes<HTMLInputElement>>;

From b8cdec11c90aeb67bee5a66e5e7612500d697523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 13:27:47 +0300
Subject: [PATCH 141/194] added input dts

---
 components/lib/inputotp/inputotp.d.ts | 179 ++++++++++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 components/lib/inputotp/inputotp.d.ts

diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
new file mode 100644
index 0000000000..ebe316004e
--- /dev/null
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -0,0 +1,179 @@
+/**
+ *
+ * InputOtp is an extension to standard input element with theming and keyfiltering.
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ *
+ * @module inputotp
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { KeyFilterType } from '../keyfilter';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { PassThroughType, TemplateType } from '../utils/utils';
+
+export declare type InputOtpPassThroughType<T> = PassThroughType<T, InputOtpPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputOtpPassThroughMethodOptions {
+    props: InputOtpProps;
+    context: InputOtpContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputOtpProps.pt}
+ */
+export interface InputOtpPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputOtpPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    input?: InputOtpPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in InputOtp component.
+ */
+export interface InputOtpContext {
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+
+/**
+ * Custom change event
+ * @see {@link InputNumberProps.onChange}
+ * @event
+ */
+interface InputOtpChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value: number | null;
+}
+
+/**
+ * Defines valid properties in InputOtp component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'value' | 'size' | 'onChange'> {
+    /**
+     * Specifies whether a inputotp should be checked or not.
+     * @defaultValue false
+     */
+    value?: string | number;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * Number of characters to initiate.
+     * @defaultValue 4
+     */
+    length?: number | undefined;
+    /**
+     * Mask pattern.
+     * @defaultValue false
+     */
+    mask?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is integer-only.
+     * @defaultValue false
+     */
+    integerOnly?: boolean | undefined;
+    /**
+     * Template of an item.
+     */
+    inputTemplate?: TemplateType<InputOtpProps> | undefined;
+    /**
+     * Callback to invoke while typing value on input
+     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
+     * @param {boolean} validatePattern - Whether to validate the value
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete gets focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputNumberChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputOtpChangeEvent): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputOtpPassThroughOptions}
+     */
+    pt?: InputOtpPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputOtp**
+ *
+ * _InputOtp is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputOtp: React.ForwardRefExoticComponent<InputOtpProps & React.RefAttributes<HTMLInputElement>>;

From 3752a429bb1d714a816f444211f05bb508ab8964 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 13:29:04 +0300
Subject: [PATCH 142/194] Imports updated

---
 components/lib/inputotp/InputOtp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index cae6afe061..d242f775bc 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -3,7 +3,7 @@ import { useMergeProps } from '../hooks/Hooks';
 import { PrimeReactContext } from '../api/Api';
 import { InputOtpBase } from './BaseInputOtp';
 import { InputText } from '@/components/lib/inputtext/InputText';
-import { ObjectUtils } from '../primereact.all';
+import { ObjectUtils } from '../utils/Utils';
 
 export const InputOtp = React.memo(
     React.forwardRef((inProps, ref) => {

From 66c7c640b3d0b3d06b6fb5ee9a3d1c2d2ed81ca7 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 8 Apr 2024 13:42:03 +0300
Subject: [PATCH 143/194] Fix #6297 - Dropdown: Focus change when editable and
 filter enabled

---
 components/lib/dropdown/DropdownBase.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 257e1f976a..005a14a8f5 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -178,7 +178,7 @@ export const DropdownBase = ComponentBase.extend({
         filterBy: null,
         filterClearIcon: null,
         filterIcon: null,
-        filterInputAutoFocus: true,
+        filterInputAutoFocus: false,
         filterLocale: undefined,
         filterMatchMode: 'contains',
         filterPlaceholder: null,

From d23eacdb982b04663df895d21669930fce551b13 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 8 Apr 2024 13:43:05 +0300
Subject: [PATCH 144/194] #6297 - d.ts & apidoc update

---
 components/doc/common/apidoc/index.json | 2 +-
 components/lib/dropdown/dropdown.d.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 2e08e993df..4f98e6c2fe 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -23020,7 +23020,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "true",
+                            "default": "false",
                             "description": "When the panel is opened, it specifies that the filter input should focus automatically."
                         },
                         {
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index 2381f21566..580a4a8ba3 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -326,7 +326,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     filterClearIcon?: IconType<DropdownProps> | undefined;
     /**
      * When the panel is opened, it specifies that the filter input should focus automatically.
-     * @defaultValue true
+     * @defaultValue false
      */
     filterInputAutoFocus?: boolean | undefined;
     /**

From 4ed1cdf864a8eda19f1af25f50d5ca6d5bcf3d83 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 8 Apr 2024 14:33:47 +0300
Subject: [PATCH 145/194] #6274 - InputText: It doesnt take classNames when
 unstyled is true

---
 components/lib/inputtext/InputText.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index 7b812ee03f..9621782e17 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
 import { InputTextBase } from './InputTextBase';
 
 export const InputText = React.memo(
@@ -71,7 +71,7 @@ export const InputText = React.memo(
 
         const rootProps = mergeProps(
             {
-                className: cx('root', { context, isFilled }),
+                className: classNames(props.className, cx('root', { context, isFilled })),
                 onBeforeInput: onBeforeInput,
                 onInput: onInput,
                 onKeyDown: onKeyDown,

From e1b9667e6b7ac566b93da1d4e0aef097e07d458e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 8 Apr 2024 14:51:28 +0300
Subject: [PATCH 146/194] Remove classname from inputtextbase

---
 components/lib/inputtext/InputTextBase.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
index 4de41a5caf..8517dc67f0 100644
--- a/components/lib/inputtext/InputTextBase.js
+++ b/components/lib/inputtext/InputTextBase.js
@@ -3,17 +3,12 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, isFilled, context }) =>
-        classNames(
-            'p-inputtext p-component',
-            {
-                'p-disabled': props.disabled,
-                'p-filled': isFilled,
-                'p-invalid': props.invalid,
-                'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
-            },
-
-            props.className
-        )
+        classNames('p-inputtext p-component', {
+            'p-disabled': props.disabled,
+            'p-filled': isFilled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
 };
 
 export const InputTextBase = ComponentBase.extend({

From f932f4172f86c5a6541569dfd039486579ffd5b3 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 8 Apr 2024 07:56:34 -0400
Subject: [PATCH 147/194] FloatLabel/StepperPanel proper use of forwardRef

---
 components/lib/floatlabel/FloatLabel.js     | 10 ++++++++--
 components/lib/stepperpanel/StepperPanel.js | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/lib/floatlabel/FloatLabel.js b/components/lib/floatlabel/FloatLabel.js
index 5390c1a96a..4263c11725 100644
--- a/components/lib/floatlabel/FloatLabel.js
+++ b/components/lib/floatlabel/FloatLabel.js
@@ -2,22 +2,28 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 import { FloatLabelBase } from './FloatLabelBase';
 
 export const FloatLabel = React.memo(
-    React.forwardRef((inProps) => {
+    React.forwardRef((inProps, ref) => {
         const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = FloatLabelBase.getProps(inProps, context);
+        const elementRef = React.useRef(ref);
         const { ptm, cx, isUnstyled } = FloatLabelBase.setMetaData({
             props
         });
 
         useHandleStyle(FloatLabelBase.css.styles, isUnstyled, { name: 'floatlabel' });
 
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
         const rootProps = mergeProps(
             {
+                ref: elementRef,
                 className: classNames(cx('root'))
             },
             FloatLabelBase.getOtherProps(props),
diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js
index c8c47e18e1..cbc39232d4 100644
--- a/components/lib/stepperpanel/StepperPanel.js
+++ b/components/lib/stepperpanel/StepperPanel.js
@@ -1,19 +1,25 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ObjectUtils } from '../utils/Utils';
 import { StepperPanelBase } from './StepperPanelBase';
 
 export const StepperPanel = React.memo(
-    React.forwardRef((inProps) => {
+    React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = StepperPanelBase.getProps(inProps, context);
+        const elementRef = React.useRef(ref);
         const { isUnstyled } = StepperPanelBase.setMetaData({
             props
         });
 
         useHandleStyle(StepperPanelBase.css.styles, isUnstyled, { name: 'StepperPanel' });
 
-        return <>{props.children}</>;
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        return <span ref={ref}>{props.children}</span>;
     })
 );
 

From 784249944357deb143f0d18bfda4ebc6bd3b3074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 15:06:27 +0300
Subject: [PATCH 148/194] Update components/lib/inputotp/InputOtp.js

Co-authored-by: Melloware <mellowaredev@gmail.com>
---
 components/lib/inputotp/InputOtp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index d242f775bc..92efa34d89 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -77,7 +77,7 @@ export const InputOtp = React.memo(
 	const onPaste = (event) => {
 		let paste = event.clipboardData.getData('text');
 
-		if (paste.lenght) {
+		if (paste.length) {
 			let pastedCode = paste.substring(0, props.length + 1);
 
 			if (!props.integerOnly || !isNaN(pastedCode)) {

From 12c11da03cb2ac7ff58e35dcd639095bad794444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 15:06:37 +0300
Subject: [PATCH 149/194] Update components/lib/inputotp/InputOtp.js

Co-authored-by: Melloware <mellowaredev@gmail.com>
---
 components/lib/inputotp/InputOtp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index 92efa34d89..e4fc006907 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -113,7 +113,7 @@ export const InputOtp = React.memo(
 			}
 
 			case 'Backspace': {
-				if (event.target.value.length === 0) {
+				if (event.target?.value?.length === 0) {
 					moveToPrevInput(event);
 					event.preventDefault();
 				}

From 3556d148af1971e84babec0bf0772ea094293ee6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 15:13:58 +0300
Subject: [PATCH 150/194] InputOtp demos

---
 components/doc/inputotp/accessibilitydoc.js  |  52 ++++
 components/doc/inputotp/basicdoc.js          |  29 +--
 components/doc/inputotp/importdoc.js         |  17 ++
 components/doc/inputotp/integeronlydoc.js    |  56 +++++
 components/doc/inputotp/maskdoc.js           |  56 +++++
 components/doc/inputotp/pt/wireframe.js      |  12 +
 components/doc/inputotp/sampledoc.js         | 241 +++++++++++++++++++
 components/doc/inputotp/templatedoc.js       | 130 ++++++++++
 components/doc/inputotp/theming/styleddoc.js |  31 +++
 components/lib/inputotp/InputOtp.js          |  42 +++-
 pages/inputotp/index.js                      | 154 +++++-------
 11 files changed, 700 insertions(+), 120 deletions(-)
 create mode 100644 components/doc/inputotp/accessibilitydoc.js
 create mode 100644 components/doc/inputotp/importdoc.js
 create mode 100644 components/doc/inputotp/integeronlydoc.js
 create mode 100644 components/doc/inputotp/maskdoc.js
 create mode 100644 components/doc/inputotp/pt/wireframe.js
 create mode 100644 components/doc/inputotp/sampledoc.js
 create mode 100644 components/doc/inputotp/templatedoc.js
 create mode 100644 components/doc/inputotp/theming/styleddoc.js

diff --git a/components/doc/inputotp/accessibilitydoc.js b/components/doc/inputotp/accessibilitydoc.js
new file mode 100644
index 0000000000..6f5740e4d3
--- /dev/null
+++ b/components/doc/inputotp/accessibilitydoc.js
@@ -0,0 +1,52 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Input OTP uses a set of InputText components, refer to the <Link href='/inputtext'>InputText</Link> component for more information about the screen reader support.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input otp.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Deletes the input and moves focus to the previous input element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js
index 62f894d77d..5ce8f058bd 100644
--- a/components/doc/inputotp/basicdoc.js
+++ b/components/doc/inputotp/basicdoc.js
@@ -1,50 +1,45 @@
 import React, { useState } from 'react';
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputOtp } from '@/components/lib/inputotp/InputOtp';
-import { InputText } from '@/components/lib/inputtext/InputText';
+import { InputOtp } from '@/components/lib/inputotp/inputotp';
 
 export function BasicDoc(props) {
-    const [token, setTokens] = useState('12');
+    const [token, setTokens] = useState();
 
     const code = {
         basic: `
-<InputOtp />
+<InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
         `,
         javascript: `
-import React from 'react';
+import React, { useState } from 'react';
 import { InputOtp } from 'primereact/inputotp';
 
 export default function BasicDemo() {
+    const [token, setTokens] = useState();
+
     return (
         <div className="card flex justify-content-center">
-            <InputOtp />
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
         </div>
     );
 }
         `,
         typescript: `
-import React from 'react';
+import React, { useState } from 'react';
 import { InputOtp } from 'primereact/inputotp';
 
 export default function BasicDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
     return (
         <div className="card flex justify-content-center">
-            <InputOtp />
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
         </div>
     );
 }
         `
     };
 
-    const inputTemplate = (options) => {     
-        return (
-            <InputText
-                {...options?.props}
-            />
-        );
-    }
-
     return (
         <>
             <DocSectionText {...props}>
@@ -53,7 +48,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={inputTemplate}/>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputotp/importdoc.js b/components/doc/inputotp/importdoc.js
new file mode 100644
index 0000000000..24ea2c4874
--- /dev/null
+++ b/components/doc/inputotp/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputOtp } from 'primereact/inputotp';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/integeronlydoc.js b/components/doc/inputotp/integeronlydoc.js
new file mode 100644
index 0000000000..b92f37ec3f
--- /dev/null
+++ b/components/doc/inputotp/integeronlydoc.js
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/inputotp';
+
+export function IntegerOnlyDoc(props) {
+    const [token, setTokens] = useState();
+
+    const code = {
+        basic: `
+<InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function IntegerOnlyDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function IntegerOnlyDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                When <i>integerOnly</i> is present, only integers can be accepted as input.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/maskdoc.js b/components/doc/inputotp/maskdoc.js
new file mode 100644
index 0000000000..f9ee0005fc
--- /dev/null
+++ b/components/doc/inputotp/maskdoc.js
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/inputotp';
+
+export function MaskDoc(props) {
+    const [token, setTokens] = useState();
+
+    const code = {
+        basic: `
+<InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function MaskDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function MaskDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                Enable the <i>mask</i> option to hide the values in the input fields.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/pt/wireframe.js b/components/doc/inputotp/pt/wireframe.js
new file mode 100644
index 0000000000..5e996e3927
--- /dev/null
+++ b/components/doc/inputotp/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="inputnumber" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inputotp/sampledoc.js b/components/doc/inputotp/sampledoc.js
new file mode 100644
index 0000000000..c6376e318b
--- /dev/null
+++ b/components/doc/inputotp/sampledoc.js
@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/inputotp';
+import { Button } from '@/components/lib/button/Button';
+
+export function SampleDoc(props) {
+    const [token, setTokens] = useState();
+
+    const customInput = ({events, props: attr}) => {
+        return <><input {...events} {...attr} type="text" className="custom-otp-input-sample" />
+            {attr.id === 2 && <div className="px-3">
+                <i className="pi pi-minus" />
+            </div>}
+        </>
+    };
+
+    const code = {
+        basic: `
+<div className="flex flex-column align-items-center">
+    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+    <div className="flex justify-content-between mt-5 align-self-stretch">
+        <Button label="Resend Code" link className="p-0"></Button>
+        <Button label="Submit Code"></Button>
+    </div>
+</div>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+import { Button } from 'primereact/button';
+
+export default function SampleDemo() {
+    const [token, setTokens] = useState();
+
+    const customInput = ({events, props}) => {
+        return <><input {...events} {...props} type="text" className="custom-otp-input-sample" />
+            {props.id === 2 && <div className="px-3">
+                <i className="pi pi-minus" />
+            </div>}
+        </>
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input-sample {
+                        width: 48px;
+                        height: 48px;
+                        font-size: 24px;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        border-radius: 0;
+                        border: 1px solid var(--surface-400);
+                        background: transparent;
+                        outline-offset: -2px;
+                        outline-color: transparent;
+                        border-right: 0 none;
+                        transition: outline-color 0.3s;
+                        color: var(--text-color);
+                    }
+
+                    .custom-otp-input-sample:focus {
+                        outline: 2px solid var(--primary-color);
+                    }
+
+                    .custom-otp-input-sample:first-child,
+                    .custom-otp-input-sample:nth-child(5) {
+                        border-top-left-radius: 12px;
+                        border-bottom-left-radius: 12px;
+                    }
+
+                    .custom-otp-input-sample:nth-child(3),
+                    .custom-otp-input-sample:last-child {
+                        border-top-right-radius: 12px;
+                        border-bottom-right-radius: 12px;
+                        border-right-width: 1px;
+                        border-right-style: solid;
+                        border-color: var(--surface-400);
+                    }
+                \`}
+            </style>
+            <div className="flex flex-column align-items-center">
+                <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+                <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+                <div className="flex justify-content-between mt-5 align-self-stretch">
+                    <Button label="Resend Code" link className="p-0"></Button>
+                    <Button label="Submit Code"></Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+import { Button } from 'primereact/button';
+
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    events: any;
+    props: any;
+}
+
+export default function SampleDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+      
+    const customInput: FunctionComponent<CustomInputProps> = ({ events, props }) => {
+        return (
+          <>
+            <input {...events} {...props} type="text" className="custom-otp-input-sample" />
+            {props?.id === 2 && (
+              <div className="px-3">
+                <i className="pi pi-minus" />
+              </div>
+            )}
+          </>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input-sample {
+                        width: 48px;
+                        height: 48px;
+                        font-size: 24px;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        border-radius: 0;
+                        border: 1px solid var(--surface-400);
+                        background: transparent;
+                        outline-offset: -2px;
+                        outline-color: transparent;
+                        border-right: 0 none;
+                        transition: outline-color 0.3s;
+                        color: var(--text-color);
+                    }
+
+                    .custom-otp-input-sample:focus {
+                        outline: 2px solid var(--primary-color);
+                    }
+
+                    .custom-otp-input-sample:first-child,
+                    .custom-otp-input-sample:nth-child(5) {
+                        border-top-left-radius: 12px;
+                        border-bottom-left-radius: 12px;
+                    }
+
+                    .custom-otp-input-sample:nth-child(3),
+                    .custom-otp-input-sample:last-child {
+                        border-top-right-radius: 12px;
+                        border-bottom-right-radius: 12px;
+                        border-right-width: 1px;
+                        border-right-style: solid;
+                        border-color: var(--surface-400);
+                    }
+                \`}
+            </style>
+            <div className="flex flex-column align-items-center">
+                <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+                <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+                <div className="flex justify-content-between mt-5 align-self-stretch">
+                    <Button label="Resend Code" link className="p-0"></Button>
+                    <Button label="Submit Code"></Button>
+                </div>
+            </div>
+        </div>
+    );
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A sample UI implementation with templating and additional elements.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <style scoped>
+                    {`
+                        .custom-otp-input-sample {
+                            width: 48px;
+                            height: 48px;
+                            font-size: 24px;
+                            appearance: none;
+                            text-align: center;
+                            transition: all 0.2s;
+                            border-radius: 0;
+                            border: 1px solid var(--surface-400);
+                            background: transparent;
+                            outline-offset: -2px;
+                            outline-color: transparent;
+                            border-right: 0 none;
+                            transition: outline-color 0.3s;
+                            color: var(--text-color);
+                        }
+
+                        .custom-otp-input-sample:focus {
+                            outline: 2px solid var(--primary-color);
+                        }
+
+                        .custom-otp-input-sample:first-child,
+                        .custom-otp-input-sample:nth-child(5) {
+                            border-top-left-radius: 12px;
+                            border-bottom-left-radius: 12px;
+                        }
+
+                        .custom-otp-input-sample:nth-child(3),
+                        .custom-otp-input-sample:last-child {
+                            border-top-right-radius: 12px;
+                            border-bottom-right-radius: 12px;
+                            border-right-width: 1px;
+                            border-right-style: solid;
+                            border-color: var(--surface-400);
+                        }
+                    `}
+                </style>
+                <div className="flex flex-column align-items-center">
+                    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+                    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+                    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+                    <div className="flex justify-content-between mt-5 align-self-stretch">
+                        <Button label="Resend Code" link className="p-0"></Button>
+                        <Button label="Submit Code"></Button>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/templatedoc.js b/components/doc/inputotp/templatedoc.js
new file mode 100644
index 0000000000..230431b25c
--- /dev/null
+++ b/components/doc/inputotp/templatedoc.js
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/inputotp';
+
+export function TemplateDoc(props) {
+    const [token, setTokens] = useState();
+
+    const customInput = ({events, props: attr}) => <input {...events} {...attr} type="text" className="custom-otp-input" />;
+
+    const code = {
+        basic: `
+<InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function TemplateDemo() {
+    const [token, setTokens] = useState();
+
+    const customInput = ({events, props}) => <input {...events} {...props} type="text" className="custom-otp-input" />;
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input {
+                        width: 40px;
+                        font-size: 36px;
+                        border: 0 none;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        background: transparent;
+                        border-bottom: 2px solid var(--surface-500);
+                    }
+
+                    .custom-otp-input:focus {
+                        outline: 0 none;
+                        border-bottom-color: var(--primary-color);
+                    }
+                \`}
+            </style>
+
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    events: React.HTMLAttributes<HTMLInputElement>;
+    props: React.HTMLAttributes<HTMLInputElement>;
+}
+
+export default function TemplateDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+      
+    const customInput = ({ events, props }: CustomInputProps) => (
+    <input {...events} {...props} type="text" className="custom-otp-input" />
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input {
+                        width: 40px;
+                        font-size: 36px;
+                        border: 0 none;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        background: transparent;
+                        border-bottom: 2px solid var(--surface-500);
+                    }
+
+                    .custom-otp-input:focus {
+                        outline: 0 none;
+                        border-bottom-color: var(--primary-color);
+                    }
+                \`}
+            </style>
+
+            <InputOtp value={token} onChange={(e: any) => setTokens(e?.value)} inputTemplate={customInput}/>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <style scoped>
+                    {`
+                        .custom-otp-input {
+                            width: 40px;
+                            font-size: 36px;
+                            border: 0 none;
+                            appearance: none;
+                            text-align: center;
+                            transition: all 0.2s;
+                            background: transparent;
+                            border-bottom: 2px solid var(--surface-500);
+                        }
+
+                        .custom-otp-input:focus {
+                            outline: 0 none;
+                            border-bottom-color: var(--primary-color);
+                        }
+                    `}
+                </style>
+
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/theming/styleddoc.js b/components/doc/inputotp/theming/styleddoc.js
new file mode 100644
index 0000000000..c1c63f36ba
--- /dev/null
+++ b/components/doc/inputotp/theming/styleddoc.js
@@ -0,0 +1,31 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputotp</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputotp-input</td>
+                            <td>Input element of the component.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index d242f775bc..fc16e5dac0 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -3,6 +3,7 @@ import { useMergeProps } from '../hooks/Hooks';
 import { PrimeReactContext } from '../api/Api';
 import { InputOtpBase } from './BaseInputOtp';
 import { InputText } from '@/components/lib/inputtext/InputText';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { ObjectUtils } from '../utils/Utils';
 
 export const InputOtp = React.memo(
@@ -11,7 +12,7 @@ export const InputOtp = React.memo(
 	const mergeProps = useMergeProps();
 	const context = useContext(PrimeReactContext);
 	const props = InputOtpBase.getProps(inProps, context);
-	const { ptm, cx } = InputOtpBase.setMetaData({
+	const { ptm, cx, isUnstyled } = InputOtpBase.setMetaData({
 		props,
 		...props.__parentMetadata,
 		context: {
@@ -19,26 +20,40 @@ export const InputOtp = React.memo(
 		}
 	});
 
+	useHandleStyle(InputOtpBase.css.styles, isUnstyled, { name: 'inputotp' });
+
 	const defaultValue = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
 	const [tokens, setTokens] = useState(defaultValue);
 
-	const moveToNextInput = (event) => {
-		const nextInput = event.target.nextElementSibling;
+	const findNextInput = (element) => {
+		const nextInput = element.nextElementSibling;
 
 		if (!nextInput) return;
 
-		if (nextInput.nodeName === 'INPUT') {
+		return nextInput.nodeName === 'INPUT' ? nextInput : findNextInput(nextInput);
+	}
+
+	const findPrevInput = (element) => {
+		const prevInput = element.previousElementSibling;
+
+		if (!prevInput) return;
+
+		return prevInput.nodeName === 'INPUT' ? prevInput : findPrevInput(prevInput);
+	};
+
+	const moveToNextInput = (event) => {
+		const nextInput = findNextInput(event.target);
+
+		if (nextInput) {
 			nextInput.focus();
 			nextInput.select();
 		}
 	}
 
 	const moveToPrevInput = (event) => {
-		const prevInput = event.target.previousElementSibling;
-
-		if (!prevInput) return;
+		const prevInput = findPrevInput(event.target);
 
-		if (prevInput.nodeName === 'INPUT') {
+		if (prevInput) {
 			prevInput.focus();
 			prevInput.select();
 		}
@@ -145,7 +160,7 @@ export const InputOtp = React.memo(
 		}
 
 		const inputElementIndex = props.length - remainingInputs;
-		const inputElementActions = {
+		const inputElementEvents = {
 			onInput: (event) => onInput(event, inputElementIndex),
 			onKeyDown: onKeydown,
 			onFocus,
@@ -163,13 +178,13 @@ export const InputOtp = React.memo(
 				readOnly: props?.readOnly,
 				disabled: props?.disabled,
 				invalid: props?.invalid,
-				tabIndex: props?.tabIndex,  
+				tabIndex: props?.tabIndex, 
+				unstyled: props?.unstyled, 
                 className: cx('input'),
-				...inputElementActions
             },
             ptm('input')
         );		
-		const inputElement = props?.inputTemplate ? ObjectUtils.getJSXElement(props?.inputTemplate, {...inputElementActions, props: inputElementProps}) : <InputText {...inputElementProps} />;
+		const inputElement = props?.inputTemplate ? ObjectUtils.getJSXElement(props?.inputTemplate, {events: inputElementEvents, props: inputElementProps}) : <InputText {...inputElementProps} {...inputElementEvents} />;
 		const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)];
 
 		return inputElements;
@@ -178,7 +193,8 @@ export const InputOtp = React.memo(
 	const rootElementProps = mergeProps(
 		{
 			className: cx('root'),
-			ref: elementRef
+			ref: elementRef,
+			style: props?.style,
 		},
 		ptm('root')
 	);
diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js
index 023fb2e2bc..55342deadb 100644
--- a/pages/inputotp/index.js
+++ b/pages/inputotp/index.js
@@ -1,105 +1,79 @@
-// import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc';
+import { ImportDoc } from '@/components/doc/inputotp/importdoc';
 import { BasicDoc } from '@/components/doc/inputotp/basicdoc';
-// import { ControlledDoc } from '@/components/doc/inputotp/controlleddoc';
-// import { DisabledDoc } from '@/components/doc/inputotp/disableddoc';
-// import { DynamicDoc } from '@/components/doc/inputotp/dynamicdoc';
-// import { ImportDoc } from '@/components/doc/inputotp/importdoc';
-// import { MultipleDoc } from '@/components/doc/inputotp/multipledoc';
-// import { PTDoc } from '@/components/doc/inputotp/pt/ptdoc';
-// import { Wireframe } from '@/components/doc/inputotp/pt/wireframe';
-// import { TemplateDoc } from '@/components/doc/inputotp/templatedoc';
-// import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc';
-// import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc';
+import { MaskDoc } from '@/components/doc/inputotp/maskdoc';
+import { IntegerOnlyDoc } from '@/components/doc/inputotp/integeronlydoc';
+import { TemplateDoc } from '@/components/doc/inputotp/templatedoc';
+import { SampleDoc } from '@/components/doc/inputotp/sampledoc';
+import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc';
+import { Wireframe } from '@/components/doc/inputotp/pt/wireframe';
+import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc';
 import DocApiTable from '@/components/doc/common/docapitable';
 import { DocComponent } from '@/components/doc/common/doccomponent';
 
 const InputOtpDemo = () => {
     const docs = [
-        // {
-        //     id: 'import',
-        //     label: 'Import',
-        //     component: ImportDoc
-        // },
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
         {
             id: 'basic',
             label: 'Basic',
             component: BasicDoc
         },
-        // {
-        //     id: 'dynamic',
-        //     label: 'Dynamic',
-        //     component: DynamicDoc
-        // },
-        // {
-        //     id: 'multiple',
-        //     label: 'Multiple',
-        //     component: MultipleDoc
-        // },
-        // {
-        //     id: 'disabled',
-        //     label: 'Disabled',
-        //     component: DisabledDoc
-        // },
-        // {
-        //     id: 'controlled',
-        //     label: 'Controlled',
-        //     component: ControlledDoc
-        // },
-        // {
-        //     id: 'template',
-        //     label: 'Template',
-        //     component: TemplateDoc
-        // },
-
-        // {
-        //     id: 'accessibility',
-        //     label: 'Accessibility',
-        //     component: AccessibilityDoc
-        // }
+        {
+            id: 'mask',
+            label: 'Mask',
+            component: MaskDoc
+        },
+        {
+            id: 'integeronly',
+            label: 'Integer Only',
+            component: IntegerOnlyDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'sample',
+            label: 'Sample',
+            component: SampleDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
     ];
 
-    // const ptDocs = [
-    //     {
-    //         id: 'pt.wireframe',
-    //         label: 'Wireframe',
-    //         component: Wireframe
-    //     },
-    //     {
-    //         id: 'pt.inputotp.options',
-    //         label: 'InputOtp PT Options',
-    //         component: DocApiTable
-    //     },
-    //     {
-    //         id: 'pt.inputotptab.options',
-    //         label: 'InputOtpTab PT Options',
-    //         component: DocApiTable
-    //     },
-    //     {
-    //         id: 'pt.demo',
-    //         label: 'Example',
-    //         component: PTDoc
-    //     }
-    // ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputotp.options',
+            label: 'InputOtp PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.inputotptab.options',
+            label: 'InputOtpTab PT Options',
+            component: DocApiTable
+        }
+    ];
 
-    // const themingDocs = [
-    //     {
-    //         id: 'styled',
-    //         label: 'Styled',
-    //         component: StyledDoc
-    //     },
-    //     {
-    //         id: 'unstyled',
-    //         label: 'Unstyled',
-    //         description: 'Theming is implemented with the pass through properties in unstyled mode.',
-    //         children: [
-    //             {
-    //                 id: 'tailwind',
-    //                 label: 'Tailwind',
-    //                 component: TailwindDoc
-    //             }
-    //         ]
-    //     }
-    // ];
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+    ];
 
     return (
         <DocComponent
@@ -108,9 +82,9 @@ const InputOtpDemo = () => {
             description="InputOtp groups a collection of contents in tabs."
             componentDocs={docs}
             apiDocs={['InputOtp', 'InputOtpTab']}
-            // ptDocs={ptDocs}
+            ptDocs={ptDocs}
             ptDescription=""
-            // themingDocs={themingDocs}
+            themingDocs={themingDocs}
         />
     );
 };

From ab2f1f161f28f7bcbb7030b002e25cc50cde6917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 15:19:12 +0300
Subject: [PATCH 151/194] Lint and Format

---
 components/doc/inputotp/accessibilitydoc.js |   2 +-
 components/doc/inputotp/basicdoc.js         |   2 +-
 components/doc/inputotp/integeronlydoc.js   |   4 +-
 components/doc/inputotp/maskdoc.js          |   4 +-
 components/doc/inputotp/sampledoc.js        |  23 +-
 components/doc/inputotp/templatedoc.js      |   8 +-
 components/doc/slider/filterdoc.js          |   1 +
 components/lib/inputotp/InputOtp.js         | 388 ++++++++++----------
 components/lib/inputotp/inputotp.d.ts       |   1 -
 pages/inputotp/index.js                     |   2 +-
 10 files changed, 216 insertions(+), 219 deletions(-)

diff --git a/components/doc/inputotp/accessibilitydoc.js b/components/doc/inputotp/accessibilitydoc.js
index 6f5740e4d3..508eeaf59a 100644
--- a/components/doc/inputotp/accessibilitydoc.js
+++ b/components/doc/inputotp/accessibilitydoc.js
@@ -7,7 +7,7 @@ export function AccessibilityDoc() {
         <DocSectionText id="accessibility" label="Accessibility">
             <h3>Screen Reader</h3>
             <p>
-                Input OTP uses a set of InputText components, refer to the <Link href='/inputtext'>InputText</Link> component for more information about the screen reader support.
+                Input OTP uses a set of InputText components, refer to the <Link href="/inputtext">InputText</Link> component for more information about the screen reader support.
             </p>
 
             <h3>Keyboard Support</h3>
diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js
index 5ce8f058bd..733e985c46 100644
--- a/components/doc/inputotp/basicdoc.js
+++ b/components/doc/inputotp/basicdoc.js
@@ -48,7 +48,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputotp/integeronlydoc.js b/components/doc/inputotp/integeronlydoc.js
index b92f37ec3f..db451819e5 100644
--- a/components/doc/inputotp/integeronlydoc.js
+++ b/components/doc/inputotp/integeronlydoc.js
@@ -44,11 +44,11 @@ export default function IntegerOnlyDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                When <i>integerOnly</i> is present, only integers can be accepted as input.
+                    When <i>integerOnly</i> is present, only integers can be accepted as input.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputotp/maskdoc.js b/components/doc/inputotp/maskdoc.js
index f9ee0005fc..173cb82de6 100644
--- a/components/doc/inputotp/maskdoc.js
+++ b/components/doc/inputotp/maskdoc.js
@@ -44,11 +44,11 @@ export default function MaskDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                Enable the <i>mask</i> option to hide the values in the input fields.
+                    Enable the <i>mask</i> option to hide the values in the input fields.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/inputotp/sampledoc.js b/components/doc/inputotp/sampledoc.js
index c6376e318b..2e8bc8346b 100644
--- a/components/doc/inputotp/sampledoc.js
+++ b/components/doc/inputotp/sampledoc.js
@@ -7,12 +7,17 @@ import { Button } from '@/components/lib/button/Button';
 export function SampleDoc(props) {
     const [token, setTokens] = useState();
 
-    const customInput = ({events, props: attr}) => {
-        return <><input {...events} {...attr} type="text" className="custom-otp-input-sample" />
-            {attr.id === 2 && <div className="px-3">
-                <i className="pi pi-minus" />
-            </div>}
-        </>
+    const customInput = ({ events, props: attr }) => {
+        return (
+            <>
+                <input {...events} {...attr} type="text" className="custom-otp-input-sample" />
+                {attr.id === 2 && (
+                    <div className="px-3">
+                        <i className="pi pi-minus" />
+                    </div>
+                )}
+            </>
+        );
     };
 
     const code = {
@@ -181,9 +186,7 @@ export default function SampleDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>
-                    A sample UI implementation with templating and additional elements.
-                </p>
+                <p>A sample UI implementation with templating and additional elements.</p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <style scoped>
@@ -228,7 +231,7 @@ export default function SampleDemo() {
                 <div className="flex flex-column align-items-center">
                     <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
                     <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
-                    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+                    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{ gap: 0 }} />
                     <div className="flex justify-content-between mt-5 align-self-stretch">
                         <Button label="Resend Code" link className="p-0"></Button>
                         <Button label="Submit Code"></Button>
diff --git a/components/doc/inputotp/templatedoc.js b/components/doc/inputotp/templatedoc.js
index 230431b25c..fea84daf50 100644
--- a/components/doc/inputotp/templatedoc.js
+++ b/components/doc/inputotp/templatedoc.js
@@ -6,7 +6,7 @@ import { InputOtp } from '@/components/lib/inputotp/inputotp';
 export function TemplateDoc(props) {
     const [token, setTokens] = useState();
 
-    const customInput = ({events, props: attr}) => <input {...events} {...attr} type="text" className="custom-otp-input" />;
+    const customInput = ({ events, props: attr }) => <input {...events} {...attr} type="text" className="custom-otp-input" />;
 
     const code = {
         basic: `
@@ -97,9 +97,7 @@ export default function TemplateDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>
-                    Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
-                </p>
+                <p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <style scoped>
@@ -122,7 +120,7 @@ export default function TemplateDemo() {
                     `}
                 </style>
 
-                <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput} />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/slider/filterdoc.js b/components/doc/slider/filterdoc.js
index 5897a8ba27..d040cccc02 100644
--- a/components/doc/slider/filterdoc.js
+++ b/components/doc/slider/filterdoc.js
@@ -111,6 +111,7 @@ export default function FilterDemo() {
                         value={filterValues[filter]}
                         onChange={(e) => {
                             const newFilterValues = [...filterValues];
+
                             newFilterValues[filter] = e.value;
                             setFilterValues(newFilterValues);
                         }}
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index cc41ffb3f4..c19c71c70d 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useState } from 'react'
+import React, { useRef, useContext, useState } from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 import { PrimeReactContext } from '../api/Api';
 import { InputOtpBase } from './BaseInputOtp';
@@ -8,200 +8,196 @@ import { ObjectUtils } from '../utils/Utils';
 
 export const InputOtp = React.memo(
     React.forwardRef((inProps, ref) => {
-	const elementRef = useRef(ref);
-	const mergeProps = useMergeProps();
-	const context = useContext(PrimeReactContext);
-	const props = InputOtpBase.getProps(inProps, context);
-	const { ptm, cx, isUnstyled } = InputOtpBase.setMetaData({
-		props,
-		...props.__parentMetadata,
-		context: {
-			disabled: props.disabled,		
-		}
-	});
-
-	useHandleStyle(InputOtpBase.css.styles, isUnstyled, { name: 'inputotp' });
-
-	const defaultValue = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
-	const [tokens, setTokens] = useState(defaultValue);
-
-	const findNextInput = (element) => {
-		const nextInput = element.nextElementSibling;
-
-		if (!nextInput) return;
-
-		return nextInput.nodeName === 'INPUT' ? nextInput : findNextInput(nextInput);
-	}
-
-	const findPrevInput = (element) => {
-		const prevInput = element.previousElementSibling;
-
-		if (!prevInput) return;
-
-		return prevInput.nodeName === 'INPUT' ? prevInput : findPrevInput(prevInput);
-	};
-
-	const moveToNextInput = (event) => {
-		const nextInput = findNextInput(event.target);
-
-		if (nextInput) {
-			nextInput.focus();
-			nextInput.select();
-		}
-	}
-
-	const moveToPrevInput = (event) => {
-		const prevInput = findPrevInput(event.target);
-
-		if (prevInput) {
-			prevInput.focus();
-			prevInput.select();
-		}
-	}
-
-	const onChange = (event, value) => {
-		props?.onChange?.({
-			originalEvent: event,
-			value: value.join('')
-		})
-	}
-
-	const updateTokens = (event, index) => {
-		const inputValue = event.target.value;
-		const newTokens = [...tokens];
-
-		newTokens[index] = inputValue;
-		newTokens = newTokens.join('');
-		newTokens = newTokens ? newTokens.split('') : new Array(props.length);
-
-		setTokens(newTokens);
-		onChange(event, newTokens);
-	}
-
-	const onInput = (event,index) => {
-		updateTokens(event, index);
-		
-
-		if (event.nativeEvent.inputType === 'deleteContentBackward') {
-			moveToPrevInput(event);
-		} else if (event.nativeEvent.inputType === 'insertText' || event.nativeEvent.inputType === 'deleteContentForward') {
-			moveToNextInput(event);
-		}
-	}
-
-	const onPaste = (event) => {
-		let paste = event.clipboardData.getData('text');
-
-		if (paste.length) {
-			let pastedCode = paste.substring(0, props.length + 1);
-
-			if (!props.integerOnly || !isNaN(pastedCode)) {
-				const newTokens = pastedCode.split('');
-
-				setTokens(newTokens);
-				onChange(event, newTokens);
-			}
-		}
-	}
-
-	const onFocus = (event) => {
-		event.target.select();
-		props?.focus?.(event);
-	}
-
-	const onBlur = (event) => {
-		props?.blur?.(event);
-	}
-
-	const onKeydown = (event) => {
-		switch (event.code) {
-			case 'ArrowLeft': {
-				moveToPrevInput(event);
-				event.preventDefault();
-				break;
-			}
-
-			case 'ArrowRight': {
-				moveToNextInput(event);
-				event.preventDefault();
-				break;
-			}
-
-			case 'Backspace': {
-				if (event.target?.value?.length === 0) {
-					moveToPrevInput(event);
-					event.preventDefault();
-				}
-
-				break;
-			}
-
-			case 'ArrowUp':
-
-			case 'ArrowDown': {
-				event.preventDefault();
-				break;
-			}
-
-			default: {
-				// Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length
-				if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) {
-					event.preventDefault();
-				}
-
-				break;
-			}
-		}
-	}
-
-	const createInputElements = (remainingInputs) => {
-		if (remainingInputs <= 0) {
-			return [];
-		}
-
-		const inputElementIndex = props.length - remainingInputs;
-		const inputElementEvents = {
-			onInput: (event) => onInput(event, inputElementIndex),
-			onKeyDown: onKeydown,
-			onFocus,
-			onBlur,
-			onPaste,
-		}
-		const inputElementProps = mergeProps(
+        const elementRef = useRef(ref);
+        const mergeProps = useMergeProps();
+        const context = useContext(PrimeReactContext);
+        const props = InputOtpBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = InputOtpBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            context: {
+                disabled: props.disabled
+            }
+        });
+
+        useHandleStyle(InputOtpBase.css.styles, isUnstyled, { name: 'inputotp' });
+
+        const defaultValue = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
+        const [tokens, setTokens] = useState(defaultValue);
+
+        const findNextInput = (element) => {
+            const nextInput = element.nextElementSibling;
+
+            if (!nextInput) return;
+
+            return nextInput.nodeName === 'INPUT' ? nextInput : findNextInput(nextInput);
+        };
+
+        const findPrevInput = (element) => {
+            const prevInput = element.previousElementSibling;
+
+            if (!prevInput) return;
+
+            return prevInput.nodeName === 'INPUT' ? prevInput : findPrevInput(prevInput);
+        };
+
+        const moveToNextInput = (event) => {
+            const nextInput = findNextInput(event.target);
+
+            if (nextInput) {
+                nextInput.focus();
+                nextInput.select();
+            }
+        };
+
+        const moveToPrevInput = (event) => {
+            const prevInput = findPrevInput(event.target);
+
+            if (prevInput) {
+                prevInput.focus();
+                prevInput.select();
+            }
+        };
+
+        const onChange = (event, value) => {
+            props?.onChange?.({
+                originalEvent: event,
+                value: value.join('')
+            });
+        };
+
+        const updateTokens = (event, index) => {
+            const inputValue = event.target.value;
+            const newTokens = [...tokens];
+
+            newTokens[index] = inputValue;
+            newTokens = newTokens.join('');
+            newTokens = newTokens ? newTokens.split('') : new Array(props.length);
+
+            setTokens(newTokens);
+            onChange(event, newTokens);
+        };
+
+        const onInput = (event, index) => {
+            updateTokens(event, index);
+
+            if (event.nativeEvent.inputType === 'deleteContentBackward') {
+                moveToPrevInput(event);
+            } else if (event.nativeEvent.inputType === 'insertText' || event.nativeEvent.inputType === 'deleteContentForward') {
+                moveToNextInput(event);
+            }
+        };
+
+        const onPaste = (event) => {
+            let paste = event.clipboardData.getData('text');
+
+            if (paste.length) {
+                let pastedCode = paste.substring(0, props.length + 1);
+
+                if (!props.integerOnly || !isNaN(pastedCode)) {
+                    const newTokens = pastedCode.split('');
+
+                    setTokens(newTokens);
+                    onChange(event, newTokens);
+                }
+            }
+        };
+
+        const onFocus = (event) => {
+            event.target.select();
+            props?.focus?.(event);
+        };
+
+        const onBlur = (event) => {
+            props?.blur?.(event);
+        };
+
+        const onKeydown = (event) => {
+            switch (event.code) {
+                case 'ArrowLeft': {
+                    moveToPrevInput(event);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    moveToNextInput(event);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Backspace': {
+                    if (event.target?.value?.length === 0) {
+                        moveToPrevInput(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+                }
+
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    event.preventDefault();
+                    break;
+                }
+
+                default: {
+                    // Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length
+                    if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) {
+                        event.preventDefault();
+                    }
+
+                    break;
+                }
+            }
+        };
+
+        const createInputElements = (remainingInputs) => {
+            if (remainingInputs <= 0) {
+                return [];
+            }
+
+            const inputElementIndex = props.length - remainingInputs;
+            const inputElementEvents = {
+                onInput: (event) => onInput(event, inputElementIndex),
+                onKeyDown: onKeydown,
+                onFocus,
+                onBlur,
+                onPaste
+            };
+            const inputElementProps = mergeProps(
+                {
+                    id: inputElementIndex,
+                    key: inputElementIndex,
+                    value: tokens[inputElementIndex] || '',
+                    inputMode: props?.integerOnly ? 'numeric' : 'text',
+                    type: props?.mask ? 'password' : 'text',
+                    variant: props?.variant,
+                    readOnly: props?.readOnly,
+                    disabled: props?.disabled,
+                    invalid: props?.invalid,
+                    tabIndex: props?.tabIndex,
+                    unstyled: props?.unstyled,
+                    className: cx('input')
+                },
+                ptm('input')
+            );
+            const inputElement = props?.inputTemplate ? ObjectUtils.getJSXElement(props?.inputTemplate, { events: inputElementEvents, props: inputElementProps }) : <InputText {...inputElementProps} {...inputElementEvents} />;
+            const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)];
+
+            return inputElements;
+        };
+
+        const rootElementProps = mergeProps(
             {
-				id: inputElementIndex,
-				key: inputElementIndex,
-				value: tokens[inputElementIndex] || '',
-				inputMode: props?.integerOnly ? 'numeric' : 'text',
-				type: props?.mask ? 'password' : 'text',
-				variant: props?.variant,
-				readOnly: props?.readOnly,
-				disabled: props?.disabled,
-				invalid: props?.invalid,
-				tabIndex: props?.tabIndex, 
-				unstyled: props?.unstyled, 
-                className: cx('input'),
+                className: cx('root'),
+                ref: elementRef,
+                style: props?.style
             },
-            ptm('input')
-        );		
-		const inputElement = props?.inputTemplate ? ObjectUtils.getJSXElement(props?.inputTemplate, {events: inputElementEvents, props: inputElementProps}) : <InputText {...inputElementProps} {...inputElementEvents} />;
-		const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)];
-
-		return inputElements;
-	}
-
-	const rootElementProps = mergeProps(
-		{
-			className: cx('root'),
-			ref: elementRef,
-			style: props?.style,
-		},
-		ptm('root')
-	);
-
-    return (
-        <div {...rootElementProps}>
-            {createInputElements(props.length)}
-        </div>
-    );
-}));
+            ptm('root')
+        );
+
+        return <div {...rootElementProps}>{createInputElements(props.length)}</div>;
+    })
+);
diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
index ebe316004e..b0b82951dc 100644
--- a/components/lib/inputotp/inputotp.d.ts
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -57,7 +57,6 @@ export interface InputOtpContext {
     disabled: boolean;
 }
 
-
 /**
  * Custom change event
  * @see {@link InputNumberProps.onChange}
diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js
index 55342deadb..dd0dcda853 100644
--- a/pages/inputotp/index.js
+++ b/pages/inputotp/index.js
@@ -72,7 +72,7 @@ const InputOtpDemo = () => {
             id: 'styled',
             label: 'Styled',
             component: StyledDoc
-        },
+        }
     ];
 
     return (

From 38b6fd40ce49006e71696488b5216b64848b862b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 16:10:25 +0300
Subject: [PATCH 152/194] Update components/lib/inputotp/inputotp.d.ts

Co-authored-by: Melloware <mellowaredev@gmail.com>
---
 components/lib/inputotp/inputotp.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
index b0b82951dc..f003833724 100644
--- a/components/lib/inputotp/inputotp.d.ts
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -144,7 +144,7 @@ export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputH
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
     /**
      * Callback to invoke on value change.
-     * @param {InputNumberChangeEvent} event - Custom change event
+     * @param {InputOtpChangeEvent} event - Custom change event
      */
     onChange?(event: InputOtpChangeEvent): void;
     /**

From 832465c6c0d99f56bc2ec0517f348f9db59e3528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 16:10:37 +0300
Subject: [PATCH 153/194] Update components/lib/inputotp/inputotp.d.ts

Co-authored-by: Melloware <mellowaredev@gmail.com>
---
 components/lib/inputotp/inputotp.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
index f003833724..d52f6f4cca 100644
--- a/components/lib/inputotp/inputotp.d.ts
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -59,7 +59,7 @@ export interface InputOtpContext {
 
 /**
  * Custom change event
- * @see {@link InputNumberProps.onChange}
+ * @see {@link InputOtpProps.onChange}
  * @event
  */
 interface InputOtpChangeEvent {

From 3ae6aa8e37a08861f1a869979fdc9a246af836aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 16:12:29 +0300
Subject: [PATCH 154/194] Update components/lib/inputotp/inputotp.d.ts

Co-authored-by: Melloware <mellowaredev@gmail.com>
---
 components/lib/inputotp/inputotp.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
index d52f6f4cca..a2bbb34308 100644
--- a/components/lib/inputotp/inputotp.d.ts
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -70,7 +70,7 @@ interface InputOtpChangeEvent {
     /**
      * New value
      */
-    value: number | null;
+    value: string | number | undefined;
 }
 
 /**

From df3e7b79d1ca7d940596291a0268a1b32d3d3cf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 16:14:14 +0300
Subject: [PATCH 155/194] Merge master

---
 components/lib/inputotp/inputotp.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
index a2bbb34308..a7d9c71f80 100644
--- a/components/lib/inputotp/inputotp.d.ts
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -70,7 +70,7 @@ interface InputOtpChangeEvent {
     /**
      * New value
      */
-    value: string | number | undefined;
+    value?: string | number | null;
 }
 
 /**
@@ -79,10 +79,10 @@ interface InputOtpChangeEvent {
  */
 export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'value' | 'size' | 'onChange'> {
     /**
-     * Specifies whether a inputotp should be checked or not.
-     * @defaultValue false
+     * Specifies the value of the component.
+     * @defaultValue null
      */
-    value?: string | number;
+    value?: string | number | null;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false

From b1cdda490d89645904207ef350069f103821b65b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 8 Apr 2024 16:15:38 +0300
Subject: [PATCH 156/194] dts update

---
 components/lib/inputotp/inputotp.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
index a7d9c71f80..abbdb54999 100644
--- a/components/lib/inputotp/inputotp.d.ts
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -129,7 +129,6 @@ export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputH
     /**
      * Callback to invoke while typing value on input
      * @param {React.FormEvent<HTMLInputElement>} event - Browser event
-     * @param {boolean} validatePattern - Whether to validate the value
      */
     onInput?(event: React.FormEvent<HTMLInputElement>): void;
     /**

From 131e6801fdad71783ac29088d42e0e8657c14500 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 8 Apr 2024 11:14:58 -0400
Subject: [PATCH 157/194] Fix #5187: TailWind Styled mode instructions (#6330)

---
 components/doc/tailwind/csslayerdoc.js           |  3 +++
 .../__snapshots__/InputText.spec.js.snap         |  2 +-
 package-lock.json                                | 16 ++++++++--------
 package.json                                     |  4 ++--
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/components/doc/tailwind/csslayerdoc.js b/components/doc/tailwind/csslayerdoc.js
index bf307090f3..4fcc5abc54 100644
--- a/components/doc/tailwind/csslayerdoc.js
+++ b/components/doc/tailwind/csslayerdoc.js
@@ -6,6 +6,9 @@ export function CSSLayerDoc(props) {
         basic: `
 @layer tailwind-base, primereact, tailwind-utilities;
 
+/* IMPORTANT: In "styled" mode you must add the PrimeReact Theme here. Do NOT include in "unstyled" mode */
+@import 'primereact/resources/themes/lara-light-blue/theme.css' layer(primereact);
+
 @layer tailwind-base {
   @tailwind base;
 }
diff --git a/components/lib/inputtext/__snapshots__/InputText.spec.js.snap b/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
index dc881df8d3..ebd3d0795b 100644
--- a/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
+++ b/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`InputText when input has className only 1 className is printed 1`] = `
 <div>
   <input
-    class="p-inputtext p-component jest p-filled"
+    class="jest p-inputtext p-component p-filled"
     data-pc-name="inputtext"
     data-pc-section="root"
   />
diff --git a/package-lock.json b/package-lock.json
index 03f23ad902..952efec59c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "file-saver": "2.0.5",
                 "fs-extra": "^11.2.0",
                 "jspdf": "2.5.1",
-                "jspdf-autotable": "3.8.1",
+                "jspdf-autotable": "3.8.2",
                 "next": "12.3.4",
                 "path": "^0.12.7",
                 "primeflex": "^3.3.1",
@@ -22,7 +22,7 @@
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
                 "react-transition-group": "^4.4.5",
-                "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
+                "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
             },
             "devDependencies": {
                 "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -13031,9 +13031,9 @@
             }
         },
         "node_modules/jspdf-autotable": {
-            "version": "3.8.1",
-            "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.8.1.tgz",
-            "integrity": "sha512-UjJqo80Z3/WUzDi4JipTGp0pAvNvR3Gsm38inJ5ZnwsJH0Lw4pEbssRSH6zMWAhR1ZkTrsDpQo5p6rZk987/AQ==",
+            "version": "3.8.2",
+            "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.8.2.tgz",
+            "integrity": "sha512-zW1ix99/mtR4MbIni7IqvrpfHmuTaICl6iv6wqjRN86Nxtwaw/QtOeDbpXqYSzHIJK9JvgtLM283sc5x+ipkJg==",
             "peerDependencies": {
                 "jspdf": "^2.5.1"
             }
@@ -19133,9 +19133,9 @@
             }
         },
         "node_modules/xlsx": {
-            "version": "0.19.3",
-            "resolved": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz",
-            "integrity": "sha512-8IfgFctB7fkvqkTGF2MnrDrC6vzE28Wcc1aSbdDQ+4/WFtzfS73YuapbuaPZwGqpR2e0EeDMIrFOJubQVLWFNA==",
+            "version": "0.20.2",
+            "resolved": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
+            "integrity": "sha512-+nKZ39+nvK7Qq6i0PvWWRA4j/EkfWOtkP/YhMtupm+lJIiHxUrgTr1CcKv1nBk1rHtkRRQ3O2+Ih/q/sA+FXZA==",
             "license": "Apache-2.0",
             "bin": {
                 "xlsx": "bin/xlsx.njs"
diff --git a/package.json b/package.json
index 7b1db7fd2f..a2f494ad75 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
         "file-saver": "2.0.5",
         "fs-extra": "^11.2.0",
         "jspdf": "2.5.1",
-        "jspdf-autotable": "3.8.1",
+        "jspdf-autotable": "3.8.2",
         "next": "12.3.4",
         "path": "^0.12.7",
         "primeflex": "^3.3.1",
@@ -40,7 +40,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-transition-group": "^4.4.5",
-        "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
     },
     "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",

From 38aa10297df9494b57d67b5cecdd8b9573b4b338 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 8 Apr 2024 15:01:44 -0400
Subject: [PATCH 158/194] Fix #6275: InputNumber restore Android usage

---
 components/lib/inputnumber/InputNumber.js | 41 +++++++++++++++++++++--
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 53546e2872..98514e155c 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -318,12 +318,44 @@ export const InputNumber = React.memo(
             isSpecialChar.current = false;
         };
 
+        const onInputAndroidKey = (event) => {
+            if (!DomHandler.isAndroid() || props.disabled || props.readOnly) {
+                return;
+            }
+
+            if (props.onKeyUp) {
+                props.onKeyUp(event);
+
+                // do not continue if the user defined event wants to prevent
+                if (event.defaultPrevented) {
+                    return;
+                }
+            }
+
+            const code = event.which || event.keyCode;
+
+            if (code !== 13) {
+                // to submit a form
+                event.preventDefault();
+            }
+
+            const char = String.fromCharCode(code);
+            const _isDecimalSign = isDecimalSign(char);
+            const _isMinusSign = isMinusSign(char);
+
+            if ((48 <= code && code <= 57) || _isMinusSign || _isDecimalSign) {
+                insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
+            } else {
+                updateValue(event, event.target.value, null, 'delete-single');
+            }
+        };
+
         const onInputKeyDown = (event) => {
             if (props.disabled || props.readOnly) {
                 return;
             }
 
-            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+            if (event.altKey || event.ctrlKey || event.metaKey) {
                 isSpecialChar.current = true;
 
                 return;
@@ -340,6 +372,11 @@ export const InputNumber = React.memo(
 
             lastValue.current = event.target.value;
 
+            // Android is handled specially in onInputAndroidKey
+            if (DomHandler.isAndroid()) {
+                return;
+            }
+
             let selectionStart = event.target.selectionStart;
             let selectionEnd = event.target.selectionEnd;
             let inputValue = event.target.value;
@@ -430,7 +467,6 @@ export const InputNumber = React.memo(
                         newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
                         updateValue(event, newValueStr, null, 'delete-range');
                     }
-
                     break;
 
                 // del
@@ -1123,6 +1159,7 @@ export const InputNumber = React.memo(
                     name={props.name}
                     autoFocus={props.autoFocus}
                     onKeyDown={onInputKeyDown}
+                    onKeyPress={onInputAndroidKey}
                     onInput={onInput}
                     onClick={onInputClick}
                     onPointerDown={onInputPointerDown}

From 1d1e9d48cc1513fa7c42a77861b87cc440cd7510 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 8 Apr 2024 15:37:10 -0400
Subject: [PATCH 159/194] Fix #6333: ButtonGroup add children to Typescript

---
 components/lib/buttongroup/buttongroup.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/lib/buttongroup/buttongroup.d.ts b/components/lib/buttongroup/buttongroup.d.ts
index bb8e3ff0f3..0099d5f106 100644
--- a/components/lib/buttongroup/buttongroup.d.ts
+++ b/components/lib/buttongroup/buttongroup.d.ts
@@ -54,6 +54,11 @@ export interface ButtonGroupPassThroughAttributes {
  * Defines valid properties in ButtonGroup component.
  */
 export interface ButtonGroupProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {ButtonGroupPassThroughOptions}

From 9444569cff52011f331405114eeac98f8c58c175 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 8 Apr 2024 16:53:17 -0400
Subject: [PATCH 160/194] Change Vue to React in docs and URLs

---
 components/doc/accordion/templatedoc.js       | 24 +++++++++----------
 components/doc/contextmenu/commanddoc.js      |  8 +++----
 components/doc/dialog/templatedoc.js          |  6 ++---
 components/doc/megamenu/templatedoc.js        | 12 +++++-----
 components/doc/menubar/templatedoc.js         |  6 ++---
 components/doc/messages/customicon.js         |  8 +++----
 components/doc/panel/templatedoc.js           |  6 ++---
 components/doc/sidebar/headlessdoc.js         |  8 +++----
 components/doc/sidebar/templatedoc.js         |  6 ++---
 components/doc/stepper/pt/wireframe.js        |  2 +-
 components/doc/tabmenu/templatedoc.js         |  6 ++---
 components/doc/tabview/templatedoc.js         | 18 +++++++-------
 components/doc/toolbar/customdoc.js           |  6 ++---
 components/lib/stepperpanel/stepperpanel.d.ts |  2 +-
 14 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/components/doc/accordion/templatedoc.js b/components/doc/accordion/templatedoc.js
index e280d97b75..ae3c47fff4 100644
--- a/components/doc/accordion/templatedoc.js
+++ b/components/doc/accordion/templatedoc.js
@@ -11,7 +11,7 @@ export function TemplateDoc(props) {
     <AccordionTab
         header={
             <span className="flex align-items-center gap-2 w-full">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Amy Elsner</span>
                 <Badge value="3" className="ml-auto" />
             </span>
@@ -27,7 +27,7 @@ export function TemplateDoc(props) {
     <AccordionTab
         header={
             <span className="flex align-items-center gap-2 w-full">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Onyama Limba</span>
                 <Badge value="4" className="ml-auto" />
             </span>
@@ -43,7 +43,7 @@ export function TemplateDoc(props) {
     <AccordionTab
         header={
             <span className="flex align-items-center gap-2 w-full">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
                 <Badge value="2" className="ml-auto" />
             </span>
@@ -71,7 +71,7 @@ export default function TemplateDemo() {
                 <AccordionTab
                     header={
                         <span className="flex align-items-center gap-2 w-full">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                             <span className="font-bold white-space-nowrap">Amy Elsner</span>
                             <Badge value="3" className="ml-auto" />
                         </span>
@@ -87,7 +87,7 @@ export default function TemplateDemo() {
                 <AccordionTab
                     header={
                         <span className="flex align-items-center gap-2 w-full">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
                             <span className="font-bold white-space-nowrap">Onyama Limba</span>
                             <Badge value="4" className="ml-auto" />
                         </span>
@@ -103,7 +103,7 @@ export default function TemplateDemo() {
                 <AccordionTab
                     header={
                         <span className="flex align-items-center gap-2 w-full">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
                             <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
                             <Badge value="2" className="ml-auto" />
                         </span>
@@ -134,7 +134,7 @@ export default function TemplateDemo() {
                 <AccordionTab
                     header={
                         <span className="flex align-items-center gap-2 w-full">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                             <span className="font-bold white-space-nowrap">Amy Elsner</span>
                             <Badge value="3" className="ml-auto" />
                         </span>
@@ -150,7 +150,7 @@ export default function TemplateDemo() {
                 <AccordionTab
                     header={
                         <span className="flex align-items-center gap-2 w-full">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
                             <span className="font-bold white-space-nowrap">Onyama Limba</span>
                             <Badge value="4" className="ml-auto" />
                         </span>
@@ -166,7 +166,7 @@ export default function TemplateDemo() {
                 <AccordionTab
                     header={
                         <span className="flex align-items-center gap-2 w-full">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
                             <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
                             <Badge value="2" className="ml-auto" />
                         </span>
@@ -198,7 +198,7 @@ export default function TemplateDemo() {
                     <AccordionTab
                         header={
                             <span className="flex align-items-center gap-2 w-full">
-                                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                                 <span className="font-bold white-space-nowrap">Amy Elsner</span>
                                 <Badge value="3" className="ml-auto" />
                             </span>
@@ -213,7 +213,7 @@ export default function TemplateDemo() {
                     <AccordionTab
                         header={
                             <span className="flex align-items-center gap-2 w-full">
-                                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
                                 <span className="font-bold white-space-nowrap">Onyama Limba</span>
                                 <Badge value="4" className="ml-auto" />
                             </span>
@@ -227,7 +227,7 @@ export default function TemplateDemo() {
                     <AccordionTab
                         header={
                             <span className="flex align-items-center gap-2 w-full">
-                                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
                                 <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
                                 <Badge value="2" className="ml-auto" />
                             </span>
diff --git a/components/doc/contextmenu/commanddoc.js b/components/doc/contextmenu/commanddoc.js
index d22e937bc9..5ff31d9045 100644
--- a/components/doc/contextmenu/commanddoc.js
+++ b/components/doc/contextmenu/commanddoc.js
@@ -86,7 +86,7 @@ export function CommandDoc(props) {
             onContextMenu={(event) => onRightClick(event, user)}
         >
             <div className="flex align-items-center gap-2">
-                <img alt="user.name" src={\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
+                <img alt="user.name" src={\`https://primefaces.org/cdn/primereact/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
                 <span className="font-bold">{user.name}</span>
             </div>
             <Tag value={user.role} severity={getBadge(user)} />
@@ -179,7 +179,7 @@ export default function CommandDemo() {
                         onContextMenu={(event) => onRightClick(event, user)}
                     >
                         <div className="flex align-items-center gap-2">
-                            <img alt="user.name" src={\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
+                            <img alt="user.name" src={\`https://primefaces.org/cdn/primereact/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
                             <span className="font-bold">{user.name}</span>
                         </div>
                         <Tag value={user.role} severity={getBadge(user)} />
@@ -281,7 +281,7 @@ export default function CommandDemo() {
                         onContextMenu={(event) => onRightClick(event, user)}
                     >
                         <div className="flex align-items-center gap-2">
-                            <img alt={user.name} src={\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
+                            <img alt={user.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
                             <span className="font-bold">{user.name}</span>
                         </div>
                         <Tag value={user.role} severity={getBadge(user)} />
@@ -312,7 +312,7 @@ export default function CommandDemo() {
                             onContextMenu={(event) => onRightClick(event, user)}
                         >
                             <div className="flex align-items-center gap-2">
-                                <img alt="user.name" src={`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`} style={{ width: '32px' }} />
+                                <img alt="user.name" src={`https://primefaces.org/cdn/primereact/images/avatar/${user.image}`} style={{ width: '32px' }} />
                                 <span className="font-bold">{user.name}</span>
                             </div>
                             <Tag value={user.role} severity={getBadge(user)} />
diff --git a/components/doc/dialog/templatedoc.js b/components/doc/dialog/templatedoc.js
index 86ce319bb6..17a312d40f 100644
--- a/components/doc/dialog/templatedoc.js
+++ b/components/doc/dialog/templatedoc.js
@@ -10,7 +10,7 @@ export function TemplateDoc(props) {
 
     const headerElement = (
         <div className="inline-flex align-items-center justify-content-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
             <span className="font-bold white-space-nowrap">Amy Elsner</span>
         </div>
     );
@@ -44,7 +44,7 @@ export default function TemplateDemo() {
 
     const headerElement = (
         <div className="inline-flex align-items-center justify-content-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
             <span className="font-bold white-space-nowrap">Amy Elsner</span>
         </div>
     );
@@ -79,7 +79,7 @@ export default function TemplateDemo() {
 
     const headerElement = (
         <div className="inline-flex align-items-center justify-content-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
             <span className="font-bold white-space-nowrap">Amy Elsner</span>
         </div>
     );
diff --git a/components/doc/megamenu/templatedoc.js b/components/doc/megamenu/templatedoc.js
index 3dedb319f7..b037f003e6 100644
--- a/components/doc/megamenu/templatedoc.js
+++ b/components/doc/megamenu/templatedoc.js
@@ -73,7 +73,7 @@ export function TemplateDoc(props) {
                 ],
                 [
                     {
-                        items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
+                        items: [{ image: 'https://primefaces.org/cdn/primereact/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
                     }
                 ]
             ]
@@ -112,7 +112,7 @@ export function TemplateDoc(props) {
             <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
         </svg>
     );
-    const end = <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />;
+    const end = <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />;
 
     const code = {
         basic: `
@@ -193,7 +193,7 @@ export default function TemplateDemo() {
                 ],
                 [
                     {
-                        items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
+                        items: [{ image: 'https://primefaces.org/cdn/primereact/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
                     }
                 ]
             ]
@@ -237,7 +237,7 @@ export default function TemplateDemo() {
             <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
         </svg>
     );
-    const end = <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />;
+    const end = <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />;
 
     return (
         <div className="card">
@@ -322,7 +322,7 @@ export default function TemplateDemo() {
                 ],
                 [
                     {
-                        items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
+                        items: [{ image: 'https://primefaces.org/cdn/primereact/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
                     }
                 ]
             ]
@@ -361,7 +361,7 @@ export default function TemplateDemo() {
             <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
         </svg>
     );
-    const end = <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />;
+    const end = <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />;
 
     return (
         <div className="card">
diff --git a/components/doc/menubar/templatedoc.js b/components/doc/menubar/templatedoc.js
index 9ca7086996..d353b5bc6a 100644
--- a/components/doc/menubar/templatedoc.js
+++ b/components/doc/menubar/templatedoc.js
@@ -80,7 +80,7 @@ export function TemplateDoc(props) {
     const end = (
         <div className="flex align-items-center gap-2">
             <InputText placeholder="Search" type="text" className="w-8rem sm:w-auto" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
         </div>
     );
 
@@ -170,7 +170,7 @@ export default function TemplateDemo() {
     const end = (
         <div className="flex align-items-center gap-2">
             <InputText placeholder="Search" type="text" className="w-8rem sm:w-auto" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
         </div>
     );
 
@@ -264,7 +264,7 @@ export default function TemplateDemo() {
     const end = (
         <div className="flex align-items-center gap-2">
             <InputText placeholder="Search" type="text" className="w-8rem sm:w-auto" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
         </div>
     );
 
diff --git a/components/doc/messages/customicon.js b/components/doc/messages/customicon.js
index 08c34db751..955930c6b6 100644
--- a/components/doc/messages/customicon.js
+++ b/components/doc/messages/customicon.js
@@ -17,7 +17,7 @@ export function CustomIcon(props) {
                     sticky: true,
                     content: (
                         <React.Fragment>
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" width="32" />
+                            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
                             <div className="ml-2">How may I help you?</div>
                         </React.Fragment>
                     )
@@ -35,7 +35,7 @@ msgs.current.show([
         sticky: true,
         content: (
             <React.Fragment>
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" width="32" />
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
                 <div className="ml-2">How may I help you?</div>
             </React.Fragment>
         )
@@ -60,7 +60,7 @@ export default function BasicDemo() {
                     sticky: true,
                     content: (
                         <React.Fragment>
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" width="32" />
+                            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
                             <div className="ml-2">How may I help you?</div>
                         </React.Fragment>
                     )
@@ -93,7 +93,7 @@ export default function BasicDemo() {
                     sticky: true,
                     content: (
                         <React.Fragment>
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" width="32" />
+                            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
                             <div className="ml-2">How may I help you?</div>
                         </React.Fragment>
                     )
diff --git a/components/doc/panel/templatedoc.js b/components/doc/panel/templatedoc.js
index c343e7c883..cb57ca6311 100644
--- a/components/doc/panel/templatedoc.js
+++ b/components/doc/panel/templatedoc.js
@@ -32,7 +32,7 @@ export function TemplateDoc(props) {
         return (
             <div className={className}>
                 <div className="flex align-items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
                     <span className="font-bold">Amy Elsner</span>
                 </div>
                 <div>
@@ -102,7 +102,7 @@ export default function TemplateDemo() {
         return (
             <div className={className}>
                 <div className="flex align-items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
                     <span className="font-bold">Amy Elsner</span>
                 </div>
                 <div>
@@ -173,7 +173,7 @@ export default function TemplateDemo() {
         return (
             <div className={className}>
                 <div className="flex align-items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
                     <span className="font-bold">Amy Elsner</span>
                 </div>
                 <div>
diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index 1e7095e0fa..22985b9580 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -183,7 +183,7 @@ export function HeadlessDoc(props) {
                     <div className="mt-auto">
                         <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
                         <a v-ripple className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                             <span className="font-bold">Amy Elsner</span>
                         </a>
                     </div>
@@ -387,7 +387,7 @@ export default function HeadlessDemo() {
                                 <div className="mt-auto">
                                     <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
                                     <a v-ripple className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                                         <span className="font-bold">Amy Elsner</span>
                                     </a>
                                 </div>
@@ -594,7 +594,7 @@ export default function HeadlessDemo() {
                                 <div className="mt-auto">
                                     <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
                                     <a v-ripple className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                                         <span className="font-bold">Amy Elsner</span>
                                     </a>
                                 </div>
@@ -804,7 +804,7 @@ export default function HeadlessDemo() {
                                     <div className="mt-auto">
                                         <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
                                         <a v-ripple className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                                             <span className="font-bold">Amy Elsner</span>
                                         </a>
                                     </div>
diff --git a/components/doc/sidebar/templatedoc.js b/components/doc/sidebar/templatedoc.js
index 27f93ff81b..efb3998015 100644
--- a/components/doc/sidebar/templatedoc.js
+++ b/components/doc/sidebar/templatedoc.js
@@ -18,7 +18,7 @@ export function TemplateDoc(props) {
 
     const customHeader = (
         <div className="flex align-items-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
             <span className="font-bold">Amy Elsner</span>
         </div>
     );
@@ -53,7 +53,7 @@ export default function TemplateDemo() {
 
     const customHeader = (
         <div className="flex align-items-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
             <span className="font-bold">Amy Elsner</span>
         </div>
     );
@@ -90,7 +90,7 @@ export default function TemplateDemo() {
 
     const customHeader = (
         <div className="flex align-items-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
             <span className="font-bold">Amy Elsner</span>
         </div>
     );
diff --git a/components/doc/stepper/pt/wireframe.js b/components/doc/stepper/pt/wireframe.js
index eb2d077f02..b8893b0902 100644
--- a/components/doc/stepper/pt/wireframe.js
+++ b/components/doc/stepper/pt/wireframe.js
@@ -5,7 +5,7 @@ export const Wireframe = (props) => {
         <>
             <DocSectionText {...props} />
             <div>
-                <img className="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" alt="pt_image" />
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="pt_image" />
             </div>
         </>
     );
diff --git a/components/doc/tabmenu/templatedoc.js b/components/doc/tabmenu/templatedoc.js
index 5c14e4386d..a84e7da2fc 100644
--- a/components/doc/tabmenu/templatedoc.js
+++ b/components/doc/tabmenu/templatedoc.js
@@ -7,7 +7,7 @@ export function TemplateDoc(props) {
     const [activeIndex, setActiveIndex] = useState(0);
     const itemRenderer = (item, itemIndex) => (
         <a className="p-menuitem-link flex align-items-center gap-2" onClick={() => setActiveIndex(itemIndex)}>
-            <img alt={item.name} src={`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`} style={{ width: '32px' }} />
+            <img alt={item.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${item.image}`} style={{ width: '32px' }} />
             <span className="font-bold">{item.name}</span>
         </a>
     );
@@ -42,7 +42,7 @@ export default function TemplateDemo() {
     const [activeIndex, setActiveIndex] = useState(0);
     const itemRenderer = (item, itemIndex) => (
         <a className="p-menuitem-link flex align-items-center gap-2" onClick={() => setActiveIndex(itemIndex)}>
-            <img alt={item.name} src={\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`} style={{ width: '32px' }} />
+            <img alt={item.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${item.image}\`} style={{ width: '32px' }} />
             <span className="font-bold">{item.name}</span>
         </a>
     );
@@ -82,7 +82,7 @@ export default function TemplateDemo() {
     const [activeIndex, setActiveIndex] = useState<number>(0);
     const itemRenderer = (item, itemIndex) => (
         <a className="p-menuitem-link flex align-items-center gap-2" onClick={() => setActiveIndex(itemIndex)}>
-            <img alt={item.name} src={\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`} style={{ width: '32px' }} />
+            <img alt={item.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${item.image}\`} style={{ width: '32px' }} />
             <span className="font-bold">{item.name}</span>
         </a>
     );
diff --git a/components/doc/tabview/templatedoc.js b/components/doc/tabview/templatedoc.js
index 06253303e8..e5ece90664 100644
--- a/components/doc/tabview/templatedoc.js
+++ b/components/doc/tabview/templatedoc.js
@@ -8,7 +8,7 @@ export function TemplateDoc(props) {
     const tab1HeaderTemplate = (options) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Amy Elsner</span>
             </div>
         );
@@ -17,7 +17,7 @@ export function TemplateDoc(props) {
     const tab2HeaderTemplate = (options) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Onyama Limba</span>
             </div>
         );
@@ -26,7 +26,7 @@ export function TemplateDoc(props) {
     const tab3HeaderTemplate = (options) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
                 <Badge value="2" />
             </div>
@@ -73,7 +73,7 @@ export default function TemplateDemo() {
     const tab1HeaderTemplate = (options) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Amy Elsner</span>
             </div>
         );
@@ -82,7 +82,7 @@ export default function TemplateDemo() {
     const tab2HeaderTemplate = (options) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Onyama Limba</span>
             </div>
         )
@@ -91,7 +91,7 @@ export default function TemplateDemo() {
     const tab3HeaderTemplate = (options) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
                 <Badge value="2" />
             </div>
@@ -141,7 +141,7 @@ export default function TemplateDemo() {
     const tab1HeaderTemplate = (options: TabPanelHeaderTemplateOptions) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Amy Elsner</span>
             </div>
         );
@@ -150,7 +150,7 @@ export default function TemplateDemo() {
     const tab2HeaderTemplate = (options: TabPanelHeaderTemplateOptions) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Onyama Limba</span>
             </div>
         )
@@ -159,7 +159,7 @@ export default function TemplateDemo() {
     const tab3HeaderTemplate = (options: TabPanelHeaderTemplateOptions) => {
         return (
             <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
                 <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
                 <Badge value="2" />
             </div>
diff --git a/components/doc/toolbar/customdoc.js b/components/doc/toolbar/customdoc.js
index 0d38c567a4..1e35a43272 100644
--- a/components/doc/toolbar/customdoc.js
+++ b/components/doc/toolbar/customdoc.js
@@ -47,7 +47,7 @@ export function CustomDoc(props) {
     const endContent = (
         <React.Fragment>
             <div className="flex align-items-center gap-2">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                 <span className="font-bold text-bluegray-50">Amy Elsner</span>
             </div>
         </React.Fragment>
@@ -105,7 +105,7 @@ export default function CustomDemo() {
     const endContent = (
         <React.Fragment>
             <div className="flex align-items-center gap-2">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                 <span className="font-bold text-bluegray-50">Amy Elsner</span>
             </div>
         </React.Fragment>
@@ -166,7 +166,7 @@ export default function CustomDemo() {
     const endContent = (
         <React.Fragment>
             <div className="flex align-items-center gap-2">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                 <span className="font-bold text-bluegray-50">Amy Elsner</span>
             </div>
         </React.Fragment>
diff --git a/components/lib/stepperpanel/stepperpanel.d.ts b/components/lib/stepperpanel/stepperpanel.d.ts
index 39fd8c1942..9d2d7ee040 100644
--- a/components/lib/stepperpanel/stepperpanel.d.ts
+++ b/components/lib/stepperpanel/stepperpanel.d.ts
@@ -72,7 +72,7 @@ export interface StepperPanelPassThroughOptions {
      */
     toggleableContent?: StepperPanelPassThroughOptionType;
     /**
-     * Used to control Vue Transition API.
+     * Used to control React Transition API.
      */
     transition?: StepperPanelPassThroughTransitionType;
     /**

From 3f1e2c3a0f7c652c42227c0a176a8536ede98024 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 8 Apr 2024 17:07:37 -0400
Subject: [PATCH 161/194] Update flags to MIT licensed flags

---
 public/images/flag/flags_responsive.png | Bin 55197 -> 32017 bytes
 public/styles/flags.css                 | 278 +++++++++++++++++++++++-
 2 files changed, 277 insertions(+), 1 deletion(-)

diff --git a/public/images/flag/flags_responsive.png b/public/images/flag/flags_responsive.png
index 805d0626744ca185245dbb567040e842f7c63c66..71f1de057255393edad0f7b91ba70b629f54fc03 100755
GIT binary patch
literal 32017
zcmV*vKtR8VP)<h;3K|Lk000e1NJLTq001fg05dcQ0{{R3QcC4b0002MP)t-s|Ns90
zDb)fwu3igi0%NQ2pJBdafzC4n0UV8JeBm`x$2DsEkQg(~2^%m+Q)6Xj#K^+{V*vKy
zpN*vG$<_1@jQ6UiVN-#kxXDWZeANH|we#Lg07C!z1}s{gTcOnT)&L06I!M;z*p{1@
zvH<{+c18rcDl(i$Z@__}(W~L`^kAzDORe3eWC^jA5k(jVVOIvo!wme80sr3t{Zs+*
zGY<K-y8O@2{V^~6_1yZPnfYX1?-&>WlnDR-{{a91HprtK00001bW%=J06^y0W&i*H
z32;bRa{vGi!~g&e!~vBn4jTXfAOJ~3K~#90?41ci;<^@qc{Ad|C{$no#Sx{VP@&M4
zt+a&y|F2$_wxrp6?>Ok(9u=YeI6XO8nxt7O2V<#xaTGu)QA6|~B)>i?mj6&9l*r$T
z?nMGb@*hIuIF5Fq0U9T=Wnm5_T(sM5<Bb}{AhC55g({SgX|PPuNFA(%+;5^y6q})7
z3;(Y}BQ(VC*1uQlW((b_ww3n4)*RLOwLokYNdw1}#gel0x{cO=l~0+s{wx|B%hyL&
zrsy&Vd}FOa;PHxuTCrjSbma%j6=XTJ0yMxHd9?xqd>;kM*P?zJ_LUwDvNx>5xO;36
zkpGK7dplkP!5sbfJpG;94T8ntFc0)vF*Q2`oKhA=3bA5hg%S+{cL7O{d`D@3i!{Qk
zF9KI@>paotvf)zHU0BbazVdW(lr01Usg!7m{u`7pZ?lrHL`(Ez(5bPM=;={m4P0C;
zFMyu>9{Vxq$2jZcX`n<4pz@NBD+&KgsBt?MHVg}(OH-6@>`Bo;(BPG$0t*;)m8*nl
zwE7vyDi-vRco_7!;{x;@qwgkYa(zSe-3%p^$Fl;|ODr}pKqe*nK`6Q-iE=_-oa`27
zLZ)}aNCoaN;#Btd8(=3VN$0AAf;9n3Bgok?@xYtH2y$`onmLOYu}RNIQC{VQ_Urg)
zMADtRJCbktD0odnN5X*q(vb79HO}e?&gjL?K8!^X`<k8|zQix-w`6HxlA+J6N-nuL
ziLMD9axuzOY=#;%)y!DRqr+z$dh$=D)d9n&_{B+`ps;mJLhocwkb1zOLZAE_2+=VR
z${UXk=`=vn&L;2N1f`Pf=9sdQ#F|6%86k?Y1WU&+LSK)1q#28#<Kx8zl01-lgy<Uy
z&*qmb8>X4&&Ac2)iVP*08c{JI6IS%hC=+F8N{JRmSH3Zt_SqYtLGlPfkFL@uCTi5D
z&gryLq}G5XIpLew>L)r4(7+f);a{2=;N#k8^4LZbEaLvv7fFQwE%d=yO7ttEfg$QW
zxPc2_^=J@`9^g+P(VWvdqFx1PR;vjD(OXJHXedErV=00bFd%!^*9NPAvjkBfi7rMf
zidYk^NMs2>fGXtkp~r}np(A5-6qus8s5L{~jMN)oj=IU8iPobiP&NS{QF$)-&!YRi
z?1s#qDbY&6$Ps1FlxXEXC$g_0DbW%w(GvYq=$(;Fdx39;BGO1J0#}&<<F1?}V1{}f
z9hjnzfhSgb1Tp%UxW;=_fid<#kD$Fg_j4Q^2jQ-Kc-tV?hr;L_)6W?Fpg+AMsK=r_
zct=n#uscEKgP%f>pxqt}ez(&VX<P>VadMoCEg8t63>b{5a}`rChmQLykV17}hEBC$
ziuS3e)e;b+QzH<fI4@+WLJmTdN@p<n^nOaoyGjm}a|kulctj0Af+BFL12Jj_Le%&4
zmrhV)@~+UJs{$w(n4`ckgGqD8F-HMto1+FM)9oz{oNJn?O=engDw8ub+~};x&|NwS
zOX}qer6x8xEd`q9FQv%@O`b*Xj*8jF);@WBpXfc#YZ?p49GXs7nux#*-9c_kd@y_y
zlPS7E7e^1nokt0HG(csf2$dMgqf#ST)KOhKhibtTRU1j6IwLbwZ)A#^g2e`g#Kuyh
zr$>RY2+^iFYOJ*vh9U5bP|x*xt|96*o1P&GE$F#sDCm2Jwt^6aOMsqyv~r0SKns+F
z4+T(T7IoJbKn+>)5TF2R#HNoH3ZMq;@qtAF^g)pG^4ai#W1G!p*c6m-xhEz`-flw?
z<nH{#6>`kJy?xXekg^lowzMcZG8{Ui1{gXfw%YcvZQC3v@&FL2%%h^yVpM-KGA1+B
z<Q8X4Ca4KXP$LqfW+XxlNr;+~h3W$aSvAdD+(R4%8uO2Q6sQ?Z1*-t6qd8}3(IEDh
zK{|*{iTZe?8P(${MbS8~)shS|TS_g#C?2@wqpm(b-;>IsNY^S}`uGb0JFg&zl9~DF
z3qGforYrdROQLRtdY(k{FyhnzJbG+}&A_AHL@cCn7Y)Ah68Av`0l%6+B9+tu@cRBz
zHoGH6kFt|sEy)<VnD2Kc7!ur_6eOeEmNCDe!m;>6T31Nr3PLzcD-o7z#YupOe+<+E
zD_J7US;=8JRE-HxDVIl87=`Mv6gA;6Y6un^7$VQiT;BSxpl?5s2znP-lz>9GA|fYK
z5nEx&07AhS|7Y0zBXOiGKo2#D4f!WXIkcY;KNGYsN5?ruW29b&VwKaMeaK+NQ#JZC
z=tJd`V9FWGqd$?!$QC6!PQs7Brna?@EJP4|Gl6du9w6aD%6s^IkVo@H2J|I~sR{gJ
ziXFBfO5y+sTSD<=R+6x|<HEX&5c~|CDJMr|xn7^SOZ3m9fw7e62cZS34kdbW^yKAh
ziR!w0sE(fk=*d&oS3*A~3Qm4EEYXu^?h-A4is}=dXIvp!ER0dSQllQtmWJev;I$@;
zIJ!m#AkxrQb98ZV(Q1+==nTE^rt-_!{qY=Iq6N@={>evWiI!-ImgrxK=A}eG7JV{C
zUk=9T+#Ed|UQE!Jw7xbs&`L=3Zm*C^oU*YwIyXX*%DI^Vn0k3JG9Z%@{oJUZlYHkv
ziI!-ImgpBoKW4D-pFnM!df!!|b%5A8+8D$Jb+rKi0&{fBuXCHLv8V-x^LQP`a|cW`
z=mA)0@k=z5h&{u1R!0cSRuH6wL!nZP-f*L3xgNbate5OIq&|}u4n;^5p?aDDimQBc
zLlmryQD<j}!qCU@wITZaEc5{Dy#@@GWy5eajH1B8FC4mO1T89w&>djUaOiMP(EU)0
z0*LO`XuB>QiY8s5;G)$qHK-+gD>gtbr$<lz(5ghaQcNmBv@sV>9ugd@+Xunuej$1Q
zhoPwf^MhzAfDk<#xbi|~z=3SvsYmArG0UUJJD3)=Y`cMeIM<d>PQMhI&uZ*#Eq9A6
zj{Y!4f3(SeWpW`%3)D<e2eeEKxJth^(A%1@Eu&x!64Jm{V2rjvtJcOo&>GOXLKa{B
z#)wr}$Jkl`Rb7%X;A7A-SYIhvCHgTa+pd($A49F7&2PpjLhE1%UyM*dn*EIi$Fr!N
z)QDi6%+{b5NdEB~s>`)H*6*|RFb9sQ2cQj>p<m^4`dQ*7%9hQF%w3`-`Y+G|iLgXV
z^!K2D>}E87d3h1s4|y~hAaNXlAVcQ~gF4OC=nDqt==yV(Wzb`X`paQ{6D!acs*n2V
za2?O(Xf~7s2^yy$N9XuA_nAWFr3qKMl<3Ex^1Q_5trGoYXnyFDGGa@#L`$?pzY?mF
z68+aGzk#p>efI*7-@{ml;z-q?>B1vHKVXh<XmZ*2V4rNF{QfRQJw}!1$xv>O<3OtQ
zjoG}}%Y8NPfuK*b?|lXOPHzegKfKA&z1L5@595I`hm8U+NEaXJvl~=%u>~*NN5bz<
zEr?ijX;C8hq)GdeqOq}*Xc4r)z>pFRjOA}dPhJlEr6}7?CzpSKT9#;WR(v9dT6V*-
z@b2Y|phK3OtnrGsWw0B=q1A8@`tabuAM%P(+k&T3)UoZM<zNe(d~R~EVU9J#YrIx~
z)36;IeHw~Tblidfye8C&QOnM>g6surMdu(264WAsZGC7#EJR~JpsmS?47Ffb(dS`e
z0188501T6bP7~A~+VBH3=oqY4>lmy=(a=IDbR7O@Ck7lt<$z&w3PKQtPJ{0(bO1Q{
zavIr+RNA&PY(Ug%454S?CwPoS5sA(Xp+`}$>;`fjV&QL$)&Wgk@BtL9FusTfP!h25
zRj}3|SzQxrb&zd#1IO$!5e^%P0hv~WLdY3XDa*mj^I9mhv{vF3q$NY02DyUG2MZ+=
zXedf`7=>T85)`sdjJ|+godkua?F4N&sj<+KoLI>zr;(z>mh?DE;m4pR{}XhGnIx?<
zISZ?C@GHq%4V#1vMg>YrD2-ZB;}D-hIq#TbQGytv^aDNKz~8GkaQe4!{2ZN?UTkOy
z<anOmLc-<-M>_UUi0Y&q#PV;^{a$qRQ=;f5Ws2foHOk)s<y!H{<6mAkYXCe=hRpL}
z<7`cI2|~sPYcIOE6y-uBLy2Dv(0yuv-qr%aN)bJ}7rqs1mCN6X7O3bIT8z8^T5#R+
z0%)-%&I_Q$Rzo*L$y(LI%>dY&QL?V}PKQ1n=7B%I#_zc&(e(4!ReU(iyxZ&nuL6yO
z+n`r}>}TD$PjYk>OfIJfhgw@)iXt_Rb9hccvAGzXAI8H&I6N5G`f`D5Z2pth199y8
z*kTjEX0nl!dDK@oPEA1?)i-$!Rc5FGn4m@^LX9|tnrXzSF=?{+s1t5+*!5^iYS9*&
zeP@E!9I%az(7{pV5$(XA5d;1J;g%vJf{sSLUav7ysN6cq{DKbJ>a;hKtK5OXD@I2h
z<YKR*P&rN~j*L(bbx)xZmxTCS@1Y-fqmDvlhCXyg?kF+!hr?O9r_qPZRT7mnnnsVv
zN)ako$)Gi1z(uH1C5?)GDMEEBGgPlKMGaIERFH^7Bt*?rB2*UR0yL*mxqn|JuTl=u
zs9GhBYE)9Fp4?ZK#!{lEM|FJ-RMmk$w1yhiM(7S-O;Cs7(ZsUTp#^Nktf*#IP9*(r
zp!ujQ(Go4u68&q?yu9bzvBspYKp9fe`NxuSlq01mPs&gMDM9mOvN4_z6_P?!Oo~uX
zObSpL$)i$|L-S;A_da$knVe)$6`4l^6`4cxWXwv%R40w<$Rnz`I)&=V6g40TDoV&=
z)Qm)^Aqi1aGOiet%#!>n5~01?10zAe9;x+6j~>TzC?bPO4fQ&8^Jlz%{&N>1omvIH
zfnTw6r+QxQqYW?IO-53686$c<>I1qszG~X@lrw@xp_-)gs&f49v6HMry**y<*zwct
zXNohl)~7B;cPH6t=xm!gz@g9za<y)k{v<?^<GLwI-pWye)oQ6`CHhe7){++%4ba{W
zy<V@=>DYD`N)1D`8hUTr@Gv}ycYi==AECVr{qYc=Km5p0bk0Lvj)G3rbCfvG`QtpA
zrerO8eoXbOV&$4C3iLc?<Xnb|@}3aoRI-XIYLJGFc6_E#g-S}X={C+7)v8Ptf6$ZD
zJ7f6*D9SipBeZMxgTCE0LQxLvo1k6%C?V){4Nx0vwGB|HwojCrc)+%8GY=f)^k`r#
ze=Ew>wWU&`MNsFS2#8~FuarvUaOjf+jn_^shdxK41VyI?N3^!x$?T}Wzi0=p67-yW
zPl`eS5H#9=AM#*j&31^UA`6y4(vz3<dZT`MsYgd1tj>)3oz6&Wfakid)opZK?-;C_
z1F9rgU>(&m+Yk!tPA-MEzzzb$Sxy)|r>Ki$;Zi6Fqx1VL3a&tNo1n1lIXmk%&hG9K
zG^`ReS;P*)YKGo*@6g>PL7%_h=h6H7cH)6*^$g#MejbA*k%rsvKEj`FSBuuGolY0(
zZ8Wqfw1BLmbf!leE*h#jnbh>?y$#w!2PCGd(fclFgL?Wwjox22j_)-nEhYLX#=R9l
z3k{JgfPUC$x&o;AKqdp0E?<vF>7DId5qf0lt^Kn1`BIyxaTkZV>vHdz0v?~nManE-
z-wU+j?fo(fkMBjcx`%nTyC3yl<bjzRcnkjhKk}=N4E{kHFi%+qWZ_(3L>A1khGe1A
z#h5Ht4Ee0+yD|E{FMxWcXxe|QMyW~UuR5(6`)*(W8KC8v*y?5Pey3K1y<;EfP!B8g
z_FpAs{io1;$LT*smnu|6Do~cpqe@bWik@#7lQh~;lQgO!DYT&>DO5v7VTDsF;<jiM
zScO$8Qb-2OrRYdXM(OSZmAq08q{g3Ba!Oefb3^qiv{K2Hb7+Sr`H^pxOey^wZY!FS
zP)U{g@+$-2OvZ0ySZ|JGuRI(-k}O&wN>eggbILNQV5L5P<s6lwy@brJJe)l41p-k_
zCSi7XWfY3Yh}bWs2s-kA?Uc%n=y_+X9{5Y4hTv!D{43D{s35;dq(namJ^6E(5-m~D
z!Jj{k(P`TlZ3ANzfT<xm1)yb!4&c4k5JlNjpf-n2+59|}qIc8W{8%UNUe<uAM5V~q
zpNV2VV0^F!1RWTl>Gky}HnuG=l}CyH;VYM9I5e?x%3HvqKeG!vT4%|nL~+$&48U5@
zAYp{mGK|=yLh=^kJv&WM6UCKmZNE21qqst?@TgH-@%n+G;tKAyHd0(U9Oks*SGnQ}
z>0_tXVw}hnlXc7Iti{4wMlxF*D)wlL6)059FSN*1ACJ?}X92r>qZG}%O^HI%Q?+C$
zTl<E#E@;=PJdjr@+Fdb4S(WVvk+5k1Wrr&v`B1?s-?S<bYN!&SCRQeBF5q&N2sKnm
zp^ipnhC-Da4Va)t<U^4S6dnqo#w_ljD1e%=Nf%84)C4|ueHB2paIT+FoTsw9MIhS%
zPCKd4AYRR;fmwf+-RYAt${MtW$Lu9WD9~D$tYn*oPKEX`+f^%#>Ats`l02ehD6<?q
zqFsF)<f6bRwve1D3u1bu01Zf?S~5lTV2YZM1T`WNY6c?Il>DgGdWB1nNl;@J+gboM
zV-pV)KuzGIUkjjGI2T(5P<FN*lehN9ET3Eopi)+p2tU98<6y}_7FCgXRCC`l1!+`&
z<1{8yR1c=82}w{R5}{@wLQTnX*TlcJXJ20gXC<NN;7T|_Pl)>Bxsd`cV4pZjwPMy6
z%;OYZU-$%9gi0RviVQ$z3Vd+-t&t0$C(i|62|an|-&aCECcPHOTig+}w;=%Qtsb3U
zo?RZ$^>!+>TCH9j4)wD-M!^t%e%?F_(Rc+(yL;A!uXeW!h8GdtW0;|%#;96NZ>LF^
ztJUSKG2+l~XWwJAJSEg;AL>}^1|Il+cE%e(4pCY+)M2p)Qk3i1<o$Z_g3yhDU*%Fh
zx;;J0#)+aN{7^J9N3%qyN3-sHEgB`+Lp2(`f=6MIK4)x%5={pi?etm`c5Pq)3P0F@
z&<Neai${qMG#-c$wKYONLvk@e<<8-p^_5V0h&d0GD4Sg5^2g9^1ckqE@@P8xam_uG
zWKep5=5DJ(@o2?ewB2qa^qs97-BP;H=-5z>Zpc&9?Jfl2dc9#PP&68ma}jm7-b&Cl
zK83AF$7~8KPnbbU5f#Oo4e^>7jfkZoNS^bCN_3m)#^&hJO=N(Y8jufGxKjj+cGg<$
ztTYO?22l{FQ3)d!taqx2#ro14C>p7}iKQsH_8KNa5><*sm>>1b*2}pJljZ}ywlB)D
zTVXEz1RE$6Knrx!{iW#1Z^s2tK@4uADqCVp(m({91)EvKD9m4WH(yxDP*}P&CO|Oi
zg^vQ55$kn(2W)+8p^G=>E6^~AShO|Oa0mE^<<SOYp%EtNVcxJCbN=w@(?9`KkX$74
zx1zf0ofia)Bw~$84f-DR-7MiKQLmq=RHN@f;L>SPioSb&k5YL!EM(|=I_*0ZSJE!v
zReC{Bh(Zs|ayiHi`r|tR`rhw*xvaGag5KSo0QG|Yf>lWtMB;+ecUhI4q=SO9GOyB0
zRI(`R^us7qnMZ{l>fQ-ZfzyL=t~13@<q?I!8SzfP<58K@c~t6j7F9T%LGvj+?{o%L
zIh{c@9->i|)1|0VC5?)lE=G~lRVp*o0AzxtmWpgkA`xoLqM}&3gAtD!DozUc0;q`*
z$J<5$RI505Gb(^m%O{C?pkpB$#r$wp?ryjyjkj>a?aUy!abl&grMG6Md<t%+`1)z<
zRE2Jc0c%z%hpvr-m0dK{q1<UHD!PXqrD6)wsE+&xYtiVz4_sWt4E(SaLj;LXA|-ly
zRGIVg*|0=E2G!pMvzt+go*XSu68<gdY`L86XEXR_2H$A3qHUOb^fEIrV1ZOG3~eRg
zCwCSuRdGu3k(6kOekrtZxK+@!RP2K(TLHuQ;b4dY)PZb@0?UXcx8vb)nL|bYYjRs|
z;3=0zDC!)a8K7afiI5R<ZIvtxf(W(9peLU6sE;45LL*)@6}^oYEODz$X+#B}C&eBf
zo4eia`2KwAZV19Cj<KIs_<5nFKmpkKLEyokDoCPEj)H#Rd64bnh~s<zX*58f7c_|z
zG+L1XUZ{30_G^TvnpHIshEehWa-)s`x~{E>*CRSS=#p%T+SGENYP7CT*#t%T#Vl_b
z76ldKyuGhj=A}!4GHa785Pe)S`Z;ck7xs-eZDxh>IFz9G&sET(P?*QAq$>-5hi6kX
zBHxpt_xIN^Xd|>0uLu8=FG8FpEV?U25-gGYYqWp?@b7<47@s3_0M@j^DfM@st}q@a
z&Z^NXjNdaCsoaBROsz29q7=gn>Q|f13=Lyuh4FS6M=4tM0nGC$nvnNkwMq{C0O!e}
zu<3)Q-^>h<3ur>N+3%a6!1t@+(N-l201A~Mnsb(1rm5)B1WrF_7R~-P{g%By{i@x6
zDJsAFad$)G#|5$RqXp9Q#2j247K;P>Og<K(!NLpX0s0D$((K$#*3+JQ^pm-Gm3Dnm
z2ak6;hD>|OGCLR9jn-RaYLnY>9-Y&7%DE6dsy&j~GqQM<LkZiR<Zi%^^`lO@M{g>T
z_+OzCHeLx(A$uhAy^o5kvna>LD=7*XQJ@T)KPP!)BOv)sRms&gs7`AvBSpQs5>nU!
zEHYGunrV%Nq!`_CGi;=&SSqp<%}a@%9%VBrKrLY5(meun(_A-&3()f9uIg5I0+vI=
zb=8N}EA9!W5OpEynxV#8iLF%=TVbPey<Tqw?keKflc#|aEr9Aqj!<Jr3ZtSG86~K2
zO-Lcy+8U@OD2NTzBD95WD8dCK8FUbmQL(FyaJ@?!{dw2MTCLw~E3`H?_Q2gvPo}77
zQA`PHB7ZBY>&2q_vkIW4tsjFHC<zY*P-7Oijtih>aN6cBfEvJ5OTGZAgPHz;0;sBQ
zneTOw!lDj}0;oi>q}$^Iw0?jGWFUurKpIe!|0KO?!Qy$#1T0t%n39ERZx1=iM`iw8
ziT*)!J~u(<XmMNITez5OQ1>uL<Kh>=9OiP30gD6bcZ7d)y{#!~5G;6c)LUwTLI|QL
zcv{rOC@#8ms7La!XA%W2(&`$<R$3nZUi9RN@Gn3Mbkltl%0KWBAN%6y<#iliUz(ub
zZ;)qhzH3nguJP>f8#Vg<8i8TIA0qfgj$U3T<NNz~ga(AK#b^d%aVEnFg7au5)HDSL
zt+@T>teG@G2^f!$B$SCbxm?0)#QXht=s3e<7(mP#a5ViorU%f+(qLuq7)#7}RuBc)
zWWa)wh{a)GKvi;K4}Q|5tw0Nu10R9j7|REtyjx_#qdx`?%mxE~C<%uGFbqKl3;{Pl
zg+W`OIdN>T7}^kbRA?JahW5~IbQTU+gdvclS0Fq9>(H?~v-u;i7N9Ld{|7o22w!G%
zd$hQi*#L}k_R?qz3@z|n1(U^M(do<qXygW-&?p!+Hu1`@zS-B0p#CzSg(FatprHkJ
z%co}m&a1P-%Qb*rxDui@=p$STtzoGd-~!3E214`-IUhd;2>VSRzq4o`<g|_~tQFX>
z>WI7e?XV?8@52t!YPFs3Jz{{wRv4@WR&^LPE)N#G0=$aE11;!*#r0x#SilOeJ30)*
zq0Fx^RUMGEVaLUm%;m8KqiYln$-Wpvr#%eAT-st&)(A#DXhSbJ!-Fbi-QN#F&=|oG
zHNb7CPOr$hXd^(FrT{nkN|3i4l(*Ujc}p&*FI`fP9LK$(VpmuaMh=Hc#wu3gwZjaN
zi$V#CP7Nq@y8|)<;Mr)G4Us#?-;<;NJC6WCqYd~W4^~#OpdQD|f+dq&e~bpj7ue$b
za8Mh7(fH}<h@v#=fGP<VSVy%qSQveJifOb3c2VjqGDI#xL!=*S4O0|^5j8~a3N*JV
z+L~WHx{s^*AVI?_Gem9>Rui;6?oEGAr_*7ArbF_M$)(m#P{(uK?qF)C1}K~rU-aD3
z9IRq3x_KG)X7l;TdD&>Sc3{CVhuL?hHvo(~(5Joec&I_IUvJ~52^hyWx3AY~G@ien
z@AvQf{rM{yL9D8fyzF0J(Qh(>SY3B{xjtNHLyb>gc`DHoEr15R^zbhy0<^bq-NhRZ
z^Juj(?<_`VBR#tK70s+&r}L}I4z}me=vVOAcI=>fqt*KSE10f3-N4tQQ0v><`y2YN
zL;Js?-QBdY`?b}gLBINpf4CE$dJ0{MvZyoQYj2X8<~m{N+M5JjCM;chlc0jyn|y-9
zbA-;)wKpk>fPC#uf{H3n5>!;={Cl*30qBLUy&WelyryzQ`Py58zQ6A~qu2K%DyY4s
z=-cZg+%GazRC~+Nw`TM4h>B`&nE`Lr_1l87RVJ^mi`(X8Z-(yQL1>1;iqpDkX22WT
z8gIOKz0{#@eZPNv?CkdoPlE=*YyshY{W1t#odFQ3*B3L-)7yHFABA|Mdjph_zZE@s
z`T8%>cj0E20`x5qZ_FuLLk$bBm|sIJ6;3g~hMHGL{%-J!*)`OHG<jZntYRAVC=!at
zD9){+25Td=TDO)?0>UQq=o<-mb4aB7Em2EZQOO6KsH=4$e1D(T^>S$Dq0G>4li{~|
zdi0&v>apnkWo?*NHod&9i3JUep-z+b{Wr4fV75)_(F0hqhnU2KOD2NpwdrUJ+LyS*
zpd*2ct$J$fh>hBO8o)7&%gDORB^Xi4f(>|4GUU?hn{j$ggD2QXR=hr;Y2K2_>Ct1|
z0tiLeh&nY&trWd6N9i@b)o3W56~m)j)T6lDMF!}SeB2nI$z#P(jl$F0^dzi)VOL1d
zc)NswPf)b4#Y&3eVaudDEygCVrD!u|L~bif=BMW5P;S}Zo!nW>o-m=xuerWoT@+-W
zm)h8h@jf9@s#JxdSs1%Go06|fuaRLQ#EHuo-I}AOxquN7da5Er^k_j+(Gxvdkf5SR
z3lcHoS=;~sAOJ~3K~z-qXhDVw9xcdGMdS2}eikQ+&Ft*3*>6(85=eTojVcdK6SVs{
znlIeU1eF0lZ_%@g$6T-+5a%8(q%t@g+zrksl$w2?Yn-z7pvGw|Zk(=GH?!61VwIs`
zmAvH}r}2~5@4Nk3hNf@$#%a8|fyKd=GC(TODF79PK#%^odprF6d3fvU(H1z&9I!a(
zwZ;!;)3ZjSJH3o2N;I}(zdr?s1DN*XUaUgT<DT1W{p_AiTYcA4qWArN#~pR2)5gqA
zQlhG9)^uIhb9+N=u%KL7{l1lT1D(DZ`7vm26r8v)Oyncc+LbZd0>&r+S0-pJeS4+X
z+9K~-Mh2iahPEb`H$VrFBWks%gEY2J6|tfMUMwYAqJQpLoJ2~rM2nyg#!{lEF9-fo
zv_N{@>zNESW^q4Z0n`jmdmjs+1~Ap9sjRqwbT9GA*Z@Z81P!;;Ypx*D*-s{VD=Pa(
z03PXXRt0K7rTf$X6<mQQ;Kj!iz2XFAMVJT)Is`fpp%VbH@mNcuU6KG8>s1nT4AmYD
zP-GZ*7J4={Kn}*qHcbhs0^{6{PP&rN6g;9P<*PACP!kZNW*|aM$xm=IIytH;B$#Y?
zax|aPBjFlXNiLv20B1TKNCqJ1QQ$l-7LQUkhjwhou||9cKZkAr8mjMfn))%&z;y%H
z?RRE+bmP9izr(*7_uPU*x6Q@F+1*3k)7u(@aQ5xnqHp4X7%iYF3lvv%h$I)s=*d%7
z0rccK_G8cj-E@-Y2txG96h^2ai%~O{phj?tJ{hEeCu8=AYT*=(^lXAgYrWzGU4umX
zm0SoKIUq{dXO*+ky|YtV=~uGnR;pLV5(ChTr6&zZ&<N@TYh4Tz1Dpu{8F>IJj3P6?
zn#AlsNCO5*t6~ZsQMr$pC@=sE=U6kcQ0Zb!eiF1+(_tCfmOd?I&?^+d26`d-?Hd5!
z46Hx~wA$?}_$nEBoVOJV&>5Vd$wLdJ4GH?Kr4L(X0N^JWO3-iMY5=|&p;z$YKMW1f
z%jr>*4v(aR;^gSbo%NMazIO!8WESoJ@E<~9%VKVX{`&Rn8ZGakM}J-aieDG;uN#hK
z(O);Oc*T(GS57a3!mIy^<L~F&7`<W8e5Uw?W<h>G+e03jpvqhLy7Bkd?}-U{G*>$y
zZLt0R`>(WFM^_yf6f!rjb&URE(cF~X7j)I@*Kaq!umSmPVwvUE;v2+Zf8AU&E7dd3
zLI&RKgNuupk1sX~&~>j-+`h7I6+|q&`0L`=&CM_Nj3Bu{Yj3!y5~BO6aU%Q#8RpZX
ze2GUV-CS2fiGE77-8MuA-Iisq1t{OF8DG|-n~9*g!ynpr&v)myjuCqO>-unOr1kao
zxqf&vLakY+GZQUF&W99J8{RVll;|kYFOGgp1^PdOdVNC_Z8g*B90dEki42&1zdQ&w
zZ{txnAd5b7Fo*WsclU1Eao>G*Qay+IZoM@fPwRW%z}CwFa0XX(?l|889DILlJU))T
z2kZ#}dfmHwdv%S_@8@@ScfaZ;XzkbNarM1tfIjv|v)QZ{jP>Zl*`s$IoOQY5!Y=Uo
zwdm;SM^OBwsL0u3DbdrTd>uu$=ZOG?+z<$05o&`buz6OnJxk}CwXtd)6SNKs!Tz_p
z3Ho^Zc>7jwnAqC9wc6Hg(*zBhw~gDTkq2aQ`ZQ3Y1<)e<oHp5+R`PvLqbi_hTE$Jp
zG9Zn(N$qp0nQ3($Co`?$wW81dm|j=xHlr;{NU%ggP-i+IYqmRDbYOw$8I*5iaZSZO
zr>(&>L}gNVmZ0dx3A342)WRaI=^4q3N0iy;ltzbPxY=Y{YtnsATZ3<Bt+TUk_cB36
z`<y1I)4Dw@8i(6%f(rIIZIgXYTd>*JX*R22@+d<&C+g1byKd0E)1ywyZj9_vt2NM}
zHCTFC*3j~I<f)6Q2f95t^BZ-)F(Bzzg|4ep+xJHU(A1%JI65ByFmPa7S%Zen&ZuF*
zkj-YH2Caow*sPAKmK9#<Y=!jTs&$n<^ErLb{>f3kwIP$ryPiqW<MIy%=-yB<=~6UO
z%&cr-fSM>~R^c#1wQ#<tG_fK!KoiAAC|2ypTx(N^Ld9_`RLk|jA4RKGN(u~+k)q|+
zFe&h{42}5+5gLGA_FS?MpvTvD4Vn|r9HkZO*URwC(M++?Djc3UN)(%}?eSh@9X+qe
ziXrCp^3xAJ{D)|`L(5=ncfx%ubLer5W~4@w{Q!w<l{;tBq;Qdi3}r`%@;0O>zw)uP
z!N(60-pSA{hjP}YC`a;(H&i6Y1>gP$DE}y7BSU#Nazk-bl#d<GCs_@ibtCWSV`V>Y
zEoW(N6%Lx+@KKWMdD<zi&Y<x&LYg;`KqZT+r9>%o<@+ni8x9SERsKz!y<rVlE~RfW
zR9hYMGE`G{^WOFpnys)U1ot^~zkd|M$*N>|6v8~1POM^44nEGn;!y%a4=r;bjrOR+
z9qjd0CwC`2qCwE34le_L$qaR%P@h^|3{@U|DcbX63dLzahVH2q%idSe*wyM$hGv3d
zjd;LQqxl7mT?N`<W2+-Ug%$XB0V=KOzcZ+^N$^gg1#*E|=Auy;OW7MX@3N@6Aowhg
z7HYXiMBQ5MQy%RE)Y)3ld7wYpIW!0;wcXr)UUvEkqunmlnqIZm?FOBioqi2|vb)_B
zt-;g=e|qF(FX+J!sX-n-g+F1f9lPgsI*AG0PRHxmskPLn#MVcb4wm~!2g~g;!OD4n
z4puD}EO?zBb@HK;^KvKABH24sBm#6kU(Dxo1$uj%fQyCex{DbPr|AB6e@jTRcc|yi
z7ZMbb`~B_hVv*%DkJWoL0FnE5Do4696dDUzdgoGaHkY8t-uGNKcjf3UgL-ll20xE3
zj8TOFkj-t#`o6eTp!9?IWckT78rd|km>tQi&=#YIg`1J{Wb~cb0K_g_FYr8fLE?44
zzm=je31Z1YFV}jQLt33)^}_7<oUd;yH-|3KFNO{+U_GKes<dc08iviq#6eqOY0%*#
z2>Z>U)3LPZ1YW!e*-1x_j?kusy`iN?hmV#sbSBoL-T+`9I*!wscTAi$S~%8XVc;wT
z1BYyarANO`a``*Zy|Gko1&bI<(8JsUgRve&%LUI5jS!g7uu}SRIJkWS8rNT8@$Us%
znpAaP$bd98oz{xyWGmpH-vpp7rn3t4Q#R5K(T;$o>e|=GozyWsd6S})Vj-Qc!N26T
zXzw>eNI#0v_-TH)rE3qgQ@C~kR6Gkf8m*KfXhQIV{*c{Z%%RW(jznr7Ijz^s-t#1A
zZ@jHf`HSZxqr#~4a$GKoDfER>DM~m;6sJTfN1>TJ<q5Hps=QTmDN3RqxkZ%?Dp=(L
zabTd%=M|)K67s22fX)wHqpXdJ45Q)#qo$y6*1{itbo*aGlRJxTB@+R3D30l|5sJvi
zp$Qre!?#DghPeg}!-j*F1F`K;i`MRcK-9Uvw>dOdx`5Dz$85L%zx(^kCiBRELGieb
z*j=GbjM*6(ENWl=?|W>=@%?2TXwVQgxMvqH@YRJ*P@&HF{oQ+C&fcL6lv*dR@4fNs
z>wf?G+UvcJ9R>P|_l16Y9lxRfuX_cmloBn1-Wf}Yo*o6pl0#e5+@vXII+db#cLVz4
zAYb{<p@W2M5AvS{Xd-P!yAUO&IzJPe9Y=~z@7g)-KYvQmI|fw*OD(5Q10`Aj4aECL
zF@mbrc!->q#g*`6G@Wpxom7%XKb53yqfngG>t~g$9VAhlK24gT-p8~#AXJ>5n<pKW
z3z_0n<$~(dbVYCqy7}(URI$fhJ4pMXk3FS~Vn$`YQ#GfURmt|hW_~+*NZM69H||(J
z<l1|(M+-d5lK)(*xvj<?F!!r*Y?-G4<CJBbUb9>vXh^>0a)Ei?Dv)E9DszepmM*4c
z)&np2F2x_t&>ug3h*0V<L4RDKJ7)U_gXRxc(l0;!Xn`wMYwmDnK+9=g2@IePXJ{L=
zey|4Q4<9{n)oSBS6c`U24_A(d25pB&sl#coa8O%6*kI9zG5VtgD=DoXR|DsYMw!Ej
z)+;p4v+d+j=I}ALu3D`t)_~mM&oxT%_o0~w%JlkorPl{uavnGe(@mF8AWS>9ME@-s
znxdQP^`T>e4z2kNRzyZ7T00>g7@|kR5bUlGv-x46*J_2$`5ah>xdz=dH^4)~A)K~7
z8EUi+&Ncvy<_8P5RMqGRwCdfv&Uj#jj~aB-gw5y9*>u_tby`8k9ZZ+Y0dOaJ4}_iG
zU^6m`E#$9F_;u3j*GK=88v*7}$}`zpe8!@M1WO<U#WPb6KhdimJsj%uL%p7&aswb*
z@6N-U426F+2UO3wjR3I$;UOGPk0{!uzQ%6^NYMH1`(1|0cBxN-bsJ`=beDRfH4OKe
z0ngv>^JuyeAV!Dt+gr+3iD1-S-0t6u(9zG){?-6}d0Eb`=WqMP%Zna`>|t+$&JepW
zLGP{WmzRs>{&7S|<wGm1_vPY(kecUPEtpj8a?WXnp1kv~L<^w6SVU-OzPJb&4uF6a
ztnCqk>C|u?67cSM?}i3EcI-zZ1IV?_&;rY=$mH~CphOFx!Z;LFJtRA0=upQPZP$#^
ztB1A`+D@9_j)7Lv2hlb%;OeMThdw-9rJJK_(Ds!B4gP>AI1wu7A(3p2dK#3PgRDd2
zwJEx$=B=vGFq!wdG0}=9ltw06$$VBrG>SL7Y_76KYx4KIqu}FFVbT<**AhKBDvU#M
z#0rkJpD)h&Wp#xs;Ko(35-cmgqt0>xTduKXgub11UN6o~42Ykn)3?}Y4d7wCjbdJ@
z&;!nH$6H#i_xAUq`TUcQN@X@I(ZXmbezYJ!o1WJ+M0;VgHyP_u=hYeZn&9nLi#q!^
z>(XvEoj1N?okJ%>x9jx)>fzOD9oB1`%@B<()}gP_Q?QKP{hoUWzy|B>bsGf1GJ1W}
zdSJ5O`GFsgUk&^^ezmIAAyTT3g3jY;^k#jPMEGAuRZ@8<fIgVQxF{}wnz3mCUjP-?
zZgX<HZ4^MYaEkuWv+0BOwq9|94$`OPJGmsoBAlds{_yaua@JK^rD~~NTp^bS$1xRB
zmKcEaK4?gS{(w4lmro6Femt}sBM)GOc=&~B#G1ucku+eCwEjVQmHUW^0t2vcjx{3-
zl`h8QXWD9ZXp@Z73_%Bk&E%NHq9K|Zjivy(RycEmMc~dtH1(Ps4QaGt4d;z|8{S_R
z!D122(aQp&R=qK|tOkWzjYgwxFFdGV?seP%{&c(rJmD?uIy`3`QM*xxC<yuhjG(&U
z0RLt#0Q~?!wBE2Y)ImBMjV@-J$*{;KCcBLW(#xQ>-2fq-eIEJ%9n7JiUPtH<vJVfz
z!^8j3!XrWL0YC<!^*S9aXb-$p!+wC5&i?E!K3J!N1)Tc4ZX>~3)4vWn0?#<KUoEWE
zZcK8vPP*_=!%CE95o;l`o7`3V<e$?;td$m&2?{Mh9_Z&#?16cGm`582=!2l&&pWH{
zHM;dfBZu1XGmMiEJluJY-q}MJzIGqrXBhvDgH5ADcoDQT04zBhwFXpJYcw8EhcHTB
z!y%hq@qAhE<9L0Xc>8R6#Ya64>3w)`J@|urc&)U4&Y+;#!)Z7f5r<raD&0aflPgr>
z^TMEg&m-e);s2fr9R}WP<`J3Af?y~|?fGbwI1yMQcW%qkVZK|yQfO665p=JS<1lOu
z`c4hlR-+!ha*PV4RjN^sS&T-CGAb1)QkfqHKNF)wrB$C>^>moJCtiFsu@WW$D^&^G
zRRT1%vTmg)ROzqS5kFMG>nOE2)|{w}xxqpCfLr!qo~Y!}ye}K|OeKr*zRXlIC>uSr
z${eazNuwH-M--`?H=u{=5|tTBR9bdpIG3nQ(9}vBm7Wrn1Wm0(x!!3=R3bDB_`G2|
z4!om?RU(uQxNS>SB9!)JL#`5`YF|pxxm+cKs#NAsg_R7dCF9D}SUx8@aEwt07^A>x
z8=`Gk3ot}sZNV8Bp@Shzxq^TRPzNUPy1)Vf3Qz{O_<-?f8<(kqfbl56nN|=m4n=_?
zSzU{wQe)wX0>-0waS?QXVg1FTj&+!m`AS^CSQL87OXfDQ0b@`YsB|XPoQ*LCbsE`Z
zGjHy+6llw#rlq+|!1Acm3@GUV1sdizb!!f!=z!h+EtH~7h79@&52)mWP`q*hZaVC>
z=srRBS`;r-5Ab^RS`<M5e<3?~hh82>GxYYZPN5J3*bH*y>?}YGn%<VaCMZ=wCFDzb
z_An!_GpSa1(OGxyLZ*(O`r~Xawbfm?!P)e(zHmq17VgY%NIig3?A_FbH!&A}EwN@M
z^ef6&Q=DsD{0~wtwztv+0R95l{<1OIKn%%WE+G?sT502@-5mHg%+Lj;)Sq^{GoLui
zwt$1`looc@9jxeFPO;KQ`~^t;oF#rmZBN+zwQ(T@<Eie}T?(BpX0A_AXXrT4gwPp6
zw0;Mj>d(k@#S#2BbI)e8S%RW!&=6S2gz4G*Y%%TPEe;Vrg|AR)8nqP|^u`diEU^dX
z!Q&YU`eHGi1ydMZ3m<+ZK^-(K$;r~d0&g_oF5o*XRC=j^33S)d15;=j^cLC@apdAR
z*NYT=I?6O<vG0AX(O)e5484HzbTPYmdODk;Vcb&`A|Dy-2R`xwjOPYSGIgjG2H5w4
zi}<PCw%d)m-JZ?b?NQKePyKd#8g!@KQM-NCMg~Cg$@6{x>E~1_tgY=fxwj3_fB1q6
zIPzL~nk{GkjqhEg!OFy8OYNtNz(b)}9??V>me#b@&d?_x*}7c%PY6mbhTcuv<kGDp
znzwa&)J^#82p<J<4;;G=*m9W2v4v5h{|fcU+~IU7SQSd91AFOgV+Hz7rX=svS<G@Y
znIitaPubss5(D0YeL6K-9W01@fkChW&qJq;oJG#Q(;t2d>g}l&>NRQLomv}Qmt3e-
z#D7!DDp5JAY`W&#vEt#IVl?Eo>yV-Vti{_~h)~I<8DiAPimaliw}Pq@>J-z}$Bi0J
z(SE269zmP_x!=?U52ML@Vudt#1bzM4_&G?QvdgR>=uZpQva$#A5-TcbAWS@6H|#+i
zW_{!0El&Uln(@>IRx4fy33>G(5{P<X+!{cMfrr6CO-SOE0z9zWJ)iGFZzxxpprIEu
zo6P`s__t(Wy8Zy<&_g27mRy@ci8#`0v#8?Qc~p7r9IC!Hh00vXq0SFIM^IgGj;JA6
zaAV*}+ELfm<k`y3n61PS7#>+wmaU*s)=tV!R4girbL?7)qS4!Fcd{+oo`^!xSo4(a
zN`~QQPoycfA!F0q2F2Dzdr?s+Dux<rmbw|iR;rSv?^~O+2OP0{#N}>rNA}>zx0E8X
z1_L?E+&FhMyHlc&%_4cgu-xr<CruFiojaF!HcAw+$HWsVQCZ><RvpBNM_kL;9uvfo
zl~qUtiAP#@3Aw~0ujYiu#N%LAQ6pj#kE-&tKC(l|s_R)t)&l36DjCgwx+(QF?Ueef
zKQ*OZ5G;Y96KzTyHJbIsqKEWq1Db*F?;z--o}esPXi9y$<8wBp9-`Hq7kDm2y%ZHs
zsc-ratwPloGcQFYQ|htSYCt-{2r8RW4}%45z3_vXo1*-b`g=U3-ol~3nNwP2annMm
zdvlHc_0?z%F|V($sO_iQaJi3L{%BM{(9)n+xaIk}Pp_}so0+tV+@PjK@0+*>AV_yX
zSI!a-gUnDJdf)0dvt<@O!Ho7#iHb|bLMSZVu3Gn(Fs~0U?^{>*wV^_*g@3QE?l0T$
z_cB|&n~}<W?eg2@<+pqI@;~%ayR1o3=NnRpG8Fv1s@;EU%MCzgI?zmFFi-@mb$MTd
z$>$3H!grTfQUi`?i=ZtjnwkmygiTQx0KHSYLb{Mv7_3W6iq<ZnuOJS8@8O&ODV&8I
ze?QC_AVa~o)K3oPYtC;-F5-&`4Jd$$FD5jg09x8wHI}bFi}8=6Zl4((=ymdt)prxL
z<9lAu%I4mqip_B(VcY6?p5I9gn0Xz~b-hk9($w+#M6F|y<K8T@)p5OQuLCOpZpXm}
z_0eK$P6yUn`kh|SbDd+bAlvV_{a)Yq9MBB<{h$e)p5L$b-A+FtGY{Bqf7I(&J%9_Q
z`^(G5J@DXx5rkQ1wOw!2@AUh}f};;Vj=WhGT!@~vpwbC&s;=9q=25iY0FoABAZncf
z@XZ3ZFg(2+TJ0ea`}{01;0%P{!0rAPSgz-RDB7Xl9q?QqI{VVeq3!k=8Zr&pjtkBS
z8UeRsfwS%zR-2-&vu+#Q-rnMUBSr~&j$GTlv#m241!w3TWG66uzIBdK%eMiToDK20
zBl?Y?k0@l-;2NX-st;RS-9Z=R&=y+xVEA_X*afcNc5Q^VJ+}=n*UdRAmD}5W-CwkO
z-mKGEcvWZNg3B{1DN^XL>jxH0kyRKMy{hMeFqi=`3JpC#k3*~n6OL<v!KEuj!6Rn-
zP+S{KzMTO%ik=K(7LxYa&&#0##nN_R;6eB7GQSy>BFEacVpy+Q{&G|>)mw}XhgLG+
zS=ptCR9bz{Ygz`VGwh?rVsm1Ec09DHqc;?qn6uTg(0Bna=%~X+<`-bCebIbx26Zf?
zvu_eC=+sVc*lU}hcnpb|U(Mu$P=#@<tsjGy9yqxN3ZUXgt0F1U)1#(+4&q)1&_%y`
z6o7jGTe7uFt`m|&TS=eLH`J$~LUR`eS4#97{ozuM)>^r9%;y}+h9v*Fh+j|M-YU@o
z=#xP9LOG&0H)iO~^V2i9xp}_PqdUk&Pchi((B~U?^%%a!@D+ZZ2nC|gyAYng*#SiD
zLii#n;8A#xh0h^EN!X<5GdA!UfE@}I`Xog+8-$`&g?13#ZM1%cT9L^{QLqjp<JfwB
z(x3(Ih9859BT*Q!;vfivb#k=y>&ekWPV!}6iT+OXdA*C)YZEkDZ`bQ*%xX}?JV)fe
z4vpjL8jVrgtu<&=#mg+Nx9FW3-L0c4q^nUCzEh&nuDX4Wn(^#;TisRFTG!!oT-|J<
z)oP>B8dtX$Td=E!(P|lKY<*sXT^vQ*Dp>1+6*sHP2urAst!fC?>m44zqC;bp0(QHv
zkzW4_^yJG0muLYr=487Oj~eFD4J@!U1Md=vq@x-+G#QSy-Ed<Nd6bME+wnsMrCP&K
zi$>zXgd#K!QMfeY36FZioe<p{ONpKyy)~AvjN+7OfKusLgXYq_5@qs-0_F13A4Uba
z`ENi^?$;t|ph(Ipl3p`fzzI-=d@1y_z2*MW6kRS2(dAN!lEo0bjFh5Y)AITRT`rZV
z=Q*JRoPK}US*lU58KTFTO#q^$1`V2EICR2(a~DM#v=1Do=T+Cc>RN{eeFuci<+2)v
zN&}kxCLY8B&>H)WLMxt07D5kz>KZlZ6k4G=yj-zE2VRKw0qFZn*xm)}r50`aRd{>{
z;OkC_hG4S+o8>a9uB{N^V$?$mv8{)@aDz`p01Txl3{Dg|**W9_G3pI>yJ#7$H#tCr
zdK=;$0IIB;7}QUX41ri_hDuKJsILbJY6N1`41}nmN`xAd#-&S8taxKrR8gQXyY<a*
z+^HHu+z`chQ-|leYBS}&7R{6|Jp&X;Gmb@SD-GLXhmLGuBTisA>UF3$s3kr_(lU)U
zA?uf<gJNE9B*SRZDYe_(h6J?FpcrrLlFK8(<PK1HuG=F%w{5f^3!ZEN-yAn4LAK=3
zm#6vl^}JybbhnP_eH_Ay=Tb}SZR7b1?ozRBE80bIZfh&DnR$wDw+RYA-i)YSTrw1i
zJA-%}A1<y5dcB0#fL<K(C|16T5A)^q9HQ4t{6)M9+mJ`miXw}bi{&bgSIdi+!#oWH
z!X0i@!V*%;)#~D9wR*{|Bv@}SsK1Jl&ehXu73a~zfy;(Il;zS7eCU?^3We$%>p{O5
zqKVUqcC&H-$B}uF;eAj+bn;O&UkMeoh=hGPl84uP2bBQD`nK9Rr?~jRFUdT0<vh+U
zp7)NP7r=i}xK*IIlYF}-<>5{><#UHt3)qodzl%1^eEB@OM#bcA7lu3ZAFSmlDx=oP
z&Q$1s-q<|4+0aXhZ#GhNi!Y9gR*<}IC1|vUs@7}t2!Ooq){z)RPCDu%uk^YM6uR5c
zTFHmaPKZWPwB2sW>o)s9p(oD;UkQzk<)5Nx`wl}CmbY5eH`clevZXu~bcH#uu%VLG
zzI+p{eg-O~qPZ%A29#E{0X|Zh63SrZMdvI7jzvu(wzyWclxT?x8d3PTpl$VO&`rD%
zqSWyO-Gp(t5uo((3V&MmzPQ!`w$k#4{rWK}>*VOk{hItQ)9dNbk4ag74n@5)X6Qz|
zc#!}_O(V1M0}<G;?Kc^UT4Y*u8xb@Fn{5OeF_F9(xdj{88bb}lEosUrn`UTPwr~@}
z)*)^lhB6clp4fpXT5n-v55UyFS<6~+$jlAtri1M#ZYejm$qPc%QMiR|GH!SZ<E&^C
z!iHP4jY57ID}G?eE?S3C1VY`4Ot`x*45Kwzb1P}F=mx-+F4#gEutQVWt_0W~MZJ!w
zb;=sc_79*~Ku%io%iggb*sYUMDLXD9N;6EPS-wgse=F)6ONpKy72Kd&P>l9wcCK3O
zcI&EbfL^toR%<xC(xc9mgAHhLYB{vsYPT%>qDRfOf~#S>)oMFeoDX=kU28i|`^sd?
zX=v@$mB3f}y_Y_GC|8LVKu=!2mS~CcrHD*Qv_wnvPoW#~d~2geciFfM9ZKz;Ra=`+
z)b61aC=M;s;%#wl@#0R4v;+uFu;T7ckpjitJy-|?mqKxOO>lRDySF?4_uB7Q*hf1j
zlgvr3OlH=zX4ZZGhF@PhMQVR%&%Hp_g&_5F_>Qj3;&?Rq3r%zjvR^^(Nc0$*28vK6
z>I|6qo`FR~-sabS(xb~3B1s<*I;^iD2Gf#x@40EbW(p1V^qA)o&U2OmBkHIJsfo-Q
zieMHSTgiqxr06^Z`oCI$SP>3ukJn}1H0N_3)Kz=Gr-$iqy>W)DMitN>K@M3~G&iIy
z3zycSOo}4Y^s4z{BhrR$s;8n@qw~V@v;ic<lG!wsi8ASPL8%P>p^oAma{;0vO#UH&
zl$#X#hCK9XCuejlG6onLV_;rCc#}3Y^fbk4>EjrN^BtrG_=0~-uTSkcP>{-!byA|i
z$Qg#fI?^0PgT)``3-mi%avpu&(DqL*I6R)6%I{w(Z6GYNhqeQ3(Dm><^8ySbdr~xp
z$kN48lKS#0i7@Xz2*q=zJrQur%~mw+Xe)ryQN(MS^7L;^ryiO;U2UuhyqiMq4pChb
zi;Hnhh=kBt<I@KLlp<s3`WsEZcOFssmPqznx&iR=yU!e7KU0WlTYvY<yEyNIQI<n}
z3#+P4kOfQ2dZluxDW>;>P&z)We|>ARn#ne6+s>^oaqv5Syx^_5=$j$HR(XGaqu?#}
zzuFZOf-0s>SteT!$7=p`ZOg0ow`8a)t_d9{c4(x;-%q@a&&gKa_Asu~$@UUhITLCg
zEz2*X!F)P@l}Bl}SC$b3Fs#cL09q@gsieXnvg~KgZprANi4IGQMrV08zRwfi6?U4t
z(Buz_rZiLMgr^p~FC|UkkTSs5Y(~1_$;o<=f`;u=F`v;-+)74)JT$hJl(_(u1=h}h
zN{Ivm*YZixpL6mu`Z53NM0(XIy93|vxv4tL$i%wiy(ga>^V%q>AD;r=Tr*v!kI_FN
z>P)cLogf6Hc$r&p7t_QYi#445k&;7Ya(fCMfSBSo3UI2@WOpHYZF4o<1j5qwTh%Ue
zD0j1Zjrk?+8Q=ET*e;`VF#8Xy3WT5>#_Cc)hmf|VJ-8HohxQi%LEg4Y0Ua;kp9?tu
z;{u<8j8PPLd31Dw3GE%8ECwZDcADykc7Qk-c`qCN70r>FSy0xUL+VD^gWS>Ce2c&{
zbArM2xy^yLuaj{Vt@?SqSa-f@x*BcvXAUxa(q4Aye6RQU_WtM~4x`Ahj6HMh!UG0d
z!TUGl^UlRf_}K2DnEdFBY6Wa}YI`!h+7tM`E^tzR&tED!zxqNWNUUGH;uENTCr3bP
z0RerKE^yVs<;Mr`H6MJM(mOkq+_65o)Rcs=B&sDw6n<#n_a5soY%kQLE(p-+l?tUS
z3J$6cd4gKd(SrHUlBIeQ&fKuPr&+WQj*99i3j<Za8vQ0j)LJf@%&ESed0)AT%RS!^
zxoC_;0N%16Ldk|up1nN?N5IfAbBn5FoiX`UJov-v>9lAFi>@=ts6fiWsA_=u_Hlrx
zy*;4{7k=40HPrd=mkR1|3YC({o}uWjxdPbR=Es!W<e`F0gD8DQ1LN##cCPOlPLjPd
zV?qse=ThOPTVALjPPZt&#{3fFa<`6GxH5JoI~?oj(<yh#fsx-IZLXtY-0TMPTL0BI
z_|3spUe(kr6Eh)n4X>Wwo^ngG;)0%`{hR+h(Z4eipO-JuZEd^QwHM4QLib`acilJ0
z4=yKiv>`LYPYmuJ$WHJe--{Cr?!D9a`87q;8s~NKx@+JIJLBCtEOkCUlMgiXexq{#
zO3)0n;%BTfk{#Dz+wz51zA`~deGn2V?975{1y|t(hLv&GuEy+8$%FAllFxv-w680)
zw(;oG7)?+Nj>TtlX@T{YIDkJGj=vpyLbdk??pUQyvXEGYf+`pjQ>xU}pK-*K87ayX
znY*cl-OQ;hCR9|bDuP7b;C2IGFV&4Zpop35XRVo<7SHSbe7s9!Py8ER%+q`*{NQ4m
zAi=@G^E?ZmOex%%<+zzgvNVQ^Ame~k9juI<@oZao@$Uz=z2gU}iNuHc&y*|)H4%lg
zQ9GYV*iyMe$RU#Bqm$k1z0_hOxlw@h4IsT_uOq!YQP3J@r!}LrPVeoyHgWk+%dge#
zx(PijlAMv6%8dGi^=MTr?Qimu$a>In6~fV*)<}~3F_|uWsz`D)sktvKp&x65&NFjm
zc;ETBD3kwHj8em*tKhAFhY_<h8Bw4ntW9pD&7?CyYczn7$icR>-?G7Mnxx6`i}TG$
z5qdn?jwN`mBS52CKwF`=Z*N`od9v$txc9LnI%(YqVD0gPym8_nK0)S-HXf-=bj_uT
z^fv)=6r#;xJpjFUaQ;ffa{`Q3veyLC6WCAUfkm2eVjTBUaS0QHFWHF~o?9-4Fs+bd
z`RJ6t&L8X(({`Yv;ymPJ=#)NmG7M2&QV*T<mpBa0OOLA|{2V0xUNSN7Jf;R->9<{P
zrQu>nnCv0SWSNGgK=3Zflc({xX$lSKcn;wa;)Axk2W9AsND*|7pNb0jy{ab4GqZHn
z_m&E-7{m>>b}({Px*rGxmx;<bL7(kcVyOV3q!yOoZ<YLtEXmccqt)<|(BF?qvva<S
z)`Mw2Dof=WPYL#s*t{z-)CQv-&IObCMnHKB7Fi;JMy7l-I@!JaNue!4uyeUgf&Uud
z0BvnNPCo230I@b1j6ub;b!*<rbg<YlOpl3=%WcRU8jpSV-E0|4AX19T{ru@LG>mSu
zGuS;?D$s6om>2JckFa6X2aTTRCg7vkK!LVkG*8*%hdp3~7@U^xfaHmuzLX5A_38eM
zc(rHt%hQ>D_ztwPfmANg%@U4oLewGqeHQ`le=Cr@^m}dyS>bv14PZ+%-GL^k?vMXV
zC5R6#F_VChf&Qp7VB{cdwLVOLC@2hYKEiC51)?EL-U<q(r^svR6?(}mNG}b0tJEcG
ziUY{@B_6tpRow1Y<pI6qR-k%5%R`bE$iB9O+C9AM4P=(i#|4$n1w>_c<{s#*jTJUX
zpPeeLVb$sc7-2??Ve|fc`NzT;V{N#LK);+UT%KJzKAo4PQ@O}(2WudJL00i{L4~ni
z@)y|U^j_m|xL%s-0!J=zM*}+fU5z`6)wZ13BL&ZR4<OhYRCdn(#Y3oARbycCXFB88
zY^#Z_8ljH^lW$T%jI=Cqc(_}f>As=sPhI}6oL+4dOwtvzcskNbzq&-OLlMo^V)}0^
zG53yr5CT$kr`hXaf#`NMUvG`Hr)_%K9Yi=WU|N=6&aM%_;ei?5gSQ9#z=C>g=mJ<C
zPp+Jtj24A&;he0D{X1;!Mf@uUS9PhMD?m;cg$Yr2Oq0PFVRER`MSnV#jJd9sE^n@s
zdP^LtYV*0RkS}lbWOJ9<Pm?t^bnvi=$-+K<&V<<&<;ELsB^S5YKUV-4M}KBP5q|at
zQO2K3RMch9zeuK4oapv#;FBZ5o)w&m>i@&>>{S|mbh;0gqi{qYL7k((nmNhd+U6X!
z<xk4uu(P#_x1XXW?;b6GQukRd2YJ5dm&SU95rA+!EFdvSd;LL{$iVWw><8Ih0TA-M
zqY6Efk6zbd4wAW$aZoR96(HXl*yWaHWh({`)8K=MsXC<H^T(%4*^((^?6BIHXMjds
zP_=4jzk)-9LTVP(=CmMU#^m4g7Z-<*cP8el%p3vY<4cow-siRfG0=j(i#zY{0Xce;
z7n=o{uhBI2dYhKtjG8B*%gkGo93yw`?sn!GNvA~KC{E0i=P$l#y4SXpLk8}SS;D=F
z#pvbe;w|WMV~OLy?>(OXh}HGtslA%z#s62?qqCVGFd|y@h-tQej#hbf_eOrU7C;&B
z-SpBn0V@w1%yJcgMPvL?Dj!B5qZjFE^nlMOaM6J(8Vd2^&af+TRhrXE>PCy6Qd2GB
ziaEMm*qEhYnXgO;uw(20d-OGZGjDw~HePn@AcKO${2(Mty_M!8UX8)**VKneMcns0
z-3#-*_(}d^A~|p6oz!H{vv|yB8rn2N1xlUoi;7;8RW(g)<7?l2iu;&Wovb;6SV<da
zKkJp-bLzwL*;utSP*mAgJ;d0+p~<+lWUUI2(%KKnH;Jx&ET~|#K`%>gMj|C@=%?Or
z3Pl91DWhgYk!o>Lgo{g~v)c2gG+Ax5r!=E%(FR2nbSn1C&mS-R-qjv}et#<abh#by
zcjuHpwDOc4yGhgYFJ@~`7zX@r!uyLo0ys{7Dn`%*epeG|^zQ5hMls>p)%q#VkN5)A
zYC9Plj+8za9(E%HT1MxxBxG+6zy44{;3>?4A3zHxP_+s<_R81<b>9sSPd{$!#<Wqd
zd4XSJeLO*vq71m5MsL2x`Xn0zYG2Cxl|h%I3SZgU#otx6WX|Y}u=SJLmnYNX7NViQ
zq*VXroOBwOZFr$xF4wenzwP)wjhA!e!^S*fqs5Jw=J99xLu20EuJqDVh3pTyh5g?s
z8J{U;j-AJ|+cFs+#Kpzel7;<!zzLHz$n)>ig{x(W%k;@AJ-k7bh7#zp+tz+5LPLO@
z2hO_r6j-mi*VCTn4H-4z+rnT1@)k;4oY^oMK77Q5&wC8`vFkwD%#5<~lq8Xh;rrIV
z1eUfOD9hOYP@;k-I#8^r%e_Gt+y6FY;t5dMZ#h_sbuV!J<;-p3HK^;Jhmz>Y9&mvi
zOuCb`^U#Otxh*j^>?|!iyeVL#b<bRgY&Th=qEn(vd-Cnklkk@VzSF!E!!;l~!p{zI
z&6sbF$@_zEYV#+2<R!XmN;UeVyD24R$C3_-Zq>5oQH~;YK5zn9KvDz1`AQw+Y4H=B
zL>7+y$;p()sCgmnP1T~@pXI)}fVl~@w3>i)^hK74hIapU^mb(ep)Cf(dee6e|4~Df
zF4^-fyD=Se?Y+6;ZL!11Ep6uTX*zNrC>M(KBc)3Tu-H=M_0Z~$w{5?&qtz>Y%9P<=
zcX&|i<MGkfM_(H_G;920iE#ij!3g%ZSvFiY47XbooV+y;yiWc_cGzf)PG2V#(4afk
z`im^jvg|&k!{S*|k6z|9yZni9i<7{wNnMKjC<OZ??!JK0R61#^hodfCdLFC{-MMc7
ztyjK|g(`_9s<Es9RIiDxPkRI`U}>@tM`^hkU_aiM6Na44D4u7Mhgdx&{8WhqZ=l!d
z-O!j`p4Z4sB;J@MS)#)WrE@ff|0A!>X`^<_|M0CP3=!_r`-tVcyCzDz=#tg;+^fFj
z;Xj?1I^kdYr|+*C&n`!8=B8a3DZiC0+fy7d!H=x*RdMuQPVMrAm}gb+KKe|OGDKqk
z<GO@5Y^;by)iAU}rCJz-Q>*`a+1lYuI$B-tk;_5%CSjeM%P&;`0{2_a(tLb!GL=@L
z*M1UwAL(uH{Tuva&<On6=WRnr&FNrA9->_Gy!jL-#uHWZ%tODnG`I2ro;niTDy&GC
zcf9l?rc$}M;x;ykldl!+Mhh~oezBw&iiNw7pFdLwS1s4A8+a8=*f#>6OsvLt>odJy
zTI2kO$U@(2JQFfloC%~`*<$(5?68UB%lp&N<TDlxAu$j7=Gl9VA&#73?~Zik6(-Xj
zm$Jk2F=uLvJ+#he3x)*)EHUDBBa>la4WFzbLI&@qsQCfD`Xd11<d+(iLLOlNy{z^(
ztYoz}oFOL1<jh(ezo~{uBki+Z_ICM{7pe^fv(E?7m{ZC@tUC#1k~yHDEwBlMCk#1z
z{XxS^RwZQv@*1kF+Kmun3uW7sn2hKyt&#ob18Ird8Y-{+nX^>+Khz~ESc)b3r4h$}
z&%1uoUdH=QmWoWK#TQ9?vkDh5&bB*`q<4@<`O@b8zw(!+L2l=BY?DOtQUb0;vj4C&
zJ_)ffGkV{n`eLOn&axy1mxTTomE(Qh7KL)v^r3|MKg`8cLjI%jp%4zZet{BOa^deb
z7)b~%>RvMW0KiU<(yc70Y&*pJZh8-o*%@Y8-Tl2&=26pFG6=jac(sSl{TQxwC7MNe
zM2Cv_7XZT(jyiUcB>x}Le?OM6wJaKfo(U3DKQ-<}{(8)Ute)V-;7)c>Cx0eMx`aJL
zdoEVdRk1K0{HzI;H~DJL-+$a26zj;tw0%;6bP3JO#7fmO)pXu3TkZ!wW3hM&UD^^v
znXaF+Km#ek;tPY_6KHkk9TW<3oa~*U?8?&|7%Y5odGqkl!)$IDx$~3yj73GAcfzPa
zxHq*7)K{f<Fusd|ur&1k$3knmO;il`C-y%7^n}v8iD_;nSPe3{b-jFgWXWbWwQp<U
zbFrC-Wv$1{qkC1J*smGxkDtMPbY7j43qrAtbWwPtqKVk1et(rqN{4SZJkHCP1EWW<
z=dFKM#Px!!DdM7$_Q=Mo=AMAQ#XSDw8HxrM3<-m!nf_=h9Pep}VY_JW1#8DJQ|pHV
zj_u(3-;$xOfg$1}*eGM2z-%^7-F4A{t=rz-Sv8>2(D0jG_Dm=Sd5mc;r?(ryy{K!m
z+amhWjZwb5gKgPLh?CQWuOCU-<ov^t8wWWd0qw4|s?mYTL~>ONb`JJ3#f&lz?tGtq
zPsG&0MWO$DAr9q**d0r)J#LZ=r3Xrw$tN)=8_xfo93LqAMf`!BU%O~n`K~zLeYtBk
z*d4Emw1YX(fNMHMJZ0Y!yvx^kX`+s9)Hup+52m!_t#tnL{)x*NbmrZpTQL)*80S8D
zIOVWGq_k>Sd{X*~?0DG71HFEu_RjG;jYRsF2{ecs!EZ_GhhIFs>()*BAptG~%h`3E
z$BQ8cWcUaa3a4V1m0?%#56csIT)vg$fd5C5iw_Y8!K;j9op3i?zVK7e(d^q@-NE;@
zEK`dapZr?4$#x$VKZ$LTsaN+3`HeOU$at01u96jURLill;mV0;(Wm0whDCVwk}=^8
zkQTI%Ie$t?PJ(=x2eL4*kVPvhI`#f!u-*RAciszNMos%TN6G7Vaxxj8&s2Yg(tjuY
zG$@s?3Hqs9k0J@>nZ{tD2#Hc~Ug<$lzvytjz3^C%-JYuT;?L%>fGF4c26K^Ec%9`?
z%-rTXi|A*KGe#JU@>Jj#aXl#=|9CVw3~`^*I=fIST;qq2QjzR8Iz1G0Yp<x<_noV8
z3|6QmF~?GRNimKvo~Q>pJ3$VuTQFve7Pqph1IZd42B{{x=<O@M%e`&J^m6Ds38@}&
zl;ShxKLph!9Hmuj7EF1`=`n<I&7t^-gL+Pk-sfbQN_A*#QQgnH4sP;xcX#_(KFEz9
zbl*4Oc>9AY1(9wGSgg3A(K4nllvQ0|n6{i-f$#h|iS<x(-0=D6H<N+J5XDOkh#*~h
zex%$7O3bSebnmo3v%EKsA0!WI4Y>u|<=w=P0$@aMFS5lrfL5L;=i!6&Q;M#hLY$A~
zYfPJu)_jx|IJy#&7I%2TMp8BkS0@!V<a+k4#~H=w;}1OHr>H{F%AFRNk*$RWuL$*E
zenI(qI4s}XYi%4HWNHGxSSQely?+tXd6jVE3=hlY`qfd}_N?_q5T57hjuj5k!(OnW
z&8h1;wo_G0fT6lgFLdpI;GLW9x|b)m93)Uv(2-6b0~RMIxQ#6ftrO=Yc~}!z!VV?1
zl$&Wgx$)7S)D>q1e9tD*Aqot9=_j3YGkCJs2`o^h(KUO)dXtj`p(Ebi31X0s&r7Q3
zlgUk?Rq+45BJ8yP@_&xF#qO4?WKW_||72{%V_}|%Iry>U@)7#-!uD83euMhY_c=6J
zK`QeThs(qK?p9(hvzErEszM!4|1WeP9=XsTqQ47Q3fZiZsQU-lKDB~1`tE`TzKzEb
zS6C+FN03$W@RcOURc~C{ff!?@d&Qkna<#%$R}HybRzaBPrr%q1IVWpy_ge}5Lk<bQ
z^?r*Y*^lPkS$SmFu<e+V0M{5zt}CprX+^4jii`}pe2G4rnW$w&S*_u$(+k~lR{mMd
zL~@@VMl8*2hc#-J#`wf##G@=u#T5%pcrl<V;PNo?AnUZP&GP+vSA0TFz9Zq|Kb%^!
zoG45>C+ESKHDKb1z<)~e05$#??Cocpc`xpbIOy7&FCFk_22IOQTmfKjvuG2l8iG{y
z0w<#6l$?{R5i2!n;Nm@h(d!EWMx17%7N@Gq-vT7D$H4%<^?&znlN2?4xS0t~hh6ur
zRKINVRJl*J79nr!Qh6KdhYN;1v9T-}W0JW)tp93jk9~@KfeIZaJ3c7Q8}>=$cKt>7
zCqr>=xl9^W$jx7BQ`nh{eJm#JvQJ}yC!U?3Kh)b=&$wzuVfe`Wk84vOQ{)O(=W9+S
z60Zp@Ym4PJ?9Hd6!&&DyFA}B1n><(kG+v52d6N`zyuH11?%b8XaQo+*`}u!?gWpy{
zSy3hB;QwJIqCjwa`;&>gb3ej$55@mDCoLvug$mD@2vBF_&5Tg;m%pjh{^>4SxtWpI
zkuyqO8xx35UPWFo*@Z=J!xbq|K4vRGIci=pty&NnDpo53(=6ewrNmPT6rhZbS(WB-
zQ;2R>vnddFF5z4Z^+r)X9Hh+@m0AG~8kM$-_I1$6d(-zGJhAQvSIw))1^347?i&LF
zWXz$$ADchX@_tase9Y+3e?tD$4--ihFOLMsukH_>M1zt1dv&1P2Fe0J0m6)HykOd%
zqS$uv8LWc5p8B=(>z4I6vrigaKiI7Wq=^QZWw?8YW5u-|5Ek#@lpuU=>0z{JXe-_c
zcvf&yxI5XrsfqNyuBGYsnt}oCq-(mkEyiOYSnuM5HHxc?rRA5j7%rH3SVuxmGEy9)
zO2lKV3{CW4!sVB^L(U9Z7FFIl;h_N59=`^qT~4mYnr_(2Pr)_cC;YV^oRp(EIo-Eb
z<X<N1ltHVvf)g`%|N4v_g!R$s#5mUvFkQ>ZLu~6Jx4!$EtsB(6s^}grphRJ0M^&Lc
zAEi4_q!UH4P#Z(7-MK7HPQ@8d!YfPuX<bAfXI%c8V)Tq;QXa`|vHZW?!c<I*k6yAr
z7>35s{^W3lN!#GCR+EDJA+a6H|NKo7uWn#MY5}<w$kUs=fAlW7w04aZ*7Xa(GMHTM
z@ky}HrPg#Rmt~rZ>Yw&@KACt@$#$xI&NNIi%Z$OCW2fZKKnPdAIHOG{entJB+jDAc
z$<Z?p8t*&TknKk~UBd4tZT%fq7zgsjNg#uJN}yhY8c!qf)s;X3<xt+ghrds1U&(b>
z?oDfqQMris`B;19PprQ4@d<wi(X*%t5PQSsMGOuSrummm6H;WC&AHqbj-E*$<6-pb
zQc$=KXJamQY!gjenDlN=#IT!N^gy)=Pjfu@!hjf^rg<6jFH#hQnF(8&K_j}t3D7J%
zkcJWbYOWxZi>$ls7dw}arX1LJ>C}=g#nGMfF;{O@ymXMp+k*XXy2?jlMv|7=P6q?`
z>0h15dQc`gko+Utvxo>%2WLHQLn4gZ&YC8cnee+uzsAyf*pqfCxJJ@RuaD9dEPIzp
zHvYyFR}_c6^Jno6t+3)DXBnMfQP_CTL(00mHCFBsb^Y8RM0qH7lVI)$6)Bu&SLL&&
zEt8rl&#32yCYD}2athaw=jn~1tLbeLl)Ycck9|fIcRQX=UOgGtt2rQ~Nm4CjWHVTp
zEK12twQl06w+-e`1trpG&VE><0y@8qNVJgJu<h7_u|Va6Y$8>YQ96aKZU$6NBvI^y
z%JmelE8Bzxw7w9~p+PYZ0+7~CrRAFV!v&}Etq~LQGfK`LHp3I>b1+RypSz*fTD|z?
zO&e)ahGs0ts2?W#Gs_nwmH^9;JkG+GI=Anwa!Mky9ilX`t#Do)d{+9)rc7!$X^B@J
z9#N)WK*zdboX7(YL=YBE89!hbzipbKmy=5L{p9i<ksQbNb)rS_=lN*020ObPD*bfw
z$G`tb`<cdfrvpm-CGEMJDuG?SNS{<h*X_^x4aO)MHi9@7sx83jzw5Ekw|2`%-6QKv
z&7&q|BdHQ@X0(d3#HR#5Z=c!`F3kH%3ru!%>C@S}9@#Xk+Z)H(e4LyFrTBOB8RaWA
zdydCBga?Gq{5VZp6usBY<5wLpK89AERon!EKJ`Ekgyvew+vr72W}+pNFP{&{sRlZ3
z{**IHPw7aF`qL9EftNeEEGR78ftsIwwAjR#M)uLfD}vp$c%q?>bfZ4fGI&)4hYz`0
zm05_zMLmV&Wo7%cMDGn1d#05ywcdY3-zeKVU@;GaOyPR5xzyRGd)JUJM>HVLR9ZvO
zvcHuYc9^g5nqZ@^_f(o>&+X-OR_*%|@2B&GfA9i%v(>w!Eejz}e9A~S7ncn&UoW9g
zXBCw20;;nU?0-GK$1^lLzu$-d+sZ9oN7R&RCvBAMmoUaIQ5s9++N!m47$CO4-9R3>
zfq3I7?2Aoa`@t90=T~y07UeE*hPtwQqi<kfly+))MMj%rtsIOK$T-`dtXBcmx3{)y
z@~_rb^2rI+Kj49o+Uz%*7!=G@1{#8@kFS~$3(gK0$DB5qCQS~QY?wFK$mZU*-j(f9
zhsXyy;O3+yY5(27J6VYt!*B%{Ks4h0S$i7U_BZ+YL;(14_;`xw8<A4?A@sfq1QHjA
z>BFz4&lBAB5x)^IN$5AEiIR*)&0afm7(^eWp#u!2v{}15AN=4^*0wz!OH_tHI$fQ%
z6#m;zEb^}L&TE=aM3^4j?cd#bsr)N>RmOZYctON}ChM~Lw~&qvE~wQwhfi?vuHtKG
z+O3mx_K*OrMRnRQ`Ah)nElDgmIxFJHdPKV}-@sLZiGKlJYMbUKALVKIxNOT|UH8T-
zVW5CxFWzeeyx>n^&8iuFzkv^L)N0hOcBp8(BWsh;#^~#;jYjsS?>Aa8As#v;enYa$
zd$O7Me-o!e+f{IWQYgI<bp<{}4uJ*}&^*2vMVdIde9lA~{H7tpi;`gI(L7Z|lJDvn
zcwB9p;a&B9tXi;f$QQ;O6US>%%``ZARm>XR6*ftZRC<aCxyOdzo7$<g*a~rY;Fp#W
zymfI~U@1m^!&ZlKy-h}vszGAj&Msyjw+Kz^ep?1wXl>n38@S<T!2=>QfivXRE=G1_
zd`%(s+r=}@x^-x1RDJ*55digXzLs+FTv*)n%Dz;Cxm@L<4Sbo-|5brBNQP~m)zxWD
zgG#QNtN}1q2L2AZyBcxxV)20=Zt0rMeeg87`t|OCc{m&kpiVWaVMnfx=uLtqvH%q>
z>f4?fid@hl9v&Y4_;knJk^z4`f3i|LIoUlQ^SHS4^LqZ2z-BL)s-Il!0bi~;0WC>8
z`Ew@_$9nKXfA23FIG0H~nTkG$VVv}eMI|nFE?1iQX0inh(ca!{tS*Do>^`F7W-Rdl
zid9=OWj`SeoX1;4((UY?X=rIY;Q`2QcuX_do(;17ekJ%3@=dabbbst*=ZfEv`&k9>
zYBln^^>HuD><o>ZR%0PYLr?-VqeD~&&y8J^zr3(MDbu)~M6Fs@q@|3{ep-{B%H56k
zgM(floo)+i8;qpWRH56gzLQz`;7}K?vg()_ibtL+8rp$%MR$gHka&*`^vh|IrHM$p
z{8z<e;&e47?fo|IWn+0CPvMIeRtr6~0-+c)Wzc9Ibv-u+NgZ7;07ls_`k-3*Ensp=
z;jLBF3TeL^w8gx$aEN`DTRGKMzS=*(ry@qShotQLeX3iRzXddZ$L<Q5CoTkiG#;H@
z;$$<d)MTf)l8P~f`X?=99bkBjCc9_>vtB!w=+B-Pjx3adwCEy$2hAq=Z86Qg=_GJL
z)eE~4XCK(hf0gj{4&c#6TfxF^!S|s9LK}p!_!n&6dT44ZEnlgqp1+_;uyM3794@^N
zwa#@JSM`sy22u4rk3v{;rF<%{uEBNFC>g5aC@qW@ELSfY4wh<Pz46qi0;X_CvF8=F
zGWFZ%%;+Af_z1ne3=8>m;<|XBXnjF}oWEH})q|vtrIK@Ta~p7T4xkGyb8+em|Cyi5
z)q{)%)|1F(Dr&v<trK^2%2JbQT+Et^E0#D+#T!Bv{pNfo_<#sh%Y{*(;|G^Cmo+%t
zltEpp@x^{{TB{h4A(}C;g<Ty5`0J(MaCu%}X0L|Z$08(yB4W}Pri2&bcC)WU&|dER
zck@QUY>}ZO3(={^Tm>yHYyT8D&_qy<>>_^!QL0Y}sJ%a>Q&~GBd#T;_^;x}0ke&M*
zl`xNmz!k%iA=4{@lVO*rw{ORB_OtR<S9@ITi7nW&c`g;Y0qqhIf1E_OWL9>&#l<2L
zWiqG-68TG=&s<o!Bd`qwsL$>BqBeg^P{+tG14a~9RI|(3+(>)*W?wN^Jxv;IxtV&$
z&eFL)tPD_1=4uq#?om6y&G@*F6JK8`yzBH=J}J`r<44Y(yuzhvy<~Q20*~FZWr+!m
z_cR^=uYUl0$b~PQTo<VP_#JNY)eJo4rT`EGC&*?^QC_9L$U(4^rAQA6Q+c0f!8e^N
zW@+LC;qcEhrtKn8Iv#w7>OKA=@_e%gH>{CdN^o&A8MD}Z{Zw4i+GwGJ<4E{}A2j7{
zGGf@7tX|S4(7^;iLmI2NRPw5AJ%G)2;68ZrgMr?6qSEhR1`O|4h|MaIb5WAuooZu_
zuOuOgcN54G2^qkwiFA&WT1cEAG3J{H1S33OwEyzES8wGSO9nIL$i(|#>!g&i+UGs&
zHH45V11I;d!;x|iU&fGPGyIKO=MWYAH{T*S4t_US-3S`!RM|W4l$K>qTB_HT*2kQ`
zvU(z83;TW93I4^XP_hC21t7a-86r-G{75$$2j=BIwm<nB9sL)^n|S5wJ!fa8#PlPr
zml`Fe5x?9m>b#<r$A_S|c8FrS^c>*JJgu+>3%O*w`?JvW++?^V!*$h;#rAWg*Td=?
zsby(Sdx`qpYSq<r-9K-npI#x!7s*j8>s$7`E=_D=iKz15c{sgewD8Ut&IgcgvsmDS
z7&0xEs#R8uCTz27%Er1QTEZ#sW*4yrdo>5;o|hPt^z*qI36G^~_jglk_a);iqbq9k
z2k}Gb%sS}CO;qoMfxQp+Sy8v9z-dn;&%$Q7ippkD@VuelovlWqr^HlzD6N)YZhI9J
z+QLD*OQe-6vAVRBgy?z5U-o@mKgLVXt<)|oP4-M!9)A_#bun)W7^eJ2wl|!5H=3F`
zE+N{dn_<yROnDTcyiK1B<H)%aW{C8UW9$EATS{5CEcev&YF0#?o!?48BMbUlRG8$`
zvhSGIVL!ucze$a)hrf7ccJ7Ze=PM4o1Vg1a5;X+{7lVV7@fFa}3KN^-cnX7Tj#w}l
zYL?Kul1;ar?Za-DN9^MvUZO8no3YC|tIwA{&dlsyUzPJFx!j8V^95+ZnZL*Xt7g$O
z`NNe?(v+KoWV+Cifrjm_-%M&HX9|9{GMy2DgN+yiS4sEH_mv{KR;4B7q9b`91FDA>
zMi8#cRsXai9p&<DPMvHT**C<u@%gIpAr7L`r~P#HWb1oLUhbYef_c3QBCn%zhVi5`
zdY{TO84w=zmJEYnDTSBZ+^Y$s6!0gdY4!=!<ScBLF4S6$Y%-ysR-z=iHzmAGOI?iw
z#@pumH>om+P{R8jP{9Nwfo)gdCc@?%oAmzY6JKLX(_vYB1uySswyu@aDO`dnsT!IL
zci}Ae3U^_1-uD0^!ZBaA)4<>boX3E>Ktr!qb%0s&MU_cPMuV~>G&v7ZtWtcREvu^B
z0I!=inbe=zPZ|Q+F6_(hJp|@IyDZKYrBzkjPU8uyjX-v=m%15VCAHl)%}KXfCRMuB
z4`!=4*Gsj5^lhwLMfCQdK-w|$+05RmyoKdnWpmZnMt$$Tkw?ydPb<rgL1d2%w2r~Q
z@-)YCoGG_}ldT1&U+sOzK)2h<&Pr@fa>yz*)F68mH_~%1FgrV?_>P>N{mR2)RxQ(3
zvF<W}2e00`g4Gc?I-R7R7^1yXE|q-NYmj6?1w5E}o)E?kh>ToTWVGo;7IrfK!Q)}K
zk*y3IlY3KUZGv~zmFEtP<Q_x_7`Yk1W!*p1CufK0EJ(Maeun3Ru^pnjzJUM%opq*y
zHTVQ8uGpF{$P1V-=ao4VIdNW-BB-}QbIKxn>+RTK5MH+A7dAtAX#p(otE*8rnNE!g
zu)g31f%VSSVRKqN{_+BY8$XG4%8HxuJllF5$U?gH>yBZnVqqybXX<X2F+VLpZK|Kc
z6n3gp9l@xrq198bGx}=6+<*$GuC1g2t5JNN>25|g2jq>mu5N;7^vd66!Z}|~c=}wa
zeEo{2kWtTEB3FOBRad_7?W>aY(I9K~YfJ0VHzlW!OATdhj~*$1VM>xBDuBe9M0FYo
z82aYme!5{iCv!;%n0efmxun>;J}WEbYwIKL!@T@HpNi-c&F%;P?QkIH_l^T+evUl(
z(GBPJFIT9NNk&1A6|78$^VASHy`0%FE=)!B@py#;YIS1{Q28U6X+77fgFqgSf-|nU
zHbOQS%}X<`b<~Rb=XZTRa*RH<Nf~4-_uPuP-U}MG!<nn@&vdfhtc-~N$Z7xH%XYF-
zc+aQxzUW9?OsvG(?S=_RUQMD`ng08q44Bg0K`r{BTZqYR?&vz%dZG1;8@!$Jg`2DA
zYgR;^Pa+#daA@LCT7R-Nh!+at_0Lt@wqOfH3<09sauu%Fk|PzQk38CyYULTVDuUKk
z)7_A_a`IO%Yc-1ylGfHUWt(+C5eVjAHbmW<jKKS`dn8*-oBVF*a5m8G)2cz`*e+M2
zMfwk6-OAXU-BIMEFDLx!5CRZ0EPsFf8b+}@3K*Z=Ajdr@*nyPS`XdQ)X0nIqR}m&|
z!Wj3n>_l?*<+Fs72f*ESHIG-2$^uINTibO6T#R`IW}RjM;MPK<n_uzZcMs_oDDLd!
zM%buHfI|PdhOKY+qxxU;2V3LHC-Ye#=<r*<wTnRM&bzyvR;8Xiy}Ugik1l)iv97sx
zH#g6^ia=J!gLh4f3*h<WwDtnCbWb|u!68o;LU6VHFZorQ|0U`^l%qqCKLRB2ywZrP
zT{!nQLtcfvrh#dN$M*V<Bj}q%Hu-WlH4EN!+Y8U$n#YZorzSHHTma}GU;W72twQ-t
zlT@}DawJcjV_GD1XeBaUZM-)yr&+0N?@yzKLa*}5%%jw$;-&95S8$?V*RxfMn-4$q
zoykMN2gd!Y?Z1ET{Q_Ake?1<Kq2PO3?+(lMa}F9KRB;oA5z*}-@IHFv?i_kt_kL$i
zCntOYRMtPnC^#gYab3$X1*WM~4z1X?5sPeu<+gFVkUb%T=#AdBOO9P{)!qK7?H0NS
zVwla&rtzwSo-d{@e@Wv`U5U?@tkIW<Qw$w)lNje81da2@H4Qy#RM2V6Pj8c=(u!9<
zK}lPRWXQ;esypz4EJ@m~S<`XZdmB!zoGrF{@q4cdy6+}p>BY*KF?k5rjN-J1{QAuy
za%9XO?>*?T;V8dbJJ*(PMOm9c)`*+i4~eD5p4N<UH@Egp-gZ-GqTP!isHT>-8=@w>
zzzk~6IsW^wX>LYW5g+KGN>08dqoS<wcG#{muA}k${Qkav3VYMYi4|1$+TMR96(Kp!
zofgIz9|3^OPSx<ndu3-!yA00G0HyE~UcO%F$mg=Y(z4QVp8pdYK06I!Ez@dxoit+r
zKrvyGuV^$h^`*#$Q%sytzAiSB;F!*7gbX7kxxQNa^2m5<XbKQmDZ7coi8q6gd1*tQ
zRkrFL3pW1-3C6B8?o3DS9og2tU+{Y1{ukxqXMwPYfi^#7>1jBt7)RqwFsBz#hHg&q
zL(>h_qTNcz$243FkhQN6YN;XfFyCU<a&Zx*4*k^oLk?&Y*VVk`!oR!X<#PK;xnqM;
zpN+2ZmGoe5B@5w3S2f{f8`Y9?j@@m|tj;z#v~kE6uq($T2n3GwUJ86#<k^aYeEFd3
z%HyQYiJC*HSUz4~ipddwAgosw&M6)ue(7HmzC;SEP$*qxv<$m@=RkFz)ed_nvmNvS
zvQ@GR)Sm4Za?X}xL9_|@<7U`_Ge<qTl~5U=N6L;cK)n(1AXfZTTWr;opiJNqI@0W{
zk_h|&>@7RGk}KQS1R+X1UY`h*x)C1~Zx((Xy(!|jWIS*;1U1h*XtnuSG;nHYHu?T&
zaM+hQA7O*SRu}IBk5WZKEh}wW!-r^O#&R@6jx~!6D?}qfPJR9koycP^ue?&a@~0I-
z_gN1eT!N<+S}lbNiJ=V(>?MFoT)R~@Q{Jxc>8WF0ME&^fvDv~$1_PjO7q+k8IP7V~
z_s31=_%n~4KNdUw4jc2nV&j|VF?+Y>2RGM_9w4sFqSefCBDN>W+8AZ;69!&~)kLI<
zMoMFd_to0kl7x_>+TGnfmmV1bPWg;S3{Dnja7(RGFw&;o*r&*wpLUXudPg$kUK81s
zuBG-PU)#R}`J+9l^nCHbTkGLY<A@023iQ2eKPd#c`nIq5V%r(v0Y$urB|eR^yLUj5
zMLMm+F)KTF>zO*Es5a8e`*x-pGC#Q}D&boTwQ5{>JRL1B##Zj^uZ`8&Wvyi+?Cc@y
zinY+PpiA7Z2a+|uHOMvKtQbqM`U3@nvJLoUm*36uy5*(9C7lZ`)Tc38z5EL;0I2r6
z-Qasv0!N3krlH#VP17Q?BW!bo5Cxk?Ei||E9Ct>2#iKyJx>k7MH`KQFj2Z#RTHdIY
zBJ<d!=3!1Yv7cIWpDDAQqqCRqjt^GUY<a^pKLgcx)P`82I7s}8#Xzhpz{9&)6=x;*
zJ)~egj)$gi)LJ>Eh1=!_yf9`%oGfCakAN+)OmTq9%VvR+pOVm2x8c+jVBm%mHFX{<
zUvLlExFG_Q2?-wA!Sic}<j1VX9@L`yU5mM6W-=&+%d)~MiGi~R@TxS~=#1@sT7=ka
zIiY^U)dRw#y1^Q_sSi>8S8r|mldQtLVpaIX^p{pOiV|x0)<Tj-x9iW$33}SEHNk3k
z%Re7qzV$0NXKk{#n(P|#coUWmiB|Z|^^I2TVeUnl7f7WpuE~19MeT*otNJ*z<y}qI
zVSO091IWL{L=y|qu1w~*fb`az5n2r)Ue-W$Wi&N>1`>2BY9KSA9FVKG{PnEgD+EH7
zfnjms$d_tR`?n#;*Z&>+xYQd@&==V|k!?6=lx-3yx<jFcH1ctCB3b%Pa!&#}BiB%9
zo@bHcZp6%J{#z|$q!!r?9CV;3UQom>B6!nQDz?L+g-D)O%yFKNG=bMj!^?$qhU>O7
zxJ2>3=p#yXKbxR#$Rbx3n@`Zy_GGnfFaZuSo2lbvLTb9Mhw!w3f3(7z8(mC@<roi>
zUFv@|WkM0>8cT+AxP&%AOirug<PSawWD`4u7^yP0cRM)3;zuxa-0K9HsWp=VjnUyB
z3&FiIEDQB_XowG1enMq0rK_28{8v7;rKmnEZg*PZ{fCVnaaw>*^ictIathrn{;xu(
z8r5Fw&yqj&CZ-Z8=Vq~G7r4o7q)0YTtjw&QR>Ze3-Z4rg{!-+>^x=gc{5F>?bhbm_
z|I(<KJ*ilp*k*%x-Th&UFAw<L;PPO5)_SU4z=ZhpSDZ?)bZDG86F%Q1M^+SLv9Q3S
z%Uq4`$&=z{Ski~rG<VY5v;$dfr!sGQ`bN^A`lI;-r$k*#XDNIFV6P%OeqdGP(+n^e
zq28VuJ{kd#HzkOs3k)N%BELF&bN6ZdJ+B9hn%RtgxpIG3B-;S2Rkf%cly$RBZC@a+
zVU13CA&~vmfgEb{Flyq&>-SL_x#g}{#<9=+Pud}4c}W+ZnYn-I-aG(mtIwi|7tUV(
z>M;GhhnwRNz&bV>ecLJhj<Qvw$ZV`wQNt_k&kg&PCfVn|j@=x^P>{;?@sn5eK`#e-
zeF{>xsF<KglN4IO($47e>Wdp0u;MFNm8SQ|zdp{l%i4l)=hZLU4~CF`nw;4s2zkz&
z$$4PKlCOO95O2HAc1XW>a&gZ2U2&p1Co+*1p%z}Oe`H;RRgP>{t5hj&Xh4F=1Mjb`
z#YNS}zm;^kcAZ#t3tAy_X1_8g^f#2WA{)W(*M&66VC%}GJ1Lu3f|`=-6;P~P&bNPZ
zQN<!&&Y*7$6L>XI;Ll9!!yyX$(w0vC8D*&))fCUq0i4XAW$>k8+DD&9XsS>w?ePn2
z@mT5Dl$G%7x{zZ2HFc7n%ugqBOB4mZ)M{*hjkrgw-&S&PQ~vtiJMpV<$}raCoW2qR
z29jAh!1OtalM{;#?^x+L@nS+O7JS~AWUd@#aSY3;$&n(9+yss9ieLC<?0posJSY=T
z?^Ps~x&0M#Bf3gKvso&>5DXPQl|xJ)yd_(_@!SgExT-Usz!i)A>t#&rX$*gJ+r~^j
zf8itMy>W*={FB4_vl8+MK)>@qirCG6Jph66r;BPCY6SJ`gl*inQF~3rK9<*$vD?II
z+V&T8oMUNWKrsa@AFz_ys=F6ShYEo83V-vuZ*wf5TCs}5R{Xb7lU>**cTwbU0f<In
ztAN7|WZ^027iZt=v-26)Y?-!Z=J3q#ej(Vi*c{D8Np9r8)$+cVhFt!scVKyG3(4pD
zqf%!qljQovy3ig)B&7FYKa@j*TiIo|ElbVe(248=0eq^l3sk9K_eTY|RIJH6aQ#-S
zNvyu5CFVvp@dR-9Z2UsR&Tn@^U7FKQD-q~%ee4Ts2&RF7u+!sJ>e3qq8rvJr91tOi
ziZikx&9XhS<gY0|eOMl`u0FIvJRyb#e2^l^-V#hVfWGCvl@upu-R0$#R%fB^#eG(a
zy(Y8<bqOyKyLq)yyMB4QEg1*fD*@mRvtEO`PqLnrx{r!XD(4^Tog?5d1;xw>4~p*-
z_Zxz2c?)eO;}?;D{x)-q%T=<=Pw7rU=$9vrK+nyAf8P}Tum)N=F#|vN8E5g&1h|$=
z7gMTM(h#2GrV)-H>2Vl{!m#eC6WI(Y8IZ0WcGm9>z7g6)@FP+TND27qaer76s~ou*
z*=y~j@T(HlBQ<#2!l{b|fTa6+e=jq&Y(b&GywS5uK3r=v7fNk76X*-SuZ+ohJ1n&1
z=z3pUW!TLfQoK#0tJ&<`^4|Z*tNDGgA;@x6!J6H$GBrzr$#CYg+mhzVtJu|q<(VW}
zgqFsBfySbhFkk%98t9hi#J5@*e#)24Z*RD5eRB6>|8m*|921-PDbhVtd=YW^Ii^Nk
za~iT633~YM&9yu#!5vnX`9pw_e=s>~IzWw-tJf#|Hp2l<<UgZR?W?1N=f6arDM7(T
zA@Y;iS&6@+UqoC)m-+;v+pHTU@TK+diNH=-;aEaFSys+9`Ir5kg$3=|lr_uvubkv}
z<Ea~myT0BogU8$-4bLA_zm62<aG&?r$zK`b>_<DkJ$9<rA4z^SXjto1tGNGikbu>s
zy2iv_{UC5b*lnj$D|Wx#Jh}W#2*2y>%t?p4wC#20N!nl9*e54P{epYtC=*Xn!a=5>
zY9I|Su0q8L-2>R?GqEn>!)0uLfBtLQcoQ{8fre5jUq5<sq{);X49fBelhD(XqfH%O
zhW3{HO6WywY(FXQ<zV4P2uB^Xvy_|s2%AHQoZna_036dhw`x4_x^?{)PMZu(9wNi)
zcYbaQ#n;rv!MsX~0Lv#7LeE*7{m8Ong6ZQ9k|G2NwLNXMzL`Nx^Y1S!ng!?$$bX7I
z;dH4@L+iAx(ekyaHl6O0Z<_2{wa8GHGXMYA{~v+>2P1InaQ;JXQ~R@fZzJn}U-w1s
Lt89g|QPBSZM9~z?

literal 55197
zcmZs>1ym)m(k_a-yEC}M#vKN?!F{leySuwP4DRmk?l!o)ySp>+IR8EOuKU(|S?Q!w
zUs9D+Cs~zFhbzcQAj09nfq;M@N=b?;edqKbAOs#T;NO(;eTyLo2-u#&FBP$0=Juy$
zH4P1o^FtFip}t*R-8J=%bF&LyUtf>UZ+rXuXSet7Z|}1wOV6+Ga*+w*>SYodWdO;>
ziY%YkW8l*=@F79_QpNaE)%Z%)=o|XFRC-<lUWl50b3UbveG-lMXAG433>5qHzf*~B
zwM$9OxrTuY0fon<wa;%YqmxhH>C5{+6`f&^h`5BrPYrWvZZR4b0SiS<CTS%RX_fCN
zETsYvkV}x!Zgw^hX)shT{cpTdGP;yExN-D(l~TG1jejVwyUQr}xVgOM61~*7eBD2s
z{B6V~C`-$u;_WDx9;MZsEc4tc^f|?K(jwZf?go?mS3YjUthw7Ku1B!-fTm)bw`NVc
zb~?$WuxRxBslDe&LJ4S|iH+-k!x^^4!DH^;MkXAyad;b-ISNK%4@&McPr*5jLergH
zFDV-V3TC2WR^8ma&igxmeBlJ2*Oryn<p+trx}n|Qk))!Myyx>iSC53(-ISMZ?RS6l
zr+mWvs=4(aM6abHiNiUC^VJROo!07U%o_Dy)5>3)ir?wmwE8+I+$An4gHRSIAdN#h
zZ<<$TTOH^10^;)%>~kCXV-}}@ma734mx&4;6a)kV9c6nH#nce9w-|MP2tG3q$trtS
zFl3X%b5=ThBdX(IV)r4wbvLSg&#7(KkD6#49I90rWw^>>yI&6!NmWp(?3#uRkGo3F
zy646bn5iDZ5^^;(B4666rxtoATV^Pmukp36cQOsUTLPL?nta$O{_Hgj8v$Cid(BUq
z`SwNfw#%mUIDb^A%akN@`uo#()THFH|8iBNHzA>j#(6*g_c)_iB<doZz42{oNd1Oq
zaBwh>-ZD``!Hi$1p&+2XAc;LFMw#gUW<f#8Rf|Mjg$j)EqlCcRbU}%#p~3;*qX?|i
z6>njvyeqZ1RTICZWx7WCqT>7j3Zfw7Y*HhGg6M%O+_IQ_@mieAwX^ORYzKc&`eP?0
zIb{%&%RGv&ukUI1pO8n9d-a`NeLY^~{SV_mg}iU{8^8V!|9^+;yzk<Fp#Pun{9j@J
z13mwLEBxQ^|3SY+|BtZ$g8%*x@V|)vQTJco|Ev9fE9U-R%)I|}^MCj3e|7mPf(wHL
z1Y|x?N>oV24fJ9))E7@;4f@92ki;bA@!Ug5di5a*ru20qtH0Vc#ZQ~Oga*-wB-}3!
zKR!xP=2|r-vN9~JHT%lRcb^~J@Uj=^^5Qj@m@{i(`f{{tYN|hn^49Y{SYHNNDZ#~X
zBEZ$W<z07Nby1orJF1+d=5vs_B|)30{5HS#m%4-p5ooe-77RL%ggY0n{A#1alx%i+
zr!ZWv+>vB}=Z3B<%P=f}Q)k^cCs+uWEkwb61q{N2zj3HkcY8|kF2UZ_-~O?r)0JHP
zOT>g9k)^<pRFx7kl0nGuT6)N=uaZE$qtTJ}i83LPUuCCXiva0HKTixjuB|WWyg2EF
z-)JnBj|YQ3s0H&+wZ_y`$V?}VW1k*o$U)UE?N7msGG%GCbK`ZkMt<__-!8g$4VlKl
zmOe9|QNud6&@a6W8)1gMR>-_$S=~G<u*hbs&F1(^UYF0n$$y{C(Ty#Bn@@g;m%Kz?
zVPjM8#A;bDS~E+~qIGLA&EfmaCbeJKWgncM_+Qb!(0VJy9BIYPHAfuc3v+T3v3zeU
z`-pdgShYS$P&bLucQ05A)e-um=%um*f-xVHJI#VTKIQf}mCjZ!uz|ebt@ha__5gDB
zU)Zr<!;>|RuJSc9I2$eJIgI+ZSNxv%CfiJ5|9UhIUF<uFo0$|lZQ&c3pDqPzYlNNx
z#k8Jy(V>x^nwZ@WW>}|f4%!%i&&=v;j<xc}U@z`e(>6ly&)>Qo&2qSWp5*-pez%ei
zr1LHzvR7KB6R9C?A`)|8$|%b!FVYY3T?7!r0+k!cP_<a?dlB)uZUQVI1C!r`L7v-y
z=<8XETB?_3CDF3#R+`0C=FR3EhTszP14^pnjRq@reVae?ldZKB!ACYykVX(>m)Xfe
zbW*D28vxC}5((I!sbDIiNNVTW>C_(OFxC21c%9?r3GKo@OWuoNcK(<7iaCZYE}9RU
zTdj8GB0IDcJil~N5ledrn;r=(ha_Tzxe!_cKlI<8(L%2TTs~gvx+E;qPvGAbGuBFY
zqy08{0d9MP;eGy_QBb+hW!8R+-9F93z2QO$=z*&3J@Qq+B=h%^+X%>i2A2c*sm-$K
zZt(^)BQZRPys2ysM(S-hHU>0Ar8_zjlITck9eN(GNz%H;!X>&sWm?Aet)3@M(z>R?
zB_Ztt^dWO^bTvJSoHaf9BKlAwNY6cr@&iU+`bm8%&kG~`KyCs7zCrU^k<bCYkmf~B
z?tgC?fXV%K>mG6ZBj%G9i<@&>MJ?#_O_3UP<5I2TTIDt3nh0Vz$CX)16NCEXkzF}D
z^4XxuDLawMGY`Krg`dld!y1eEs53w^McJw$pC-yI6Bs9IBbRdaTgN2TE><DCd}Z~v
zzn2!)Y-ad)OABj_1z3VL(F&tGRXxG4rixSp&HNLx&4FSOP7dU-r#OU{k_l0dQNQ=c
z)}msIP$CetUM}OEDCe2uFGr2$##$bBHE5No#xU^G37#aBO61h--hNG&hEG$v!{LgI
zA+*tB<YbP@QHFjDfSw+lI_dDm3@4HuQ%WFao{ySzB@R$dMGr763`wbc`Xbkf(xXk7
z1p4Qq-6oKq@6U#JjG0hzIK=)1o*9vg+{y7|Wv72XJ`%ZiuOBh+!TrHo9|%JNxM+%C
zbs!IwqG0iV=tmBWAPu!sqk&P=%6!=qQOC8b+^4~deu=YVj%nl?5ywZzN2K^%?r()m
zfXbdE^7Bl0e60e0L)`YM5`b<h9Y*TkYXi^5V+8Mw68R$1&)qTm2>9T()zx4y0kJwJ
z4!#dH7Q~mX=TTF`LTx_HJ|MG?Z=M~t7J4Cl;Re*f12~PXukmT|A5BSpeV2&6cvPii
zS&x0F?c2$zY4DVJjQQ7gDbKvveu5{MUEL`ALO)MP09#h1h{H@hh@7DGO@TQmLfYpK
zqAws1SpbQI;KzxXIEu*nOzn^2*TdUZE+PrTJvW4+pm)DZ_@d$AM4LQ(vP}m_FfGQ-
z2{Et?_YT@jmj%k0^*B51kL@)loy8_OS=HU#fzsJ+eP^<A-0$_I%Bqk1dtnA2IEf@$
z02`%>xi89wSKAbl#6Xt{Fbo%+_yxgGVQ)N8Z@9w2%wbK?z@Tgy78ni^0|`JHwEKa|
zroHC(mrY@H2HzlKs99@T4P+jIe!M6eA`(4%J#0;lREVpMe>|prC&+kBnmm7{ILRz(
zpxw9|Xh4V42*}j%Xw^4{hog#;9F+WNK3;?f--tKJRT^L&CWK#JoF*g&o1R{bx8RT}
zK0l^2Y;dsUBzp+J<|jZXZ!Dz?frgEh!w}gP+{ae?VJ&OTB5SQTX%*#LrlXR3cMb90
z5xg%!%!%4~iN0$kvQC6Dr3YebOKMgeo+~eiK6#vzFE5Dw&GRLR>G{dfUnEG8v5B1n
zcL-k#qfT|RB@Wig0~}(mj_e6a`2n@;bjaiz{<pE28mp4v-GYoyKsgb*xVWUG<Zmdn
z#kL48qaJd!Y4@wkNd^M8=us;1DDJ5?CF{|9I^2;g1oVrlPdp75d5^5gUuc+nN&*zj
z12J~3nCyA(!OumzN7qCo`EK51eY%u&NwqD~(7a5?$6qX*D!2;ZsWIj~gLAzgZ~&cN
ziy7uB@u}g{zSA@`QHhCzGy?j~mNr&=%!EefUhQsvc$tsKRYzRL6aVzgjJ46WwdXVM
zxUF}%yR8(xa9>g1yz3tyufg4cg|*)U(ms59heEr;rH>G!vPh(;Srat`Qq>2fg^`fa
z5rBJB#q@}v@44+Qk6bf!Q$=Aj`3N#a<lXcajYk@|*~eq(q4Zr(GHGY~GIh9_>w<{P
zMivGK%Up-=1VaWKGr_Cqb~>=b&#PlIP3ct)%Pd<od<;k*8Xc1I=V=O$FSlaQ{C=$~
zmgettDpUFvFoqe(sQX)|yV=2fvFlE$EpTrRdC1ZRC!M;Qo}mWAS6jz^Aa3!RNvGY(
z-nk5>s&(%$smQ?I{BZ5=EcS}?#0avH8mg;bzYjzgZA9jzlS?4BbG%>24fXCy7wfN0
z?Wp?OY5Pwf+E*0m&7C6|&KK^{XbjrLsUhVE@>d6EFWAK=J9PEE@geS5i{Tm|Rm&a)
z(tWVzw4o_&Oa<BIjvb?VzF`h8qrTTY)HdYU<Zpzv(4x8M4DRp&ZlWGA>AX2akyDK7
z9IjX)na4Vep1ys2zT)uv7pzas8(HX%MugkV9nYyv_>z^sj7^x`h%l9n<I4JWoj#{r
zq2}voe2!8M-Wz{XcE&ySkE&X2!Be;<D5f}eLu~8Dj{<C!JS$Y9&ut`%+@_8rM{JjV
z&C7<!XX%s$<<iZ@P0BeL{vru#-smR#v#!;<)kc%bt2J|((cc!GTWfc^jrf^jca^I}
zv%4WIZ@9}B-A*n*LW2b-rQPm^;N)U+lP4?*B4UCK1&s|Q)UmGsN`JyF1u+d4d{dM$
zGTB1n6SyZs^{J5VxgqNvm;M&^3EC6*-=$_9B`Ltoz6t2q(QE2v4a5n|vY=nC{`BmZ
z6a~QYtZL{^K52>465-OBoo!(pxSD_%je73xq+{C!j{BODW8}^q<gtfc0Ok4*4RQ7|
z_*%ssP?m=*564GxsYOZu3=SAl!_C3arivH4w8R2!vQ7@oDa(?WBTo;lY0Wz=Ex$<I
zLN6Y{j+my4_kq`IYnb_6M8v@3JJboW_%6H9UeEE=>O{g`XVPyM=axMIo+!33mrm1+
zEqA9qp1=NrqzG9`09PH*<tuRRu1Q<7Wsd`5BB-u?=Z@e%#~TLe<x1lbpgr>Xg(h43
zi%uQvuuV+u4t@x<MjcNhYf#Sk=$4|~%g5WhE0yW!G^uq2@sc{~$!%F(eODkUedMyy
z5UNxaD&m}1O&uCa?Y@x({mT9*68wC`_2B-TMKA49JkHI%OM@Qi#lqvL`>QbP2a2r^
zFto;n{jB9)&}Fiq&6+%{e}#{6)IW|BQRgmN1<4f}Eh0`XqfTlUAZA5`!6A_uwFdD#
z%&Svqv()VPWUJL^J_C>_PA`d$bw8`%oV+TdECI-*b;(*0iTeuZwH!=XNMr?bh{_h%
z+);E&+kHK$BKQg`7=FCO@+aL|R($Cdd}-+xY**GcnMWi3u=Gk`coP{~>LDf~cisob
zG_G~{LSMe``6`?jQKlU#*J2Q&`JLs%OvC>(6v^bGZAi*lAP{{;m&iE><n>1q(r@L+
zV-8BDL0kd`b@4$D+Kzsrx41+2{G8MZ8)Q^?o&G`@wX?_~NBsQm%sLS<EER+<K&D!v
zOhM#UP)c2i@=5z!JPhUx??t~p4krZR<Aa(QPAI5Tbg-GikFvSAf$H<A#jf8~d+zMZ
zT_=>>l?BuxQA>)Ij;-nD24uX&?QG48n;KqBuHscBfePZngJFa({lP|Bt=Y#*!xt%u
z@YoJ&q>{ovu!My^A?KZ$mGJMAQ>J8Bc!stL{fQx-cbs=slf}G$(Pw6?l*}VV)(tZv
zJ=c?T&K_Q#X*Z?K8a9XUroo6E6e!wSX0ALiw|EHr@W`lCTsM&PhxMEvUr!aVw<nci
z_3)q}!5N^w7>rg3V(P+`j63_20MqSz_J>???SW8@mbzC;7}qaoc#f@23q5W{Uu0e4
zNQx>*5~2)tznYC&k2NbC>JLAlm}L+{v!p?x;wOYO8L|z`?=FJYhPhy<v7qN*#GxQX
z8U;9a00ZdHHYzX4dgoCdjlFt`wOL}?I??Fa`gMlnHJ9P$DWktRZ~VWT7X?Iqm-zco
zmszu4|Ae39SMad-{cz>rNYUEa;uyK3=6JN3Mv3^~Y-4O!(N&wEgCo$Q5Z3XsHbfIO
z!R2<l+2mK*fsUo?$k*X)fHZZ;{OlLP>TSondV&qX?YdLDlOVr^4#9oAkUiyo=5hPs
zecru_V5$Vlo~1Q3;R@@>G0?_U!;Rl}bU^ON;lLP@qCA|jkwzB)9ryTgZN+b^gZp#o
z5Y$MA@aNKXPu*k3Vb4Uetq$+N5_`pD==wr;s>Lce`>_A-E8wJ8Zcg|YvfDOvK^_FC
z9d=SB_VUE~+Qh^}I`?NjyS15*jqoq}w)x_TF4Z9|Ecm21$)e$vJyoosIq4y--=&K<
zH>o$YkBH0%s;xJvC^o_PAsuxZ$Af$c-hCeYj-0y%A=J)>kynb!OX+1DV$8;bJ>8Ku
z8?ANYC-&zrQq7;>H?RU;{XA}&*1smN2JMsO2qrqHcP@6RTxWMROIjl5mWH^s1Psdg
z&L5l<XPOntHfWv$?-?U_>M^;rBy64n?_(f-7l@iZ9mzt`qdH+&n6^&%Q@j~Sf@d?Z
z?)<7_>YHupHttJ3qxaQQSV6!sL=9loI_gCW^kxQI3;~ykR^o9u*7|M=i22jtd`}6U
zOpQ-E+W-0VO`VLu`B@D3Q3#j+DO>{p*Bs!Sea@d+2ymPSmVP$r_cnqQ6|UI<VRQ3w
z$~X`-gnwB5r?}7v@?GN6^K00?10sn1YTE6qgHh_uV)+)G^x$0Y{QfOE^(~(yiwS1S
zQv$i0P|7KUHMOolqKM`tOFy)$V5Ewvb_K_CC+pqgq;~$ehx%`p0Ufn63ct=D*srlI
zcQ<w$WBm<Nk-9pn;4n08U__V8O{RZeDufAVGEEFTN5&TOyr+lrN;2&c0g~hIOa|Xx
zk7XX^P8!j;RGRY#4&NCc`2_ZQqjCAuV5T21udm~a-p^fRZJjb|iXJZ^dMNY?{i!5i
zdJvN^le>F(14jK^H(ts(Kt-5Ilbb{^tbTJ!*5R5GmS6XP)HW1l1lXY&Jh6%XH5_EF
zM3d6`_-wim?Ne^Nl_8@!$2^0ulE7mn{V;4ZAc7R73VroFA}1P}3-g~Q|DSQ3JUGAi
zWmU3%d>9lbwTTT++!@>GvpMftoF%L*3_T%x2G+tU_E&fok|A~;H&2MxQ*kqcxEkVI
z{6xO`(D0J)>={9U$~e7#4vTo8vejY_*wr%5`z&Pc<jJcY<ZT!M(Ivd8%~e^dh}IV+
zQ0$A(evSr;=7o@fd!FcH)xH8w<l_XKkD!BnT2J9%A<eo)Pa|`De*c5JK3U9&H?g=r
zZ(=%GwsMSs$9ar-kIa_5)Pl5uo$q%;@5kZaSjP!rvx{{<z7{~}&Cs_Bsly$170{Pu
zU^z-=Di6M;sx6s6dKX)T;U@^6=WVzhLX&~-kU8NNfo!m8>B!I|7fkPYxf61A<xC@g
z$@9H67A_zi0QlL{%b6LkmMgkLw=D;A{MBlzw_49rbPw$9=QZ{=P3F0Q1kDfH?fje)
z+ucK=ec4-!xr=eN%k^`$0--}sfJ)|)#(AUYTR+{sOg=BIYKga;y<9JCB&;ktT+32v
zZ-%^(JL9Bj(Wq`xJYSpSbo0HBh0tXoiF{^h>fG*p;oPmFG)e=I$n?Pe`>76@aow(7
zl|Qd3(&~bVIQ8x|tY4}&3$)uBz{~y-rRuaW+OCcWZLKV@FQgcp8I~^tR^(`hax4KK
z$;N=dgJOEBpAl{~*sIhJ(|?^e4P{A+U(1mg4H3YBoPiwp32~|{AxM1`n$aD1BJ<F}
z<nv}OCa8a!0;U`pRdzVO&>u#@311ps-!;G2bTZl3*Gim+H+mckb%V=QnZE=Ca2R4(
z4HBmzK@qCGf6-$%YxpCJ>)RMvHg(qzSl(W_twODF4A2fuyv_8EW5-+bCtS+tGBJ{L
zreHeeguShvEU2(C?$ydlHm4k(M~`o%h~AqcPk6_tfrL<{_7>j?^qA^4b~&w9XlJTS
zf-4GwLBQgrKb2Ww;<P?fbS$DGOo{f<6y((QH3zPg17VPTAdhY^>daqD21wQ{^asHl
z0Sdq^R#vk>f`lp}tVu!$q1qFC2_n-?u=RGpNlK-IW=^ypq*cd`HH4>L{0>fYIx@<N
zzW1qvh+8BCx+4wUQVODeE-32I49);K0)lKml-O}#i2e?QqM|*qg{i<*<gcO1CvhrC
zs7+AAZA}h;_B)pcNa3@ye(I7GLL6b>EKLv}rdSf!1ryo(Z=B|oX32pp7zlJ29+W5w
z$sy}LoTYxZRx|vJ2(<=EN{H4)P)Bxzb)*G?sq)|Xez!FOe;Tx1;iA&xti~E2-3#|(
z_2<3KB2veTpmCaAR+ATH>D1WOLB^dk{bGIkg#k5kDb`r4OW;~rjrUsGMqtWwgEsXJ
z+9JtJ6K7!~3P!U1cNC0K{9Uq1(Yo{bp3&LY7KO?T?aL?25b9*kO*@CIJUBeYuY~*?
zkB)wv`o(ol06pe7EV-u+{Bm_<PrNfK7~6jSqfB3U<n5rtNUSUKS;nX_q5(_A(92#$
z+2{5Pr>9i4k^<OBijeA7UjbT|8eU50nsF2KC&Ncq^X_YXUp|+Ua59z+s&6E<rbp(!
zuK<4R-+avb%+$pStO2i?9+!jYlhUt4opkl5%X9RMr6!rpa{~E%z4bmQPnrT`g7#%Z
z>CJOAf1LK^U8a$<fz^NS&&yA#1H?ug^5jGrwpdxj66ZHx2_lT!3*51U`IYFeE*Eu)
z>O%yPkZ9ybI04rR22(AdbQmt0Ra!<kywifWg@&|rt~CQp-tTeIv>)qUK6|uY52FFz
zagAwY?gAbw%w2+Qb`N0)yl8%|s|FGG`zOII74k$^Wby<NL;sL#4vJEF;m}W=+Go_F
zSF=z2FBjLi-b}6Z;`k{0o;G?zpSRv;6II>ba6Vf+pRX`OGd>)Q^2p+n8fFCm&le+K
z?GpCG$-A#-FXOl(aK<l#zH_JX+GhDW{`jy|ZtXW?g7A5_zAas|1Om+2Qy&d+MAR4g
zemS<bmW0wREr?C!16-88WxgPv4|6};n+#9ppSP5EhTkq6t<o3OMtwh5RbOa*D_ue`
z1n9h;PD{8jV$}61kO;q0`b~30fS4<iubhHkAF_kF!A)EBaFCbHXOH<@YNklp!-~gM
z$K=PQpk?kVjklEdZ$SwRrv)XkiedCo#cPqNmf8*$r!l;xTKN}VyJE{|grDukR9DiX
zpGbH(oPZs4Cb%7Q;LeWWFeoUN9yl1{7~gG;N^84ab(2V6UnEs8Lo%)Nu9mW48%MvE
zs#kcGo$G@CNPk&;{7u7j%X;tl3wEo$mw#s66gNVVxKf#E=<iE3;#47J=Z!QAR=DHU
zRTT}N-UjmA*O!A!pRdc$7e3O6GPm9j?R2)D<eS?WGaGd$6A!2eFrv&pn9iF$G%&Q?
z<+dWG<GH*AD_Tq<Sq~*L+aL$)!X{53t(oDzkgE8QIA7tR0y8??^i)VlVqW&l=;&#7
z-qVwt)n8(mzqq8GFzEirtf#ZLlGFiLi~M7#PK^S)8P$`e2r_&lDJu#r+&mH2Dl8qm
z9p|q|_Q#e|yr2~a7cSeYn>hr}Zo`QK`+2+e#t;M^sdQ~A$t%11b26S>1Vr7I7-VXM
zpc04(3~IC#OX#;dmM;~XB<3LHWOfZuN3B;})qR>+p~&rHFw|sNQ~$)l!S%|WQuc0@
zTp?pWl>U|ume?%z4R#%AOceH&_{D<SklrXs6_Te0=!r_j0Zv5adPTP>uHG*?8eiq8
zn(pNxP0nHFBNi)`>owGq+I^dxm_77$otc(8uCE;0mMnX;DOz~<Oz5JXdQddTiuYo6
ztTyaZ)E<GSlWM3g@vl?Bd;L<mI4BeCO$vEfD?*K#NK~xbD&-X8fgpNg^f&#jy4r6=
zj&@mqzxe0p_=g_)R?B&Zh<B$A(e+5%)iOHnBkMo?d!qHC?-6$L(do^O#f0&DVNwhu
zMB0LbHx%M`QQSmucDwfv98Gz|vc_(wTv6P>advqky|Wf|PI=xV<REmh#bGSvJ}26Y
zB{$yTk@vGKVZ@LlakY3?-FI$s>N++J>4L7cHLx8^gHfx0*iEZ@%B|F%Z^ND7GuxuN
zF+@ed_NN5=8x!1i-Rbpzuf@-Oyd6o_mt~0|DAx~)JaCvM<Z9>yV_?eRzA0Rc*~EB{
z0JDRr?uAj06KHa~in^<NPI@O;dQTpTH5ef99|yn+J<oQqj=$`@8y>^Z2OEHhjK^{#
zN!_%=iBpQE(`9oji)@?ndy!G$k&%_7Yh%kFFtbNV61ChPT$kEdp8>O!hd`?`ZG-DL
zoE>l-Khl1mvx>>lSZ&(vW2mwTAWSV1+PE79kpw5ZB$et(I_zvjduQzkxjgk@@8V(f
z>>Pw*z5QfFxRpy_9xy*N$UOI|8?E8R4O(~VC#934st2;^(<FoKi-j0qLLxr#YKZl8
z3m4Ud-!>p`ef>zP);4W3er`ZkoYUKHc5;0o;(3Du&Jb@SXCgs;qMAwLu*oIjVVPTK
z@X1<e@JvES6$aRAaoEjj(Bd4W@wW0N<9*(@A1RZcGPM<jlm`oiy2s!_@k_vqOb3<j
zE?9X)qd{ftni-1s{yg1Lc|+bHgi`7&oli-Z^j9uDg-(a5RT6Jhm0(8(olovYAk#jB
zr3;pU+zzlS!^Tw}PbmvVZTZqs;aLQ09v34EDI2`)q$WH+Guh<SY%jIK-f!hSw}$!3
z>0-5yS(9GwwxEq%voU3s;{~=v!J4&i_S>`2B|%Cx{#N6?N6k<fZfMpC9M7JFJgj^D
z`+X<PFc^0mm!Fzs`(gcTq7M^o9-)O}2SajLZm+Yqx@w~L8U0RB#;~9!<H7DYChXSf
z#QFAm$bHQ3!O#-pgoTfdou$93_plW|B0kL+phtj@&qPWeG^%U%=U8H77z<xwp0xk1
zFDke<_HL{(@1+;$>?4(a1}|c2ttO8TTPtw0S2}j6^pd=&LY(^OZ_aH_p5Vb@juSu?
zwPj2=EVB9wX-ipvW7x^tsqvOXfie~=q8=NeMS%^Lw(J&{J4@})Uk>1pzw6R8=BQwn
z1J%6+`={D0a9ml`IjH*q&bqN>mzNRgVgqZ@jk#|9kqC09+$1E0`5v^1i>kBW;?M(-
z%9JE9<;lk0Rn(Zf%p9ckG`cdz^ZAuw2A)Wp24OZhNE!>3@%xKU35trc#*Pj{qjnWk
zh#(%r)S&s)KS*p^<zg+$BPLIv_{r8d=|Ro|&WBmV10H))g?u1W2mo8$ETVMjq(<)S
zinzl_@K~OOn+QV+nA4-s3YI~w1L@Rn6WGT3wv(0b^e(!TB41};o}aI0nWZX!;->=m
zZ*^p-9%??{mV1&LuRTshla+g90`u6G<wBDHwHmkryPtO<n{Pk+sFDYIZiCRZr?94X
zBsq@DFsN1|Kt8Q|4#=)vbG9)^zcwVM9e<R*xpTd|ewjx8+xWVly^n#qtMp%7n*Y1!
z@LNhor^KDM<qrlmfaa1oSy5u8N;{`zMZA<0z1pj;pBjMsHgjJI@L15p7_Rl5{W_Bo
z-Hm%mQAsAWA_H(gNPv8jYWD2uzV}-;%6kQMG(T*i^ml^QbL`Y`)C-^^ZG9g_2V)U8
zVo>1PluTiQWuCM6hhRf#Ssv~%KbhW=R2kZwibI`ZblDxGWXZD&mL1EBO_X8hxIIK>
ziVDp}3mqSR^ORVgMoHfEJ(9Dt7Zf|du8r9<)71$o)7Z&#q$D_uVKCH}7qgnHs!AgM
zs%Wb$E*8s=F8o8vsW4_{9>3B1i#AKtDE&C>54nf9t&zjRmS40JqwJ-r;-5kz-a3CN
zM8sdH_@gF4MXZBRc)~$^*`5!X$&(8B)Z@jlX%2+m@{Eap9MYE>cr>*6>lqGN(qiD{
zp&}-^{SkvVkC-Io>!6OD*lvvBv}qw@<4J24;xO0~NqXfST}d{_e$irE?U%h*^`}~3
z^Gdo7!?VwqB~^B`ZfB96yKZ!&>=8X^AXWlvI*)vpZ^QFkw=aqDG}u*P{E%(dr_`@E
zz0F+_zpi@w0*Dcsc^u4LuJ(o^@j0&!TLPbg`ot|wn3ihiPZvE+nC?V!`GIWZJ#T+0
z;x2fkyDj#`Hsm+Zhh^tDbqz|L<4qnfvQL@=Ob<T08c+rDB_3wOswG~!8fL?3ka0Mp
zd%`S#7BN2^=@_c*kvV#X!Ug}mS@`)lj0fdf=UVOzi><3$zI6mCuQIL1>{f?5R|M1J
ziA0BpvLlB7)WQshb8RTT!LflDB|5zFo(gkeliP7#II2OW(QzJ-kT26GrGL6L37)cX
zT8vD7heCny*|imz)2%h@y5dcOQ9T+&tCt67h`Uix<w|?XtH+inW!w^ug7NI7h&K@<
zb_$4rJF)X_9sS~=pVhB*(nwhNBO0`tG-Sa@iVCEjXQV>lLnEbXpix9+jsHUg>*tt2
zi-RkqIA=a2DHZ@E%L^;2r~uy$`%%w*`l570I_ikT2El<o8whmyLR0i-leU#iH^T`j
zmB!%8r+U<8$)GS%NKk4gkB3%blp(~A^MN0}e{UKHp=HVYt6thasyeAdX<i+%Z&9sF
zc4mRdX)4g><?ZqIb_n8;%o>g_fg}`K<0;VvdPNJY4MisA=JR%ci=*=1pJBUTc{zK?
zBjc>zZsqWPxjFoSGmQi;7Kpkw9RjN-$QFG(b4WJ7HQBIxzU;5p?Xf=^pF!yUI(%4>
zv@;NjOxSJzT2jkwT`>Pm(_BwbOrJ!b3uXy8KxC)jL0GESsQEDwhamlPdYjo5;gr7Q
z4p`Ef-l;|iF`p645U}d#6{P>S@_>pWhePOX_Ga26X!O-#O+@H)B94o&W>v76UD52`
z+M{SQaOT`lu~}O{H(9rfW!1{+b5M`pjDI5i%8q?;!jrO5>#IaNe<E9$0p^KJ-X2!V
z|3YKXu~_AIsRWR)-L`7I8(LI=H$*f>oDt5uB$;3q9z)ayZ&X;1d~Az|=#O{>FQOUN
zJt@a@Mm(a2<nFF-9M<k`A=S~!@a^bJFUlQ^w(qsty1}P2v4F=U%#5Zn(I9bYj_K>F
zxHFx8d?Iz@{%sZr4ql29i~Y=*IS$U)n8m4HJhtq?n`&D+@L&v8!@~jFUZsHLvK|pK
zmTJYLU|@<L^SFdX1TjI`#0l)~0uKqipYS)}!3hO-8mEP~;q|=GAfx9cykHvMZw|CJ
z>q2Z<Txvdq=j>?Cn{xV*inMiQe1eA12{PznSFOL{lna19UcZp_+tjh-{<%EG$yN!}
z->l8rNVS_6>Rz%8W?{R?Bx^%-wyyAN*IyT+*Ojgw@P`ix<nVMOX=?_@*5+=5IS<hp
zutXbU$g^qn`d{46gCAEeI{_&nDL`Z<eCL6u8>L^+CJy|&?f=9mM*R_a6Flj!Ls?q4
z_&YmyLsJsQq1;e9S*lmQt!wsDO^OEv-S~KN&Er>HR4s8`p5KMc+9Yt?lu+LQxbhUj
z%3V5sa<44Z9zBK!t?lyA$-BI8pXsjU&$hfrH1)I$x68v$p;II!&NN6*OZz=H0fZeE
zOgjIud^x9Xl-5Uh#eg|=a|RcPZvKqB1!wmp0@HJjxZLVg0~=ZH3I7};)4&p#k!@#d
zuP3;|XWB<Nd36pg7<ChTXtAYn7HzUj`MmdNOU%0KcH1a(RiSo1EK_^lz6iHGuvWV~
z)Np*s1ZD-_N$drLg=@C&W#8Py_c^KlK3a|tbErDW7MAFMzAbUXBXy!Y2Dp1~xWjM|
z!2*{*N8A&Gk?btJ6t&NrgGd{Z5&q~fnfNOZ0u#W8v*|qg?QWV`FJ4m>t|6Hmfm1(x
zT1gQes#u_pBQL0-0Ym<vDy1+5`W$epj;Xj8>rM2PQMF0HT<mdz1<esnOnojhr;w(Y
z1_D5zKfbtw4$=$&+lp%Wuon@XV5Qd5t<Qh4$z~;M!|^{aRNt*n$QTFF5s`^gJzyN)
zWr{ECDTvsCr#A5%vLgf=)Wx|<>(Os>VBB-5D@*%t*A;O+p@PXKvD^OcTbyYMpVP4o
zxdT{&c`bb*37^7_=x}>>Fw`+lCRsmTU=uL4=`sj1$F6A(vLWN<H^&Mq_JvIbL*pFs
zRMJ4(Gc?ws5l6-%Zpprs5+=XCq@s~~S&p%$B7`7L<D5<3rJMBB4g(H;e){5LC9M+n
zO#p^JL?D*fVL`jWsK2{b$M6#GV*N4UvDh=Pj|)h%htl($bvOQsjG}*nYLksr(*`c$
zy2E=z$fX?*tJ*D$Db83SMkyXcEV#Aos6sfnf8)5VQqVP`gIBrNddAm5=g0&M?DHLU
zwUU)`$A*hWu-_bkCf-cnrHXlGaeJAq5_d9dMT=Y^2=F?lV{$!FUDr3vH?)*H6S$(V
zG2>OqlDXpp@~0eDTn`IAsD;dHrRfeY&ld3Bnw9^%%^2Jnm2KTOgY0_nFn4_3u{+3)
z_hN!1ib5c`z9J0Y;5X<S(`J0W)ut^f(iK>X|7+g1FmlVpRBPP@P8L{cc;jscOzqnY
z3>?@@uqpjVD6!}xu$*{`Pt@qOrELAYtNtPc_1vEt)WLw9E;Xip-0YI7k7@_uM*%^s
zf3tHFXJh5<)cU7yH?Q;+&fN8Z_$1svet*LSwobzXv_!MihUjY=uyfXl-u+A@x}-`M
zhe+nu{KDhNyytg|X7?#Epx2_y|5>mbpCEK(SKEOwEVJ|z8Sy62n29V<w{{b>d4@e3
zz?KTF^8^MMg4RWN?;q$Q1EEJAaNC6zc|8+~BrNTZh3xHG5B0ppJ?-)&_nnsfF=3#F
ztaS?u*r=B$wW8z8L<UEmSrw{|Kq^>KJ%kR0#hXxXn`X4u+TLq|qSjcZ*WL0&oPm~B
z$$Qv=6nVCH*#WwBL1GuHSu_2@qy~gpgY(%isOR?m<C}i2A?-`8LTtU>p(Q0))s+o~
z_x6T<e=|dbaI{+#s)b11ntuPQ>Z!Cxf!t*0%coj>%(AujJB4nyEF1ZS(BQh)bqT~d
zTgPH+<3QMeiP3y@m7=#gc+xO&Dnm>VECNh~t3xzY?<1`Ljv<16oLPjjUt0Twei$<i
z0y|n`x!Ryk(hsv>UP+NeR4sx79|8R2>|zZwrR=79N-hv$yuaFDBMj9VBpx#@6N8o6
z70MTdp!`3s#6$l}O^!~&scDKI?L&jiP%7$21tLjRRyiHz=x5Iw2AK&O&RZ#X)YB^>
zK9fswSiU|Gus;u<Y<%H1)H;EpskqZ|;_L!jX#fn>T|=VN$r3l#;4rAec{-lbsnbzg
z->Z{r%w?e;Y;WgDYj2NGquX7t@Mj^_46sI5i^xWVK*Uy{*S$l)PvT$4jD+OS)D#Er
z@&wm%9hxEb>l?k@W2}Kn$6ciujOP`hiH>e{g*r4)R8we-gSE7x4xmCve*}~Cv~nAe
z8#`Lb?aR&M9m#LGUoB!FCj|QQj`jZ&JG}w5fhXMRk5{DDKDfCF{X1Osu(2wpM&){;
z`39|yFYGoRPzf#g=jPkJ%!VhaW)HejQIx<e((X7&cb1RiKhG|Pw)yJwwTq|>-1rF-
z++mo3C9EyqU$lO)DU(Lu3#W<fI7Y82Wz!|P<YA))W8b<7{dhmnrWO2O4+saY`@Bu{
zeUwA3+2sN46dLfN6^#9aN$nB$&%!cE{*vtVr_oHt+&>J^kb@<JGE!z7C*j2+Nxvm6
zz#l*Y8fu6r1%;F-PGhM*Qh>2vlp5NpBoO>C$P9<VV^rQR$%!&i8HH$Vfmy?IM%hnH
zB*jUUS^wZurH?7l01uL!ihh=`0#2YdVTtrNtSZO9z1$i^AuIU`*hEY%Vt)7fX=MZ`
zaxG1axRlb8OsV*I`&x3GtV-p1h6r3(dRVMO0u3~JTcw7DK4h2Dc0mP^Bcyc?3ry!w
zNErr5Y8IxrNQ5r0;EH_L7_n{aR)yRF$Qd>qjq8YJ>zzR0k5)-{F>tLQYc1=YTgOig
zpW^3eLuF;_5fA>@9I9qk*$vNT%Ly+NL3_)70Ux3&{6pF3=+kUot9Eks?`x2K)4Eg?
znQ64Y8Qmk(()OLqCOt!2D>#Y9*9F=jR*-XO+Ug!xAu=3WUdmE`$h%*QPxM8`HRo;y
z6GCDm=4@OxQ@bC?&sLo`DY|CuDr;<WJ8G=!^u=02FPv)JI;@MISC0AuN4BP>-3r%<
zoKv3z{1@Uz2AX?GBKp-c1e*i+vA}@5JpVK>gtl7@XUijf+xKb&8*F{sRfg>UvHHF`
z`kBbYs%mfReZ4h-xas$KbPg_lKGyjD%l5sY(^0z+v}g4T46t1__!kEY4XJnX+pd4c
zm5*<tex@X=*3=GX%VB@Iq~%W^l__69;MMOHC8*^)@Tr{!&ddj_&aRUn(~x%S<D(@8
zbpkHkX&&p9rJg5jE0NOqLpdH^+m%}73SLmXG#%=|S@*-6UsbPrE2qH>@V?!9Fy8H!
zpw)kO6XO#v^vC<RHAs1^U3S@K(D)1o77?<!y8w}hCw_PKM*Xbo9VuoAv?rQN*zh{F
z%<v2VXbx@s&F)Hnv#AT=<)fY-i}0NE3(fX(a9j!<3sVec@268~J;^0KmHy~h2#EEC
z2=xN412&TvE6n>uT8t}2*E9OOT&Uu9*ipZrp;|)CzC?j`y-gS^aGzAw)6Kg~Gbyb;
z3K%3Jl`D^nQz$B)^<ROGkfp+Eqns5YT_THUM}*~%@x}?#5v>OSeUwd&=~H5bKXD|*
z&E-o^oha!b`x5@x$QLG}?V$r1;w2?g^=W28{;;Eg!NYPSfnUQP4~njdK1lwKKKZnx
zB(X37MrYBED5DVwiKyzp)yLP-ml#u^?{L$RN5SAoEk77B=AQ3>=TU@+2-%5>Db<4{
z@{nwL{I<f5w_zYvgi@jn^#21l^&{~Z29m(wrX^^tN;q3bY4i;wtDwi0U+Spx9aI31
zBz&@cgumMzFIw|Cn1*(;I402?D$xudY7;RXM%fHMq`19+54U)R1EC$64O9FAMn2?n
zg&fC;T|U5i%{J7z|KwWPoH(g3*t<luht&WH=fbh7e!Gksy0fNN18+hDG{5&<&A+G*
z$lE&y{Qh+F?$L*~>&*lMGzY|sVS1xfA|zwH`g=1qHY-(}{3|K7dU1Tn`G+8t(?v}0
zPEt1w<o6(j^XAxqGj0+5ps5!aa1KIw)`0nUPc?Gg`)FT()}{dyoT2#iDWBHSq>L^i
zTY|u@$hv`{aP_IKOL3a?j_P)@9p>@qb0zS(tw%OjV|QL)^rrfe1(uE^p<%@`Va9^s
zPdSkLZeA<fBOQV(8%QyhuLmFGU!2ejZVnYFS3<$R0vkvniwQwy%2W1PPCU6&nNFS6
z9dqZ&_yz;e4l@`=n7GzFE?}p35S5{Hr0jUlY7#I22#Wv<fPwmywJF~N@5ZA?JtD*I
zO8^c+$^^aA){3UqXu>B$p=&}(yrw&!Q`7IfzjTQvZ$<}ARJUz+x`Y=>{8g(NZ~ke4
zeCVwxHsdad340xh27KzKCLCt+;L#?gy}LwSSN<u6j<x3fx#OHkz^TvYLATMkhzyh2
zG{kEB&q$sTGvzIfrL7SHKYy=m-FIQLpO8c4KaO2LhPe7z*Nxh7<h0F7Z9$Q7SH(g5
z)f__W`RX)(L*Q|N<uU`)QEX*V{|kFvG3iIR^i4XPojPoC!0u6t%TUD2K1X5%8+6~K
zWsX_&cr5=CZN%A;iEpcWb%7KXeYmXrOCRt&144_%M!6fIduIV1nDuaGGBV7*VP29v
z-KiK<KdD`!Y@0l=1ewV>)U{$f?o2_olW%w*x$$Lp5<ZeV;LzpB+p_D}{CP7r5@hW0
z%l+u+32}ppz+oU@Z)2*7`@yVYJY;u6SIwaypcO%`u<P8Br;gr^^w692E0!se9?v+V
z%~`H(uB&aeElnV<A6fBj2f0Tpcw1kp=*R!q;M=)<ZY(Ve$CA|2^`xumU}IOjb*X=9
zmw~|PZ<ld;*#+2nmyWgwUUUbYd186x_t%-_$Y^M{6o<%{H5$&I5J{2}F<)&43iduH
z0R7nc^cq58mM^NSw{(<Yr`j<$J3ODaBzv?l8J(ofyvY0If2pSPRR5`PN-^oZD%;m}
zHGc~GAPG9R)jUXY!fCiVF9RG!wofxYnla1_stjp9%L^VZy<w$HI6lZ*JDIyM_IE5g
zU_U>I;~{L0@Qa0NeewdsVRGE>5O94Q_Rpwzc;<d5g9x^@7nGHi>8h$S;DH1tWu)_{
z4TNOR{nM|7TZxue^4On9i=iy?*-tcCKK+bGZG{aLlmGp%(i}8Cr<Zy9jMeYaYysfJ
ze}+83yb~$4sDRNYskFmQLq!{r3SXPIFr5adp<Gin057V{H5Xsvyc<S(0dz3JcSs51
z<Z+Tcpqolc)uo3y+5TD4Lh!#y%wXpF6BCsz2i>2`ENm>M$ezXWlEc?vZ{wWYsg;!$
zY-;<Ge6g7q@vHO>vm8(_mM+Nyf&-s|66~CUgrax?654w(Lv%w53uPim&-gYFX=oUQ
zyEuZiDuP0PT2RoA5ic$wK^Fgmiv`N*;-eIT4+RR?HslC~Fn1tzlVF41dRwWSXgFIG
z1Rf(N$HU3t@XGRdR54=Z=2Y6^MW?P+otCHQNiEi4`e7Rp&@r==#s>C`y>Xt*SU{B@
ztyWL55yb(*NI)=mu2KE!U$&!_vas}-!S=i4>wVi)JEIj_u1x@{C+kpI57)_d_cxtc
zVqQeX@6B>PJr#_@^%EQNo)1i^o=)P6nr_jBnyX_UDbYMV2bf<-|4{vUelFFt5|RvB
zyM3gM<m7qVw6gxY$O#oh72X)RA~`qAlgrusyzzE=5x8P>IKfgAyS5}b?dGjm?ovmG
z8Q3JIQC3V(F8dLyh>gfBD$yZ+dZUpd7gS(q7_DPEB5oc(?Q*%jy(ktW0eUSc^B6Uw
zW2oYWaQxSawlcOY1G^ieF<7DX&8y?98IGNXf5GY54*j(4AV&V<fJzYV<7F_0wwCGN
z4V56}DV1ub{X<cKVE!y`Yt~VM82O8YA4z&rjs~DXI5Z8D$4V=&ZvqY%>fhXXtnb?`
zi}%{=8><|Sn|uP3GVNhyi7}v2+0p9P6OPmteuxUM+LIQ)7snyE2$QM1%-O7p3VVJ#
zCxUl{k?}dFBNH)yyXw7v-UQl&r9^CTfzQp-A8WFVzV{`cY{bpkpHAX`dGA_Srm8(x
zYtD7o&ZHx-qvBnSpQO`FvT8V!5evVZC)HE3L>>fdQ1vx>W$-5G74%K~;aK6xS8_Fh
z>H7(6@H2~eF%{_@zvc)uuBuCx*_5eL_B0;CCmpfVrRLSt;kaf=`06~Y9q)rd-s0yb
zr!&$K5}%Q~oao^?%l5;4UvB(RSFt?teeMa|;H-vIthcb$FvNySRyVlWmhqu1Fd~I#
z6(BS<_qxci@kb2nhV4a?W#45Vi>~YkBK(WsBJYRxUfg~G+4efxM*`}&mo%c_>rzp3
zY@=vg951iz`y*z#m~iSebm);di%~PMd-Z-g5(2>R0Xk7+ji&?2tJ;Zr0lUJA5&QQi
zQLpwmv?)<X0eYs}zhI#Z?(0Z*#J#ktWi!&FBm`{-?r$}~J;)e28AA_cGdOT#eemyJ
zQ#`=4ehePX{`4A?o0bj_(rtQgtE<L|orH%WRwrN{qL>RIS^ddlQ1@!@=?$_P!43Ks
z($H$Kwz*v);+$LuP*|%^t{!z70Gg&~%y}AMof9DYCh<gSy^_szCb1R|%WUmN5g(*0
z^qQaw7v5XB(sg&%gUTe){_iWlCU$;k=;+vR0ojHns1^G;@i8A#{wgPP5F0j|cw3NY
zV3`jzo1S(>5z;G%ytmFxdzc6(b{6P=IskD^jQw-pGIMS^@%{wqBOtY~H#fQ!G#M;V
z{HZqq2xA7|!xdiIG1XI;_@cuyX?Yv1)Rp+p+2@Dn62H(>rKiJ5#0?K69s<HL+#VH}
zer}4um+h~d9+(YeD9>3@1_HrT@W7_luhU|khO6bOrj_t}bgZtaHs?v-I#<R@Ya?}n
zoM7qp`jBAYG6TAnOT_Fz#6Hg73Q(ScWium5X=ZUXORc{e$rS5-5zUp!z*I;JMWQv$
zY@MxeT15sfNy}h}+Qc;+4G#M2o!FV0Sx0ttGIutjNr?KOg)f}V*$uszY5wOek+AA1
zh3WUlx$0gQ{5I;Yi|g*p2`UR6Cg}+CjI9ug{%UELG9$|s8J7+S-`xX?6(n(aa^5G<
zl|)CkcT+MAo)&fs4WM>8JHk#(!7;^<PVM)eZTw57OC7v*AuHZD(VZD@N6J*(3h);V
zw^;G*%@f@39xb=mP>=2OJYntSIfr^H*&=%L>%rAxUY%OwJaJI>j9^rfM5sKTYuTl3
zChqGPx$a(R<m}2T4F4?;1b;8+_0^pO!$9_<0oo4bdCW*rY2Mt$<{FBc*HUHvRQ*7v
zv(ZuBB>fi_?xNG%hB;P9x}4+DZrgKc&93HxDzpop&zYi1(=tS>0vifNg+Z+mnRlzj
z%F@PY=~=HQF1Vs&Bk4kPgW{_P-OaoFGrJYdn1-}oG8)<As&?_*15_910shcSR#Cm8
z)baH1`1Lem5XN!mEo`Sz@uB=<(yGUG3AA3Zt$lGz%mS7L*dX(ffEGDJH5<IkKhj`g
zTIXT={zXkz%HZSMM!8r<qA)PMKFW$ZjNlq-KIydD)RLMQkFA@+1ek^W$-<n-x`4@}
zzCAP_@4Ws#pq)Ru#u6Ef6<`G^8M6aAZ($D2^>}J;PKkQ)qF+}5xOsUi_V0Y_ag?zx
z6ASAneWc#8>dQ%~wuF!nOuf&t!|O@u`-?9X^~JpykOV_jqq>rW^BnudjBaPGf(<sa
z4G|1S+CSd|Syv<=R3ei&SPS%6R}6Zp+zu30p!-VaMgVf{dMz;=-$wyO94uNr*pykT
z4zf$oO2552m9d2X$JFH!U-nEs9K7p`N5h^O^k2-}YtfFp0YF8tUZo8)OCt9uK$bh6
zi|faICzam@J$wzk46QcfKFp}`g=LWvBYG;$+~y346j4G>9~By65X%4%5DlXZvV=42
z7zT)nn6OJNGpg6uv+6>+uuF}PJrdbCL#-Xq&&_}~U*RbRqJ$R;c>UX;SW80{%GioV
zyr%5_J5fT4saP@jD>?r~1w+b!G3VLF*7N=~vo&3MsKK2uT$8pg9qolakqp2}3||nC
zx~v?6c7Hk)4bzphy}7kDWCC98#8?7vt5i?T(oqJW<#BN#uoJ>24mVhKhzWZUijIon
z65sRZB3@aA9sI|4ZP!Z}jFmPLi%TEhTNWK1eHr88@&{|%Ep;Rzhrdc!TZJim3<AnT
z;Y(%b?>y=$m<*8(E^s7lU{?|)^=0Dzlj|uB`dGq4U>sZPrQtdNPK1pJ^VH4)TcRLr
zCxB$O*UkWfysS1=rUR^Oq5ON(z#?4L_;u{4(`u1OzOIZ}jiJEBF&%e0#jL3-S!Ls*
z&-`y5Tkw1KRC94;fWMsA@LGxp&#olwNgV3QcfY?LUl*s)LBv=w74fF5AZ{GZX@2bu
zOfBxOKbV!VMc4>V(cEkkCCr8)kEt>;CBPRqe|*S?PN!HR_`{Z0OrEWuzR%Auo|*V?
zWwt<Ht#!G|G<U*srAQLkSQ83J9{lRvQ(t_4_Vu-WrL*VClp)@djf%C!L?T8E73;Xn
zK5)Xadj9%>6e=Mhk+X6s-~Hv|#FhDVx3xK|s7<mf!wT+2E+Ad9Yy1K-=2Q;m#%lZf
z`zHgw%)I)1O|^-=-_IHOutEkOf8;i)s(R_Lc9N{f%)fs;Cs|IH;%eIytqw77)vd{R
zayLF?LYxPPGM2H0*xl8nY~UKSZ4o!T{hkB4iq))7F3Pf`^8nZ{250imI|o^)YYj7x
zKe;QqR*^gFqcs>6JV)XmL=*ioD0VjlL8omK=R&u$MqK=V09`<$zZ<4ugplb~2NBFB
z&BBdZW6i=sO8&y%PqCC_ETu1NiIGC8T-CR!SS<Cn>O#6AEP*fHZM0e&?=G%@(KY<b
z!_F@3yb50K=~)+EzCzT+yFMxKRl1-SzwK8G^zBtzq+%`8idlm#xnXI5%RN=Qp{p+I
z%Xm_**Yn2@TS<(XnohDbJJ%<_VNIusgf2g|hBK(?WC-J$PUhj?T7iG_0W4p`*YGv`
zQEXUCNyb|GGER)2z)7c1A3im$-%;llME&~Mv~U>^)A~Pv$8O&Ihsi(3)S(4YH=3sP
zQ9c>``qQQNKXpIZ-WND%#`oQ7qdj%cPI8JSg>m;JZrYuu-DbNTT=&#Hw=lln)sH$2
zXncWFj-PSte_xFa(a9^0?HoUY+O?-==TO6E;<e5X==k{M%&mJ<_!Jz=y}31WI`e7*
zXdMB1es+3#>kY?Zm<4#|^mGP{>#-BBz!cQRWqUBj&rY;BHjC|OVT{kbBs2_3K~K)G
zSsfVY&Oia(-=7#$1_r1;41$5a9-C;pIbmEG*o*;;@$)v!7aYOw49pOQ+YhF=_Bc1i
z{Sj^tg%_vV`x8I5r>0H9V>kC%Q!uz8z;}nHxHrRL2%j+No@A#EVSGbih#iEE<J{xN
zClEO!7|gy_Cxrz13Ybh_|8zsF^<nTpvyfgN6JInipl8r`#cJ-s9Kgf_9T8v1;>X)c
zU7Y&#>$6kXR%F9YpN$RC`2(_Hf!0q2AWbSDNruSXRvMw(5KXc;$!OEp1W8|N7Bf08
z+U{?J_TYKZS&eXk=2S$lbO|Yn(qD`+;_KEr#qx*4e77jd=j4{#v#t+^TP@P_IYkVw
z$6{eUnD+;LzG$58EA`-yhCQBOG%x`3Lg%oIFWiG^A?ATwF<)E@`(p~s(OTFy2-86~
z78~tzBM=UHI3XO-86b~O){t=Y2IvdxM<d#51<+;K?}2VzI3A7A8W_d>NDG^)lCh5A
zbv@WWs3?Y`IvrHXGoa40<Oc7jK3vroYi<MwB>>F{Ivv{3nUAwsn2to_rl&j5YDLX1
zBpyF7n@6UWXq0thg=sBJhX)ov4f_V}cw+x!?+jwvw%!2#Zjd;rm-OH2FHTh%v!LWM
zap6Ro#Z9u(shZeng~Pf^jX9wmm&oV2(;}M0lvRZ!Ynjc^I1CAia-o{k3!8+5RH@}q
zX;DYJ+>iV6a8o<ae(!tJn3$B`7Uu!KetiBMf5mQiPZge4K<Ze|XyOwVLT6#6>ZGcP
zT7lbSW;Qlb;wIy^FD;c)#qCR~F_P%+OBB0NLbURW-*LQ*l6blN;8&czORks8<?nF8
zpOG@<`AbY5qyj1~ILIKn!O@Xv@K@-_G&nvo07Vo<t}wy(_PCKNzTmbk&bd=W%M#`6
zjt&cJwqe+|y(i2WDBLj(<BoA(kn{0);m|NmeGii}(3XuCfjKjIEEJ4l(I`9*jLhUw
zC@w4<78V}75?8~+b5S+e!yj4=h8O<Gd?0vtWVa-pk^AHxetcxl2?~+DsrriE9USEA
zZ$EqJb1DHvd`99-9QOOTC+IHGSRpL)cC&-n7~)!QX1vq6XzwJN^W-ZD$l1V4shxNL
zaNCf*`w`!sT90qD_eH4O#pA&ruTJf(!`J-;$=lb)$3Ge$pW4~R$U9S4$FF{{4z5_<
ziLb*dPS@gtVi|~E8~=D}YA{gVW>|+>tOwpwe!}wjF+83GAaxtO_b&*{x=Tphb(c<N
z4bXlx5-t!VXQNRi8qEsj7-&kuwyKt$h`>0;leH?4s5+JdTR`EaF=ts;U&6AjL=;8|
ze$IW)fj*kEZ96xrA2=g?dBm~wNX}ZcK(>Ukea{|E!Y0!X8?LNI)1W9h*yI%0q@!xM
zJXf_~-%1W_%o1#@>Rh-SnXry=+~<i1C+A_uG@;0CEEt-@yd9it8;*H!aA4BW9747i
zZH#Q%OSWmj41yLNaphri>E5C%FWy@+)BH4G3P{IV0-26@k^7*|?eap-^x3NR`DD$@
z@I)d3FU@@QK0K;0o*33Vkk9?RPq!euANe3=0Bg(kvSqRa%Ff!_nuC?Wh7DFWaI$=4
zNI6)Z4BWrvAa|0eMu5B=BpWIrYQ|v5uNe#(_2j$g$;+A+L&`JB*;2kVna+ykky+g(
zpVS0$TK7;=xpGSPkyknLjNU~l7AnU|dN-+1`9qx{uZ78z^vmwUWhO+{JWl5iBtzt^
z&f??(<P@GXq2IVafEkC`=VLh=AgA<T8TOnd$H=8)Im5bHJuI@WGICN6i>yy}yCXCd
z8#(9@WU1#puAazX$Gmab7nUb7Fgx;A)!3@}BU3#+qGr{ZWL{?zrrD6L&v`#&BWIW(
zOu)`=5f#Qb^4WG5&7;(edMdBzdsp<c@1dC`ngnF^2AWm!jRgPEH`V;~fB0YUA1ENp
zy&vh)Z)h%&KO`W(Nbql6clWO7y{p&7|99@Z2UrT*D}(F3krel@eGalejjso>GVI`4
zynLZ213kGX_hh*yBh|j78Y5ATUcW)``bZ&UfT}2cfE>L+b3`C88iF<fxxeT&3CLv$
z$e$9p@`j9DxFR7hw2<<ZR;zHg*lM*<a`A4P3PuJB;1)NKIk(y}b_a`<R<VMNyiwRd
z6%S;F(=Vqakh`mPB!S!sE7c05n#=%R9-xg8#gQWWyGzp&KN9b6O<x?s{;=I_Y&CXq
z_63lEr$Z9*)>FI;_B39m_7Ga8yNQ;8rx%C#c;(us1AII(*f;pAs)6jGzM^nvdi2U*
zH*WQ#Ww39=Vpth6iD2bg{RahHlw5;)U~{f*!8|CVq4-L-*&NQQJl@H*&70@O1UGP+
z9rv@bG109dSKe$Sz{Sa%)1SaR%QzX*y)06xj7pbs4&=?+&nOon?~Bv*{08XF%-D&o
zq}*&aSK!^F^YtbVI;T^+cC{5a#U9ohT$<2D8(nfelzr0dmRG{*mTQeje=G!eJ=cJG
zgUWOi6ZQ=nxkg7yL<ylYoh-;PI#5=^%fY-2JJzVzLSW_oT0InUi=u!PIUaILN2{^Y
zsRpNXZr`YT>da}m>=ERwYQxI)a2T0G(|@@6G|Bu!O8eM76fpnxpnx3vhnE9h{T|IK
zsY~GN{J7HLprykye}XG1Kf;&p5jj&wbA~oX6#MS{qPLm(MZe|DFM9jk{Gwm{{rN?|
z{ENNw@onNv^Y}<w$ZKY@J$1LsVy$S@TY?9h=9e)jh$iulZDJ=tS=gK1(|J6x$1@JZ
z@px!MNF@!5traZfhSiU-mEfWu&2?d^(qdGkR7#I1JqZeG(fyFca@BELt@b4C@+aK$
zj-B{NY|m?5yDBtal-JLAK7RZ>^S*vPo*ABb!*gnVeNn!4ebM1V?gsTm!7w0&HQ?GX
zZfn*TWh?88f_ko9OO)V93{+kP)Lb4}1xBu2!!|*E(IlUKv!~}xaVkpSIk`o7v%CA$
zCVrHlzGxzvN{Y#Uw6BF>L`Mw`)vPZH`a{(1{>vZM;L-B>qN5e{MInw47ToR^|MHvr
ztDg1x^+n%szcJ-@i*I!Il-C!Hm&V4ZSzom1c<R(JTn}nYylq)u6g*E%+`n?AP40ZV
zvc4#2q(Ff4c=4%;9?#v!k41jy?JulLSx$L+M1Z4jTf-2=kehG&R7wu@Si>IJ6ccyv
z8_}tWgeClir@PxdHKivfhpgd|-*k6h+4DcGfg6Xc!$@=w^>pv~@-8om1cg0E<~*mm
zuMCaMbrZnda7EDEA^5vS;`z{34?N7xog#ow&HWm~SAXXrsW1BGHSDvy`x{qZ^q=1?
zNvkMbvP-MF)!hr_-<rRjN47FSImF7F=)u<nAq-y=?~=psZot+s!w|y^qG`mC!Hg|?
z=S~(LNMMw?ee~$<3?hM%eCIsqj*Lj)*4r4q-AV#8^qtqwpMU)h%@D=hdgsFr?|@?x
z80bs}SRxo8&{x{s8*o#TOjFZWa}y)QzIyRL2z2pP7TAYrLOo=ucK7lBB+~KTcIu*=
z2nF?Cq%M%d7iz=znt<IWW|O4wY((D_=_P|_JKk9dzXLP@><&%;@zb`Iup?;=-#elI
z@$v6}|LHsGtTpWJ_`9~pbDus|!l9%kJUbSCr|n9c-Wl%bwT9Jjc)Cr2OQyzVE#XUH
zxEB3z$5?1goh9(RxpS;-a`TuvW*tWFSXd3Wb!M}fklPZTcz9fIxqs#E-TywDw(gYK
z^xgXto`1i0XqKP{ld}iz-a9n+Pw%I#VR-V_ZFiUc>-{9zsB@oy|FxPV9nb06-d_?A
zeyqPTe35+KxJV83-Xm1+0L5M;7EE@*j!W==crMRcDHN=_UUcgZUaG5Kt*hzugYW;S
zu3o~|i;}^hUr|3KhhL($HUt0gTLO3Wlfzx10a6(52<3j*)kOwx-5&C|w}!U%6Tn@^
zJXr2f7u*K^qx!-yMA5s)v&R$a+Wzv9|Gm>d0E6oR&z?PQ*dS2!>0cVigdvXJUia26
z^IDhsdZhq|LS0=U7=HvX&|UDioe(zloWfhbHqYD0;lG9Hixht4h02K$;KtXBzVNTF
z>>xfzzjrb_{o_w|5S^pn);&Dc(wZT_A;GTgy*<N|2xXUdSn<#)Fp}Lp6D<g}LNuQ=
zhVcis>)}w()ER{6OhfkooAbuj-kzcFonerxbp@ig=x&I`)8l^cEpRVqmOlZ$J`Bzw
z(c$4kuYdncpy<9n48n;Hdybs@sOTP|uMcCqcWC&~PmiAe5kzmxV)yl7pa<N;dybqx
zcl3P0{g1(Y9k`e%{O9#^fEV2ZUJouNdie8m=Z}K>Anqz~Uk5HG>OS&0{7?t?Zv_wy
z(Km#@*!v#9rgsG1mv_{JF}i2ibNF*0%`}USYrzn)2m0o{bHxx`t$3{0gv|&b-c_e^
z<+ufSeFR6(e{_babXo=X7bEy7^mm|ke*;_@!MV4pySf@KM$mn@loOz}VKaiBo<pbc
zhN^a21)CA{Ol&IU)Zhaf>K*FwOfpuVK+`isFf{cUYVhGJ!TWk(lA-^Eof2GiKhc@}
z6Y2ET)Wk>yb5Dts3sMyOlvpg4BZqTT?dM~WTF=&mBSOGS3VRt8d`bvM5JC)T7)~TO
zk&g_H1(26Rf)yNzU4S-+f-Hk_PjeiXYXJL&NG|s@!T`%fSOj8obzvU@2{D!p490@^
zOjZCPt{%*Rt03aMjPHUF1Ue!hgd+7~M#$?$>{CA%^LzcUu^Hs!y!Ez*fP&5-<AqFP
zv8NFyVz{S}aveAZSvlFDKLQ=j`r#Fgx3fP0&bhO>n3oL%V;363Fx+yHv$<d{#yAmc
z*@HQVBM|gL*91_`0`}rjBm{B-@(ajk0SkzOa04+X^7@g`7=}?KKu2;HI0S0!ITyqX
z!+{B%Vi9wU6Ij+~_V5Krkznwzij6b@$Lb7zLNzzZG&OxuEa}7uEXBxt3S?KglOZi-
z>K{6MYN|?-LQ@odjB~1d+AwtQ<x6Tholf2A@Ug0tUMIUu@oDjxSJ3z(EZ*XT7R5ee
zl%SMSe5FG1(#@ao9b9039$<OQ$IdG^Q#Ykl309D1FT9F!I-SB!ryw|;q05(?@UU|y
zG|sUS%**;JeByE~UGFW6HI+&e!llUh6eWP*odur&VF>tfrvMtOVhtYA5>D_YuLXQ#
zW`gsKZ;b!hO$idLlBB5;1qrB5e}|YhH=QAAPVSbNHdf;;(a<rJx<$Zi(*}k$pd@(h
zv8e*ZS9DH_@^#!Y-*T-74FhoQmg!eR`YNbnSX_N4yFF<)Uj}&UX0_)Ok6~C(B%=!E
zE%*|glG0iV8Y0-PYBo(vk-^YK2&qO*XdSG`HpIwk4cC&U+pEJ!Ycid(+t<Sil2cVM
z1fABUT4BI=ORs}d21G}aV72U|a7lJTnAo%30wxI?V5Mjg1g=mrERYGNFN#*A6oFu3
zeD?1F`h3E_AlAQ8^Och8E`h2q#$y^R?V@(uO2T*MoHq?*F2OlYrsAUX3Yhur@i4-e
zY_>l?K9B0cHZ&im8SL`s*d>FP>cT)HRC)tg0=7OZhiTiIOL(x=hZ!5VWSF8$hPH?~
z{P$(683?@+{(oFA8V=WAg0s@UXhP5C;D6@s0s4GYBk3;`GcVc=tC0XU(BBW$>CK1s
z#x+CQIp20*gaB04@Avu!`y0Uyf6yriL7(7a1)tMaeVeU_qg?NE{z0F>wL3V$H|V!H
z4wkQsQ2q*WPXEDn94j;j{Vso{s9ml~agKg7(Eff0SGB5olCc528X~}z>z)tTUxNLX
zu+U!Y;{JBQ61I7Z!w1T@W4Q4w$~sJXz~Nj!iz-#(!-Cn}4xdX`szezxRWdZ^s}4uI
zfRuG>*4Jh+7Q#V}3%K|hl0q&E1}`Hm1*|m;nn_89VJC#a`EzsMrKaHK!e}bNZ`D1y
zjG1*Z>cI<=f~6N_E=Wclct%H93~j@r5tcqv4^|LBX!%Kgu`i#0l7%ItG=dp~vMbZe
z`IYIFEeJJ+nJv@PnM`Im4=q^L@GndHKmoU3KFR0vi%WUXmwA9cC<CZtB|RK-F?6;y
zo6UmfEU4Ay8hcm<P_LHs6Tb_ArWcp``j(a!Tfuhue^LgNe-AqRNL3M9>01VPxi5<t
zUG_QZd}#u#%<wXH{sg;KrJ4E0@QhudO<0qRnFR~aFhEl3bbgbvU@X`h!9MgZ-cm2V
zcz4G=Fu<aPdhmdk>nLui{kQ>f-hnzW%;3ch_43QO1;MvK75oh-!q(KTT2niL&Fo%2
z`}?9BmGRgn1Us(8!h2uD+JH-H`WO9l6Qc4>h&s?mtOL&^{2Dp@8ubFP>jQX~@wEd)
zdhM(FMZYnNZom--u_6@LgqoT8cWq4O-!AyO<S^X5Za1-G^X_%KiS%7yE2i9hW>*E^
z`}4=E%E2sJIhp6P$W|s-84UUkd`%F;+o%JiFlYnbfH&X`7}VS()713U#Kicu9v3x;
z^*5B%gqr)gw41Tj_{Y?G?yLCHM2H+lvW`e$2Jtf*B7qS|TbPj$h_QefRnhg7v0(7J
zuE<Pd7^%@2W5%9Zm@%RYG_vrFcw<45X%&v_smL;B*$&wu#K(EWGzSxek&<bB!ERWF
zfpmfd2{s);r;v2FjJ}3}L@-1N1TaIaCXa7OO{lp^=4(8=^qp<Fj|l`*F0daH3x3g)
z!`mog6!a~C|4gipDYk}!Ahw36-L7>)bT~{Svg4viT`&xo6-hpWNH!!*lMD@!z>1wl
zh_)+4u#`d|Ng{%EJmqRLIuT5#W)x*6MU%il^L9HAEa7och9N&LngKmC$3-`ei^^gg
z$~&>KlYS`*iYwge{n|7|(NNLiRU4ux7&eLV#AwUO>s)GlJYgTZbixNKHCYuCuxuzY
zSW&Q|l8xd7q>1B2IIawy^fE4fWIT}o6#qp#lZmO$Bv|7j)p0V!B0Y&=N$fZqaUwl#
zQt(Pm<CCeS`_kg_7FidgQA%nVyd)so7JzAQ%!gcjJRTPzNS%gYGkx;X;>x0VPMKDr
z%3RRt#5LxwdxOrx<Pv0qYYFC;rk}vyQl|=dsn}ilt<Gk3NKk@UrlueCJ$RJQ^CO8k
zuTm$k7qw=9E+<B#I6?8rgD3YNJ?Ilha1v1}asmXU@xXJzh=FF!b&9qnt1dlw^k|Y-
zHC-GXp)@&w0#25N1W^E@c4=E=*tEQ)&<M2U!IKC1M;Qc?bxM+v^HO9d-WoCrcu#aF
z@zH1+71pXP`NjN$OeVic*KmR;2>mb>H#;S%A>l-9%s!sbWm=O)#}l2MYUc2Ys*8z4
zlGiBz+0dl1+JmFK4RI$!lkxFFf{AoIn!42qeN;@aBega*;HkKdf}yj=%yqn~O40Ge
z_u?axsw&CE2&KevQMkgW11ph`Xygm&kf4k}HdVQ?Su6CBPRX<>ZS$sp&9qb<Mx!ZN
zRq+dMpMjoM@e8Q5qR}=@N+h6*z>@iB0!E`s(_oD!;w`6JK0KX04N0UGnHqs-;y9Uc
zJZ7t{<mp=-H*VaT>>M`}gdtu?MiEB~magEz4ydFn`i<+?kDR=|zeVS9f=E+DvCvyG
zSiEdnx+L;uS~q@&wI8RdDHK{w2D-=;t!lQCb!Kkv>fGFoLaLOgXbc0r1zn_QHpWaa
z&I2zi*y_A``}XathZBiWQO606nh9b-s-tUG)HKAF&6_uG;tS8MC8#TD(;9`e3eP1(
zu;NMauqaBpF2&6R`PH<*O7mJV)wEQwcxnHXUg%4HH9=aFOI9&en`WlEKZqDjqj7?g
z4i7l3(WD{+iqis%0V`febw8^op;twfro{26VHDFEO(vto1k0@b$)Y7u@@OF~g-;gK
zD!0<`0hkyWPb<)?37Mj7`f6GlpH50eOH4|tX(?h-G%cI$IXk<wagILtnfXNl?Pst6
zZLt11dX&v%vl*9+TiJ!%EULRNik9GFq$hL+w;39@OZ6{GN6U+SeT#H9j}Jf5*j|1H
z;Cv;Vw}SJlaNdOL?~A%@E|(3VQtPVR7ws(9Bv#>Jb)j5TPZOf{dWg06nS}R|!~38N
z2(e?lFS>6pk@f-G%#LeQyTr}yY=2XJP2g)M`^;vsZj(0~fTvfMru(K>`lkC<>NWr@
ztxO-F7NHIUT5QcOp}u0%2Tdz9S!kAu%_3UP(2LY!6QWvcNS0e`s^%|ERtTaRs&T&C
zW%D}P9ex+dQ8i%O1=fEMXabmR7hvM%25l|^Sa7f~6Zr;$Byg~u1J8qAmo*Hu{~+fZ
zbU1+}fL*@90WYxY;o8>~*y>zY;O96$SJn9Ze$%RMsEBv4-RtlUI*QF;RpTu-?StM3
z6$$vfu7RL1=;~*o+0Htl`9Jo~D5#AiPvd$priI3JWm5+Zu>_ldj825b5r`PrV@4Jb
zfou$<Hd>!!!(sv^_6C`_6jt#@YwS3}Rh*KCC0kp&_po);?QOg@wMWV>1&6h<iEDFC
ztv7jypRWAm*L#1uucxK4QEO&;?#>D4(-&FtNI!k~clW40)6@MQzu(go@%!*}+$ZCy
zUug>U^o=@pM?9X0ClaxG0)?XjMe%q&LQhZme9_HUmtN={-MxF%cPwLlbxEz!)`T?r
zW*04I-3!2U*1b5qa}!*G7j-eX|Jd}RksQZ#<zN@q7#hgY-<Ov!<OSS=Hw@JO`0=yi
zfy|DdpX_10co?Baihx!kA!9xM4^Ws^onPz{Nv;K#XN)hAWO7=}<Xdn&W2Dl~zX`V0
z$=K??Y;=rPGoA4DysT$BHE!<AaV#nXLzw9#4)3-DS3eo&5?q2y@D}*N+UjI%bzinR
zM#r|#pS$s#fIbJj?fr%8H*egiH`k4ue^_{bo8xkt-qoSrjK+u80HrTG+7G9Jo0;E$
zEztDgcE^4sfu!bFskw>m9}Y$LW0>V&kT>UTfoWqh(Sxmp=A7-ps6K#$%#jPcIkml>
zw}lwYndfb<>b8%=y7@h7&f6Bi)cgtxO3gW24u*Mj@SbK4S7y7Q*>Z4!Id7}Oy!kz9
zJ4kJfVF*pMpy^60Y^~sfhZsC~5WZ$GiyEXBF|0Y54|(C{O&W9>LGv(Q(|j!#z_8WZ
z5V&s6!))(hw)_sK!@O-yTr1|_DED*W%yk$I!R^l6?}Wj;EpLAB5Sj?Ep)F^=-?87&
zmNVb)_}skPfLIg3{Bv|)Rvi*EzlZLN-jDvKb;pRl^D<algQ(kH3APCj&pxwnK$L!o
zCVlm^iqY+Km}Q^b(Iy7(X4#9|+C*W{2wV_`C@l(uu0}CMVHC5qEo!R$It*I*{_JeI
znKanTmPE_@dMsw{0rp11p<Eh`P+ybD1VX^x5C$rHnRjEv*JK9EUO$Ejoe|IwGQOC?
z+6ZV90@3tx2;VdbqX&bHK99np4kKz4Sdn}B{mj^lFPg>-JFl#0Y@^2y)*SZ8icFtt
zLw~WXXC|<n^B3k#rNgzgo!R>q%EPsCU02rfq5y>vLUmmiHU(g?1Krjv;A$2wSRv<H
zWf0*C!Ozr2P&C1dFWUyzx@^pJdS3j3k*$SJww6%YS)BFMELCfw5`)1a-!W)w7^puS
z@q~JXuBTwor%_S7jf%g?8t!RSSVt!NEVCH(%U<zhN<CgV2P-nd7EIFwYrlP1JPi8<
zv|n}h8^wNei|<Hwc2Pm`aA^go__1iwsRC_nZN-m8Un;@|J6em;FFD$IwzZlbLJH1>
z7-*K8o8fH@!+2jf6y7%=1`q7>_xi(L&KmIkK!INLH23%V!UsA6h1&0!E!5lx&3!%n
z;g>&|<>c@e$k)=U!Al80Cw>8YYf$b7+!6iYK*1;6WgXem8XfQ<=2jHc>axzh>R{U|
z$HP6L7u#MDf;;wk>4ExRtziXlbBMwnVsOZH`~wP$h0zll6$wMGrc`6If^u5J9@H7G
zn}>>4UA0mmt)Bg1z|94p@K>exbp#cy1%pK{pS|#x&63JGw0+})7U?eqdV!zMe|xl6
z+v_St=JS6#P)oz`)``sL@2aas0Yd{>k$E!NtX6e(T>>zy*CMsGgI$8N?z3xyby?wA
z_t~zlr#u^pEDO&U1uH886DPpYKUL>e6zj{uvZBZy#k2729XAeT+_D)gd#dhuKx@wO
z%8Exef!!<5K3fG(x7!VF0e?4vmB^iQ5yh=UR=|7CnZvL{q$_t87S2_9-1v%F%s^%L
z3WkjEI0tjn0=gAMg264S^c|GZtr)^6zv8X}%M@{YR#s#K*u9bla7Tw%+*Qw>^C&i9
z@i0USD4P`!Qrv=72gzs%y-`-GO!p00rcKP68^y)nEn&7JA$Zh>MHu=n3V-vMQNYJ{
zeu0S-#y>0jKUkiAiZbIh3u~L>n@@!GjpLFHecLHRRn?C3j4BLctyhgI0D}P>C$S6{
z4G+&ycE&~GD%crBV+><~IZ~BoCL}ToY%v~RG=UdmB$dHRa3^3jqq<x*8ABKg=;>O@
znOP!9DHY$8;t0e5&VX{x#_2P0Vu21`rWQ?LmhK*s@QSCHF<h|f6aEt!BY2U6r3oYF
z%*<o~ERmFfv%1JFm}NopFw4y9EV3*$!^3DdQdE<w%EKxa>=czj%*FMsWa7PKL-slu
zTiusM$5_fQDpLtgO;i;2EC9>yNY(kF^XID~ZrKW!m6f64A!vB0N|7yKca?@}c$M26
zcCUcd=@qy6@$-2=y3U&(BO%~TT2TroYATQA`2Eu_9%p~?r$+B1BTUo`hvY^jhekr-
zJ?9>==k|m{ksPix$|0H=&)4hqQr6ScPsj9r3S2{f>cnP$k4O8^+v}s5@$k-Z1#1IB
zK9EiT&UYyLjx)FE3*kfMI52I65q%>Pb~Z_bN@{9)=iIq>n)FR)I6{r+HK0^{5;(P>
z>rzvxStn^?n@(+$uuZy>GleOjGgA`LvJ}K<R&I47PPG0%KB3Z_+%cE-p)@r^r+})N
z#feD*+nPmH%L1R7BG6POqirtMz?@7@EN0Z5jtrhNGgvCD;&l;Tc!^<=G+wk#yq%hj
z&(IGuj(BQ<Vw9<g#j*UBz7N4+3Y!RxeW*^P;;0QNPV?HUS}>3c0id_eu$8Pd0EB}C
z(vp_sM|)$DMk-OEXf^0(<ND?l!l6d_Y$VQ93?DM->&tb;V<~5Dsx4h@&NPWN!4tsr
zuS`tDQY<!YX{nZtWP<+t3j+j76>}0N9x=8><8ewfH#W;g!UELF1+kK{azQ95E5@Vw
zqA{dI-<elt=hPIQ^iBNBq|X<9{?^}$=<+tO&(YZwt9w4P6z)g=Jf;n7)L+{pfM0ez
zS6|<-UcYhk*6OOIwc|OkPAAN1ECTQj;=It%aKkbdzzyrfRli=p-hlZLw^kSK8S8z=
za~l`P#f^pwt_#{+jd#oh=Zj>1V`B%tp-rc_XmZgOG4CL^HyYOG+5LeVHr98T!A=6M
zfw9m=!@SD~M){oe4fPkL3zTH$*fNA&`1~TdfS4gJ77m8>ZT!)NSZ=$FU}#<kslNBU
zwY`2$3`Wf4;v?r9-&^afJ-}x!rLcti>Y`CLbldttT&4DK+KsAnk$kn~Q4GQHD1}+0
z)URJy&jtH%Ku3AFfz}%KJjBd`1!@RmN7}KmF~0-$TCj=%%A9W#=lX3HY;$e1nb^)R
zUBs=EAB=tS$$O>(3~N%~ko|LwddWh$A8Z#;fx}C{^&1Z;Dh6lIs3I)j=d*tnL)ol*
z^~vOP5*b8&IP(6`VEan~D?lG~UmG4i+=>}x?N%#5vkxAQ3=bU&9%NUSejsK`wciZR
zW;NR=V=<-87>4at*dl`bl*J(f7-;t4(D2BigE`wM?)iScIE;d=71$0BSM6pnZ+lI%
zjWRTPXlVHSiUQccc4#n|FIX$J^|)mQ^R}q3ylrq0w%YMAgZX9{Oa$9=w%CF#KUtbJ
z1GNn#U1d?tb{NsZmWQeB5Nn1q;%dhPPuQ-=u+76<GrSmpXR<8W7Dd5Wv^@NPwQd3m
zLIKUz4O<S@n<0>tT#0C|89cD%V7(d8x^u*t3>;+5pa9`uW}9n<xuo6<9uDSOm)W{u
z%fql8Db~84BCysBBb!^7w`FivYu%`Bt2aY2SpShRTfG^I!f1y4uYt9$0$U@v;MV|K
zlat4Gy}n?}3TEv55@Y$+<@JnqaXe~itIxW}W%tAH4^;`B(Ql3WE@c*lm2sqO$YwIq
zK4HD!h}e*$+Ur%kOp3*Sxl?I{qJj$~y<RL{^m>J0FIG<XNdAad0QP$NNx!$B^ntd9
zdx?Z~=n}!~BI_{1p^%~|5l=W`3CkW|xKY6*)Np@9v4jzB1hp6;eTrfobC`tb=|AZe
zD4?SBMtXg?-JnOYh7oSWkEOE++!_W=+Z)f8aJ5%h)%JE#J3GI<pH<3+>~#fO<?eOg
z!hBJQ6hnx?d{LKE;#i4D#b%U|vV@Bi+LE%QB=N9B5(#Irj66PLj%+V050nuO#s>lC
z_CN)3Qn0VjNpaE=B`rZGDTIj>Y$4G(%KCdlkx00wuL(t9Z*uS)HIYbDe;D^|gc>8q
zoAAGjI_IJ;vKb~7f$h$~cCe8~*`vveq#Z<RPZGEnz~xD2B0&i9g)mfUJn%BIc961w
zYkSZo6&BEyC?`!lIbUz6x2GqB$?PPNbe8i~=X6Q>Eib*{c<hHiOojbTq`Zs}4u-dc
ziI<wO5{h5K;MA@dCR9?Chgl{P4L;DTUHVa3LQ*4`l}~Bj`)?|{9AgL*Nt)cd50!kN
zcPgV_Kq?vraaK6VWb8C%!1biy3#sZXAr&ny@Lbgew-b`Oge1)|mBEV>5+TW;tE@uW
z1Y`enYP-zLKhiNeO_>Ze4wT_RHo;OwRNH09<jkU)XH!HX$pm&?X|prkWhA=Gu)#@)
zj`&G1E-w$17sgCTZkM6skGRV^O(7{c;YuG8S3vACWz+<Pa=Bc1*50e2#%4b&fXqxP
zpL0c%MB-rVrHKmu2V0TEn;Z-um$S*DE3oQhq;G4!sGXcn?RUj<I=vK(1_klIrxP_r
z@gGoF!#@>=p}W9^VZ<U1GrV39X1F*E{O+g5Du6*p%XS!vgM)!`<3k7zj+PUn-Od~?
z!GT%QR9sv=x3#r~dyTXi2KtKUfbspU+Bczp#j-r(qg)*Z8tmXu4i-dpn4;C@C{(S%
zKnJW)c1ACXvNQTtF_fLrKNAtZMlZRNKYj~3y|lFbEvjVa(&^XVD%9CABrfeA?IkHB
zGo9Z1^PlgXM#|LJMo0T6@fS|xlaAPHCn9~5XWpFNd+OBQlPAZ%e<Doc<2(wDInJIO
z8+fBfni@ZS>eT6R*!o>#NS><OCC2n`zV7(R`1s6exGk5TI#qspG%PKjnI0e4*}0LC
zx6kG_-g1;zRFqfvj{EwK|Na!NRrK{^A!J2)KIX-H@BY)hvHUk3AH1RI)ElRedl|2%
z=+=@R#GzmRdT?BK{^<8b(lmdRhl9WR)vp3SDRhQloEMy#&VKo2;7bPUF(Z>wzaKFp
zO>-YMAH_To!>pCpr*qDzjp;L!QfTxvt&Ld{K5=?xJYO5rtse{w40JBF=AD21=7h_C
zV)Qkwo~Ngzo;L=Nh&Kl>eGGm0pRKxcoP<sw`7&DY=X+1Sd1kUNa^khub@(^G`OSwP
zwod1qUA|G+p3LtXZ%(I3?}=BY8Qk&l;g3IF`nV(S{Qad@#<UMkfArCIjTu`m&(}uW
z@9R14^G)e7pUjtrKA808o|#J=`<KMrnY{B`Crvc*<uAV&`{mu4yt65ss=QlXes?Y=
z;5^>(uU~v|_wE;$mO3n*&n6Fln5y{Yq2;*`506coI-~hIuYFdQs%ts+_VsH6XRVy8
zKKu9Nncx2QOv~YP=d=Yp-BMY3wQ_E5@M>jcQlRR_E3X~CdbMR-sOpelIgvoPmQ}|I
z&aaEZG_$m*rpFwU<DxLSFQl(O`<8%c$A~WXtFMLh6+IUH`X2=K_1`$Y5=5b|955EP
zwhteH1mPn`=b@uIu6^4Oel-ofdgKv#<keU4WB}iS^3K?te>=VU_B_5_JZ8A*zDM_@
z(|cC&hkc!k`E3XvG2iRyJ(|+j;cXf-d>KpW&tPEeOpRB8F|DrhFh#V72G7G-x1K*@
zUK_U_hi@6jEac2ukc$~X!@y)m!WUN`)kYcyd>Efyzy4X?Wj?){uZ;QP`^M@jVrJHe
z8aQpjc{D2@#?e=yqjZzex2~tt*Kbjlhe1P+zl#zdHQq%xm;8t(BN#Je_5d~%7xR<&
z4T=h|txm>P_a)vjZq2nzrCj&b&BCg7yk|p>otKK}kAD<i-Jq%y6ROBc0m{<3d2zgm
zz;wR3gz5HTFr6V!QerThoj#EffkDS6Cu14W+2Fgh2QPb#Vyn6TPwvl8eU|1e(u*p>
zve_uUeqqrYY6$Cp;~t<FFA`ChxNtiQA_hy&+xPF^#)|-qAn2_$5Qq@GgXa6M5P~H#
zPo3w9WDT<@SR9tH<XUI&x=RvpzF@;y$~#Mz&M?0JDJ|gr`xl56j22m2U+?Z-UtdGJ
zSjOzaH`dm`xkTz&lE{S%1TX)?dw|-y@4u~|mAzh65!M#zMYr}D{SiCI{6~dh_)h-r
zh%o%mWLXe~G4^R#i^0dFWdE`leB?*CNIFMgEdno-L?GC=EC4g(AhWiHmnBTSjJCtt
z5<c=f%yS3^nYATMjR8j!u(p6<JO|^vwFSJ~*A8R)XqT3Gm^TI+<*j+x)fbG?44Z=o
zqcmzW7<*7lAbM~xjRcy}gUs64*;Nq?1hu57=_~k~bJ7^5#{Yqor1|`*f$gv^4rAAB
zsz6>=#%jqqgRV&fXY86Jc_<AwPp1#Ds5zJ!AJ$Q(E3hsOAM3lfP@v&GeX!<Ww8uNc
zMU?*OkB;zX^cWv2rrQ|V;m+tm8|c4zM*qa;i>maG_QW&%9Ya*GpjGQ-x$4-Jnq6w;
z6?Iq5l`+){t{J*=sbzS$a#!V$0DNV5WC$7=9;vZ_L1Vfvg@=c)2*8zKHTsHb3GW&l
zX8J|tF00z0)iJ`9ykrG~*7Y4Mf3|<Z+iXMM$vJEZE}hX|eqTtJS+09Q(OmZn!n*8$
z@x!%;4<D`_{@J_lzWcNDs|!_;6<(1QSW|fI0oCE3X<AK3+{F~pVVYix!SAl7vACR<
zd!+=I;1awg;BJv$w+AroWUgML8aYojw6Jies+jK3PDby(R+(^+U0mqC>~)O%vFLlo
zT`qSldg(pcurt?}6{tGg=q;{i96JkG99@Ns#9+$CCo=g92u1@qc{nqZzjOguGMeT`
zVKtL^eTvM|r4g3S>O^cJ=Av_%V=;Vj#&4kG6wbs*Ub8hSYQsRIEQ~3J((5xu^$hK1
z@FJsUF}EA=%cjn>E+BSwMxE&~5`$^flTJ9RX0`DGgBNGXlsXe96P8s6sj1kano(mj
za7NV`NrOSqrUs5@^QtS5S=DjNWd8UQW9JmF9s~6jTiRnd#%OOq(r-h^Ju57mw-mJH
z+-pO~CnKz_k)?UdtN^ul^7!<_8DZ^o%-WF6^{_=(oJo@K6)|UGI}wBl#twrOL<pAX
z0A?WJA|fz`X9LjyXvrFuDiZApC|E{#*s$uPB2~A;hV0!q+x~6DpJv$B?b^j}1aCh}
z^W_mCX=n69!onH7IDFYLA`Xu@hHS{5^OJ$0Cs@FTHsr`Y5Lf93y9v&A2`lTUvmr-y
zt*}Znok}yEO7lg<Z>lb+QHM`l_NQ`*>gk8=9mX%)kmKtk!m>FjeT%_Q@vQrAmW1@p
zHn2;=Lauvp_#1~X3fY70bux7HO6<?y{r~M`N^t3)37-u;!C$wnPR3UECEhWXjzzcV
z8PGmnND=Sd$E(`W%In3}Pg)MO7Lj9rTcHApcvHM3agh69f06tfK^I9zqj(j#@n2w$
zPLoWuBt_t8IY|Vf7>-Ot1z|i9z@lN4%|%7Rz|d?<G}>OYfGGIp{{o3JQa+d9-j4!q
z58mDMXm4)|CXxvl1q(kZKCtlV{ZF^z_(o}5^vU17uGEXlvK?m|aP44cttc$Z-F3on
z?Lb$zr&a)#YoWoeu1@+Yo5OOXv$Jy$S&h2~p#jAduC4Cw%4&BN@9Mg-R&54D^bX|t
z+fK^07BQn>?1qrpIt8pb47!uS17Jm9jFo1yokDQkjqKoH_l-IMSg!8wMjrivy6$S(
z8XiD;ep=2>0hqQSdnt{Jmc~W5QZHJ9?N5CP+mM~H+|n@1cLSI1NB>{!oe66jM-<1y
zt<-90Y-wyF&6Lx)SDJzeN82!CrwJPxhnUM8CM_UhZUu8y@q$qZcs5@nl+#AQU;>e3
zz_=_oB3$MwDd2vMzV|d8@5=IM7BFdw|Afd{|K`7Q?L#lSv-9r6Y5zA}&5F&AJTH3k
z`cwedGpaD2kD~8h2f`RdPr~83BJgZ+=l>?$C56G2-NnU~#g$$+0Iu|IKSb?SLY!Cr
zq=lNh0dRM3Wn~fJM<LGrZsif|D)De70LIQ(L3ptn1oszl1?Xb08v^g$M)>w#H>jU~
zM)=`wC1eD9d!%02a92p(k7<g2hzqt*kSP?t!UJRRwM#lsw00?FK}vD$l4d+eOz#jZ
z0yG|$N=f=F0G0?5sQfUoX_7Epe-Rrs2?k8pQqF2RNrjx`EP#$hsx?E@4=c1zB7jq_
z)CAZ>Ohct(us6ndVX4w2qf|)`OdH2LX~VtMP$G6Tv{QLuJmz4=C-sI&oQ(3r*hFoO
zv3Wk&HPJQC4^tCe^Zc-DA|4KajV758SPDZD(g!=5ll)hTU&Y}<p`cKZDHOg61;&vt
zu1mjoGy0Lu8|Hl({WV8g*q70N6AsT6foCtu*$-dB-z|TBzDD71zxOB)m#-fF;L#cQ
zt>+fPM-N}Z*TUgD7`_5wyt|YSjEDZaOBb?sY5F>@01Z-S`uX0gz@<IYH)guJnprN|
z>~zjU!M4_|BW%%T<GdPxt;VnSI|!qijg5`QS`$i*vF(9veb8?qOzigN)6MNh^Q>)i
zMk6}dy8oqx8{1Q~&30qdwsWfwwuqKW7H+QLM%(4mGi&W^f8EuHR$E|2Fje>|ZGE%3
zk)hGHUIVn>DkGb7F2nBQ(8RngqF0f0Fwh%VkIjwdsBIrAYqhyHggec~8f=xm(a74?
zz}BJVXRt%M8^H#wplvjr?M%G}Xv?Bg+YQ)F=(>Z!97e=Vnwoa)Dm~q}0Xwnh*N8Pc
z7R5>9+67ewblie6XN&D}=SPz)oS!s<tp|4F^d{{cKOXMjq=9yQojw0}m?n+x6MFSo
z!|m2I4#v5t>(nkhzvpeMXbYpeh3Ka3s_`({-s)-W0vsx8|5(^f8tj58+kOuWlV(t9
z;ZOnUU*(6kh+<cvsR#aS`o^PvYuHttiM!W5-`y(HPz5Z#gedwu?miz77;Q$M&SkYj
z${k8GZzIvM;nF1tsmA<AxC7k8I{P*foiMJliHc@Cn|r#qk)X(mXA&ltrf|vhkcF@D
zEVe(pswk65*?5%NU+b8`ttgWwI$ISfpnNQ3whB5)4ZYitb2GHpwkis9V?``OR)dXE
zTn%r&a4s0x>p0>PT3D-L`#ALro<HJfLNIwK11{iUgp`6ZD`{dpkfNy+4z?Lp1opKg
zQt(Usr%G#J3Mi5mmiV)?PYvhL;v{AQKAEtlC<(9vC$N!{>=ku@#+m}i6;VS18knYx
z852c<qo8DzXqWI31=Wa*VJuA{5d*<#u@IEXCf<><Pz*&uJEy}9f{&D^4mQG4_K1UR
zfm)n{9p_+#NJ$*0EL#m>Yk+bvLd-xjvG=kKJZ)P{FhWAQ{^K&+byBKfA5kHgb;yAJ
z9YrDCpoqwho|IH7djk}H0~o{OiiU^byyWWaEk9{zUM;p03Cv(_&>6tq!Om2Jm~c~6
z3Z~t(v#>L@*NU6`Zteq)_6T!jFBCiVPcJJQ1l;_G+rf1H#9dVR3zjYx5Y=Y(3Yz94
z2RE6x!8vn4ib2K&f-ylR6Jsc&cOmAS@WrE;XqVA5e_&*o(U0z4_x?@Qe|IUjkNBIe
z_rGWFAQS>)M*m|tJXZvsy)frX_!7Q^KlBA#D998FUqu2VhTLk9=(}jO9;hmO7acv;
z&-}^j)fKOCzF?K$zR%Bz;4vB$fw#ip!B%N&PylY719#6TX_fBRyJuA$vyT4YZ%Eya
z4#uscf1lGa=&u)$=Dj>7dDqb&z>C^nP+I)y5z6zh^xK!P32wQR(ZSpE;iFPsFOVGv
zqmB=!GAO*%-%|~s4;)Rb2S)nnv<}CU*U^7s+4A8Zlh@HBOq!Xvj(&N`b=|#%N$cq6
z?*aDY?mfuBzfx+#vuX=ZO7~$0?*;KwsT9roVc6II!P0_+Gc4TwV#y1mme7xi%};(b
z@sv^j!{<eBuJ4~@w7-7S^StQt`hM;)gY{+4^P*lDpBD{=aZtkH*<#McVad4+g=N%c
zLI%NrwO3b}3Web{(d{4@D{LM=HdyV6u#AjQQN-axPJ}sIWgNs-4G(~UGA0~0tE(m$
zZa-da2g9t0vt&i;+-^s~FmJOkXCWdXK_UtpZV5DeT*T!6@E2^MAX6xO6$*_1Fn0$r
zjhk5jfPDcQJDj@GO3@tV#*U~oQD^4T94a9I0n(HMX@89t1t-|{B9Yks6#)|tUL~2+
zC^DyQ50pKZq`4FkWs=EiHyn~yo%3i<DXMbje%bf@duVVSW3-ofE%xunmzVcDw#5k9
za9aN=QuH;B6R#qN$n~S+J{Orn1mpMbqvQ9dr-7OaEP8s%M&TITcd+>NS6F;^8m+Q7
ziZ;PYCBg)M{@JA^K`2$&_FZ@|J1YpYvx9K#MW2@hLE`&S_A^w*Kk);V@4|y}sXwS7
zt_=F6@*oUfmMfJ?sf2BmN-!*6PR0WPVn&(;42v1u8iZ69d{GK*LvoEMx+^K94d|m(
zo|R%!1say16PRu2-sqP~<q`(2`k{M+u}d(6OEwOx-0u%CaEYsaSY^<q%ge7XSwP33
z7<3uJF59p~8;-Gfg`cfp*$5b7FbGWF?;@i`$9S=edSMjtDoWy3gfNH(7HG7HYa9tI
z6E`f!@n;F=E9_WCVtViVeCsfwSUw)-d{#+(l1y$Slh2bI_34DK^eybf^}S@RekAf!
zWxih9csU(+CgQlg1%fAvEX%}vS+DiXiP*8{YV}!S<%$qFOPM~X&Dl;cc9fUNI<Gj6
zoH#s8$gnr;joO^z1Y`T)q-@~#5>q@>hKzo)X$M!9#pFY`j<YYW6y1UHu(qcJVx?Z2
zjw4YMG2u{kb9!=~I6;^^-hk;4N_i2lqLk{Elh~+FS%G+SLx+_ucmdry#R=FUTkejk
zDk4%*sbY@bvV-xoIE@39xOG*`=~8hkc!F=HB-sJM;~xwa-5g(fqX%N+KMz-6>W(}k
z9VSFUfuRz6lYn&qcJwJ;lwrjuAf~W?lb@cNbRh8uA`g{|h>NnNnrjC!#R<la!uQrp
zS!GzY%#}J%oJp0d%E1q7;uOQWxKcmT!3JXp<Dh=zVg9Io0ChvKqf8xr$?(Px)6j1i
z22PNo#uGLigLaBYWe2Dq$F0Z_=SXx+?sxg(G~I|4I#^CqtZG$d0RtGuV}cMfV1)m9
z`KqO0VTWz&rfFMQ9Az!UIL071c}L@jn~EE{PN?a}EN@cwLc&?FWJISVpmNsHsm{ih
zhf&zhZU9y#)7tf6wMwa}#{;lQP22F{Y}O!D0OG@#Hw7bms|~}ZCbj*QS>80AvC7$9
zMUe3A{CL-xnW5Bc!(rG^G{IC9qM5hafIJl_Q3$1Dl`*S98<OqoIj&F%@|wwTHS5MM
z%tI$}9C~;>Z@A+sXT-g*Fx-KHSh4*1xWNhch>ryuURV&`$eZBr`M76b*Rik^#qx&E
z*sjC8;SH<ahhiC2qg3}FqL4QsZ{I#dacP+LAFzX`q;2{Se$}J|mO;m}t_GYbMqK>^
z&Q@nk#bDYQKL??`YS1|ddDyzuhCy^H`Og$DKVytx02B{$5VtVYr864K-(bt40<~@1
zB)2L<-eh^5VdAcc>7EfY)Q5>3(;%-&s0h1!!N+5m6yDF@Gvw_Lc}MdujP9iozZ@8S
zxG+}7^LSyr-=j<J^-z?1J#OXye(FoBbr0O^4#7vmtxoTY?kE}_e$i=n9$d5{;8yqI
zE#95jy%V=w`~YwdZ7Uo%yRFu++iADk&0%XaYK7q8zkBXW-gZXKCcH<l+nS79o#qhN
z7v13y*s#Yo195BA9u3Dnl;K4O+YZJ<#J7KU+MSG>e`?;sJ$UhC+#Y}5VfSsjI~k8~
zkBz_f?c_FEQ0l>G*kT*Q5qvbk6J+25ZryFRhC}?n*=FxE5qBSe=ru>9QL_i5PS}Tn
zZMMO~?^kh+`yvE04Gb69L@0)7b=oXCP&XXop+CClb$S;g7=>e2yyYz;U^iMH_cNVh
zf|)Diaycb^d^{)TAmqK(^))-^3;Y-T+V;YVnQJr}>hjs^xoo5Hw^y4x3y)~7aqWw|
z$SKA3on_?e(%IQuCZF5f{_&ASGS_*3Tq|6rQ8+(7URu$OWx(?J_I6q$nMNZ3=Qy1Z
zLYEfTgioRJ{L1nY%t0YU&w=*g0=KxpVs+v8>};KlAQqqI1MpdJy#Ahn-vjaALvf~1
zD6p>#;&eJaH<zBDUz%SyJ6oPlFD=c(c6$ERHQKLIsTZliix;WXR~f)LRh6lbUR|I#
zK`N}RuI}N_sTsHMPpQ=4>dDn0mHG*BBd=)lt2>)H6?a`BM^_eh)?a0C*D-uGc=q`-
z4=dW*!p<gqS6xEf$P~3lkdSXGr@nsD?R$7-d1t+tf!XGkUcXMOFvt+;(U1RndV~M^
z<lP7S`9F$k9^Ug>ef-TgTNxZR3by(9GY>;N`{V=8WPthtcB<QjSNY+)frnW(fZyPU
z-~RV182bY7U~m!*XP!QP{?E@&-u(j41Gu~L(^{?e{kOlJ)M`)jcj7_~;^enqYPABx
zp|Own<jdNA{%#C92|T%<iGr{5+5K~*9*!Cx3(j$JbgXbRe;qO4^2LdAAyUX-10P+o
zxE<jRP%l1R{7d*9pgtUa2Ppo`9E<~QHWWosx&!~&!!eELO+I2}LF6GK;aE)25XXdA
z>`p9FEKGUUcPNfYyi2ibQ;bExlyRO$z$VjJIcm?8ic;)<?44n36K9&o=T3!;W2Y37
z5-`EtZEqbro+L?2p_gqhwiSD@gIbk~Du1D|br=T`kRyY*CJxCK5?|4s*A%w9P$2Am
z;KNnWp-Hq-)4NpSkod5|>aDa=!fo;et?m=megAU**Y*HzK#{*2+nMpqGpFXn(fmnb
zJN@O~=Y5{><C*dJeaYFd*~ocLk@8HapnBUN!xD9?<Ju^A6K*!;Y_7?eX<yXFxH&VP
z+PTAogaH#0GA8u=FVDBbgoHaLBsA?I|7*fUykx!n%)sA}^|J7<biFLRvq%<>yT2xD
zbC%}+(=O^Y)c>xFcFfyj2C~n0FlPo&qmL<7Ur_bK={0yhV>eJ{zBY_g);Wa+=al&5
zWF)Cj;9N2#iiwd)&_*y=tC))Clw^|Ntfa(*J&RjH7`eD8MzX|gWQRmcGPeP+xiB!m
z;$qYa0fx0jOeKk_1C64jXhi|7M5yJ46t*Fe257X2PG^i%x$)y^HC^>@-DCc=YNk(7
z-b`-=&(c-*+uk}r(p%fW9@wwan@s8j7Pbj*snPxWdU|^Hsqwdj11ff3zZVN)IQsEd
z`U^dP?E#6gV_A)Tpmkxeyn5XZcx%HvUNBtU{rWJBD}_Mx!Wd}oFU!}n9)7b*S{dg$
zAoQD%&}~9hyYb#1{WR3Cn2@QWZ1jHJ#>1N{hE&2!7uwn@6^QD5j(%xMv{Xn6xYVDc
zr@`!V^mKTa8MxWJ^Ro#{68omXlAMNQi2_TbE#E;cqmnT!g&E4|uw?9<X45l`j<y_5
z8#~MRIIINW<FhgWZW)y=78-0}AK?W&dbou!z){33F*q#|^4tQ<GTPEY%CnqCB;O$y
z1Q;4kr$@okU<rB_x95$2!kTI_rrMXO#;BedZ@Tu5t7>Mv%(S=WF7Zo6M8T;o4!fM%
z+RZ20vd6|^ic+{A^Vd=VR+O&0pIp4t7*mReZIZUy0E2DZ^GRb2-X+*((NsHwcXWO7
z$=Hq^3c^qfoB`b3)40Qq+pfkj99JbhH8co#$Jj*}1Mb2sGh+&}QA5!J%%VUvcQ9*E
z<Bl46hITPHcJY%g2E+Mo49*92oE7EHo;%325*uqA!x)o+S^~_1W;Dx(ZZ=rz7>ya=
z8XHMP0UhhQa~FAILh5R%2xH@b;0x)eZk_Z}m&>lxSEp(_PpTEDp`g}!no<q5nOhRY
zV?ySZaoM;9VuB_lv`b_?Lo0^7M&EIL;pe??lXr=CztX=*r2hsL#4=+v`W<$f<rVLH
zZ+}gJ;SBnf_r3;AgR!(1hDn7%_k$+F2&MTaZ!Z~$!=QbQ7YxK<$k*LBrmr##+ST)h
zp8mS}h`yVjThY{kN*L;H-UpfngLd?gVbJ~bFuDh*F@x=SlNd7s-UpTjJ1@OX&9m3p
zxAmi~diqNav&rh3(gx!2Uhl)EmhbfS4}4yT(0CK!O)kJ-=UR+ez|DnlE7*Ty-&HsK
zn>p|GAzXq0?^cBi7f5r;qZbe^buuM0(=<_LX~t>s_C%2Hi|PuWu#_Z^-|6N1qB<yS
zC2P><bU@e_<$JAK%GxI_k|*TyG1eOeT-^Ipv~5LepA)u_)7b}@?TYScQPE1)J|anj
zC0n1%5oj;$*I^1|?0&7cjU>eS3fp?AVGX{kRNE$D8wk0)McdGzBu%|j+6mnAO;s2<
zWymVI{Vr}Bv`P&R78bMyh=GlWmVkrX`aP26Lhlm#vpRLKMZVT-eL<_(aDQQ;m%*y{
zw@PL379)VI^*n5Q)i8FoC#|q8mBHl;TBL^iOR!bLh&E9u1Gja<mPMe36;!vn3>ImM
z+j6*e84?9sHH>JvZMh7K7?>J{?U1Uv4`8bS!<JRI$`)k+tA=4~6)UUD%b<n}Wv~Q&
zu42AitPHHWDgnlmthx+rqd^2(aN*eyTvrCzYQmEi*jARIj+a3LZmZ50udX)STFw`2
zQHBM*{f!FSdR~TF@a~H0s`90p>%N&}%jde^z02R)-hSbo1;TmJ#O#yrnVvj(^8K+>
z#|pO^dNP{;`=s>X`*(kL{mPZg*Js{423++IL_(Nl9NgXodFA@88|>!y?7vlh7wK8y
zNzwLqSD0>GyIQ!teyYlq^THFR?`J?jH*b{gTt+Br359@vUqax_!eHKKGzKaB5&E<U
z%*<T7cJ0>9B0lj)wF>Y`5xzA8=b2lVi;rr+|8%7UU%hel#*JI0N9VNRb5}|s-vnGV
zhE}xUi7RFL*7daqnlKL;X}<dT=ST+$M&_<zgxat=j9WKQ6+M^_5Sk$j@Keqralm=%
z42p7<4G`O%UQxL9&CjnvH+0IKhnD}dNV9U^yj%$S@}HLTDhbO4T`$p}^J4#LSwjqF
znkmF__1fn*E*E|EU_`=dQmo2Mepw$zh!`K!qyJJ-Dj0gqgj*79qz#0BMrVH}G+<aX
zEjI{)b?O31Q`W+jPIKQ9G*`IN>07dJr4t?AEs#;@M*u%1>s!HXLgr37X<ei&x!saP
zTL4$G1fM<);)VndKK=IFr-MW|$lxFmc0YyOBp9@3=T4920NX^e+JpuZ5*AG8nS3XG
z^F8{8-hAohXF)8<X65%RdH#Zw?`;4JbUkdHD#Ocb$~Op$%WAk`(WZi-ULmiBZBq-H
zFka}@aQ))ad7BD`wBV`Ue6O_%epCrRs)VhJOZkNcqVt8NrF?#h2HSABlwUeegDp4+
z!oT`;@S_s^s0wb#BaGf9(8kUP`TqTU{&8;w{AeBgh{M(g`K8|c(lVkpcCODq&M)P`
zEZPWREFxyWOAi{12iUOK+l!(g7OSyy!+mUr3|?$7hA%8GvDC2<YHu5O#9`a{MR55g
zI6tr%IU|aEo)Jq6i}ePu_59NEV?>-s*ozkove5ur76#zn-t$IbOf4+smme=<vwHw%
z!<g?+O+CohtDY&E+XmBA-XhYrXXrxSstxD0;KvPGaK1*9sn>#gwb~b??sYI`&2BMI
zf%A(Ex>q{2)mOJ%-7B5Mdi881RG7_1LWke^A>jp6&d(COnT^eCY-Yn$lQGr4Of^Qf
zcs)sf0E}hviTd+4EVxhB9|W>7tbYXXKa=%mA$6Oql)1ywc8gl+ix<-t;t_rNa2j6{
z1(xKCqmndwQI;rh7##j0On{+_X-P_7q{WO7pizl<L@%e)vR3L$6~$b+H=ik$u&E|v
zs(qPgjGLdMe<nXB6LpdmHFsXL&D?oWvYvmK@B*~iMK`->d;9iOn?FkFqCSVsqTCk!
zPC^$Yz^seXVRTVC+-%DE`G=#flAHzDaZvAK>AsTueSlLUZfmQm$tVefCNomjq%t|8
zD`C4*mR-@+_KKGYTS7@$^sitK%Uq%bG0Qp%V->2RoIKConnF>0MU~)?(^pf^@m9C-
zPgqk;##H+<)fi1&q7OFYmdF?X?{<d5MEXUf&PAo$Q4})W4remWU^2~MFO>%DV^?m5
zC^TSy$Qg1t`Un{W9PkIi9!H?>U`Un>Q|AfDq8N1dIbD8zZ@|$(Q5J2o9CA8bes~)c
zB`iXH*ffo3#O!ngJcEA5GTI{P=h^4FcaQh`dk(jx4?BWo^$i-pzJOGgK^TamuYxgv
zK?gxoVJD+$uoGcZXu!Tu(CrCPya7A?C}7aZy-Bd~C;>Nn9YN1v$j5VHI6$ATbXhd2
zqYI;pdVTOE&@WaWO8cAvolQeE8%Z>v*BIGV_awcvjbC+7(e`b)>Yl8Zp6j{bRPg3x
zcVi|b>@gvs(S*t|e`Opq&qg*G&ndLjDe-tb6^Z0Xa4v35h~f|l#-;!4-SEVuT``6g
zWkh6}gtakjPcYUpLUK+<7(J4t4bYyNw4^3;iZKi&li48yU%;g%1Mi%o7&aMG?aNeS
z6l~(qnbS;LqQk*>;a;pW+L!+9aJ8CbL6BX3TOzi)di?m7qrV8oR*$b9I}$xQDE|A(
zXX_;kkt0#;%uJs7^7xi>6T#S*$77vG@#m-B{gn#-MmV#2s`F@b*gCel<>{xv*qI|P
zpT`ne{cpf338zk<J{IY`6cAH&Cw>zg>2w9f6n^)2?`gsH^_UCT>h^@?x<ju|%eW2K
z)!~;fuV}#0qf95Deed4f|7&(H%6@T9%lX9c@bI~bVd(XlU%mS;|2RDS>1V$f#!oFc
z3YVu(;dk_P=FIM#tLa=1)wyNa9j@E|WfyKeay?>BXvU0@pNUA}knbe2(U-E=LeZ14
zTG=@L<(Uy1o5H?W!80QwdvIDi&u4}#o@n&QvDH!qS7TN=bhPu7CTztN`<=1lY}<%_
z%C?O!PY+oJqy2xY74zWHXxEw5!d7?mi(m}*R#(r~$$gsH`0TU8Gcz-5k7o)$W)2@#
zqk!>Sg8tvYEBvPc3`G5y!z=vpirFw$j9}ehR({ZItZ2baMs_O|O-80i!J1vuVUn7_
z3V+ca&nm6{*6q3Nsc^?YrgqB(doLixzXF`e-9|^P%jq@q_Q1VCX?7BDN_INL53_nN
z6A_Wob=|GEZH&z+dM`lPh#0&#DEefuwn|os&1crbxnIVmpeqpaguwnXTMl`;-!U+)
zu)k8)V4S8)u)`EbC@hX(i7ZYl(;XfCb|@3GXE^Nl`@4N1uh$t0dHw!5e}=>Mf&Te|
z=fM1$b1UQ-bl}*^J=i)JI9ZXpO!03zI_5b%JDb62n^4H_bz48k%+7L>aY}JQNX!Ju
z2bld(ba>q%Ie5=wO=eY@Q>Gz>!yk$vr!4y1V&6TFC7CTD^A*u#%GnS@F8OwAck6FK
zyRFGw!EL~cw5f~I#@Or@f9qF6jJ};MMBCrth-tu~4*9l{t()^?vY<PHnPL?E1NI`U
zRKoK|hOn~{pN`v=TqH6*Z7(R6;RK>7!<h`rKrX{#&1U&v6z(|hm?rORX9h4gClyv=
z({_ajgU<XQ2MC++OB8J5_eINx|51<edC_J^NiL6McwW>&h1q#gU{06INq}*h1#Dj+
z(C4JUa6ae}#leF_*kuNG20fl2F%0?u0doP?S6c<_^BbuGMl?>R-goo|xd>qse#J-(
z=IqaZ@}9mb;l-aCs1p9kPyb3+uWlgRykX9}>F{f4UsU+jZ553X@T)p{4XpONOCb~M
zF3BMuecdI%dh0GhqRjx_RRJd~Hhs96!!}WjCq$9tY{QzwIV|&RqrhS!$<E4*hy)mP
zO37v?X<@)xi7R9{HEBzY*k~|tQ3OkbnSM~XP1KU_pys6l5lwkCg*|f(DUw)YHb1qL
zq*b)2WeiJX7^p{<=y1p*NhDZu2m74<;Gjf;Wxvbe3b{!zXrIdkV;bxU1^q!P>~>4C
zo16^^UuF0udIev^z9<!Lf1$>{XrfJX_Yy6)<{MFN-RnhNRqt_0VTVtBr4tQiS31#Q
zTsT38o6R|I!kh3WOn{%2C#<O^W2$|bYK%fSbb_Q%80?8*qE3Vb|1ep8;SwFbBp?cM
z9OmHRFUT4;H}|ZlmK^SE9hF73)Ua*z{kh-NPkfxV5#aR1_}p;k!|{o<F`WMR&cnXp
z;kzH-nHV*KZRz*>ckcXR_~Fj}_YsIb9G-ap(!;=|;c>tdvH?6gK7OgQwe{rRclM8u
zj~c-f@Ar2$LY<c;CX8UYZs^yYJtrG`I(xR(Sq)%I{Db-7OUd|&;UlwgqXCL3d;H{d
zJU)GLHkmRm%48-Jw<l*a$w|==1|3O8;>ieD0xVi1zx^O$5jEgIP%ZpU^Vg;}{*8MM
znra26nvALTRc?&Kx?ij@n*8k2wjRt+t1s_bGk*(9Cw1%Nz7oA#IDplJ^v%6HOGk&h
z3TqhYn)^a65BC<ln*lR=e~-5oy?3suWo~cTS<l>y`D2^LeZESVnS-vzAk24*`CglL
z?yZE?=HAd;2tP6BE?@*w0jneT!E${3;m&ce2*m3x!-o#3%;5>`+3B5|+xc*O&bJ1?
zvH!puC3Bv0L@<sB5WwEOh`k*1p|e}JoGsjWv%;K>t!dohD=suvhQ~zlqeF-VUp(?s
zAP@ICxH!DOuI?=27~3+2P`Ek##*wu3Fyjy4PwK^b{4D1j69r>n)iC?tGw9IP`mOLU
zn|pn8A#XMO#@YQq7=8A@*>wd)8Y*ER2zWnkz!%e9X%1Dwhq^>@?9idJmXA1DVXlJD
zZrOSkaD5ktE6ovxYJi%8`G3HC9n7~5NXHy7PxIIz19J`|?mFAn{lIn1%P@+!#VGRT
zA`EqP@i;Win_<3-FYd<cQPX^&yL-3RvT?N{f5Fs(bmrcQdSS$#BfrV@qL@f#sc)aP
zTd*gPRY=x=Euw7*Gz|tVPUdn{7&L}SgCU!kN@l4r%&izE6-H7bph++vCIObD(lC{r
z5iD6oWyxrm9F|+Kep7jv`f&O?(DK?aGd0Cvpe^5pr4k(;s42iw8Z)<l!_T65LLD^)
z7;&_u<q{ikI(6PKVsI$}-1fP^>cgB3`(0iK31;EC91sEK;Zk58E(K=c`Wz&fhf9FL
z4jP5a-^c(PWZ_brUnGUgkLdr0y)%Yw+`7ZK7F)DPcgc2>Hp9IFXCy~;$hE;0zR<C2
zwnJ#NwujSEwkk?D<Vy8m2)IjOc{Gw!V4Mq>B$otGq~*3C8Z-zV`pCzPAOsvW$b-ik
z*@u3QWMo`>6)hkw3M3!!=x6Hp{`%hkJ-zL{mu@%Z4$$<yOFuvFrQR5F{qsH_rXA4t
zvxRgx(XWxZ8^gc)f#4o=Ll|JcKj^2!K!<~7PT-FY(_w^d3fw|-&`*yH_K2PNHSG1i
z?WMy_j?2YIf1meL;NC#s1k~ZY#~%)dy{RxW!O}Ju9CC|;^TD_O8II0?I~vArunO~o
z-V}HMqB)Ge0&E}b6j%@t8MWa#2Scb$gL#2@W|8^BqugL><PR3Pq<)TE52o0FhD|Ox
z?TCdR_WDy(*XKbm0{eim&BH0#h&zVZhkfQ`aWQ2gu~Q)hj^h^>dFE#-40^D*z%fM!
z)ThAc+Ms!K)I4X#Q(@pk2w{JSA8a~2(;_q5@-@@KINJ`;S+0MY>0+s$4!-zN!86_0
zwmO6Ui}$tt1gFFQ^W%g5U+$yNz4NLhNu}eL!?7|=?K0T$SU#4dS6`3EMxabpIrAGv
zNfI58zplLj2LT~sRB=cWJ9B^S{oy@+;ok85wHMb|K~Y58G^r94T+>eA?To<0aU7lt
z@w<zNQXI#5PY)E463<V*GPAzCoXZJZE{DJID=|;R3tuG4dw(ksq6EGe6vP-V9n0e}
zzrea#O#%dJff|P6>%aAk3!hNKra=N5;MOIyFp>@ihHcvvz70^sW>OLxNW;tHb>aBs
zc$~B+)@bAg6pU&6wh1}tvqAvh8@|Ax2&Gpql0gaFlM{;s<_Mw}*2!p;SBUA#B4F%o
zS~=jj{E{R+jUqeN$%*UdM@){42WyG;4&baHWRZ<5FK}~l=0>JPREx2u&*Hm&K&efc
zXKsF;<L2i$;UN2q$OW-QgAhQ#9M&f9<27|+7$#QcP_he*4FZwU3mU@&CPvh!kP^Xj
zEOM6P4stBAulUG=k-#FXn0c1I7)H!F6yU<V;)nr!n5Mx(nwS(L(-1`iIdmd;UVv*j
z2E2k)Q0fHMiAh}Q;Two)V07ZS!r&DcV6I`Lfz;tEDSBn=XrvmH7=+qvjA9s5h~siR
z%0k>hYO)mA2GL2tELbC!;~19a4<zYe9z(Ol$FB;uX<0Tr+uv8bAc0G@iK<F03X{M<
zvj^H(`2?<Abvv!jRjYf|IYlZQmOg4CV+>}I!MZk4h!erjyXNy}=Cf|+l#oV)IHZA2
zH5#Us-^!cr*4FRrtt~=W$<#Vs(`vP>=dG*LtsTVO+Db|zsVLu<T?V(hr!djIIt}n*
zN7+V!w*R<|S-jh3|0Dw3>0EU>T@(f@JMA`}fZDrXw(;26Z7YF-3WKX%cy6`enMH;W
zSxEx!09AtRb`pI%v(agp=pa0^$gDjG!~v!RNgaRUMP|9yeg5pU+q&v@8T{pL5@!bx
zE88fEu-Gkc{I%18b3E{3^4WG&-AzieFlGdPPg7NOf2mYj+E<~yI}aaxuKug`_W(-|
zKjc2uDw?)btuAR=1^Ykmua~vANG-D+pdU%)CzTkk+`6;2%6+10Z_{2z)ruRX2f`n;
z$JOd%6?;c-^TkSK0!*sVeg^JtJ$|@~4WPAJ78T*EC+NZi*xY=#KJgLl0L`sq<LB*K
z?e;phRc5nzGof|wFV}Fq1GLJ73C$G!uQ3&X>GgVDhnpA%^Y1!+gwNzNPt%^Ryz^Ak
zTu)4iEQcUOD(jkVdET{WwgHrRmS8?N@x1AIA`L@PcHMe~!N`X8`B%c~!^bQef96oR
zrK*grh#ue-S*CZtIJ>JyuvRJZY*(ks@~r(ycu?9X#{B_W(cir*ds@LgbK}ULaI0%~
zZfVH~J}FBdVLxb`HBqN>1J?iX%d>g}^XvEV;q~0mKIJ}K`#2uG(E7q{to%L{L$C~f
zQ2n^5F)<qvQY<fTJc>fQZl5-aMT*45u>R=HS;K<ws}Xx<k?(?UoWMs{;||8?+eBUc
zB5+>!zjI{GqbV@bd=d07F9Y9|Eja~7?mi1Hv)>TEZdz$JklxS!9?IUOUxDQ`*gbpN
z56v)iJa01<*4=vOxnW2vUL_UQWZm;Z4+Dw7sjyzyd>w|NCTpoMWa`H2*O;O=f?d55
zikdu$ysu5y8%x2Sc4O^j%IZy7m0dEoxBpM}&L*afBz@z3n7{t*kJjwk8pt?-<gg-P
zf>@7MnptTQY|myAg*}XfR)7e~2(2t4B^nX!g$N;K)!iA|Sr8JIa^aH1>@CPU5NzlW
zADY&1nFC2Q8s8>+NKShJ-?dLyWBk(4mFn5ByR+lRjz52X{MK9573`{V{gEfyF-pDN
z)87eby1Ns`+p!xWFz`-kb$fgJ%RdXzzms;h9X%6Z|MH!*?J9Op0EcrOzy6QELDPOG
zJO}4Jt&T=7aRr!YAtdvJFsN!*xiDiW{#OC#+D;?%H#%RvPeSiKTzhcnDvbq|G<{Gk
zjMb|PSLM*c!a}W1AKqYG=LHs0XqA@qOM+7v-ceZ|-JiwTLtvMv!8k%lP8i6=Xl)fy
z&;t6y3l4F=k-E;qQ%3?7uN3j>7H>%6P1Mu)`67qaJsehi1wUZLx&pwfw9W9<5v=<n
z9V7ajX`Fm6yF2NQA?H3h$^ZCIcMJjirY{zHQlc=vvN$ge9}5Dvz6IwdyjJ<-WJVBP
zD{mQ-mop+Td~>;+u_*?>eC@!Kg3hV+oME)I3C3J0O}3=dqS-*|(#^K<Uva<&>SO|S
zUqL!Xz|UU@iR~Ej;)<YNV8@Uv!g?;jSlIeshle0R7~t?QF8yJG4yYUJ>l^9-a4rn?
ziu%Mbo;d$h-0_DQJC1GdnVuNqjOM`O1|yk_aV|VG;QH3R2ZnesF=o~rcxZSX#>9Gk
zc*q|fAS|N?-WEK3g3`Fd3**WLE#OmQ<BBf~THT)wm7BWZr-U}14)b7AE2K`mFbxDa
zLs<}97~UHv4CurL^X0=R|A0C^t`6XaKTL3@BRF6=aG*{mQ1=z6V{GmiB0loi+%W``
z6x-WB>k{4X_{>F|h2XB<3~ay1^md8BogL1;OC6m;aOg6ATKU4|kN^z&EG8;;oE6=7
zsrTZ=-sX-W%^gF?w5ZcR@bvxunNITQXFUC|Z>Cf94fOZ>+OsVGnrlsAIRsV^?h1ny
zh2{T$CJuuZhe3Bf4giP#ARa~ptZ+6SA6YiS;xG&PXka;fL<N+^Q%6G<ukNF0NTN-Y
zut#uM2_3NFT|uBuCQ$bktYefejj!%_RLJKG-p5wQFM-YH=leZR)aK@Do`;s^^Z85C
zLOGwGOM0G~pZ7eFoXh9S3)1RNb{;osJh%qK`RvZB<i5@mN~z=t!F_Ky@4htY2Pg5y
z57{l|3?UX03W4E+2$)vkyk{`KRKHy=lMvjuq|VU85+b88D@}<-;B{uPlxi+xyCIb7
z5fEn*U@6PsBztX%X4LBpEtQiFHt4*f%+l%W?7G%=`ulfk%-sVQYBf(gsAV4(3J<fM
zM}ZZj{M_6;R4SFq<#Ifk9L)9?`U^PsX9ttXI3C1P4ly^Em+~%Mf*70xymas065u3*
zOOVUv@ps*UIL0ufaAWL16c1h<EMR?P>6yo(-jJx4VC(9}lJ{WoI>WZ1XI$r{>p+OE
zFZnw^b`h$_KF+m6M|SSj4s*WaGu}LXhd6U=i8*y1@z{FIM~E}(fiKh$bH49ZFJEr;
z-<L+IE#G`Jz_5F-XD8*ATT@h%2S%6ZpTsM-`f?2!lkMsKpXi?#d|-&e>=QkVg`A;d
zfQ6k~kH{JD+jed`H=Uc#t-+k1i#xy1>%MZ{?kiZw_;dMQG>u=`NN1c2p0f*Q+FLd^
z+m|;tTUctja5}Sj+&I46f{T_6Xg&<noYB%^<XV>7IdE$?luow++;m>hmQHv3s8zb-
zYGl#KO``2QO5E|6^p&Idqxe>iX+8cZ`IVp8FFnTM$Bn&qc{~~8{zQ3fgf`+tkq3i*
z)Nqc&m=8}dm}%loa4|7iH(taYK8zw7yD*B!g=rDDMtJb-4Aa+c5slBkp7GVJbbD9h
zeN6x7+`j2^mOj|~g)JuTUaMq<KGXl+BDg>cBm*tI478}TxdQa3zV-S20FoXCP;($-
zAN*iNSP!IZ0O3DPVg2VvOPeb|e?BvvhHw^zG5up*9TI}U=KA__14Cl4iVqEa<AU&j
z1FK>%taG_>@oWrWwu&GO8mJ577WafRgv+24RNh+`)_c-aPFPd_Cb$W|4j}1e0AaqU
zu+B?8;&2b<iwYaR%jSy;sRwKjI8YeD3K%4Hhry<aGY76Th>BUU>i6*gE^v#&rfu7*
zW~*jJvu#V$HAT@aTU9O7vT-sipoue{Rzi`KrKonq))ZZr6-$eRZ7ZUL!<qt`!OYkK
ztA-Uzu~j8h(KXEug)CJM+f_x@6+L88Sck9k)+%5v3^P>?BN|=B3v|s=2)tI&^=Mep
zv{V(5Y8nvDjA$vH;j&^Xb^}I{?Xafm@WwwSW!s8u=}`;en5rHMo4Q&hunLce91Vpv
zTh~=v32Rj?3|6xh1@0P!Q+5TBp^R45*6oNaNAMOl%BPzaq6;be;Hn+6QA(?#hrm?A
zvaIN~6;@#iV<k#pqz-uwE4r!4Dl)61MoisGDVnN8BAR6?S_7^k<S>ecB1W_bDk5T`
z_Uwq0zly5bc7*2HQY*TmAq%Fe*i|!STNT*p)rxLaQ3^$+)or?RuW`5PUg5k}#U*V>
zT-g;y5*S`SGG+DexT3IWtA3Jo=Q-Gu8jQ+3g(-{@R1Q_DB5NkDXf{CmC>61hnl&1;
zn9l$7dQs8e7mfWgK6UpUq5bHKv57?^mz#P=`UTlu6W52KiFnS)L3br)d@VbhfU?($
zKDJC#fQyOS@+jz8?4{)0lpD5>46sZk$9d+avpG_6b}Z!G?>knvg|^D)9k`es%odA-
ziNxUG7+_*MLToE98JsB2ID3QNOw0hKw#ltJy8im*T8hCe52M(5spw~0PQ64Gx-h8X
zwcCTUgpL&(wu_E!9cHO3&J-J|gYBZn)`eN>{zOtos)5)txSqOV!c85m25Jj6QpdI_
zAH-{@ZK(oV3bWLKg=S|x)vyLzFHG_^hI~<5e;D~{*uG}AelV>DYD-~WH5`C_Yu6X{
zsfL5FPc`_!ur>B<S;2ha{ng-W%V28D^2LKEc-7#Arvz;oeAh+Si7n@s@uqfdg?iC<
z?oOc^enc-Ci%(H4dq4iuUX+d`p!S#BJYOu(jityy0$5|&JH+$8<ZJ9<p<@It!kEJ%
z4g$v}c)lKIVr;a4<-joJu^zYxV-8DWhB2Q_cXV8?!^PsF;m-m+^XX^3fQhjWn>o|*
z=@(J?1HjanvJ^cVm1PD~W3U-7nz?WmqzhBy18fJ-PH+^CB?(K>%XHp5;D)iWN!c_(
zDa?#LzD}+#f$+k`1dN%lCs&XchB0F^86Fx@G#fC6!wkZbTv4!MnkL{_oUkNU6s%TF
z)-e{xCJn|iwEbcOjYf3UPJuHUy=a`V-du%s)k-l(s16rLwvKP6+gJ_k<|@R%x+8@#
zM7i1CmgztO*jp>ik$@B)!QgruP$Zx$tlP}dw-@~;mudU(!r3mz(R9S^MY}(|aC$dJ
zfnM|*>pTnvdeNXehMa0YDg5<p&$&~-=dCyPtfN1d5~SI(+;eN(mEE3YxohV>KY3Ej
znb9bwD2z}}wIXmqm=se0c8kehy9BtdHS<<)ZzoR#MlrQ6nYVTcFj3Wx$RS@*n9&tQ
z7K9-)rAMQJFubjhC~P8XutKnDYO-j|)szla5VpJc<AW47CvGLVBJj5#{pJk<TxYSN
z245fV!5@JYgMVd$6@|YAD+tqY`EU;nm#^PS@0z0Q$L|K&F@(++U7UjYAMh4B)hAp%
zD6Hq8{uSO5s^<k!7>l!BiNmj&@Q;UA_Qc@A3P)rMV+IfMgs};Oof<OyPDeUKVi@}Z
z=`;M!fEV}lPxj8mH;U`-`zxuiXD{xXw31CsSV!+G4YS>8ae`yogw`{|>}AHrq)w_j
zEqE_Bu?b~~V=orA5pE61>urL}`-ZgSf)iSzR1U^G50#PK$dw!<-0-NSx>`z&kQ7DN
zNAZ8~e9!ETne6V&oDro8biej4XFMN&_jk^mJ&bqG`Hjxb*vaKV0fsLVeBSEoE)I7U
zb~VVj8opc&jPB=)N<7a?Z1Y7$PK`xlsu<!V=lP<X;uDfFB_zqJ<TP=DlLep3b0I#Y
z#S)VJ#0im$2nrt(Lor2>W3pu93|P_xl?zF#7P|~@&H)Y!GLLGiiYhCj!%S2zCPdJ3
zys9b5Bq!O!k`xgliVUf;>^SFylVX~dRPe7PIl>`{10>l*YrwAZ#wT6K{c`^5EV!>T
zT%9kfB}s2ObNFz^+w+T9`taey*+Z$*Niv3#S(&sS`9%-$sR-%MtsV9roQ~D6b?=jV
z<e+cAi8FA&Cw(}*?VzfWzHSPq)7yGdVKSCkTPvs2o-7hCZ%|W763_tm%Bd*v?ay`R
zG8L?8{ta(fi$w4^IIV<}VNJsi!r?=e;GV+WP}h@*>rc>cD!~V**9C07{Mv6T!F8!r
z>NJEWSfT*oNBmO;a-{vnGjnq{hBAQt0|Q<^A;E}7D@aH@qWJ~}2K;?SbIiT*#vC4R
z>;a5M$_|iZN;>2RJm3q;2e<9Z6i5S}dhEUb|HcgpXU2%u+OsX4@dD1~`bi|!v#tK{
znhAdAy{Q7+=_5*yy06<ff@|qs66<L_nls?5pL{ZRWA5Wm9s^90J*h)k95D2a*JA0l
z!)uvNAt)!FGvH3768*66Lf8JajAz?#x1|fOx$!r@-IhgZZ7nx8aA>_X-re)<3uApB
z>M&ZQtQ*kRS>Jf#qxKKS#`?PIb=Y2j-yP}e9QtF91wQiLyH5^1arOy>;0Pn=_dXpQ
z{0mx#1<nk8`sq(T&9J~w_ovIBX4V+twag1>Ts9a2$__*KEu3bD(;h#wHHI&bKb>Jx
z+W&7f>psX16J1O&8R#GA8yn~k1exGdlarIDaJ`#l*8RZbY(1`|2c2f!?}s}3XX^oX
z_P^vX!JEE*eSbZ5?i=f#v{m6sO@H61`q{~TV{(J-(w@ne20AC}`^RAK45M!S{a~43
z(Dj}B(IRXxaKy_BLk#e%F64Q|g{rge@Bdl%n!JnW6ZA_a1A~KuSs}g)8)Xk!1Dm*9
z)axqgKXBkcPS7q_R6_H}m)T%Q_Ux(zzm6^X6Vo@e%adSq2A=>-OXbeSPt8GFIUBt3
zZ37#gjLsJD>xRtE6_xNvy9_1dA{^hv@2VupL(I})Vku9rSz{FT_gcx5J8(yX2W*w|
zlmNHrw}l1)Gi$Isj9Zq`<lI%zP1CtLDDDootB!Q{u-pC&zU140UuSgQW#Mc%7zKSO
zkSoVr0KP04WY~r;J!GvgFead{42&f*2FB_N(7S^L0gu9yBP?hdsAw2ZVdrzvq!^3J
zyox79a5xuz>4R{B=Q;Y3bwUvw&PBVs!hEP8UI|Q|vOO0)Wrl^9?AN6Ki{L=L13VTN
zxgs3>zyY3pNr)A!xlnLy(&1e6KQ0iN7r}Dj51h|Mvjd<xUWy3&vX1AXoRk!jsuI^^
zp5a_n;uTHsB|{w38KcOD6hy*$dMQzq4Th@cq7T5@r3VpSa3N2P3%OgNU%imQlH8!0
zrMa4=`RjZx8h6q8g<*{u7KG7ZL12U9!=w2>jSf4*LE`g`b|A}6zC#mygamEjnt(9c
z@o4_hd|nesO~A%ENKPyT1mB|_SinCl1pRcqrVTtk?i1pV=0_jR4-3S<gcXcI3piMV
zHK)B=K2PC}QQtUbVV|^s;k$I=nt#+tCN_-aqJBawoCy|vj>q#wbpXa9(i&f|(ufqV
z@ngMb{7>sJmX<CpF2qeE(jV?<`PxsHmjCdH5yppmmzRIKylevK+J8gK%ggh(e==Tx
zJ3hfSZq@Ppo&8^3`@c-}^O*wu)4eUrdzV|RvNtSa@80E~?Y&t@ebCaf4DGdm5#ur*
z$kxztbNpw^U|aS+|8q+i)-;fxkMBjm&<{ad!1Ohr-%Ec9mEDWd^Ybmsm0{@l!k*`0
zPyeAWw%0K|1%(Ycz+mCc4AaMhbH@<#x#;by4*5mRXH>VZ=56zf{;0(gF3&FtV@78>
zDV^Q9?w&bs`dT|*ond#r*>aWHd1CJN7i{oNq*`8_Z@D^mb;c2%xcS9xy4r94_U$>A
zFunkb8`RCP#Ej}uc#f@tAGh2_Br|OA)!SdpT}6ovHl8N#>To~k{khJa^N-k_A1NQc
z?DLDV4~*_kTwR?KyE)nZ=brOd;qzVZpJ#>7|DJUHjtxe-ybI(5JfC-j&%fW*)fFJ5
z>%s+u;spP`mlSou2?l-s10D6f|2vkL-!J%rb%xIuU>LJFcaaY+43Ggf=dP~vXuYoU
zj0XiA9`{49tNuk_{ao}e;Dr@t-OEoe!y2=~o=s8(UBM#qa?xc4rIMsAwRsV=SfUD-
z8^kMDt{j`FRj;U`^R)@s7IZ~&hDE8CE>Wkf6AVeAV-v<rm7U=$I4#)>m}w2dpMS;i
zwY8PjAjq;(@<qStQ~4fOhua-I?n0gw7jpMbdGK>Ou`d?|yQ3LmT!{L8R+cVtWj2Pj
zC+h}&xIXI!u75el4ntWtFmPtrz}xKgg91FOKl=QEURzOkHr@EG*>BC(|7Tw$X{!R9
zADJB)nVmhA{X6D;@K#Czo~3zYX7q&dv#-|wG4wsr^3v+Vv*~Zo(8T;;p;uph<vCHb
zfoCR6`S5}N5wr!2Fd8SIkphiCTCJUF?wg5=>Bf;+iq5{$`n~T-l2}O;Mr&L|{waMn
z>MPFywUQ1)v-;EifxpH7X07j<kKkX%PuS~D@|pAxktV=iMi?*OW*Lzvj0jL>f*DZ?
z*Vm^RIK%lb_v0w~f7sz~Jl(RBIgCddS{FgHRd5sXe>}!U|Bz0cXb|`8oM(aI47y>@
z{5%^Bi4CYGD-607G$V{q>QGHq7}b1i=e(^9Sf{0@Kbf(W2}a<x>#NOCC@cM66AXIG
z6=T=LGtZh!<uJ5GJvLErYudB9P?~6JpO~lwgAQE>aIw9;t$EL$W2RCi7~XWvd(-ab
zw%vPfqSQ`H?KdmI5~7ACX4-b|Zl9o~V@9bI23tF!BhNJNX==|GOYJC?!w8t7&_%Ss
z#hZHRB1*@~V6oxxW7N0M2KX*1nPK$2FRt3lfYGO)p5J-fUIwgpBgW2ebWjGEsq0g?
zt{5)k8@54WdUFHDAfp;pW5|q$0f~JSWgi%;pNoDSVOLXMTurLE`<YIoxTMcG7ec_4
z1$+xEun@<b0%15G7g%5o9DYM%fT8@TAdKeOVnztiFzfy3<D;YT>P)BV=b{hz-Rthp
z6>}->E0U}>pp+-<LSIb-LINj<Y4b#YSf&995^{1OKuEB-;a{l1M&%Jn@cWUxe;ldl
z0R#h>%Cv&C_%*?bFgZ!Dwj(cO4Z%i@o;H4A{v@dgg9f><NZA4n7;I%YNRV%R<wS8e
z8OO#ogDr=BiwoDVzgR&OTNZsmt5Gy?EkJ5ckb;D9#Dm5&kD^|aHhBH`GGyK;$n%3X
zD>avWfaB`3uLmA>_pu@S2a@hH<302+lOCeR%nOen{$I$_%&dnz4`VqszKdUGmF;l3
z{CUQO+$CY#q%vz$*<~HE0g|LGJkN6_yUK>#$3v}8J=H35Ate@*InHK$2HV>7<daXf
zH7OchQI%9VD;T#!ZFug<C(&iLHwr{we5I*8ekzv1V(3b3?UiQAwhbAxM1{zoYiny&
zu^h&a_kabwvB<*vI)x=O40MaGCcu!l2!mE=9FPf?)ML7ucI&YJ4m|oReaH2XXo9a(
z9c$O&Hm@1h_W&*pqv7u~3^WEY*toi-EDWQSMLp;?BMw1`aTe`t91~a%`H4W4<RrTz
z7<#Iyxw+{nHLCgI5e2L@4Epi9*4EJD9H+{v$V;W?8(T`%(4har^QAlLJoF&5et9;#
zkmuVj<oT8hxf*0#4PWjCMh^+3vsB(x%BvUBTP3AFTc%EWqx)3Em!?UXw!Ze-R+>2`
z-P)7%Why5{>D$($kp9eC0Y?6(9yLCYU8|gKC6n2gN`(XIwL`DHc8J<Wg}%(1b=H^c
zwu3P;wsm@X>%Nqv^=1*21?)x2i{5ZFPQugE;c$`=?-+gp?@Dm0hw5}s50X0}OH)r_
z)57@|)0I>-UMtFge`yD2i!$JFgbL5m>FH=Vk_^+Wt(n5!k2`dIT->DTu(JImn%e4}
zp7sWak~;KqcXxNu>e=JJT0Q>Jxn~VHvz8msq@I1<w4F0!LFM3cwCxO7`SJ0OK3a!!
zeI(k`nl2vhwR9kyO6|*-;8l}zZ(N1#oxYJ7BTCP6nIgP;{rK^7$A4_V$%C+^FRLGJ
z&@hjjF2?cf>gq=yojbnneB?;+Xk}0;W;p6LI^D(9)py@rUA<_N5$I0ecx-j*ub)q?
z?lHmE%Dws7UqAos%^VAiI6nLQ^Un|k6P%m-$3NzBOfZzq=d<i7k8<#3grPMnxSG?c
zH=WBcD3|UnyJN_N{j7WQU=G-J*8M~EWw7<Edl)l1(@U%D&UN?9dDB1Jx$0bXt~%Gb
zbAE{3`H`~W%Wl@ayMfW;AIS}7g9Oq}AB0-7gO!vU@q-<_b?erkPlta&bvk#evIhO0
z^er|RN_z&`;lV0g245NsuEW!Ia5e`G1%i;4It{ft!DiiIFBN4D!%9ceLqkJZ`f!9H
zFDa<e8Ai3U*^OjmXb3Oj0C#Q}M9`hYyW!TQtT$~B_j!-p%2Bv6cPZ<4fT1DZkw&sR
z9Y7FAoGaMh*GSS{Z{H=y3SR0X8-o6zKj0-<M|jY`abyD_q;tf((GjNRNBm?X%MpZf
zxl8H5;H~Tt26)h`w_euQ$KpIPq9c7nEHE_GY3$eGv@P7}%b8w@4qrAJ%pEbcWno}s
z5C+Dwt4npQwlkgTiZ=o)jN4LO%e>7@r%*vk$QCwcI#F?QQ05HScH)G@afuj-B{)v9
zhv6)$vMOstlT}p}onTHT1;yhs*Pz-@BN4e+k&a5Dq<&#7z#%bFpcNi5tC$32p~BP`
zUJoRwav=&sHn7M=i53aMnE{qU;fTu1;V36EIEUy5v0O+FIXgp~M4vcExS>Rk+qK4H
zrLt@1ou#^Mt@|^r%{;RJFER@^-@M7Jugz`of6Wg68utKYHvWcw4^Srk8temqjsBk9
z_QKt)q22(qdfi<<dw7;vfZ3g^@V^S4JjJX@Pp1pr!&Om=3%Pp_-glYt?u${hI@76q
ziqqZCbTVsrnDvH7U_0`7W|@1bX}&m3hBX{#fRTcV+75S&I>Lf)^wGGWPwgBPoM25e
zmu+D|%je;1Okd4w_VYzYM=O<$L8iuqN)sW@&sQiL`dXepS66`c?th`1K`-p@1>60i
zt^+SRsk_&+zgT?163Q8c{hk7JpnkxD&fRD>iZ6J&i-o@Kifq&BjXQAwwu|}3nKR90
zutf;x&a6(o$Obo0omo9|&I;~(*&Iy!>Y3HmGdD`$^>*l-G{HB3mca+o1C>GnTM0hZ
zS&j~(YL(!M%`jDD%PMHYLQYNB{3c}$<!s>{t7i60lO5b_utp87VX!5dvW9c-7*Kf}
zfGyj>)OaOu_sbS6lq-P`?DtI`uwY?b0#A;0zu5dvB^LCK@|c@etu$2zx1TY5EdnvY
zO;hE1bLyRU-YFcJ+#rREJ-_+Jjdok1wO=p>nH}efnz9g%`hGfmS!l4R9944;!<U<Z
z(e3@{+iM@+A~K$fet-9WJzFbnVLKPy(Y(8P?wHDAz6mhsXC`VzXS|NWbgAIxV^_9F
zEY6h1QpM{bm@~i#rRgTjCEyG&0>8L<;yPksf%R%m<ZBTN15B%l1>~sc76-VkSj{|e
z8jB6QeY;W3_M7zn#I(^Z;I@&*#tm&o;B@J`MJzfz6d-}2b^4h+Xv88~I1@rPG#BY3
zO?gUhu9d`!F^?Se9R*gb<HtY|hgAjJwvP;LUvE95hSq(<bX<U{wCyZmqkqg4ni(zO
z0Mmu6n<tFUWDnDDHyd5U0Y<p!bVjiD@a`QmdUs~&{Pc}tG?xS1*0#rp!0`=>aE*@R
z<cvY)B8`A)kiqcvXQ1~c*Zu!~x&a#vPw!;O>9q6d2D}R37OI5>yPQrX@QIU)3zj*Z
zO5ph#vbbVlT>``N+R{?Z_yVGFg29ZFYfI$h%F>CY6?=GLJOJBk3rmQ4JaA&c9zGGg
zM*S9W>1t)1oLI4sxn(g>Q#4$uAxjIk@XDg!fMI>o9)=76a7~K?ytrgIpCo<<cwq@E
zhjex^Kx&-ASg5I4SXo$D!J;HA8*+k|NDU6+xSt>j#|mPJ5eWwA5+X$J1cR=jDD8aC
zF#6EawQGwjU>RWGD->mfss5>O6*dntEPv56!Wh2T2gZNX6`-QTagxaP=_SX7R29z*
zu*AzzjRdu*%u7zN#KrV^0E7f%oMaD+e3WR4#HmV>kSH(O!n{Hv++{hUg_9bc4qyjM
zVmvM-lprZc6D1p%Q;3pK<2o6Rz?!px`6N;K7)9e@MGgm}yd4|~a`**ElX*_nlD2R%
zNZW%dnn*;6y>pDn30a4ev1pRS>|jYHNuEoRf`UQScF_<(C85*tAVT3nwy>m;7?%ji
zN;F6`$rc8!hDi|dhSAU}SX&t0(Kvy$D14n@^wE%_C~}BrN-7APF0HHHcggwc(l@_T
zqG-x;6fM7u7v-(O_$Fb6Q9;8vA}c`$c+)y8UruNaa9t7BA~MHC!$B5jjiVzK$H!RU
z<YkV+36%wo%W6mzRW-?0!Jy3X5$4uVF7p~QtYJ)HhM{{8CoN&6T(V>Zr}#2)_x$=`
z6|UY%xra&ghN1qm=l=VbOzP1*LvOwP-tqs(M5~^&Z@u-_yKge#J)XDUg3eA=z`rb`
z3ot@?)6)IRQkaHfiI>3$<(w04z(yz(XM$-c9oD!3zrEcQ3V7f)&PRvv)QloR>9E2L
zxG~t&>^)ix#R@mzCOY<SH$t(*Dg1Vm7w}PYt5CWe2YmLZk3fMP2K^pD&=ujg&py%Q
zCw_mRi6snZL*VS&+tD1(6@)f6n&UN43%F@J`#~}FJWG_lBe8c;rq0j$wz7c{f-?#^
z4h215-YGf`GGGm<9xwaw6?Qi;J|KV5OPnM!{nrMPm(&o)a}58(a*~n^Yg(B8jqU{V
zYJ^Y)<MC)nvWIyk2r{gwAyrN)oGr}Blub%BX$i;KJBwVHvc<ZIVo0=sc?GN%0!t;S
zh}sgCxFp~hU))G2L``s_1<a`$A;$6vIi`f^Ul^)n1*3X#RVtL@gi2$9(J+(_tDI#R
z*dH`@^I^bB!m@%=gzo2y&LkWq5ni-xx)|UvCl%nB$jdRw5|%=7z3p^b#6PzAWav==
z%@q$fWCM!`1WL*w4h^kJwlHW#E37Bcv{*>Ahe4~chz8cV^BZ?xHr`eYZ&;DzIPrlw
z7iEA`a^ySTZKMgH9K+zmm>_Hz+ODUTdc+>(<**QFYy*p=Rklqh@}a11+ty6=1CLD<
z9H)eZ-VxYRwY7~{J4?Kp6oidMTl~hx?*g{8^$Y%ywl>4oPyB$bZI3n=BiO!UqaY+V
zRfc&f79ie{V#T(%H3l%Waw))-+AAXX?${1(5QM16OO>2CDJBr_kjYjE>$#u++Z_gK
z>lJ*l5XO&kSmM;EZ~ZVJkpF4#Y@?gF?leBzRGK$s8;T)W-jXIg7LG+Cx4bNHve?G9
zY=e<3Q!EViTTtyyu(6Jg6UjKi)J+}eq9`^A`C$A4u^X3|h?rsy;H0J6v-uFS<#hL)
z<s8Z$_)zv+;X}UfbLVP=G@8*|ofEQT>&Mc}Xy!MM{`dZ`1~HnsH!Q-Ierz-_>Z?=|
z+EQ%=8E1B3n*rlYU6Yz!ps+=K(GRW`rfFy+X`t*u3AUtQnQ&%yVOs^;Oc=IELr_fv
zvfG9<=pO568XTH5tb(l$3|lchyADZ7Lk3K3WoN3bNNqFW{8g~kWVei_Ap>qMm0+8e
zhKdqoR~IgKXtG;~G#H+fNlil#wzOdS@OO;Uka-l{n37!yX~_N?eWGB*7WHNF8@+O^
zfYa2L9!1eJ-s|6aeogsP%?wA;zgy#v#O$T^MbSmU>a9C>8xI%?_FTEc|0&>s=%j0P
zX<I|Kp-9)1pKEf=^Z^dK@>kg!0UHl;>Jtdf7uhFm`KyG$K-S??BR-+xT$51ZvJv0N
z!0v2t^c}yWVs&{{VHMbSOyEGEuT7{x4dd%npfB)|e#{LN#t=G1B~``6`M9wZi!U}9
zvViSSVG}vqTF_)~D!1r6hw2r0W@cbgzzwUV#Rc-Nftg);zV-2=bNvl~qmf2oRdGR;
ztKwXt-1W1W-FiX9-#@xnfg6RYe3wvCfYYdjVi#&dYun$@fI)Z^IDnssT$A=9`#5Ms
zqKz3Lgz90wm&E)$VI!7O`={-Mo=k%qVC?nAleJN_wR$odvHz|q76DypPk}+!H|&ka
z`>_v&4^B<(I=ySkH??cm>8YuM{uFd?|6II&@7{*J*b6w|-3=Hm8Iy+Hm_n&}h<m*#
z9rmh^_wO|xv=?4`Q3==Q>cKYD&v}m`79$v5r~|}+8pB>8@7x|k7{x*a@I)~Ep*?&1
z>+wbgFz9~obwmKW{_98M@W!$Z+>oeV2m}_6dP8KL4vdWi4FLp!G^747(T9~vst=Jy
zhQKjL;6Qa@rIP9!Xd}ZLc)cWWT^OR3)PFGq81qob7>4@mkt<TUSjHTw&N7lREtvY^
zn;c15+l}79Z(lGv<Ysoz2Y8iM+CH6P(U=je>C*}5GC!VK;inRCG}hN92HRnt1%6T;
z)FvPZHbH2QGB`(lN?*N#*cD@d`veiP*?iHj8}`#MWJGTY$6|c~5sb}XN(bejFA_6{
zX;QivlER#BzylfjPh)szri_PDdO=4EzX3gDc;VM2fmtdmN)}0gWYH#zV&Y*FWn~>N
zsx+RG#S*qCu*6%#yv52}@v!h=E3d4yVhxrQ*d{r{63<(e-ClmBCGv91%XmauUU^w@
zu<$$|J}6Vz;^ZYsvREy6$Af=OQwv}|Y{6ze%mbG3mJ*!97G7}%@(P}q;AtVSMF9}0
z%!y&AY_Y;vfvtq;R3-!t6Bro6mYrdllMh-Y-ok@N8RQmX>TG%CmCo=hGz^Ic2|$7=
zXLC9wLQCL98b)We)#_@YVTd4kvRMir6git!i62#kT9t?&40-9GvVbt)0vw3dDR3lQ
zLL)MPhCwWWrql*u;c4Lz59$LnDhB~}zm}qI3t~>NfUI1Ymn~rgMk0~rj(cfZtO27H
zT<XM3l7Nbnten+Jmhl3SSlTwH!<$IJsABj^ayZP1&M;g7qwbKK6Zh_Y{4p?PdIIf3
zu?2zxiku)?oleqjPy(ye0cvb)?A|?0KriO4q~v6R8dh4Jh&QvzRwr+fHUs|B4eVq0
zmzZuw6i%yz>Q!4^LUNc?{|UT5JTbxa1jz^Lnu@|CpO_&OgprIHPlSOGXp5)LN=-Ut
z#adc?=H8im$;TOl5vE(LWDeM3!BeC#zxmw`^4Qk#?q>V8%@zuaR!RX@-U#BI76GZj
zgCvy7W^t-pt*Wyk)HJ4~Pk))W$RZXLCb=~cv$8YV2DWM?T9mDTBn1X$wV>85qK!6e
z2(?J^N<I%3CthF|wVoxQVO|7=xUEhrULj*V;zgc7BgJ4T4B1c{#1vHx80`w}0gKA}
z*l73^PDTeCk>_O*0)S%TC00@}6^0~9$dpZzH3vIJF^!~rx9;s)H_nTikEDEi%SEr(
zL%Jj1U^bHSrQ3JwytO;l*U<B#FR|GYZOjH=x}?}{2TSh-F@|9~3tL2>-rrGc00X^r
zx7J&?qb6ayeMg<Q4zPZ~KG)cKz0-fug<*S9vE5G5?K^6{XMGn=0oJ#zb+1<owidRF
zKfG`X&IYz?RonIM+V^3L(aiztrXj_)&g%_-c;Q0`a7G$xl{BcfUN5!Hgkf8omIl0u
z^Av1#V48-tY4x=Wwiz%`n%$Z-+Y7MOz(#4Hwpv)5h8mIv8f^wlZQV&*H4Pv#;LPm4
zUq|aJ1BPvC8VqbHj5KJntEM3nR_e>WJ!z|^K^MO0)ns>C*OtOr)1Za3ra=pDNTvZF
zGGki`|D$S4>&s-^r45N_X&SN_Cq@kM)YdNk%LS8hmlj5^`?}x-_(BfKtz)7iIfz@b
zf>}$x_3#4xD|Q$?<1Jw}R(i%;!lYk;{T7Z#pBr44gSc8R^It7jSIexr++b!D;?8T8
zf4-upr>E?9=QG7UwK83}PsRa>O)E2$dB0UjfrEDJRGx2skysgA6<Vy)(1455wY7<|
zpewc(X~eBf*N^N%0v5tQTB{Maab22z98SPC;oy(grAspsT*{zQg0z0SX{*~F1`S^r
zXSTYHH5&ccH;D=fw)}UERvS5wR_-xRZ|_;pm?v`!_qI1vhYr<xb@cYbY@%LPA&jLt
z2u+k(kI<D)zn+OMN>OyO2|w*OH%+FmUG!^Wyt>TpqdzoIMcbNIle_ZTQr5+yK6_d7
zce%$(D_<z@n~BD<z|on$@}kP3$GDk5#S4|CcHcnM2#yll%B>XvKNlVF*<oH0fVnPA
zZA+Wl2cr1ZBQg^xC+2vS0mF8j+Rj91_nR=s3YcSs29CfMMoo$lfi>$Mz;GE)aZzEs
z+b;TUyCRV!tj0G^<D;;q9Fr8DjQE;pwGvwjM^ydnotci(%5$Y1GKJ-iGV;p*&dW)J
zYkZ)IMn^#tZZo7Xxtpobft3%$Rl6RjT6s}WLEwslYPu$6vtDn0CG-NR3^hOeP6gS*
zD9uzA=#na(4XO8A*&Jj-Z_Zj>t}F@;TWZgE{-nBg1)EB%$_gD6cJLKdrRBl#t_K7c
zO(+uaqg`(;>sY3yJJwgW6)nRbiKvX)HX_NUk!(njfp$A-9JI~RhLrZn!N=u66OE;|
zTosN*Q&&EK(@iLhH6&Wv#8ct)@S+5crhWvqaJo4cOP0d$P@tMG;(o0;Y-GapGq-hX
z*<;*yRa;{ikq`7W6;+ah-DAEO!-3KN7+9{l>ea(q?cblV>eZ@hjw?8mse6Ni_jFbl
za8=q>gY;j_+CzidEmhoMjp-q8QinA5hc)n^H&wOi^nSpGECkxnxmF7wGKSwwAn(&B
z(V#XAV`EqwIS(d%Qx@*&I#XD~BMt-SHz}v`8SwrLn99icUsM5BD}wyd3E(7fm^<-7
zQXkLOWoR~K`w1@c4znWMr|j^jfES#<3FpObW-aE9c$syC>t%;~ITt(Z;y73DQ6}}e
z^v;X=4ZpZ%o)^8~FD^FvO8h4kI;GA58-3Y^F_Sa&6oIMl<oGEQ=O<P8^tjM?I^kSt
z*v~eBPn|w}dO~PB4dKOjlaT;p^Z59bEC`L`6BEjNIP|rKz;IPH`QfQk<2IY9D+0q>
zrGqG_8LWCwo<4;=l`ur@15)8}!qWNxZ0;<J!X%7Q&!t96z>~tnsSks~_-RtltMm2M
zOyN_F6Q@s|J~f3Tnx-4H5-m_un7tvL*6PBHaohN)QKN}Kxq&M5Itp+Y=y`M&&8#)K
z!OuHbg)o|OP;TAV|1I=JvL;Q>2aSeZ2CGe>&=xZs(E0BvLO;M+VCV_8ZMb@RdtI*V
z@FEI3dao0q+j9oE2OtC*aL{--2EdLUf>K%(ZF0a!3fxO!A{S`m5f%Wu;HX;nII@3I
z9MzyyxHmhDX-XK?fNcg^Lu2-)6wm|~dq5?kAobkkH;@85Tr0fSS0F2-c&O*7ffN`u
z-HW(;dzjL#^n~xigb9WS$qZAOwGEAIa(kbFGGXJk@lcPVxeNjl$U(V{a`Ny7TX{6b
zqtERUeO&zCu&1$Ya_Ye?DR>xM{QoCxnG_nQrs(}KyC?QcOzoL4xOWN0jl#rFV5j&_
zP41bT+C8bq(z_dE2i(m?VNq0HDyEYYS)3atg{hy=vLWy(Ix&QIi{jLt-FtRVF~FcF
z<;kf;+1f}LZMzL%+<HUrzM+rAL{I<0?c7GRlg#K6o#<&NSCNBq`zDk7q2Q5#9gGja
z4psp!En-$F=gvXg4{{Lq><^js?6(qrjvaoE``)w6#^hl4+_Ox24lL)&doNQiK}TS*
zi46vwmka#fw*!`Bc34^*5}DzU$0ISpHo+xLdpse@#sIrQq0nNFCmgc#3}ILnTli3j
zw;&QzShR*iJTyHv&EU*iELJJBIK<)%Z&BLpkwumQLN3p5e#=&MVrY7Ldh?6q{swcn
zXF4=(@342Ej5bqPf^R`bp*_r7%wb1Ch%emyVj(Xv)dmzQ$f1dDE6)KgD|lo-gAd^#
z<H`lj>A;xs#r6BnBX4VU@pfvL&M9As0Uy=s;_cMVqMrc82BRD5MeOiPUn9H#-@QvQ
z%*|kIy?qf7otwa9<L$ff#T;~2m_jOi*8~Oy!;2R|fn_KljhCT-6rk}k!8Be*7&KT`
z81d$k?(2V}?K!7|OiqWdTn>ymU0j;mWvki?Vn0iLYA=X2GyY6{z#1?XQyyCHZ~ukI
zSD3YgJE)@;NN+tC`+lYd+I<6<WhnCuRV*6y3j(ekiJ70yiuwJquD<qV%Y0p?aIC9M
z@W)`=E(DgvOyFoN*yfL7?vwi>CU6u%(50>}1Qg8zgSClWl!!&UY&Oto@IaboCWAA2
z%T(Mia}f9B3u(&F*ITA~G{>}ExR2f?_+C5EdZ5*Q_^`c|Ec|p^v%UL3t5z)%*yd7O
zp!@#)f9^PZxTE#{{mvKnmAV24bkr(w{)5fUg>uXN0|Y*Bpk>>>a)<B0eQdm+{=hb_
z^?v8hSIb;|-30Fb?Y^q&VD~5LW_3!R-CSp9_p*+vGNFw>bB4E<R0zS&?#^!Nra&r+
zIJm;XLOWkrURY3m=1h5EQ$eBKjy0{+GS&Y+;KOHh^Z|9#;Kp!j2ubJWebB3~?%RjG
z4r8w9T?(n9I{*&yd?4tu6;>CXIa4UOnhM$id@z8R(?J?W_kmA3+gw%69riP4>;a)-
z-;15dB8Aed3H;i9zudHM+b>&{47SkaPn69V`*8jGb?Y(hP86^+Ae6$5X0Y{>?tqKD
zByj8ewUgKAV|}84w!-G-gRN*A_Ivm2m>=*tnzn9hy$^WZwXtj0+}AK&mk6Wd#LiA-
z@uwer@KZ2oN&$WoRse?QyyV1m9k$b$li5<|Xr2dD_?c=ermA!6fh3b$Qg#D;^3T_t
zlJg{B>H!#{SlSYGo`1$QpXQ7O)i}9CVU*1&&npFlC`>7BJEJjMg>ag4YF<;`05GBr
z3zlntPIab`HoM560?U|o8#yN<f8FCo)j6NJcJi6&ZbN5k+&y~BeGp~5w(g+kmIuk8
zu&(j_Znt}M#Qn_tGoFzVw_AnvLxx&+j6kC!p4ZhT+MVgFRwRn}I!6C|T}^T~*OHPC
zjSx#(Qd>BQW<}$y7Z?s-oYd0Fq!uaX-bmO*V4G~ytnKL$wV)_cxMy}Q)FY>C2#pTM
z#Z*x0jSt5uEDaOIc`?b33=c^U$k5y{6r!*^I}DA2@980o92!18)T4ksJs`0K>Y=b8
zj}mxvcxZ?iz<TKT5SdGG85$Z@wuS@>)3q=-etdXnSQKO|48`#t@u6YtMp>H*ql`)*
zL&xE55ktq1W3fjF&K@WG116<YU>o+a!5gsR_;U1h3?<#Y<Mm~)IESzT>?ki%SnTVQ
zgg{@=6(1$m!xnTzLWN<N<3q<Wj_fQi*aD#79GD6U6H~I#Z<!q(!A2E^zC2FYP#`GS
z8bJV-rh@WBqfNN+IUgS#9UAT=!arEi?#>agv!UQe-~tm0EKW2Ar-IVw^LPFr&!Pg)
zldk>VEyrI4Y=<qrsYaVkg)#4&kZqUm+?nsMhPMa5eZBZ@1>n#Kd?(u5tpPp>2dA*F
zV7YVWh7)z%8+rhTBwJvjzWt*<F$v2P6G7x<{?3hgUO*;JB;XSx5?1@#+ov#BVU!fF
z<oO$SZv4SUTG5LNT=DVntSAJ1zCMe>P?**s#^OWN79O=7Qs54hE-v)>5CdfhtV+HN
z>-jH1h$jG_;3ZTI?`sE3l?sdD`8)r9b7*!}4vlzDY`z(nL$gDpZWw05kkxweW?Upu
zqh}UWn;?b195H|)SN~;6KwXavkK(WusIT`~ZALKk){S3CBP8pjP536p1A-w8{i2_I
zUIEXF(nnL{!K^R@dT2B*3%sxXBheHVq<DySpMoe%VZo-(weZ6^*!>NRUiT>f52%<K
z23uUr4wo!FU&0EPtXi>jB@<kXo9@o%y@6?oDO_BIyZPS8Te0-~((}cp@TxcR@^CIA
zFE0;qn}tzQ{DlIqIKPsifGew3K$JCwOR7i=jPS~(d0(9WBJT?}=cO1`eC5)m$f7w6
z?_$(8P!_oO|Gqshj9!-m{Jl-vii%jn_@|ofn^qMSvlVd3G<uWS$zqPGTe1A82i@r~
z#Db)_&n{nn-My}6)01X6oHwp_A6<Ur><;tL0dGJjInzg$AMtD;p=ZSbE4|d5Jz^R<
zg=x1s*OxDU1EH@)=viS1{q}fLLoe2o3M;XY(5Ff0Mh9~hrX3Q!K||lJuMH_MjRk|i
zd)#i1?jMCUxPh*)!;o$mM$#?dI(==_RvjAbx_QG9ezi%d0h%3F)4e?l3OKzXt-rh_
zJFGTQ8f<nLjo&m_6{a668mu|ILJgJ$UZU143;bV95vac|F{0{7$}h2q{<_pQgPXa6
z>X@2PX{DZ4msW#)hls*e$IhKQS6OvVUzOFIpAm*ixriQIN#>~!YR!Gh<V<-(xKc|S
z!$32l01Pq%&UB@F7{^@697Y<CnHt7l(_knCZYm%uJ*L9TqC`O(Q5lBzDOpvjvL(k#
zlmUW{tzMmgtMawN7OJMQWBJuW*|F6HB?-9FC<A~2mVm7m@)Iz83<MZ7F}Hmku$nXD
zFtmx)7O=X+JdEOF`I@R*O&#^(I96GxCPm}CPaB0c-MV4yqfa2(J=4Odq?87uq{g{Y
zJImaO!Z4&r=A1t8RAG%vrD5aGPv5E{`{+b12?e-Pjb%!-+LDxV)kbexsdM<^Fs!%s
z7^qoVojfpdPqd`=bN|a1vV9k&*A>K;Q31~OU38HGb;ZnKd>2)G``Yk}YAk93({9zH
z0l^o=&#or$lL{Q`@*|Em!5=kuj>Sj>%K~j(F;h5}{0Z1R=BS_cT8}p{hhtsA0ASi}
zJWI@^jC}}(5svz0A5%S3b>YbjM;TyEKlj<;of;KqgJ00-5jcUf05ANHe&M|6HxD=G
zGpm^^$U(W>j<n|6dOOmia5p8NgD_qjvo_|`E#&`yIH&G6bL!YLmo7sA|J&owuPJM8
zW;!qW(&fwjvOtF%G(9i6Wy|FopTFf0nySq3e^B}c2mXi01%ZxznC&3*(j~yaFaPV~
zf~yQ;8fH6+Ui|zv#cy2hcL;RQN<-(jk6c9G>ok@vZwW$^Ar5#)-I42eF9A0V9q`8O
z?(0X+-leesC!ts5>xB+@13jfTn+$!661x6T6iq`p`=tr}k2<Ob4ApE$=yNHdzojb*
z11IOp)L4M)ioy^Loz%M7nLvn!esu2c7A6?6yyiY~WOmCX78r5Y9i4@>Ib2ht)CgiW
zEntmW*Jf2ms{$yhB3n|{C@_Mh38(3{2|<5UM=`(%mbN^#A^ovE7SX@We1jV7CAEq6
zEyFdo25_>;(O?5zk*E$x;kVVsjE@xwmZAnQZEN%cEBk1$hVV-a!K$!&kWquprYF?H
zR~v#gzmJ|C7=4SPZ1>T#-!7Wlji}FMCw>n-xW)C^?CjNeJbo3p`JJ|4uRyb`aC~mX
zl{g!WkmFab%>9rN{^8t}E1zM;0@I+cvcj_$FU~T;z#;Pj{(vgE3uFv`ewS#=<x7_?
zUEXq4kuhBLG|{FSa;VsmNADCcgttA7e@2Qnt)uV?$QWLL7vSgE;a}nK#R@O^uJM6!
zTM52X7H!&yub~@v<R$vLm#==sq^mO6ul|QoU&-86MijcrF&o1gFuT467=>qoLEao5
z!lj@$zhZ!I4pAK+x@ihi_PsX`y?F?9R+zH41_$>a-amK?bXJ&z`{sV4!-I$38_oh#
z<6DObdu(v<O<0@3hxQ*krg#s&mmMA@g&QQs=*V{8;H}Z@Ff?-VHzeXihi(mJg>O=L
z?9i=SWXUXMXzb+ZaRmizR&~R;Of$g_n<iy+Z0zLNFf}$!_sH1j*vXS)qhQS&(%9JX
z_dx$<46GRpe3-=j=dZu<Q+=cGSGgTzayWcFp38wT*YBd2*}se8lm#>W9R8oOeV)}C
zFlcrd^oF|YbqpdfXfnu`xhPCW&SHe&UE{9(`Oj;!{?RZLt=nXFdDc@3Tmyk#TT)b<
zO$6S)9z6r?Al~b@6=fBH-OKZq&tV_XJGW&M&O)r6`)tLP&(;D4o=x=Ro;z>Fl^r!~
zC(3F(fZcG0Oq>zySzPn!p<%4wltl_WefI1efl+%;n$(6Wgn+Bb%#xzAHJhG(dSw<p
zslrNIT56&sOopN}5n7!(zFe(o6IC1kdJk*k2TT4Va@XwdE?}^ie(-x1<#Z^(K?W>y
gpH7z_QlC!$3lAGE$RYwdmjD0&07*qoM6N<$f|Rs9zyJUM

diff --git a/public/styles/flags.css b/public/styles/flags.css
index 7916efb45a..fc2dd559e7 100755
--- a/public/styles/flags.css
+++ b/public/styles/flags.css
@@ -1 +1,277 @@
-span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primereact/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}
+/*!*****************************************************
+
+Freak Flags, Copyright ©2024 Michael P. Cohen. Freak flags is licenced under the MIT licence.  
+
+For complete information visit: www.freakflagsprite.com 
+
+******************************************************/
+.flag {
+    background-image:url(https://primefaces.org/cdn/primereact/images/flag/flags_responsive.png);
+    background-repeat:no-repeat;
+    background-size: 100% 49494%;
+    background-clip: content-box;
+    border-radius: 10%;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+    box-sizing: content-box;
+    box-shadow: 0 0 0 1px rgb(220,220,220);
+}
+
+.flag-ch,
+.flag-np {box-shadow: none!important}
+.flag-dz {background-position:center 0.2287%}
+.flag-ao {background-position:center 0.4524%}
+.flag-bj {background-position:center 0.6721%}
+.flag-bw {background-position:center 0.8958%}
+.flag-bf {background-position:center 1.1162%}
+.flag-bi {background-position:center 1.3379%}
+.flag-cm {background-position:center 1.5589%}
+.flag-cv {background-position:center 1.7805%}
+.flag-cf {background-position:center 2.0047%}
+.flag-td {background-position:center 2.2247%}
+.flag-cd {background-position:left 2.4467%}
+.flag-dj {background-position:left 2.6674%}
+.flag-eg {background-position:center 2.8931%}
+.flag-gq {background-position:center 3.1125%}
+.flag-er {background-position:left 3.3325%}
+.flag-et {background-position:center 3.5542%}
+.flag-ga {background-position:center 3.7759%}
+.flag-gm {background-position:center 4.0015%}
+.flag-gh {background-position:center 4.2229%}
+.flag-gn {background-position:center 4.441%}
+.flag-gw {background-position:left 4.66663%}
+.flag-ci {background-position:center 4.8844%}
+.flag-ke {background-position:center 5.1061%}
+.flag-ls {background-position:center 5.3298%}
+.flag-lr {background-position:left 5.5495%}
+.flag-ly {background-position:center 5.7712%}
+.flag-mg {background-position:center 5.994%}
+.flag-mw {background-position:center 6.2156%}
+.flag-ml {background-position:center 6.4363%}
+.flag-mr {background-position:center 6.658%}
+.flag-mu {background-position:center 6.8805%}
+.flag-yt {background-position:center 7.1038%}
+.flag-ma {background-position:center 7.3231%}
+.flag-mz {background-position:left 7.5448%}
+.flag-na {background-position:left 7.7661%}
+.flag-ne {background-position:center 7.98937%}
+.flag-ng {background-position:center 8.2099%}
+.flag-cg {background-position:center 8.4316%}
+.flag-re {background-position:center 8.6533%}
+.flag-rw {background-position:right 8.875%}
+.flag-sh {background-position:center 9.0967%}
+.flag-st {background-position:center 9.32237%}
+.flag-sn {background-position:center 9.5426%}
+.flag-sc {background-position:left 9.7628%}
+.flag-sl {background-position:center 9.9845%}
+.flag-so {background-position:center 10.2052%}
+.flag-za {background-position:left 10.4269%}
+.flag-ss {background-position:left 10.6486%}
+.flag-sd {background-position:center 10.8703%}
+.flag-sr {background-position:center 11.0945%}
+.flag-sz {background-position:center 11.3135%}
+.flag-tg {background-position:left 11.5354%}
+.flag-tn {background-position:center 11.7593%}
+.flag-ug {background-position:center 11.9799%}
+.flag-tz {background-position:center 12.2005%}
+.flag-eh {background-position:center 12.4222%}
+.flag-ye {background-position:center 12.644%}
+.flag-zm {background-position:center 12.8664%}
+.flag-zw {background-position:left 13.0873%}
+.flag-ai {background-position:center 13.309%}
+.flag-ag {background-position:center 13.5307%}
+.flag-ar {background-position:center 13.7524%}
+.flag-aw {background-position:left 13.9741%}
+.flag-bs {background-position:left 14.1958%}
+.flag-bb {background-position:center 14.4175%}
+.flag-bq {background-position:center 14.6415%}
+.flag-bz {background-position:center 14.8609%}
+.flag-bm {background-position:center 15.0826%}
+.flag-bo {background-position:center 15.306%}
+.flag-vg {background-position:center 15.528%}
+.flag-br {background-position:center 15.7496%}
+.flag-ca {background-position:center 15.9694%}
+.flag-ky {background-position:center 16.1911%}
+.flag-cl {background-position:left 16.4128%}
+.flag-co {background-position:left 16.6345%}
+.flag-km {background-position:center 16.8562%}
+.flag-cr {background-position:center 17.0779%}
+.flag-cu {background-position:left 17.2996%}
+.flag-cw {background-position:center 17.5213%}
+.flag-dm {background-position:center 17.743%}
+.flag-do {background-position:center 17.968%}
+.flag-ec {background-position:center 18.1864%}
+.flag-sv {background-position:center 18.4081%}
+.flag-fk {background-position:center 18.6298%}
+.flag-gf {background-position:center 18.8515%}
+.flag-gl {background-position:left 19.0732%}
+.flag-gd {background-position:center 19.2987%}
+.flag-gp {background-position:center 19.518%}
+.flag-gt {background-position:center 19.7383%}
+.flag-gy {background-position:center 19.96%}
+.flag-ht {background-position:center 20.1817%}
+.flag-hn {background-position:center 20.4034%}
+.flag-jm {background-position:center 20.6241%}
+.flag-mq {background-position:center 20.8468%}
+.flag-mx {background-position:center 21.0685%}
+.flag-ms {background-position:center 21.2902%}
+.flag-ni {background-position:center 21.5119%}
+.flag-pa {background-position:center 21.7336%}
+.flag-py {background-position:center 21.9553%}
+.flag-pe {background-position:center 22.177%}
+.flag-pr {background-position:left 22.4002%}
+.flag-bl {background-position:center 22.6204%}
+.flag-kn {background-position:center 22.8421%}
+.flag-lc {background-position:center 23.0638%}
+.flag-pm {background-position:center 23.2855%}
+.flag-vc {background-position:center 23.5072%}
+.flag-sx {background-position:left 23.732%}
+.flag-tt {background-position:center 23.9506%}
+.flag-tc {background-position:center 24.1723%}
+.flag-us {background-position:center 24.392%}
+.flag-vi {background-position:center 24.6157%}
+.flag-uy {background-position:left 24.8374%}
+.flag-ve {background-position:center 25.0591%}
+.flag-ab {background-position:center 25.279%}
+.flag-af {background-position:center 25.5025%}
+.flag-az {background-position:center 25.7242%}
+.flag-bd {background-position:center 25.9459%}
+.flag-bt {background-position:center 26.1676%}
+.flag-bn {background-position:center 26.3885%}
+.flag-kh {background-position:center 26.611%}
+.flag-cn {background-position:left 26.8327%}
+.flag-ge {background-position:center 27.0544%}
+.flag-hk {background-position:center 27.2761%}
+.flag-in {background-position:center 27.4978%}
+.flag-id {background-position:center 27.7195%}
+.flag-jp {background-position:center 27.9412%}
+.flag-kz {background-position:center 28.1615%}
+.flag-la {background-position:center 28.3846%}
+.flag-mo {background-position:center 28.6063%}
+.flag-my {background-position:center 28.829%}
+.flag-mv {background-position:center 29.0497%}
+.flag-mn {background-position:left 29.2714%}
+.flag-mm {background-position:center 29.4931%}
+.flag-np {background-position:left 29.7148%}
+.flag-kp {background-position:left 29.9365%}
+.flag-mp {background-position:center 30.1582%}
+.flag-pw {background-position:center 30.3799%}
+.flag-pg {background-position:center 30.6016%}
+.flag-ph {background-position:left 30.8233%}
+.flag-sg {background-position:left 31.045%}
+.flag-kr {background-position:center 31.2667%}
+.flag-lk {background-position:right 31.4884%}
+.flag-tw {background-position:left 31.7101%}
+.flag-tj {background-position:center 31.9318%}
+.flag-th {background-position:center 32.1535%}
+.flag-tl {background-position:left 32.3752%}
+.flag-tm {background-position:center 32.5969%}
+.flag-vn {background-position:center 32.8186%}
+.flag-ax {background-position:center 33.0403%}
+.flag-al {background-position:center 33.25975%}
+.flag-ad {background-position:center 33.4837%}
+.flag-am {background-position:center 33.7054%}
+.flag-at {background-position:center 33.9271%}
+.flag-by {background-position:left 34.1488%}
+.flag-be {background-position:center 34.3705%}
+.flag-ba {background-position:center 34.5922%}
+.flag-bg {background-position:center 34.8139%}
+.flag-hr {background-position:center 35.0356%}
+.flag-cy {background-position:center 35.2555%}
+.flag-cz {background-position:left 35.479%}
+.flag-dk {background-position:center 35.7007%}
+.flag-ee {background-position:center 35.9224%}
+.flag-fo {background-position:center 36.1441%}
+.flag-fi {background-position:center 36.3658%}
+.flag-fr {background-position:center 36.5875%}
+.flag-de {background-position:center 36.8092%}
+.flag-gi {background-position:center 37.0309%}
+.flag-gr {background-position:left 37.2526%}
+.flag-gg {background-position:center 37.4743%}
+.flag-hu {background-position:center 37.696%}
+.flag-is {background-position:center 37.9177%}
+.flag-ie {background-position:center 38.1394%}
+.flag-im {background-position:center 38.3611%}
+.flag-it {background-position:center 38.5828%}
+.flag-je {background-position:center 38.8045%}
+.flag-xk {background-position:center 39.0262%}
+.flag-lv {background-position:center 39.2479%}
+.flag-li {background-position:left 39.4696%}
+.flag-lt {background-position:center 39.6913%}
+.flag-lu {background-position:center 39.913%}
+.flag-mt {background-position:left 40.1347%}
+.flag-md {background-position:center 40.3564%}
+.flag-mc {background-position:center 40.5781%}
+.flag-me {background-position:center 40.7998%}
+.flag-nl {background-position:center 41.0215%}
+.flag-mk {background-position:center 41.2432%}
+.flag-no {background-position:center 41.4649%}
+.flag-pl {background-position:center 41.6866%}
+.flag-pt {background-position:center 41.9083%}
+.flag-ro {background-position:center 42.13%}
+.flag-ru {background-position:center 42.3517%}
+.flag-sm {background-position:center 42.5734%}
+.flag-rs {background-position:center 42.7951%}
+.flag-sk {background-position:center 43.0168%}
+.flag-si {background-position:center 43.2385%}
+.flag-es {background-position:left 43.4602%}
+.flag-se {background-position:center 43.6819%}
+.flag-ch {background-position:center 43.9036%}
+.flag-tr {background-position:center 44.1253%}
+.flag-ua {background-position:center 44.347%}
+.flag-gb {background-position:center 44.5687%}
+.flag-va {background-position:right 44.7904%}
+.flag-bh {background-position:center 45.0121%}
+.flag-ir {background-position:center 45.2338%}
+.flag-iq {background-position:center 45.4555%}
+.flag-il {background-position:center 45.6772%}
+.flag-kw {background-position:left 45.897%}
+.flag-jo {background-position:left 46.1206%}
+.flag-kg {background-position:center 46.3423%}
+.flag-lb {background-position:center 46.561%}
+.flag-om {background-position:left 46.7857%}
+.flag-pk {background-position:center 47.0074%}
+.flag-ps {background-position:center 47.2291%}
+.flag-qa {background-position:center 47.4508%}
+.flag-sa {background-position:center 47.6725%}
+.flag-sy {background-position:center 47.8942%}
+.flag-ae {background-position:center 48.1159%}
+.flag-uz {background-position:left 48.3376%}
+.flag-as {background-position:right 48.5593%}
+.flag-au {background-position:center 48.781%}
+.flag-cx {background-position:center 49.002%}
+.flag-cc {background-position:center 49.2244%}
+.flag-ck {background-position:center 49.4445%}
+.flag-fj {background-position:center 49.6678%}
+.flag-pf {background-position:center 49.8895%}
+.flag-gu {background-position:center 50.1112%}
+.flag-ki {background-position:center 50.3329%}
+.flag-mh {background-position:left 50.5546%}
+.flag-fm {background-position:center 50.7763%}
+.flag-nc {background-position:center 50.998%}
+.flag-nz {background-position:center 51.2197%}
+.flag-nr {background-position:left 51.4414%}
+.flag-nu {background-position:center 51.6631%}
+.flag-nf {background-position:center 51.8848%}
+.flag-ws {background-position:left 52.1065%}
+.flag-sb {background-position:left 52.3282%}
+.flag-tk {background-position:center 52.5499%}
+.flag-to {background-position:left 52.7716%}
+.flag-tv {background-position:center 52.9933%}
+.flag-vu {background-position:left 53.215%}
+.flag-wf {background-position:center 53.4385%}
+.flag-aq {background-position:center 53.6584%}
+.flag-eu {background-position:center 53.875%}
+.flag-jr {background-position:center 54.099%}
+.flag-oly {background-position:center 54.32%}
+.flag-un {background-position:center 54.54%}
+
+
+.flag.ff-sm {width: 18px;height: 11px}
+.flag.ff-md {width: 27px;height: 17px}
+.flag.ff-lg {width: 42px;height: 27px}
+.flag.ff-xl {width: 60px;height: 37px}
+.flag.ff-lt {box-shadow: 0 0 0 1px rgb(220,220,220)}
+.flag.ff-dk {box-shadow: 0 0 0 1px rgb(90,90,90)}
\ No newline at end of file

From 3474235748ab05323ab827bfaa5a3d5ef2042946 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 9 Apr 2024 06:42:03 +0000
Subject: [PATCH 162/194] Update API doc

---
 components/doc/common/apidoc/index.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 4f98e6c2fe..fc3358ee5e 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -5851,6 +5851,13 @@
                     "description": "Defines valid properties in ButtonGroup component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "description": "Used to get the child elements of the component."
+                        },
                         {
                             "name": "pt",
                             "optional": true,

From dd0fc906ae3310e3ea18026ccd46bf0385c7caad Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 9 Apr 2024 06:43:13 +0000
Subject: [PATCH 163/194] Update API doc

---
 components/doc/common/apidoc/index.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index fc3358ee5e..1173122a7d 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -46984,7 +46984,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "StepperPanelPassThroughTransitionType",
-                            "description": "Used to control Vue Transition API."
+                            "description": "Used to control React Transition API."
                         },
                         {
                             "name": "hooks",

From 762f720c0cd9e26457349f9f28314f74ea8e73a3 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 9 Apr 2024 08:24:24 +0000
Subject: [PATCH 164/194] Update API doc

---
 components/doc/common/apidoc/index.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 5de299afb8..671bfa6758 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -31239,9 +31239,9 @@
                             "name": "value",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | number",
-                            "default": "false",
-                            "description": "Specifies whether a inputotp should be checked or not."
+                            "type": "null | string | number",
+                            "default": "null",
+                            "description": "Specifies the value of the component."
                         },
                         {
                             "name": "variant",
@@ -31317,7 +31317,7 @@
             "values": {
                 "InputOtpChangeEvent": {
                     "description": "Custom change event",
-                    "relatedProp": "InputNumberProps.onChange",
+                    "relatedProp": "onChange",
                     "props": [
                         {
                             "name": "originalEvent",
@@ -31328,9 +31328,9 @@
                         },
                         {
                             "name": "value",
-                            "optional": false,
+                            "optional": true,
                             "readonly": false,
-                            "type": "null | number",
+                            "type": "null | string | number",
                             "description": "New value"
                         }
                     ]

From 6d76a4979693b087bcc825da36f267d705998842 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 11:37:58 +0300
Subject: [PATCH 165/194] Overlay Section - Classnames not being set in
 unstyled mode #6329

---
 components/lib/confirmpopup/ConfirmPopup.js     | 2 +-
 components/lib/dialog/Dialog.js                 | 4 ++--
 components/lib/dialog/DialogBase.js             | 2 +-
 components/lib/overlaypanel/OverlayPanel.js     | 4 ++--
 components/lib/overlaypanel/OverlayPanelBase.js | 2 +-
 components/lib/sidebar/Sidebar.js               | 4 ++--
 components/lib/sidebar/SidebarBase.js           | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
index 44836aaeba..0cf5b68f43 100644
--- a/components/lib/confirmpopup/ConfirmPopup.js
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -353,7 +353,7 @@ export const ConfirmPopup = React.memo(
             {
                 ref: overlayRef,
                 id: getPropValue('id'),
-                className: cx('root', { context, getPropValue }),
+                className: classNames(props.className, cx('root', { context, getPropValue })),
                 style: getPropValue('style'),
                 onClick: onPanelClick
             },
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index b5452ddeb1..9b22c407a0 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -8,7 +8,7 @@ import { WindowMaximizeIcon } from '../icons/windowmaximize';
 import { WindowMinimizeIcon } from '../icons/windowminimize';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { DialogBase } from './DialogBase';
 
 export const Dialog = React.forwardRef((inProps, ref) => {
@@ -714,7 +714,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
             {
                 ref: dialogRef,
                 id: idState,
-                className: cx('root', { props, maximized, context }),
+                className: classNames(props.className, cx('root', { props, maximized, context })),
                 style: props.style,
                 onClick: props.onClick,
                 role: 'dialog',
diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js
index affa53ccca..d3a88ac409 100644
--- a/components/lib/dialog/DialogBase.js
+++ b/components/lib/dialog/DialogBase.js
@@ -29,7 +29,7 @@ const classes = {
         );
     },
     root: ({ props, maximized, context }) =>
-        classNames('p-dialog p-component', props.className, {
+        classNames('p-dialog p-component', {
             'p-dialog-rtl': props.rtl,
             'p-dialog-maximized': maximized,
             'p-dialog-default': !maximized,
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
index 28b5348e03..08deb96a7d 100644
--- a/components/lib/overlaypanel/OverlayPanel.js
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -7,7 +7,7 @@ import { TimesIcon } from '../icons/times';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { OverlayPanelBase } from './OverlayPanelBase';
 
 export const OverlayPanel = React.forwardRef((inProps, ref) => {
@@ -266,7 +266,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         const rootProps = mergeProps(
             {
                 id: props.id,
-                className: cx('root', { context }),
+                className: classNames(props.className, cx('root', { context })),
                 style: props.style,
                 onClick: (e) => onPanelClick(e)
             },
diff --git a/components/lib/overlaypanel/OverlayPanelBase.js b/components/lib/overlaypanel/OverlayPanelBase.js
index 21aedc35cf..d3f9a8c8a0 100644
--- a/components/lib/overlaypanel/OverlayPanelBase.js
+++ b/components/lib/overlaypanel/OverlayPanelBase.js
@@ -4,7 +4,7 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, context }) =>
-        classNames('p-overlaypanel p-component', props.className, {
+        classNames('p-overlaypanel p-component', {
             'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
             'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
         }),
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
index 25fc2a79e3..1cac18042e 100644
--- a/components/lib/sidebar/Sidebar.js
+++ b/components/lib/sidebar/Sidebar.js
@@ -6,7 +6,7 @@ import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlob
 import { TimesIcon } from '../icons/times';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { SidebarBase } from './SidebarBase';
 
 export const Sidebar = React.forwardRef((inProps, ref) => {
@@ -215,7 +215,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
     const rootProps = mergeProps(
         {
             id: props.id,
-            className: cx('root', { context }),
+            className: classNames(props.className, cx('root', { context })),
             style: props.style,
             role: 'complementary'
         },
diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js
index 452538ec61..922a73c8bb 100644
--- a/components/lib/sidebar/SidebarBase.js
+++ b/components/lib/sidebar/SidebarBase.js
@@ -28,7 +28,7 @@ const classes = {
     content: 'p-sidebar-content',
     icons: 'p-sidebar-icons',
     root: ({ props, context }) =>
-        classNames('p-sidebar p-component', props.className, {
+        classNames('p-sidebar p-component', {
             'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
             'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
         }),

From f5207ba65db7017fc4fddc28ac2b257f2d24d4a4 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 11:39:26 +0300
Subject: [PATCH 166/194] Misc Section - classnames not being set in unstyled
 mode #6329

---
 components/lib/blockui/BlockUI.js     | 2 +-
 components/lib/blockui/BlockUIBase.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
index e5872a593d..777d1b489a 100644
--- a/components/lib/blockui/BlockUI.js
+++ b/components/lib/blockui/BlockUI.js
@@ -124,7 +124,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: elementRef,
             style: props.containerStyle,
-            className: cx('root'),
+            className: classNames(props.containerClassName, cx('root')),
             'aria-busy': props.blocked
         },
         BlockUIBase.getOtherProps(props),
diff --git a/components/lib/blockui/BlockUIBase.js b/components/lib/blockui/BlockUIBase.js
index fd5e10a005..0a3e3f7e75 100644
--- a/components/lib/blockui/BlockUIBase.js
+++ b/components/lib/blockui/BlockUIBase.js
@@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-blockui-container', props.containerClassName),
+    root: 'p-blockui-container',
     mask: ({ props }) =>
         classNames('p-blockui p-component-overlay p-component-overlay-enter', {
             'p-blockui-document': props.fullScreen

From 0909626ef7b8c3f2438e4d68a5d0a465b07437c3 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 11:41:23 +0300
Subject: [PATCH 167/194] Menu Section - classnames not being set in unstyled
 mode #6329

---
 components/lib/breadcrumb/BreadCrumb.js     |  4 ++--
 components/lib/breadcrumb/BreadCrumbBase.js |  2 +-
 components/lib/panelmenu/PanelMenu.js       |  2 +-
 components/lib/panelmenu/PanelMenuBase.js   |  2 +-
 components/lib/steps/Steps.js               |  2 +-
 components/lib/steps/StepsBase.js           | 10 +++-------
 components/lib/tabmenu/TabMenu.js           |  2 +-
 components/lib/tabmenu/TabMenuBase.js       |  2 +-
 components/lib/tieredmenu/TieredMenu.js     |  4 ++--
 components/lib/tieredmenu/TieredMenuBase.js | 14 +++++---------
 10 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index bc836c3199..db845ec77a 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ChevronRightIcon } from '../icons/chevronright';
-import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { BreadCrumbBase } from './BreadCrumbBase';
 
 export const BreadCrumb = React.memo(
@@ -243,7 +243,7 @@ export const BreadCrumb = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             BreadCrumbBase.getOtherProps(props),
diff --git a/components/lib/breadcrumb/BreadCrumbBase.js b/components/lib/breadcrumb/BreadCrumbBase.js
index 70f0b0ce31..4193c44914 100644
--- a/components/lib/breadcrumb/BreadCrumbBase.js
+++ b/components/lib/breadcrumb/BreadCrumbBase.js
@@ -10,7 +10,7 @@ const classes = {
     separator: 'p-menuitem-separator',
     menuitem: ({ item }) => classNames('p-menuitem', item.className, { 'p-disabled': item.disabled }),
     menu: 'p-breadcrumb-list',
-    root: ({ props }) => classNames('p-breadcrumb p-component', props.className)
+    root: 'p-breadcrumb p-component'
 };
 
 const styles = `
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 5507a5f463..b9ff158bae 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -429,7 +429,7 @@ export const PanelMenu = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 id: props.id,
                 style: props.style
             },
diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
index 25f5e5d08c..4ea25c7ecb 100644
--- a/components/lib/panelmenu/PanelMenuBase.js
+++ b/components/lib/panelmenu/PanelMenuBase.js
@@ -10,7 +10,7 @@ const classes = {
     header: ({ active, item }) => classNames('p-component p-panelmenu-header', { 'p-highlight': active && !!item.items, 'p-disabled': item.disabled }),
     headerContent: 'p-panelmenu-header-content',
     menuContent: 'p-panelmenu-content',
-    root: ({ props }) => classNames('p-panelmenu p-component', props.className),
+    root: 'p-panelmenu p-component',
     separator: 'p-menuitem-separator',
     toggleableContent: ({ active }) =>
         classNames('p-toggleable-content', {
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index d9c64d538b..c0ca977276 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -282,7 +282,7 @@ export const Steps = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             StepsBase.getOtherProps(props),
diff --git a/components/lib/steps/StepsBase.js b/components/lib/steps/StepsBase.js
index dfa09583a7..f3dd6f1bac 100644
--- a/components/lib/steps/StepsBase.js
+++ b/components/lib/steps/StepsBase.js
@@ -12,13 +12,9 @@ const classes = {
             'p-disabled': disabled
         }),
     root: ({ props }) =>
-        classNames(
-            'p-steps p-component',
-            {
-                'p-readonly': props.readOnly
-            },
-            props.className
-        )
+        classNames('p-steps p-component', {
+            'p-readonly': props.readOnly
+        })
 };
 
 const styles = `
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index 9a1af9a82f..778b6ce57d 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -329,7 +329,7 @@ export const TabMenu = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style
                 },
                 TabMenuBase.getOtherProps(props),
diff --git a/components/lib/tabmenu/TabMenuBase.js b/components/lib/tabmenu/TabMenuBase.js
index e07f058bdb..19585bc5d7 100644
--- a/components/lib/tabmenu/TabMenuBase.js
+++ b/components/lib/tabmenu/TabMenuBase.js
@@ -16,7 +16,7 @@ const classes = {
         ),
     inkbar: 'p-tabmenu-ink-bar',
     menu: 'p-tabmenu-nav p-reset',
-    root: ({ props }) => classNames('p-tabmenu p-component', props.className)
+    root: 'p-tabmenu p-component'
 };
 
 const styles = `
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index 81b086c797..9c65acad12 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -5,7 +5,7 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { TieredMenuBase } from './TieredMenuBase';
 import { TieredMenuSub } from './TieredMenuSub';
 
@@ -682,7 +682,7 @@ export const TieredMenu = React.memo(
                 {
                     ref: containerRef,
                     id: props.id,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style,
                     onClick: onPanelClick
                 },
diff --git a/components/lib/tieredmenu/TieredMenuBase.js b/components/lib/tieredmenu/TieredMenuBase.js
index 0084886dbd..0966c3e009 100644
--- a/components/lib/tieredmenu/TieredMenuBase.js
+++ b/components/lib/tieredmenu/TieredMenuBase.js
@@ -4,15 +4,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, context }) =>
-        classNames(
-            'p-tieredmenu p-component',
-            {
-                'p-tieredmenu-overlay': props.popup,
-                'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
-                'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
-            },
-            props.className
-        ),
+        classNames('p-tieredmenu p-component', {
+            'p-tieredmenu-overlay': props.popup,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
     separator: 'p-menuitem-separator',
     icon: ({ _icon }) => classNames('p-menuitem-icon', _icon),
     content: 'p-menuitem-content',

From 36f1358f4cee71e7346e33a52cab0ebd13fbf488 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 11:43:39 +0300
Subject: [PATCH 168/194] Panel section - classnames not being set in unstyled
 mode #6329

---
 components/lib/card/Card.js                   |  4 ++--
 components/lib/card/CardBase.js               |  3 +--
 components/lib/scrollpanel/ScrollPanel.js     |  4 ++--
 components/lib/scrollpanel/ScrollPanelBase.js |  3 +--
 components/lib/tabview/TabView.js             |  4 ++--
 components/lib/tabview/TabViewBase.js         | 10 +++-------
 components/lib/toolbar/Toolbar.js             |  4 ++--
 components/lib/toolbar/ToolbarBase.js         |  3 +--
 8 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js
index 5762d3da0e..a12ec9c1ac 100644
--- a/components/lib/card/Card.js
+++ b/components/lib/card/Card.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { ObjectUtils } from '../utils/Utils';
+import { ObjectUtils, classNames } from '../utils/Utils';
 import { CardBase } from './CardBase';
 
 export const Card = React.forwardRef((inProps, ref) => {
@@ -96,7 +96,7 @@ export const Card = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: elementRef,
             style: props.style,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         CardBase.getOtherProps(props),
         ptm('root')
diff --git a/components/lib/card/CardBase.js b/components/lib/card/CardBase.js
index d1ca05c987..23c4210d3d 100644
--- a/components/lib/card/CardBase.js
+++ b/components/lib/card/CardBase.js
@@ -1,8 +1,7 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-card p-component', props.className),
+    root: 'p-card p-component',
     header: 'p-card-header',
     title: 'p-card-title',
     subTitle: 'p-card-subtitle',
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
index 41bc187ae0..77118b573e 100644
--- a/components/lib/scrollpanel/ScrollPanel.js
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect, useUnmountEffect } from '../hooks/Hooks';
-import { DomHandler, UniqueComponentId } from '../utils/Utils';
+import { DomHandler, UniqueComponentId, classNames } from '../utils/Utils';
 import { ScrollPanelBase } from './ScrollPanelBase';
 
 export const ScrollPanel = React.forwardRef((inProps, ref) => {
@@ -287,7 +287,7 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: containerRef,
             style: props.style,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         ScrollPanelBase.getOtherProps(props),
         ptm('root')
diff --git a/components/lib/scrollpanel/ScrollPanelBase.js b/components/lib/scrollpanel/ScrollPanelBase.js
index 1db438537f..ef6ad83723 100644
--- a/components/lib/scrollpanel/ScrollPanelBase.js
+++ b/components/lib/scrollpanel/ScrollPanelBase.js
@@ -1,5 +1,4 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 export const ScrollPanelBase = ComponentBase.extend({
     defaultProps: {
@@ -12,7 +11,7 @@ export const ScrollPanelBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: ({ props }) => classNames('p-scrollpanel p-component', props.className),
+            root: 'p-scrollpanel p-component',
             wrapper: 'p-scrollpanel-wrapper',
             content: 'p-scrollpanel-content',
             barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index fe09014f13..f60733419d 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -6,7 +6,7 @@ import { ChevronLeftIcon } from '../icons/chevronleft';
 import { ChevronRightIcon } from '../icons/chevronright';
 import { TimesIcon } from '../icons/times';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { TabPanelBase, TabViewBase } from './TabViewBase';
 
 export const TabPanel = () => {};
@@ -566,7 +566,7 @@ export const TabView = React.forwardRef((inProps, ref) => {
             id: idState,
             ref: elementRef,
             style: props.style,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         TabViewBase.getOtherProps(props),
         ptm('root')
diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js
index b658ed6306..bcfd63832d 100644
--- a/components/lib/tabview/TabViewBase.js
+++ b/components/lib/tabview/TabViewBase.js
@@ -9,13 +9,9 @@ const classes = {
     prevbutton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
     nextbutton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
     root: ({ props }) =>
-        classNames(
-            'p-tabview p-component',
-            {
-                'p-tabview-scrollable': props.scrollable
-            },
-            props.className
-        ),
+        classNames('p-tabview p-component', {
+            'p-tabview-scrollable': props.scrollable
+        }),
     navcontainer: 'p-tabview-nav-container',
     tab: {
         header: ({ selected, disabled, headerClassName, _className }) => classNames('p-unselectable-text', { 'p-tabview-selected p-highlight': selected, 'p-disabled': disabled }, headerClassName, _className),
diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
index 293d4feb45..f997644b19 100644
--- a/components/lib/toolbar/Toolbar.js
+++ b/components/lib/toolbar/Toolbar.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { ObjectUtils } from '../utils/Utils';
+import { ObjectUtils, classNames } from '../utils/Utils';
 import { ToolbarBase } from './ToolbarBase';
 
 export const Toolbar = React.memo(
@@ -51,7 +51,7 @@ export const Toolbar = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 role: 'toolbar'
             },
             ToolbarBase.getOtherProps(props),
diff --git a/components/lib/toolbar/ToolbarBase.js b/components/lib/toolbar/ToolbarBase.js
index 3dd5054015..94797a2565 100644
--- a/components/lib/toolbar/ToolbarBase.js
+++ b/components/lib/toolbar/ToolbarBase.js
@@ -1,5 +1,4 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 export const ToolbarBase = ComponentBase.extend({
     defaultProps: {
@@ -16,7 +15,7 @@ export const ToolbarBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: ({ props }) => classNames('p-toolbar p-component', props.className),
+            root: 'p-toolbar p-component',
             start: 'p-toolbar-group-start p-toolbar-group-left',
             center: 'p-toolbar-group-center',
             end: 'p-toolbar-group-end p-toolbar-group-right'

From 6ac1fb625797668345acf12678f2431a1a13e112 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 11:45:54 +0300
Subject: [PATCH 169/194] #6329 - classnames not being set in unstyled mode

---
 components/lib/cascadeselect/CascadeSelect.js |  4 ++--
 .../lib/cascadeselect/CascadeSelectBase.js    | 20 +++++++---------
 components/lib/chart/Chart.js                 |  3 ++-
 components/lib/chart/ChartBase.js             |  3 +--
 components/lib/colorpicker/ColorPicker.js     |  4 ++--
 components/lib/colorpicker/ColorPickerBase.js | 10 +++-----
 components/lib/fileupload/FileUpload.js       |  2 +-
 components/lib/iconfield/IconField.js         |  5 ++--
 components/lib/image/Image.js                 |  2 +-
 components/lib/image/ImageBase.js             |  2 +-
 components/lib/inputtextarea/InputTextarea.js |  4 ++--
 .../lib/inputtextarea/InputTextareaBase.js    | 18 ++++++--------
 components/lib/knob/Knob.js                   |  3 ++-
 components/lib/knob/KnobBase.js               | 10 +++-----
 components/lib/mention/Mention.js             |  4 ++--
 components/lib/mention/MentionBase.js         | 12 ++++------
 components/lib/password/Password.js           |  2 +-
 components/lib/password/PasswordBase.js       | 14 ++++-------
 components/lib/rating/Rating.js               |  4 ++--
 components/lib/rating/RatingBase.js           | 12 ++++------
 components/lib/selectbutton/SelectButton.js   |  4 ++--
 .../lib/selectbutton/SelectButtonBase.js      |  2 +-
 components/lib/slidemenu/SlideMenu.js         |  4 ++--
 components/lib/slidemenu/SlideMenuBase.js     | 10 +++-----
 components/lib/slider/Slider.js               |  4 ++--
 components/lib/slider/SliderBase.js           |  2 +-
 components/lib/togglebutton/ToggleButton.js   |  4 ++--
 .../lib/togglebutton/ToggleButtonBase.js      | 14 ++++-------
 components/lib/treeselect/TreeSelect.js       |  4 ++--
 components/lib/treeselect/TreeSelectBase.js   | 24 ++++++++-----------
 30 files changed, 86 insertions(+), 124 deletions(-)

diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index 8f6c81f75d..0d726dda99 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -7,7 +7,7 @@ import { ChevronDownIcon } from '../icons/chevrondown';
 import { SpinnerIcon } from '../icons/spinner';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { CascadeSelectBase } from './CascadeSelectBase';
 import { CascadeSelectSub } from './CascadeSelectSub';
 
@@ -471,7 +471,7 @@ export const CascadeSelect = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root', { focusedState, overlayVisibleState, context }),
+                    className: classNames(props.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 c5e1ad9c10..74c6d100e6 100644
--- a/components/lib/cascadeselect/CascadeSelectBase.js
+++ b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -3,18 +3,14 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     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
-            },
-            props.className
-        ),
+        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
+        }),
     label: ({ props, label }) =>
         classNames('p-cascadeselect-label ', {
             'p-placeholder': label === props.placeholder,
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index 75207de71b..94984315ff 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useUnmountEffect } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { ChartBase } from './ChartBase';
 
 // GitHub #3059 wrapper if loaded by script tag
@@ -96,7 +97,7 @@ const PrimeReactChart = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: sx('root'),
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             ChartBase.getOtherProps(props),
             ptm('root')
diff --git a/components/lib/chart/ChartBase.js b/components/lib/chart/ChartBase.js
index 575ed666df..cb03aa81c1 100644
--- a/components/lib/chart/ChartBase.js
+++ b/components/lib/chart/ChartBase.js
@@ -1,5 +1,4 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 export const ChartBase = ComponentBase.extend({
     defaultProps: {
@@ -17,7 +16,7 @@ export const ChartBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: ({ props }) => classNames('p-chart', props.className)
+            root: 'p-chart'
         },
         inlineStyles: {
             root: ({ props }) =>
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 74200a0330..8be0c82a4a 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useEventListener, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { ColorPickerBase } from './ColorPickerBase';
 import { ColorPickerPanel } from './ColorPickerPanel';
 
@@ -650,7 +650,7 @@ export const ColorPicker = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             ColorPickerBase.getOtherProps(props),
             ptm('root')
diff --git a/components/lib/colorpicker/ColorPickerBase.js b/components/lib/colorpicker/ColorPickerBase.js
index 2727b4d710..800ed104a2 100644
--- a/components/lib/colorpicker/ColorPickerBase.js
+++ b/components/lib/colorpicker/ColorPickerBase.js
@@ -4,13 +4,9 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props }) =>
-        classNames(
-            'p-colorpicker p-component',
-            {
-                'p-colorpicker-overlay': !props.inline
-            },
-            props.className
-        ),
+        classNames('p-colorpicker p-component', {
+            'p-colorpicker-overlay': !props.inline
+        }),
     input: ({ props }) =>
         classNames('p-colorpicker-preview p-inputtext', props.inputClassName, {
             'p-disabled': props.disabled
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 9dfdb9be7f..ab6b76d17d 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -646,7 +646,7 @@ export const FileUpload = React.memo(
             const rootProps = mergeProps(
                 {
                     id: props.id,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style
                 },
                 FileUploadBase.getOtherProps(props),
diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js
index a4ef6c66ee..59845ed00e 100644
--- a/components/lib/iconfield/IconField.js
+++ b/components/lib/iconfield/IconField.js
@@ -1,6 +1,7 @@
 import React, { useContext, useRef } from 'react';
-import { useMergeProps } from '../hooks/Hooks';
 import { PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { IconFieldBase } from './IconFieldBase';
 
 export const IconField = React.memo(
@@ -20,7 +21,7 @@ export const IconField = React.memo(
 
         const rootProps = mergeProps(
             {
-                className: cx('root', { iconPosition: props.iconPosition })
+                className: classNames(props.className, cx('root', { iconPosition: props.iconPosition }))
             },
             IconFieldBase.getOtherProps(props),
             ptm('root')
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index c32a7ff1b8..58fcc1e379 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -384,7 +384,7 @@ export const Image = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             ImageBase.getOtherProps(props),
             ptm('root')
diff --git a/components/lib/image/ImageBase.js b/components/lib/image/ImageBase.js
index 572a107ac6..bd83163719 100644
--- a/components/lib/image/ImageBase.js
+++ b/components/lib/image/ImageBase.js
@@ -14,7 +14,7 @@ const classes = {
     preview: 'p-image-preview',
     icon: 'p-image-preview-icon',
     root: ({ props }) =>
-        classNames('p-image p-component', props.className, {
+        classNames('p-image p-component', {
             'p-image-preview-container': props.preview
         }),
     transition: 'p-image-preview'
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index eb8b514e98..f0b502f6a6 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
 import { InputTextareaBase } from './InputTextareaBase';
 
 export const InputTextarea = React.memo(
@@ -127,7 +127,7 @@ export const InputTextarea = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root', { context, isFilled }),
+                className: classNames(props.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 59f831c0c4..21e839d36c 100644
--- a/components/lib/inputtextarea/InputTextareaBase.js
+++ b/components/lib/inputtextarea/InputTextareaBase.js
@@ -3,17 +3,13 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     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-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
-            },
-            props.className
-        )
+        classNames('p-inputtextarea p-inputtext p-component', {
+            'p-disabled': props.disabled,
+            'p-filled': isFilled,
+            'p-inputtextarea-resizable': props.autoResize,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
 };
 
 const styles = `
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index aa1da5c665..092893dee8 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useEventListener, useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { KnobBase } from './KnobBase';
 
 const radius = 40;
@@ -243,7 +244,7 @@ export const Knob = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             ptm('root')
diff --git a/components/lib/knob/KnobBase.js b/components/lib/knob/KnobBase.js
index b16dca1f6c..3614ce334e 100644
--- a/components/lib/knob/KnobBase.js
+++ b/components/lib/knob/KnobBase.js
@@ -31,13 +31,9 @@ export const KnobBase = ComponentBase.extend({
             value: 'p-knob-value',
             label: 'p-knob-text',
             root: ({ props }) =>
-                classNames(
-                    'p-knob p-component',
-                    {
-                        'p-disabled': props.disabled
-                    },
-                    props.className
-                )
+                classNames('p-knob p-component', {
+                    'p-disabled': props.disabled
+                })
         },
         styles: `
         @keyframes dash-frame {
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
index 55e52c5c71..0e7e3e76e1 100644
--- a/components/lib/mention/Mention.js
+++ b/components/lib/mention/Mention.js
@@ -7,7 +7,7 @@ import { InputTextarea } from '../inputtextarea/InputTextarea';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { MentionBase } from './MentionBase';
 
 export const Mention = React.memo(
@@ -550,7 +550,7 @@ export const Mention = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root', { focusedState, isFilled }),
+                className: classNames(props.className, cx('root', { focusedState, isFilled })),
                 style: props.style
             },
             MentionBase.getOtherProps(props),
diff --git a/components/lib/mention/MentionBase.js b/components/lib/mention/MentionBase.js
index d8ff46ae7d..553ef49f8e 100644
--- a/components/lib/mention/MentionBase.js
+++ b/components/lib/mention/MentionBase.js
@@ -10,14 +10,10 @@ const classes = {
     panel: ({ props }) => classNames('p-mention-panel p-component', props.panelClassName),
     input: ({ props }) => classNames('p-mention-input', props.inputClassName),
     root: ({ props, isFilled, focusedState }) =>
-        classNames(
-            'p-mention p-component p-inputwrapper',
-            {
-                'p-inputwrapper-filled': isFilled,
-                'p-inputwrapper-focus': focusedState
-            },
-            props.className
-        ),
+        classNames('p-mention p-component p-inputwrapper', {
+            'p-inputwrapper-filled': isFilled,
+            'p-inputwrapper-focus': focusedState
+        }),
     transition: 'p-connected-overlay'
 };
 
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index 87f6156e90..d85f7b60d7 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -445,7 +445,7 @@ export const Password = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root', { isFilled, focusedState }),
+                className: classNames(props.className, cx('root', { isFilled, focusedState })),
                 style: props.style
             },
             ptm('root')
diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js
index 16ef732bf2..e1b3b197b0 100644
--- a/components/lib/password/PasswordBase.js
+++ b/components/lib/password/PasswordBase.js
@@ -4,15 +4,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, isFilled, focusedState }) =>
-        classNames(
-            'p-password p-component p-inputwrapper',
-            {
-                'p-inputwrapper-filled': isFilled,
-                'p-inputwrapper-focus': focusedState,
-                'p-input-icon-right': props.toggleMask
-            },
-            props.className
-        ),
+        classNames('p-password p-component p-inputwrapper', {
+            'p-inputwrapper-filled': isFilled,
+            'p-inputwrapper-focus': focusedState,
+            'p-input-icon-right': props.toggleMask
+        }),
     input: ({ props }) => classNames('p-password-input', props.inputClassName),
     panel: ({ props, context }) =>
         classNames('p-password-panel p-component', props.panelClassName, {
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index e5efe1fc71..4b50af41dc 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -6,7 +6,7 @@ import { BanIcon } from '../icons/ban';
 import { StarIcon } from '../icons/star';
 import { StarFillIcon } from '../icons/starfill';
 import { Tooltip } from '../tooltip/Tooltip';
-import { IconUtils, ObjectUtils } from '../utils/Utils';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { RatingBase } from './RatingBase';
 
 export const Rating = React.memo(
@@ -198,7 +198,7 @@ export const Rating = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             RatingBase.getOtherProps(props),
diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js
index 26321d6d55..d2cbc666f7 100644
--- a/components/lib/rating/RatingBase.js
+++ b/components/lib/rating/RatingBase.js
@@ -7,14 +7,10 @@ const classes = {
     cancelIcon: 'p-rating-icon p-rating-cancel',
     cancelItem: 'p-rating-item p-rating-cancel-item',
     root: ({ props }) =>
-        classNames(
-            'p-rating',
-            {
-                'p-disabled': props.disabled,
-                'p-readonly': props.readOnly
-            },
-            props.className
-        )
+        classNames('p-rating', {
+            'p-disabled': props.disabled,
+            'p-readonly': props.readOnly
+        })
 };
 
 const styles = `
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 39fcd15108..62a154b6a4 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
 import { SelectButtonBase } from './SelectButtonBase';
 import { SelectButtonItem } from './SelectButtonItem';
 
@@ -140,7 +140,7 @@ export const SelectButton = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style,
                 role: 'group'
             },
diff --git a/components/lib/selectbutton/SelectButtonBase.js b/components/lib/selectbutton/SelectButtonBase.js
index 6576fefee6..e72c5ed614 100644
--- a/components/lib/selectbutton/SelectButtonBase.js
+++ b/components/lib/selectbutton/SelectButtonBase.js
@@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-selectbutton p-button-group p-component', props.className, { 'p-invalid': props.invalid }),
+    root: ({ props }) => classNames('p-selectbutton p-button-group p-component', { 'p-invalid': props.invalid }),
     button: ({ itemProps: props, focusedState }) =>
         classNames('p-button p-component', {
             'p-highlight': props.selected,
diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
index 6f5e90ad86..6db1fe25a3 100644
--- a/components/lib/slidemenu/SlideMenu.js
+++ b/components/lib/slidemenu/SlideMenu.js
@@ -6,7 +6,7 @@ import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, use
 import { ChevronLeftIcon } from '../icons/chevronleft';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { SlideMenuBase } from './SlideMenuBase';
 import { SlideMenuSub } from './SlideMenuSub';
 
@@ -175,7 +175,7 @@ export const SlideMenu = React.memo(
                 {
                     ref: menuRef,
                     id: props.id,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style,
                     onClick: (e) => onPanelClick(e)
                 },
diff --git a/components/lib/slidemenu/SlideMenuBase.js b/components/lib/slidemenu/SlideMenuBase.js
index c9c19a136e..3dcdd5ef97 100644
--- a/components/lib/slidemenu/SlideMenuBase.js
+++ b/components/lib/slidemenu/SlideMenuBase.js
@@ -9,13 +9,9 @@ const classes = {
             'p-slidemenu-separator': levelState > 0
         }),
     root: ({ props }) =>
-        classNames(
-            'p-slidemenu p-component',
-            {
-                'p-slidemenu-overlay': props.popup
-            },
-            props.className
-        ),
+        classNames('p-slidemenu p-component', {
+            'p-slidemenu-overlay': props.popup
+        }),
     wrapper: 'p-slidemenu-wrapper',
     content: 'p-slidemenu-content',
     separator: 'p-slidemenu-separator',
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index e291592e6a..c599f6e1b1 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useEventListener, useMergeProps } from '../hooks/Hooks';
-import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
 import { SliderBase } from './SliderBase';
 
 export const Slider = React.memo(
@@ -358,7 +358,7 @@ export const Slider = React.memo(
         const rootProps = mergeProps(
             {
                 style: props.style,
-                className: cx('root', { vertical, horizontal }),
+                className: classNames(props.className, cx('root', { vertical, horizontal })),
                 onClick: onBarClick
             },
             SliderBase.getOtherProps(props),
diff --git a/components/lib/slider/SliderBase.js b/components/lib/slider/SliderBase.js
index 8e99753678..b9623e44d7 100644
--- a/components/lib/slider/SliderBase.js
+++ b/components/lib/slider/SliderBase.js
@@ -10,7 +10,7 @@ const classes = {
         }),
     range: 'p-slider-range',
     root: ({ props, vertical, horizontal }) =>
-        classNames('p-slider p-component', props.className, {
+        classNames('p-slider p-component', {
             'p-disabled': props.disabled,
             'p-slider-horizontal': horizontal,
             'p-slider-vertical': vertical
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index dfd7c059a2..08cdc487ca 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { ToggleButtonBase } from './ToggleButtonBase';
 
 export const ToggleButton = React.memo(
@@ -101,7 +101,7 @@ export const ToggleButton = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root', { hasIcon, hasLabel }),
+                className: classNames(props.className, cx('root', { hasIcon, hasLabel })),
                 'data-p-highlight': props.checked,
                 'data-p-disabled': props.disabled
             },
diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js
index b2092977e8..1f8bc70bc9 100644
--- a/components/lib/togglebutton/ToggleButtonBase.js
+++ b/components/lib/togglebutton/ToggleButtonBase.js
@@ -3,15 +3,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props }) =>
-        classNames(
-            'p-togglebutton p-component',
-            {
-                'p-disabled': props.disabled,
-                'p-highlight': props.checked,
-                'p-invalid': props.invalid
-            },
-            props.className
-        ),
+        classNames('p-togglebutton p-component', {
+            'p-disabled': props.disabled,
+            'p-highlight': props.checked,
+            'p-invalid': props.invalid
+        }),
     input: 'p-togglebutton-input',
     box: ({ hasIcon, hasLabel }) =>
         classNames('p-button p-component', {
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index f78ad7ff61..43b0ec1963 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -9,7 +9,7 @@ import { OverlayService } from '../overlayservice/OverlayService';
 import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
 import { Tree } from '../tree/Tree';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { TreeSelectBase } from './TreeSelectBase';
 import { TreeSelectPanel } from './TreeSelectPanel';
 
@@ -840,7 +840,7 @@ export const TreeSelect = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root', { context, focusedState, overlayVisibleState, isValueEmpty }),
+                className: classNames(props.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 3115beec28..28f0a38290 100644
--- a/components/lib/treeselect/TreeSelectBase.js
+++ b/components/lib/treeselect/TreeSelectBase.js
@@ -4,20 +4,16 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, focusedState, context, overlayVisibleState, isValueEmpty }) =>
-        classNames(
-            'p-treeselect p-component p-inputwrapper',
-            {
-                'p-treeselect-chip': props.display === 'chip',
-                'p-treeselect-clearable': props.showClear && !props.disabled,
-                '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
-            },
-            props.className
-        ),
+        classNames('p-treeselect p-component p-inputwrapper', {
+            'p-treeselect-chip': props.display === 'chip',
+            'p-treeselect-clearable': props.showClear && !props.disabled,
+            '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
+        }),
     label: ({ props, isValueEmpty, getLabel }) =>
         classNames('p-treeselect-label', {
             'p-placeholder': getLabel() === props.placeholder,

From 601fb6bcfc454074d803f9e4d4a90ff5ece0fbe8 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 11:51:22 +0300
Subject: [PATCH 170/194] Fix #6222 - ToggleButton: Checkboxes showing before
 button

---
 public/themes/arya-blue/theme.css             |  105 +-
 public/themes/arya-green/theme.css            |  105 +-
 public/themes/arya-orange/theme.css           |  105 +-
 public/themes/bootstrap4-dark-blue/theme.css  |  105 +-
 public/themes/bootstrap4-light-blue/theme.css |  105 +-
 public/themes/fluent-light/theme.css          |   99 +-
 public/themes/lara-dark-amber/theme.css       |  113 +-
 public/themes/lara-dark-blue/theme.css        |  113 +-
 public/themes/lara-dark-cyan/theme.css        |  113 +-
 public/themes/lara-dark-green/theme.css       |  113 +-
 public/themes/lara-dark-indigo/theme.css      |  113 +-
 public/themes/lara-dark-pink/theme.css        |  113 +-
 public/themes/lara-dark-purple/theme.css      | 1351 ++++++++++++++---
 public/themes/lara-dark-teal/theme.css        |  113 +-
 public/themes/lara-light-amber/theme.css      |  109 +-
 public/themes/lara-light-blue/theme.css       |  109 +-
 public/themes/lara-light-cyan/theme.css       |  109 +-
 public/themes/lara-light-green/theme.css      |  109 +-
 public/themes/lara-light-indigo/theme.css     |  109 +-
 public/themes/lara-light-pink/theme.css       |  109 +-
 public/themes/lara-light-purple/theme.css     | 1351 ++++++++++++++---
 public/themes/lara-light-teal/theme.css       |  109 +-
 public/themes/luna-amber/theme.css            |  105 +-
 public/themes/luna-blue/theme.css             |  105 +-
 public/themes/luna-green/theme.css            |  105 +-
 public/themes/luna-pink/theme.css             |  105 +-
 public/themes/md-dark-indigo/theme.css        |  123 +-
 public/themes/md-light-indigo/theme.css       |  123 +-
 public/themes/mdc-dark-indigo/theme.css       |  123 +-
 public/themes/mdc-light-indigo/theme.css      |  123 +-
 public/themes/mira/theme.css                  |  105 +-
 public/themes/nano/theme.css                  |  105 +-
 public/themes/nova-accent/theme.css           |  105 +-
 public/themes/nova-alt/theme.css              |  105 +-
 public/themes/nova/theme.css                  |  105 +-
 public/themes/rhea/theme.css                  |  105 +-
 public/themes/saga-blue/theme.css             |  105 +-
 public/themes/saga-green/theme.css            |  105 +-
 public/themes/saga-orange/theme.css           |  105 +-
 public/themes/soho-dark/theme.css             |  105 +-
 public/themes/soho-light/theme.css            |  105 +-
 public/themes/tailwind-light/theme.css        |  105 +-
 public/themes/vela-blue/theme.css             |  105 +-
 public/themes/vela-green/theme.css            |  105 +-
 public/themes/vela-orange/theme.css           |  105 +-
 public/themes/viva-dark/theme.css             |  105 +-
 public/themes/viva-light/theme.css            |  105 +-
 47 files changed, 7076 insertions(+), 501 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 8ec6a5a31a..e8f1386a7e 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 8a8fac0c86..5976baa7da 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 41ee92a1db..9b9dca8061 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index b83be208db..fd9f29cd20 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4605,6 +4605,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #8dd0ff;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #2a323d;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3f4b5b;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #8dd0ff;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f4b5b;
     border: 0 none;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index b2702ced06..2b812214c0 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
@@ -4605,6 +4605,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007bff;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #212529;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007bff;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #efefef;
     border: 0 none;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 87fa8acdac..e1b5f800fe 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f2f1;
@@ -4523,6 +4523,103 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #edebe9;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #605e5c;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #323130;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #323130;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #a19f9d;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #323130;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f3f2f1;
     border: 0 none;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index aa481f2e6e..a18b380af0 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #fbbf24;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #fbbf24;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6901,4 +7004,12 @@
     background: #fbbf24;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #fbbf24;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index bfd0410821..d47c1cf5f9 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #60a5fa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #60a5fa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6901,4 +7004,12 @@
     background: #60a5fa;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #60a5fa;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 2b406c4e63..1e4e7c6f82 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #22d3ee;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #22d3ee;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6901,4 +7004,12 @@
     background: #22d3ee;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #22d3ee;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 4c114b4d96..39794e9976 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #34d399;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #34d399;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6901,4 +7004,12 @@
     background: #34d399;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #34d399;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 402d54e458..dd8c4d020e 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #818cf8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #818cf8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6901,4 +7004,12 @@
     background: #818cf8;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #818cf8;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index c0acae7a33..2e748dcdb4 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f472b6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f472b6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6901,4 +7004,12 @@
     background: #f472b6;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #f472b6;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 68054af94e..d028d9a730 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -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: #a78bfa;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
     border-color: #a78bfa;
   }
+  .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,42 +716,62 @@
     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(167, 139, 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(167, 139, 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(167, 139, 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-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
   }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #424b57;
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
   }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
   .p-checkbox {
     width: 22px;
     height: 22px;
   }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
   .p-checkbox .p-checkbox-box {
     border: 2px solid #424b57;
     background: #111827;
@@ -750,6 +780,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 6px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -760,64 +791,159 @@
     width: 14px;
     height: 14px;
   }
-  .p-checkbox .p-checkbox-box.p-highlight {
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
     border-color: #a78bfa;
     background: #a78bfa;
   }
-  .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #a78bfa;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     border-color: #ddd6fe;
     background: #ddd6fe;
     color: #030712;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    border-color: #a78bfa;
-  }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
     border-color: #a78bfa;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-    border-color: #ddd6fe;
-    background: #ddd6fe;
-    color: #030712;
-  }
   .p-checkbox.p-invalid > .p-checkbox-box {
     border-color: #fca5a5;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #a78bfa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ddd6fe;
+  }
   .p-input-filled .p-checkbox .p-checkbox-box {
     background-color: #424b57;
   }
-  .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #a78bfa;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
     background-color: #424b57;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #ddd6fe;
   }
-  .p-chips .p-chips-multiple-container {
-    padding: 0.375rem 0.75rem;
-    gap: 0.5rem;
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #a78bfa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ddd6fe;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #a78bfa;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
     border-color: #a78bfa;
   }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: rgba(167, 139, 250, 0.16);
+    background: #424b57;
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
     margin-left: 0.5rem;
   }
@@ -850,11 +976,90 @@
   .p-colorpicker-overlay-panel {
     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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
   .p-dropdown {
     background: #111827;
     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-dropdown:not(.p-disabled):hover {
     border-color: #a78bfa;
@@ -865,6 +1070,18 @@
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
     border-color: #a78bfa;
   }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
   .p-dropdown.p-dropdown-clearable .p-dropdown-label {
     padding-right: 1.75rem;
   }
@@ -875,7 +1092,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -917,13 +1134,6 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
-    padding-right: 3.5rem;
-    margin-right: -3.5rem;
-  }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
-    right: 2.5rem;
-  }
   .p-dropdown-panel .p-dropdown-items {
     padding: 0.75rem 0;
   }
@@ -936,14 +1146,28 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(167, 139, 250, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .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: rgba(255, 255, 255, 0.03);
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
     padding: 0.75rem 1.25rem;
@@ -956,18 +1180,6 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
-  .p-input-filled .p-dropdown {
-    background: #424b57;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-    background-color: transparent;
-  }
   .p-inputgroup-addon {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.6);
@@ -1034,14 +1246,50 @@
   .p-inputnumber.p-invalid.p-component > .p-inputtext {
     border-color: #fca5a5;
   }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
   .p-inputswitch {
     width: 3rem;
     height: 1.75rem;
   }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
   .p-inputswitch .p-inputswitch-slider {
     background: #6b7280;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 30px;
+    outline-color: transparent;
   }
   .p-inputswitch .p-inputswitch-slider:before {
     background: rgba(255, 255, 255, 0.6);
@@ -1052,27 +1300,25 @@
     border-radius: 50%;
     transition-duration: 0.2s;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    transform: translateX(1.25rem);
-  }
-  .p-inputswitch.p-focus .p-inputswitch-slider {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
-  }
-  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-    background: #424b57;
-  }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
     background: #a78bfa;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
     background: #030712;
+    transform: translateX(1.25rem);
   }
-  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: #c4b5fd;
   }
-  .p-inputswitch.p-invalid .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
     border-color: #fca5a5;
   }
   .p-inputtext {
@@ -1086,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: #a78bfa;
@@ -1099,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;
@@ -1112,28 +1368,16 @@
     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 {
+  .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
-  .p-input-icon-left.p-float-label > label {
+  .p-icon-field-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 {
+  .p-icon-field-right > .p-inputtext {
     padding-right: 2.5rem;
   }
   ::-webkit-input-placeholder {
@@ -1165,11 +1409,69 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
   .p-listbox {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.87);
     border: 1px solid #424b57;
     border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem 1.25rem;
@@ -1189,6 +1491,7 @@
   }
   .p-listbox .p-listbox-list {
     padding: 0.75rem 0;
+    outline: 0 none;
   }
   .p-listbox .p-listbox-list .p-listbox-item {
     margin: 0;
@@ -1198,15 +1501,16 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
   .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(167, 139, 250, 0.16);
   }
-  .p-listbox .p-listbox-list .p-listbox-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2);
-  }
   .p-listbox .p-listbox-list .p-listbox-item-group {
     margin: 0;
     padding: 0.75rem 1.25rem;
@@ -1219,10 +1523,27 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .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: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
   .p-listbox.p-invalid {
     border-color: #fca5a5;
   }
@@ -1253,11 +1574,100 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(167, 139, 250, 0.16);
   }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
   .p-multiselect {
     background: #111827;
     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-multiselect:not(.p-disabled):hover {
     border-color: #a78bfa;
@@ -1268,8 +1678,14 @@
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
     border-color: #a78bfa;
   }
-  .p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.75rem 0.75rem;
@@ -1295,22 +1711,12 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
-  .p-multiselect .p-multiselect-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 3rem;
-  }
   .p-multiselect.p-invalid.p-component {
     border-color: #fca5a5;
   }
   .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.375rem 0.75rem;
   }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
-    padding: 0.75rem 0.75rem;
-  }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
-  }
   .p-multiselect-panel {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.87);
@@ -1327,9 +1733,6 @@
     border-top-right-radius: 6px;
     border-top-left-radius: 6px;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-    margin: 0 0.5rem;
-  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
     padding-right: 1.75rem;
   }
@@ -1337,7 +1740,11 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5rem;
+  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    margin-left: 0.5rem;
     width: 2rem;
     height: 2rem;
     color: rgba(255, 255, 255, 0.6);
@@ -1368,19 +1775,23 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(167, 139, 250, 0.16);
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .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: rgba(255, 255, 255, 0.03);
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2);
-  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
   }
@@ -1396,15 +1807,6 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
-  .p-input-filled .p-multiselect {
-    background: #424b57;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: #424b57;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
-  }
   .p-password.p-invalid.p-component > .p-inputtext {
     border-color: #fca5a5;
   }
@@ -1429,10 +1831,50 @@
   .p-password-panel .p-password-meter .p-password-strength.strong {
     background: #93deac;
   }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
   .p-radiobutton {
     width: 22px;
     height: 22px;
   }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
   .p-radiobutton .p-radiobutton-box {
     border: 2px solid #424b57;
     background: #111827;
@@ -1441,15 +1883,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-    border-color: #a78bfa;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
-    border-color: #a78bfa;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
     width: 12px;
@@ -1457,31 +1891,51 @@
     transition-duration: 0.2s;
     background-color: #030712;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-radiobutton.p-highlight .p-radiobutton-box {
     border-color: #a78bfa;
     background: #a78bfa;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #a78bfa;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     border-color: #ddd6fe;
     background: #ddd6fe;
-    color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
   }
   .p-radiobutton.p-invalid > .p-radiobutton-box {
     border-color: #fca5a5;
   }
-  .p-radiobutton:focus {
-    outline: 0 none;
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box {
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #a78bfa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
     background-color: #424b57;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ddd6fe;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
     background-color: #424b57;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #a78bfa;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #ddd6fe;
   }
   .p-rating {
@@ -1627,6 +2081,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;
@@ -1723,47 +2186,81 @@
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
     background-color: #424b57;
   }
-  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: #424b57;
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
   }
-  .p-togglebutton.p-button {
+  .p-togglebutton .p-button {
     background: #1f2937;
     border: 1px solid #424b57;
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
-  .p-togglebutton.p-button .p-button-icon-left,
-  .p-togglebutton.p-button .p-button-icon-right {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
-    background: rgba(255, 255, 255, 0.03);
-    border-color: #424b57;
-    color: rgba(255, 255, 255, 0.87);
-  }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-togglebutton.p-button.p-highlight {
+  .p-togglebutton.p-highlight .p-button {
     background: #a78bfa;
     border-color: #a78bfa;
     color: #030712;
   }
-  .p-togglebutton.p-button.p-highlight .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight .p-button-icon-right {
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
     color: #030712;
   }
-  .p-togglebutton.p-button.p-highlight:hover {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
     background: #c4b5fd;
     border-color: #c4b5fd;
     color: #030712;
   }
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
+  .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: #030712;
   }
-  .p-togglebutton.p-button.p-invalid > .p-button {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-togglebutton.p-invalid > .p-button {
     border-color: #fca5a5;
   }
   .p-button {
@@ -1919,300 +2416,348 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #020617;
     background: #94a3b8;
     border: 1px solid #94a3b8;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #cbd5e1;
     color: #020617;
     border-color: #cbd5e1;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 1px #b4bfcd;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #e2e8f0;
     color: #020617;
     border-color: #e2e8f0;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     color: #94a3b8;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #94a3b8;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(148, 163, 184, 0.04);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(148, 163, 184, 0.16);
     border-color: transparent;
     color: #94a3b8;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #082f49;
     background: #38bdf8;
     border: 1px solid #38bdf8;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #7dd3fc;
     color: #082f49;
     border-color: #7dd3fc;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 1px #74d1fa;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #bae6fd;
     color: #082f49;
     border-color: #bae6fd;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     color: #38bdf8;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #38bdf8;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(56, 189, 248, 0.04);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(56, 189, 248, 0.16);
     border-color: transparent;
     color: #38bdf8;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #052e16;
     background: #4ade80;
     border: 1px solid #4ade80;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #86efac;
     color: #052e16;
     border-color: #86efac;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 1px #80e8a6;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #bbf7d0;
     color: #052e16;
     border-color: #bbf7d0;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     color: #4ade80;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #4ade80;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(74, 222, 128, 0.04);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(74, 222, 128, 0.16);
     border-color: transparent;
     color: #4ade80;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #431407;
     background: #fb923c;
     border: 1px solid #fb923c;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #fdba74;
     color: #431407;
     border-color: #fdba74;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fcb377;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #fed7aa;
     color: #431407;
     border-color: #fed7aa;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     color: #fb923c;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #fb923c;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(251, 146, 60, 0.04);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(251, 146, 60, 0.16);
     border-color: transparent;
     color: #fb923c;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #3b0764;
     background: #c084fc;
     border: 1px solid #c084fc;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #d8b4fe;
     color: #3b0764;
     border-color: #d8b4fe;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 1px #d3a9fd;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #e9d5ff;
     color: #3b0764;
     border-color: #e9d5ff;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     color: #c084fc;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #c084fc;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(192, 132, 252, 0.04);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(192, 132, 252, 0.16);
     border-color: transparent;
     color: #c084fc;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #450a0a;
     background: #f87171;
     border: 1px solid #f87171;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #fca5a5;
     color: #450a0a;
     border-color: #fca5a5;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 1px #fa9c9c;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #fecaca;
     color: #450a0a;
     border-color: #fecaca;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     color: #f87171;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #f87171;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(248, 113, 113, 0.04);
     border-color: transparent;
     color: #f87171;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(248, 113, 113, 0.16);
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #a78bfa;
     background: transparent;
@@ -3320,6 +3865,62 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(167, 139, 250, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #424b57;
     background: #1f2937;
@@ -3368,7 +3969,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3418,6 +4019,133 @@
   .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
     background: rgba(110, 64, 247, 0.16);
   }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 1px 0 1px 0;
     border-radius: 0;
@@ -3860,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #a78bfa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #a78bfa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -5941,6 +6772,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #a78bfa;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #a78bfa;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 1.5rem;
@@ -6115,4 +7004,12 @@
     background: #a78bfa;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #a78bfa;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index febf114cd3..f7b1f8a305 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #2dd4bf;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #2dd4bf;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
@@ -6901,4 +7004,12 @@
     background: #2dd4bf;
     color: #030712;
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #2dd4bf;
+    color: #030712;
+  }
 }
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 00289c9b34..84539d6f9d 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f59e0b;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f59e0b;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6895,4 +6998,8 @@
     background: #f59e0b;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f59e0b;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 9945b026ee..83ab2c8574 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3b82f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3b82f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6895,4 +6998,8 @@
     background: #3b82f6;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #3b82f6;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 54231338fe..5cbada14d3 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #06b6d4;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #06b6d4;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6895,4 +6998,8 @@
     background: #06b6d4;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #06b6d4;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 11fd74acbd..4ef7804c00 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #10b981;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #10b981;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6895,4 +6998,8 @@
     background: #10b981;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #10b981;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 10a65c704e..6103f730b0 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #6366f1;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #6366f1;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6895,4 +6998,8 @@
     background: #6366f1;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #6366f1;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index beca326814..6df317fea9 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ec4899;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ec4899;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6895,4 +6998,8 @@
     background: #ec4899;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ec4899;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 4358cad38d..668628a552 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -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: #8b5cf6;
@@ -666,6 +667,15 @@
     box-shadow: 0 0 0 0.2rem #ddd6fe;
     border-color: #8b5cf6;
   }
+  .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,42 +716,81 @@
     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 #ddd6fe;
+  .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: #6d28d9;
     background: #f5f3ff;
   }
-  .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(139, 92, 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-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
   }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
   }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
   .p-checkbox {
     width: 22px;
     height: 22px;
   }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
   .p-checkbox .p-checkbox-box {
     border: 2px solid #d1d5db;
     background: #ffffff;
@@ -750,6 +799,7 @@
     color: #4b5563;
     border-radius: 6px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -760,64 +810,140 @@
     width: 14px;
     height: 14px;
   }
-  .p-checkbox .p-checkbox-box.p-highlight {
+  .p-checkbox.p-highlight .p-checkbox-box {
     border-color: #8b5cf6;
     background: #8b5cf6;
   }
-  .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #8b5cf6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     border-color: #6d28d9;
     background: #6d28d9;
     color: #ffffff;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    border-color: #8b5cf6;
-  }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #ddd6fe;
     border-color: #8b5cf6;
   }
-  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-    border-color: #6d28d9;
-    background: #6d28d9;
-    color: #ffffff;
-  }
   .p-checkbox.p-invalid > .p-checkbox-box {
     border-color: #e24c4c;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #8b5cf6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #6d28d9;
+  }
   .p-input-filled .p-checkbox .p-checkbox-box {
     background-color: #f3f4f6;
   }
-  .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #8b5cf6;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
     background-color: #f3f4f6;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #6d28d9;
   }
-  .p-chips .p-chips-multiple-container {
-    padding: 0.375rem 0.75rem;
-    gap: 0.5rem;
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #8b5cf6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #6d28d9;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #8b5cf6;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #ddd6fe;
     border-color: #8b5cf6;
   }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: #f5f3ff;
+    background: #e5e7eb;
     color: #4b5563;
     border-radius: 16px;
   }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
     margin-left: 0.5rem;
   }
@@ -850,11 +976,90 @@
   .p-colorpicker-overlay-panel {
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
   .p-dropdown {
     background: #ffffff;
     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-dropdown:not(.p-disabled):hover {
     border-color: #8b5cf6;
@@ -865,6 +1070,18 @@
     box-shadow: 0 0 0 0.2rem #ddd6fe;
     border-color: #8b5cf6;
   }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
   .p-dropdown.p-dropdown-clearable .p-dropdown-label {
     padding-right: 1.75rem;
   }
@@ -875,7 +1092,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6b7280;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -917,13 +1134,6 @@
     right: 0.75rem;
     color: #6b7280;
   }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
-    padding-right: 3.5rem;
-    margin-right: -3.5rem;
-  }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
-    right: 2.5rem;
-  }
   .p-dropdown-panel .p-dropdown-items {
     padding: 0.75rem 0;
   }
@@ -936,14 +1146,28 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
     color: #6d28d9;
     background: #f5f3ff;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
     padding: 0.75rem 1.25rem;
@@ -956,18 +1180,6 @@
     color: #4b5563;
     background: transparent;
   }
-  .p-input-filled .p-dropdown {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-    background-color: transparent;
-  }
   .p-inputgroup-addon {
     background: #f3f4f6;
     color: #6b7280;
@@ -1034,14 +1246,50 @@
   .p-inputnumber.p-invalid.p-component > .p-inputtext {
     border-color: #e24c4c;
   }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
   .p-inputswitch {
     width: 3rem;
     height: 1.75rem;
   }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
   .p-inputswitch .p-inputswitch-slider {
     background: #d1d5db;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 30px;
+    outline-color: transparent;
   }
   .p-inputswitch .p-inputswitch-slider:before {
     background: #ffffff;
@@ -1052,27 +1300,25 @@
     border-radius: 50%;
     transition-duration: 0.2s;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-    transform: translateX(1.25rem);
-  }
-  .p-inputswitch.p-focus .p-inputswitch-slider {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ddd6fe;
-  }
-  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-    background: #b7bcc5;
-  }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
     background: #8b5cf6;
   }
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
     background: #ffffff;
+    transform: translateX(1.25rem);
   }
-  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: #7c3aed;
   }
-  .p-inputswitch.p-invalid .p-inputswitch-slider {
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
     border-color: #e24c4c;
   }
   .p-inputtext {
@@ -1086,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: #8b5cf6;
@@ -1099,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;
@@ -1112,28 +1368,16 @@
     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 {
+  .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
-  .p-input-icon-left.p-float-label > label {
+  .p-icon-field-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 {
+  .p-icon-field-right > .p-inputtext {
     padding-right: 2.5rem;
   }
   ::-webkit-input-placeholder {
@@ -1165,11 +1409,69 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
   .p-listbox {
     background: #ffffff;
     color: #4b5563;
     border: 1px solid #d1d5db;
     border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem 1.25rem;
@@ -1189,6 +1491,7 @@
   }
   .p-listbox .p-listbox-list {
     padding: 0.75rem 0;
+    outline: 0 none;
   }
   .p-listbox .p-listbox-list .p-listbox-item {
     margin: 0;
@@ -1198,15 +1501,16 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
   .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
     color: #6d28d9;
     background: #f5f3ff;
   }
-  .p-listbox .p-listbox-list .p-listbox-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ddd6fe;
-  }
   .p-listbox .p-listbox-list .p-listbox-item-group {
     margin: 0;
     padding: 0.75rem 1.25rem;
@@ -1219,10 +1523,27 @@
     color: #4b5563;
     background: transparent;
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4b5563;
     background: #f3f4f6;
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
   .p-listbox.p-invalid {
     border-color: #e24c4c;
   }
@@ -1253,11 +1574,100 @@
     color: #6d28d9;
     background: #f5f3ff;
   }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
   .p-multiselect {
     background: #ffffff;
     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-multiselect:not(.p-disabled):hover {
     border-color: #8b5cf6;
@@ -1268,8 +1678,14 @@
     box-shadow: 0 0 0 0.2rem #ddd6fe;
     border-color: #8b5cf6;
   }
-  .p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.75rem 0.75rem;
@@ -1295,22 +1711,12 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
-  .p-multiselect .p-multiselect-clear-icon {
-    color: #6b7280;
-    right: 3rem;
-  }
   .p-multiselect.p-invalid.p-component {
     border-color: #e24c4c;
   }
   .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.375rem 0.75rem;
   }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
-    padding: 0.75rem 0.75rem;
-  }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
-  }
   .p-multiselect-panel {
     background: #ffffff;
     color: #4b5563;
@@ -1327,9 +1733,6 @@
     border-top-right-radius: 6px;
     border-top-left-radius: 6px;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-    margin: 0 0.5rem;
-  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
     padding-right: 1.75rem;
   }
@@ -1337,7 +1740,11 @@
     right: 0.75rem;
     color: #6b7280;
   }
+  .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5rem;
+  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    margin-left: 0.5rem;
     width: 2rem;
     height: 2rem;
     color: #6b7280;
@@ -1368,19 +1775,23 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
     color: #6d28d9;
     background: #f5f3ff;
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ddd6fe;
-  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
   }
@@ -1396,15 +1807,6 @@
     color: #4b5563;
     background: transparent;
   }
-  .p-input-filled .p-multiselect {
-    background: #f3f4f6;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
-  }
   .p-password.p-invalid.p-component > .p-inputtext {
     border-color: #e24c4c;
   }
@@ -1429,10 +1831,50 @@
   .p-password-panel .p-password-meter .p-password-strength.strong {
     background: #29c76f;
   }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
   .p-radiobutton {
     width: 22px;
     height: 22px;
   }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
   .p-radiobutton .p-radiobutton-box {
     border: 2px solid #d1d5db;
     background: #ffffff;
@@ -1441,15 +1883,7 @@
     color: #4b5563;
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-    border-color: #8b5cf6;
-  }
-  .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ddd6fe;
-    border-color: #8b5cf6;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
     width: 12px;
@@ -1457,31 +1891,51 @@
     transition-duration: 0.2s;
     background-color: #ffffff;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-radiobutton.p-highlight .p-radiobutton-box {
     border-color: #8b5cf6;
     background: #8b5cf6;
   }
-  .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #8b5cf6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     border-color: #6d28d9;
     background: #6d28d9;
-    color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
   }
   .p-radiobutton.p-invalid > .p-radiobutton-box {
     border-color: #e24c4c;
   }
-  .p-radiobutton:focus {
-    outline: 0 none;
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box {
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #8b5cf6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
     background-color: #f3f4f6;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #6d28d9;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
     background-color: #f3f4f6;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #8b5cf6;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #6d28d9;
   }
   .p-rating {
@@ -1627,6 +2081,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;
@@ -1720,50 +2183,84 @@
   .p-input-filled .p-treeselect {
     background: #f3f4f6;
   }
-  .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: #f3f4f6;
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
   }
-  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: #ffffff;
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
   }
-  .p-togglebutton.p-button {
+  .p-togglebutton .p-button {
     background: #ffffff;
     border: 1px solid #d1d5db;
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
-  .p-togglebutton.p-button .p-button-icon-left,
-  .p-togglebutton.p-button .p-button-icon-right {
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
     color: #6b7280;
   }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
-    background: #f3f4f6;
-    border-color: #d1d5db;
-    color: #4b5563;
-  }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
-    color: #374151;
-  }
-  .p-togglebutton.p-button.p-highlight {
+  .p-togglebutton.p-highlight .p-button {
     background: #8b5cf6;
     border-color: #8b5cf6;
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight .p-button-icon-right {
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight:hover {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
     background: #7c3aed;
     border-color: #7c3aed;
     color: #ffffff;
   }
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
+  .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: #ffffff;
   }
-  .p-togglebutton.p-button.p-invalid > .p-button {
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
     border-color: #e24c4c;
   }
   .p-button {
@@ -1919,300 +2416,348 @@
   .p-fluid .p-button-icon-only {
     width: 3rem;
   }
-  .p-fluid .p-buttonset {
+  .p-fluid .p-button-group {
     display: flex;
   }
-  .p-fluid .p-buttonset .p-button {
+  .p-fluid .p-button-group .p-button {
     flex: 1;
   }
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: #ffffff;
     background: #64748b;
     border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
     background-color: transparent;
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
     background-color: transparent;
     color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
     color: #64748b;
   }
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: #ffffff;
     background: #22c55e;
     border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
     background: #16a34a;
     color: #ffffff;
     border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
     background: #15803d;
     color: #ffffff;
     border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
     background-color: transparent;
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
     background-color: transparent;
     color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
     color: #22c55e;
   }
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: #ffffff;
     background: #a855f7;
     border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
     background: #9333ea;
     color: #ffffff;
     border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
     background: #7e22ce;
     color: #ffffff;
     border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
     background-color: transparent;
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
     background-color: transparent;
     color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
     color: #a855f7;
   }
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: #ffffff;
     background: #ef4444;
     border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
     background: #dc2626;
     color: #ffffff;
     border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
     box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
     background: #b91c1c;
     color: #ffffff;
     border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
     background-color: transparent;
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
     background-color: transparent;
     color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
     color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #6d28d9;
     background: transparent;
@@ -3320,6 +3865,62 @@
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(139, 92, 246, 0.24);
   }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .p-tree {
     border: 1px solid #e5e7eb;
     background: #ffffff;
@@ -3368,7 +3969,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
@@ -3418,6 +4019,133 @@
   .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
     background: #a28fff;
   }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
   .p-treetable .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
@@ -3860,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #8b5cf6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #8b5cf6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -5941,6 +6772,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #ddd6fe;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #8b5cf6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #8b5cf6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 1.5rem;
@@ -6109,4 +6998,8 @@
     background: #8b5cf6;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #8b5cf6;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 64e0d85e82..b0ba6ba210 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -616,10 +616,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
@@ -4588,6 +4588,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #14b8a6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #14b8a6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
@@ -6895,4 +6998,8 @@
     background: #14b8a6;
     color: #ffffff;
   }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #14b8a6;
+    color: #ffffff;
+  }
 }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 84b712cab8..baafb141ef 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
@@ -4532,6 +4532,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffe082;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffe082;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 4ff58f2b59..104d274cd2 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
@@ -4532,6 +4532,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81d4fa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81d4fa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index eee205edd0..7c0f306968 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
@@ -4532,6 +4532,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #c5e1a5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #c5e1a5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 6763ce1df5..cb751f55e8 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
@@ -4532,6 +4532,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f48fb1;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f48fb1;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 037935aac9..11da14af14 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4616,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0deg, 0%, 100%, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -8086,6 +8189,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index eb840aa6b8..a63a95d3d5 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -4616,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -8086,6 +8189,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #3F51B5;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index f216e2dc1b..a1beb60c86 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4616,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0deg, 0%, 100%, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -8086,6 +8189,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 7b6abc8dcc..42c00049c3 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -4616,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -8086,6 +8189,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #3F51B5;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index f507a13147..9ade6b171c 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -621,10 +621,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #d8dee9;
@@ -4570,6 +4570,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #c2c7d1;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #81a1c1;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4c566a;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #5e81ac;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #4c566a;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e9f0;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #5e81ac;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eceff4;
     border: 0 none;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index b95c791626..0a102933ab 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #dde1e6;
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #697077;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #343a3f;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #1174c0;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.5rem;
+    color: #343a3f;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #343a3f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #1174c0;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f2f4f8;
     border: 0 none;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index b58ae69763..76348dd30c 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #eaeaea;
@@ -4523,6 +4523,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 006aefc160..aefcb692e9 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #eaeaea;
@@ -4532,6 +4532,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index d391b5469d..18a1ccb348 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #eaeaea;
@@ -4532,6 +4532,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 2c988a02ee..1f52f3d164 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f4f4f4;
@@ -4523,6 +4523,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dadada;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #a6a6a6;
+    border: 1px solid #c8c8c8;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #a6a6a6;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #666666;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #7b95a3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #666666;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #666666;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #7b95a3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 671e639769..e074ed953e 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #2196f3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #2196f3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 0464203f9d..e448b16e51 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #4caf50;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #4caf50;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 85bdccfbcb..a55d5b2e0a 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffc107;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffc107;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index d6b814f3e7..3043f87dc3 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -618,10 +618,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4590,6 +4590,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #3e4053;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #b19df7;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #282936;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3e4053;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #b19df7;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3e4053;
     border: 0 none;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 1ce16af341..7895cbeeda 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -618,10 +618,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.2);
@@ -4590,6 +4590,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dfe7ef;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #043d75;
+    border: 1px solid #f6f9fc;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #708da9;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #043d75;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #7254f3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #043d75;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dfe7ef;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #043d75;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #7254f3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eff3f8;
     border: 0 none;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index c141d95f23..c43100d430 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -627,10 +627,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f4f4f5;
@@ -4576,6 +4576,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 0.375rem;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #71717a;
+    font-weight: 600;
+    transition: none;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #3f3f46;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #4f46e5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #3f3f46;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #3f3f46;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #4f46e5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #fafafa;
     border: 0 none;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 83d9f4519b..07c4243d02 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index cc5ad6112b..66c67999a7 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 1a84226a34..e67b6dd8a4 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4548,6 +4548,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 39c01c9093..49f6a443aa 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -625,10 +625,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(158, 173, 230, 0.08);
@@ -4622,6 +4622,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #263238;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9eade6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #161d21;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #263238;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.3s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9eade6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #263238;
     border: 0 none;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 7922d44b3d..5befd15f69 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -625,10 +625,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #edf0fa;
@@ -4622,6 +4622,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #ebebeb;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #898989;
+    font-weight: 600;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #6c6c6c;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #5472d4;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #6c6c6c;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #ebebeb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.3s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #6c6c6c;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #5472d4;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f5f5f5;
     border: 0 none;

From 394162523d7a13d3bddf49cdc6f78b88ea075117 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 12:53:43 +0300
Subject: [PATCH 171/194] Update changelog

---
 CHANGELOG.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8047b1efa..7bec4490f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,41 @@
 # Changelog
 
+## [10.6.3](https://github.com/primefaces/primereact/tree/10.6.3) (2024-04-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.2...10.6.3)
+
+**New Features:**
+
+- New component InputOtp [\#6327](https://github.com/primefaces/primereact/issues/6327)
+
+**Enhancements:**
+
+- Unable to select item in Autcomplete with keyboard [\#6308](https://github.com/primefaces/primereact/issues/6308)
+- Core: p-hidden-accessible modernization [\#6163](https://github.com/primefaces/primereact/issues/6163)
+- Multiselect: must hit TAB key twice to move focus to next dropdown element [\#6288](https://github.com/primefaces/primereact/issues/6288)
+
+**Fixed bugs:**
+
+- Dropdown filter : Filter Field Resets to Empty String on Empty Filter Result when uing onFilterEvent to fetch options dynamically [\#6265](https://github.com/primefaces/primereact/issues/6265)
+- Multiselect scroll position reset bug [\#6305](https://github.com/primefaces/primereact/issues/6305)
+- InputNumber: does not work with czech and slovak keyboard layout [\#6237](https://github.com/primefaces/primereact/issues/6237)
+- InputNumber: Cannot insert value on Android [\#6275](https://github.com/primefaces/primereact/issues/6275)
+- InputNumber: cannot shift + num key  [\#6257](https://github.com/primefaces/primereact/issues/6257)
+- ButtonGroup: missing children prop [\#6333](https://github.com/primefaces/primereact/issues/6333)
+- InputText: It doesn't take classNames when unstyled is true [\#6274](https://github.com/primefaces/primereact/issues/6274)
+- Dropdown: Focus change when editable and filter enabled [\#6297](https://github.com/primefaces/primereact/issues/6297)
+- DataTable: Drag Selection Highlight Doesn't Appear in 10.6.2 [\#6272](https://github.com/primefaces/primereact/issues/6272)
+- Core: Merging PT props only respects lower-case props [\#6289](https://github.com/primefaces/primereact/issues/6289)
+- Calendar: Incorrect year with numberOfMonths and yearNavigator [\#6285](https://github.com/primefaces/primereact/issues/6285)
+- Core: Unstyled property does not inherit to children [\#6142](https://github.com/primefaces/primereact/issues/6142)
+- Vite: Build issues [\#6276](https://github.com/primefaces/primereact/issues/6276)
+- ButtonGroup: forwardRef render functions accept exactly two parameters [\#6263](https://github.com/primefaces/primereact/issues/6263)
+- MeterGroup: Component is not exported from the library [\#6268](https://github.com/primefaces/primereact/issues/6268)
+- Tree: row selection checkbox not getting checked [\#6216](https://github.com/primefaces/primereact/issues/6216)
+- Multiple Components: classnames not being set in unstyled mode [\#6329](https://github.com/primefaces/primereact/issues/6329)
+- ToggleButton: Checkboxes showing before button [\#6222](https://github.com/primefaces/primereact/issues/6222)
+
+
 ## [10.6.2](https://github.com/primefaces/primereact/tree/10.6.2) (2024-03-29)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/10.6.1...10.6.2)

From d795999d159e9065c8855816991b42e244fcda9a Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 12:55:59 +0300
Subject: [PATCH 172/194] Set new version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d0bdfc70b7..3e4cf272a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primereact",
-    "version": "10.6.2",
+    "version": "10.6.3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primereact",
-            "version": "10.6.2",
+            "version": "10.6.3",
             "dependencies": {
                 "@docsearch/react": "3.5.2",
                 "chart.js": "4.4.1",
diff --git a/package.json b/package.json
index cc4bef1188..ee3c69da3f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "primereact",
     "private": false,
-    "version": "10.6.2",
+    "version": "10.6.3",
     "scripts": {
         "dev": "next dev",
         "start": "next start",

From d79df619efe53e550146ba87b916d910e2e3e80f Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 12:59:07 +0300
Subject: [PATCH 173/194] Update inputotp doc import

---
 components/doc/inputotp/basicdoc.js       | 4 ++--
 components/doc/inputotp/integeronlydoc.js | 4 ++--
 components/doc/inputotp/maskdoc.js        | 4 ++--
 components/doc/inputotp/sampledoc.js      | 4 ++--
 components/doc/inputotp/templatedoc.js    | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js
index 733e985c46..68e8ad5786 100644
--- a/components/doc/inputotp/basicdoc.js
+++ b/components/doc/inputotp/basicdoc.js
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputOtp } from '@/components/lib/inputotp/inputotp';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
 
 export function BasicDoc(props) {
     const [token, setTokens] = useState();
diff --git a/components/doc/inputotp/integeronlydoc.js b/components/doc/inputotp/integeronlydoc.js
index db451819e5..bcc7fa9a65 100644
--- a/components/doc/inputotp/integeronlydoc.js
+++ b/components/doc/inputotp/integeronlydoc.js
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputOtp } from '@/components/lib/inputotp/inputotp';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
 
 export function IntegerOnlyDoc(props) {
     const [token, setTokens] = useState();
diff --git a/components/doc/inputotp/maskdoc.js b/components/doc/inputotp/maskdoc.js
index 173cb82de6..30997fe8c6 100644
--- a/components/doc/inputotp/maskdoc.js
+++ b/components/doc/inputotp/maskdoc.js
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputOtp } from '@/components/lib/inputotp/inputotp';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
 
 export function MaskDoc(props) {
     const [token, setTokens] = useState();
diff --git a/components/doc/inputotp/sampledoc.js b/components/doc/inputotp/sampledoc.js
index 2e8bc8346b..9eb203754f 100644
--- a/components/doc/inputotp/sampledoc.js
+++ b/components/doc/inputotp/sampledoc.js
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputOtp } from '@/components/lib/inputotp/inputotp';
 import { Button } from '@/components/lib/button/Button';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
 
 export function SampleDoc(props) {
     const [token, setTokens] = useState();
diff --git a/components/doc/inputotp/templatedoc.js b/components/doc/inputotp/templatedoc.js
index fea84daf50..75f1cbb70d 100644
--- a/components/doc/inputotp/templatedoc.js
+++ b/components/doc/inputotp/templatedoc.js
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { InputOtp } from '@/components/lib/inputotp/inputotp';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
 
 export function TemplateDoc(props) {
     const [token, setTokens] = useState();

From 575bd7871dcb59875b00e1222351cee53a827f34 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 9 Apr 2024 14:26:57 +0300
Subject: [PATCH 174/194] Lint fixes

---
 components/lib/inputnumber/InputNumber.js | 1 +
 components/lib/multiselect/MultiSelect.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 98514e155c..33a7abb9b7 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -467,6 +467,7 @@ export const InputNumber = React.memo(
                         newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
                         updateValue(event, newValueStr, null, 'delete-range');
                     }
+
                     break;
 
                 // del
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 5a544535ab..ac1a0b3199 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -471,6 +471,7 @@ export const MultiSelect = React.memo(
             }
 
             let focusedItem;
+
             if (event) {
                 focusedItem = event.currentTarget;
             } else {

From b48c0dc651b812cf3dc1350787a096411036448d Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 07:44:16 -0400
Subject: [PATCH 175/194] Fix unit tests (#6348)

---
 components/lib/blockui/__snapshots__/BlockUI.spec.js.snap     | 2 +-
 .../lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
index 68a1a53851..fe2ab850e3 100644
--- a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
+++ b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
@@ -183,7 +183,7 @@ exports[`BlockUI container style and className 1`] = `
   <div>
     <div
       aria-busy="true"
-      class="p-blockui-container container-jest"
+      class="container-jest p-blockui-container"
       data-pc-name="blockui"
       data-pc-section="root"
       style="cursor: pointer;"
diff --git a/components/lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap b/components/lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap
index 00cc211225..685738b8b4 100644
--- a/components/lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap
+++ b/components/lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`ScrollPanel ScrollPanel full settings 1`] = `
 <div>
   <div
-    class="p-scrollpanel p-component jest"
+    class="jest p-scrollpanel p-component"
     data-pc-name="scrollpanel"
     data-pc-section="root"
     id="scrollpanel"
@@ -49,7 +49,7 @@ exports[`ScrollPanel ScrollPanel full settings 1`] = `
 exports[`ScrollPanel refresh method 1`] = `
 <div>
   <div
-    class="p-scrollpanel p-component jest"
+    class="jest p-scrollpanel p-component"
     data-pc-name="scrollpanel"
     data-pc-section="root"
     id="scrollpanel"

From 9f5124409e75acecfbd6a6d4a9221ddc728a4171 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 07:55:48 -0400
Subject: [PATCH 176/194] Update Flags to match PrimeNG

---
 public/styles/flags.css | 278 +---------------------------------------
 1 file changed, 1 insertion(+), 277 deletions(-)

diff --git a/public/styles/flags.css b/public/styles/flags.css
index fc2dd559e7..43d4c81d09 100755
--- a/public/styles/flags.css
+++ b/public/styles/flags.css
@@ -1,277 +1 @@
-/*!*****************************************************
-
-Freak Flags, Copyright ©2024 Michael P. Cohen. Freak flags is licenced under the MIT licence.  
-
-For complete information visit: www.freakflagsprite.com 
-
-******************************************************/
-.flag {
-    background-image:url(https://primefaces.org/cdn/primereact/images/flag/flags_responsive.png);
-    background-repeat:no-repeat;
-    background-size: 100% 49494%;
-    background-clip: content-box;
-    border-radius: 10%;
-    display: inline-block;
-    overflow: hidden;
-    position: relative;
-    vertical-align: middle;
-    box-sizing: content-box;
-    box-shadow: 0 0 0 1px rgb(220,220,220);
-}
-
-.flag-ch,
-.flag-np {box-shadow: none!important}
-.flag-dz {background-position:center 0.2287%}
-.flag-ao {background-position:center 0.4524%}
-.flag-bj {background-position:center 0.6721%}
-.flag-bw {background-position:center 0.8958%}
-.flag-bf {background-position:center 1.1162%}
-.flag-bi {background-position:center 1.3379%}
-.flag-cm {background-position:center 1.5589%}
-.flag-cv {background-position:center 1.7805%}
-.flag-cf {background-position:center 2.0047%}
-.flag-td {background-position:center 2.2247%}
-.flag-cd {background-position:left 2.4467%}
-.flag-dj {background-position:left 2.6674%}
-.flag-eg {background-position:center 2.8931%}
-.flag-gq {background-position:center 3.1125%}
-.flag-er {background-position:left 3.3325%}
-.flag-et {background-position:center 3.5542%}
-.flag-ga {background-position:center 3.7759%}
-.flag-gm {background-position:center 4.0015%}
-.flag-gh {background-position:center 4.2229%}
-.flag-gn {background-position:center 4.441%}
-.flag-gw {background-position:left 4.66663%}
-.flag-ci {background-position:center 4.8844%}
-.flag-ke {background-position:center 5.1061%}
-.flag-ls {background-position:center 5.3298%}
-.flag-lr {background-position:left 5.5495%}
-.flag-ly {background-position:center 5.7712%}
-.flag-mg {background-position:center 5.994%}
-.flag-mw {background-position:center 6.2156%}
-.flag-ml {background-position:center 6.4363%}
-.flag-mr {background-position:center 6.658%}
-.flag-mu {background-position:center 6.8805%}
-.flag-yt {background-position:center 7.1038%}
-.flag-ma {background-position:center 7.3231%}
-.flag-mz {background-position:left 7.5448%}
-.flag-na {background-position:left 7.7661%}
-.flag-ne {background-position:center 7.98937%}
-.flag-ng {background-position:center 8.2099%}
-.flag-cg {background-position:center 8.4316%}
-.flag-re {background-position:center 8.6533%}
-.flag-rw {background-position:right 8.875%}
-.flag-sh {background-position:center 9.0967%}
-.flag-st {background-position:center 9.32237%}
-.flag-sn {background-position:center 9.5426%}
-.flag-sc {background-position:left 9.7628%}
-.flag-sl {background-position:center 9.9845%}
-.flag-so {background-position:center 10.2052%}
-.flag-za {background-position:left 10.4269%}
-.flag-ss {background-position:left 10.6486%}
-.flag-sd {background-position:center 10.8703%}
-.flag-sr {background-position:center 11.0945%}
-.flag-sz {background-position:center 11.3135%}
-.flag-tg {background-position:left 11.5354%}
-.flag-tn {background-position:center 11.7593%}
-.flag-ug {background-position:center 11.9799%}
-.flag-tz {background-position:center 12.2005%}
-.flag-eh {background-position:center 12.4222%}
-.flag-ye {background-position:center 12.644%}
-.flag-zm {background-position:center 12.8664%}
-.flag-zw {background-position:left 13.0873%}
-.flag-ai {background-position:center 13.309%}
-.flag-ag {background-position:center 13.5307%}
-.flag-ar {background-position:center 13.7524%}
-.flag-aw {background-position:left 13.9741%}
-.flag-bs {background-position:left 14.1958%}
-.flag-bb {background-position:center 14.4175%}
-.flag-bq {background-position:center 14.6415%}
-.flag-bz {background-position:center 14.8609%}
-.flag-bm {background-position:center 15.0826%}
-.flag-bo {background-position:center 15.306%}
-.flag-vg {background-position:center 15.528%}
-.flag-br {background-position:center 15.7496%}
-.flag-ca {background-position:center 15.9694%}
-.flag-ky {background-position:center 16.1911%}
-.flag-cl {background-position:left 16.4128%}
-.flag-co {background-position:left 16.6345%}
-.flag-km {background-position:center 16.8562%}
-.flag-cr {background-position:center 17.0779%}
-.flag-cu {background-position:left 17.2996%}
-.flag-cw {background-position:center 17.5213%}
-.flag-dm {background-position:center 17.743%}
-.flag-do {background-position:center 17.968%}
-.flag-ec {background-position:center 18.1864%}
-.flag-sv {background-position:center 18.4081%}
-.flag-fk {background-position:center 18.6298%}
-.flag-gf {background-position:center 18.8515%}
-.flag-gl {background-position:left 19.0732%}
-.flag-gd {background-position:center 19.2987%}
-.flag-gp {background-position:center 19.518%}
-.flag-gt {background-position:center 19.7383%}
-.flag-gy {background-position:center 19.96%}
-.flag-ht {background-position:center 20.1817%}
-.flag-hn {background-position:center 20.4034%}
-.flag-jm {background-position:center 20.6241%}
-.flag-mq {background-position:center 20.8468%}
-.flag-mx {background-position:center 21.0685%}
-.flag-ms {background-position:center 21.2902%}
-.flag-ni {background-position:center 21.5119%}
-.flag-pa {background-position:center 21.7336%}
-.flag-py {background-position:center 21.9553%}
-.flag-pe {background-position:center 22.177%}
-.flag-pr {background-position:left 22.4002%}
-.flag-bl {background-position:center 22.6204%}
-.flag-kn {background-position:center 22.8421%}
-.flag-lc {background-position:center 23.0638%}
-.flag-pm {background-position:center 23.2855%}
-.flag-vc {background-position:center 23.5072%}
-.flag-sx {background-position:left 23.732%}
-.flag-tt {background-position:center 23.9506%}
-.flag-tc {background-position:center 24.1723%}
-.flag-us {background-position:center 24.392%}
-.flag-vi {background-position:center 24.6157%}
-.flag-uy {background-position:left 24.8374%}
-.flag-ve {background-position:center 25.0591%}
-.flag-ab {background-position:center 25.279%}
-.flag-af {background-position:center 25.5025%}
-.flag-az {background-position:center 25.7242%}
-.flag-bd {background-position:center 25.9459%}
-.flag-bt {background-position:center 26.1676%}
-.flag-bn {background-position:center 26.3885%}
-.flag-kh {background-position:center 26.611%}
-.flag-cn {background-position:left 26.8327%}
-.flag-ge {background-position:center 27.0544%}
-.flag-hk {background-position:center 27.2761%}
-.flag-in {background-position:center 27.4978%}
-.flag-id {background-position:center 27.7195%}
-.flag-jp {background-position:center 27.9412%}
-.flag-kz {background-position:center 28.1615%}
-.flag-la {background-position:center 28.3846%}
-.flag-mo {background-position:center 28.6063%}
-.flag-my {background-position:center 28.829%}
-.flag-mv {background-position:center 29.0497%}
-.flag-mn {background-position:left 29.2714%}
-.flag-mm {background-position:center 29.4931%}
-.flag-np {background-position:left 29.7148%}
-.flag-kp {background-position:left 29.9365%}
-.flag-mp {background-position:center 30.1582%}
-.flag-pw {background-position:center 30.3799%}
-.flag-pg {background-position:center 30.6016%}
-.flag-ph {background-position:left 30.8233%}
-.flag-sg {background-position:left 31.045%}
-.flag-kr {background-position:center 31.2667%}
-.flag-lk {background-position:right 31.4884%}
-.flag-tw {background-position:left 31.7101%}
-.flag-tj {background-position:center 31.9318%}
-.flag-th {background-position:center 32.1535%}
-.flag-tl {background-position:left 32.3752%}
-.flag-tm {background-position:center 32.5969%}
-.flag-vn {background-position:center 32.8186%}
-.flag-ax {background-position:center 33.0403%}
-.flag-al {background-position:center 33.25975%}
-.flag-ad {background-position:center 33.4837%}
-.flag-am {background-position:center 33.7054%}
-.flag-at {background-position:center 33.9271%}
-.flag-by {background-position:left 34.1488%}
-.flag-be {background-position:center 34.3705%}
-.flag-ba {background-position:center 34.5922%}
-.flag-bg {background-position:center 34.8139%}
-.flag-hr {background-position:center 35.0356%}
-.flag-cy {background-position:center 35.2555%}
-.flag-cz {background-position:left 35.479%}
-.flag-dk {background-position:center 35.7007%}
-.flag-ee {background-position:center 35.9224%}
-.flag-fo {background-position:center 36.1441%}
-.flag-fi {background-position:center 36.3658%}
-.flag-fr {background-position:center 36.5875%}
-.flag-de {background-position:center 36.8092%}
-.flag-gi {background-position:center 37.0309%}
-.flag-gr {background-position:left 37.2526%}
-.flag-gg {background-position:center 37.4743%}
-.flag-hu {background-position:center 37.696%}
-.flag-is {background-position:center 37.9177%}
-.flag-ie {background-position:center 38.1394%}
-.flag-im {background-position:center 38.3611%}
-.flag-it {background-position:center 38.5828%}
-.flag-je {background-position:center 38.8045%}
-.flag-xk {background-position:center 39.0262%}
-.flag-lv {background-position:center 39.2479%}
-.flag-li {background-position:left 39.4696%}
-.flag-lt {background-position:center 39.6913%}
-.flag-lu {background-position:center 39.913%}
-.flag-mt {background-position:left 40.1347%}
-.flag-md {background-position:center 40.3564%}
-.flag-mc {background-position:center 40.5781%}
-.flag-me {background-position:center 40.7998%}
-.flag-nl {background-position:center 41.0215%}
-.flag-mk {background-position:center 41.2432%}
-.flag-no {background-position:center 41.4649%}
-.flag-pl {background-position:center 41.6866%}
-.flag-pt {background-position:center 41.9083%}
-.flag-ro {background-position:center 42.13%}
-.flag-ru {background-position:center 42.3517%}
-.flag-sm {background-position:center 42.5734%}
-.flag-rs {background-position:center 42.7951%}
-.flag-sk {background-position:center 43.0168%}
-.flag-si {background-position:center 43.2385%}
-.flag-es {background-position:left 43.4602%}
-.flag-se {background-position:center 43.6819%}
-.flag-ch {background-position:center 43.9036%}
-.flag-tr {background-position:center 44.1253%}
-.flag-ua {background-position:center 44.347%}
-.flag-gb {background-position:center 44.5687%}
-.flag-va {background-position:right 44.7904%}
-.flag-bh {background-position:center 45.0121%}
-.flag-ir {background-position:center 45.2338%}
-.flag-iq {background-position:center 45.4555%}
-.flag-il {background-position:center 45.6772%}
-.flag-kw {background-position:left 45.897%}
-.flag-jo {background-position:left 46.1206%}
-.flag-kg {background-position:center 46.3423%}
-.flag-lb {background-position:center 46.561%}
-.flag-om {background-position:left 46.7857%}
-.flag-pk {background-position:center 47.0074%}
-.flag-ps {background-position:center 47.2291%}
-.flag-qa {background-position:center 47.4508%}
-.flag-sa {background-position:center 47.6725%}
-.flag-sy {background-position:center 47.8942%}
-.flag-ae {background-position:center 48.1159%}
-.flag-uz {background-position:left 48.3376%}
-.flag-as {background-position:right 48.5593%}
-.flag-au {background-position:center 48.781%}
-.flag-cx {background-position:center 49.002%}
-.flag-cc {background-position:center 49.2244%}
-.flag-ck {background-position:center 49.4445%}
-.flag-fj {background-position:center 49.6678%}
-.flag-pf {background-position:center 49.8895%}
-.flag-gu {background-position:center 50.1112%}
-.flag-ki {background-position:center 50.3329%}
-.flag-mh {background-position:left 50.5546%}
-.flag-fm {background-position:center 50.7763%}
-.flag-nc {background-position:center 50.998%}
-.flag-nz {background-position:center 51.2197%}
-.flag-nr {background-position:left 51.4414%}
-.flag-nu {background-position:center 51.6631%}
-.flag-nf {background-position:center 51.8848%}
-.flag-ws {background-position:left 52.1065%}
-.flag-sb {background-position:left 52.3282%}
-.flag-tk {background-position:center 52.5499%}
-.flag-to {background-position:left 52.7716%}
-.flag-tv {background-position:center 52.9933%}
-.flag-vu {background-position:left 53.215%}
-.flag-wf {background-position:center 53.4385%}
-.flag-aq {background-position:center 53.6584%}
-.flag-eu {background-position:center 53.875%}
-.flag-jr {background-position:center 54.099%}
-.flag-oly {background-position:center 54.32%}
-.flag-un {background-position:center 54.54%}
-
-
-.flag.ff-sm {width: 18px;height: 11px}
-.flag.ff-md {width: 27px;height: 17px}
-.flag.ff-lg {width: 42px;height: 27px}
-.flag.ff-xl {width: 60px;height: 37px}
-.flag.ff-lt {box-shadow: 0 0 0 1px rgb(220,220,220)}
-.flag.ff-dk {box-shadow: 0 0 0 1px rgb(90,90,90)}
\ No newline at end of file
+span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primeng/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}

From ee63367cd6739c5b7f59bd092e955f03fbf0a978 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 07:56:03 -0400
Subject: [PATCH 177/194] Update flags.css

---
 public/styles/flags.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/styles/flags.css b/public/styles/flags.css
index 43d4c81d09..7916efb45a 100755
--- a/public/styles/flags.css
+++ b/public/styles/flags.css
@@ -1 +1 @@
-span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primeng/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}
+span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primereact/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}

From 420da6aef8c4829604ca0251d135c6c2f0c20c6b Mon Sep 17 00:00:00 2001
From: Jared Scott <jared.scott@variable.team>
Date: Tue, 9 Apr 2024 20:16:55 +0800
Subject: [PATCH 178/194] fix: Some Tailwind classes for inputswitch and
 checkbox as styling is currently broken (#6347)

- Update the tailwinddoc.js files for checkbox and inputswitch
---
 components/doc/checkbox/theming/tailwinddoc.js    | 13 ++++++++-----
 components/doc/inputswitch/theming/tailwinddoc.js |  5 ++++-
 components/lib/passthrough/tailwind/index.js      |  8 +++++++-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/doc/checkbox/theming/tailwinddoc.js b/components/doc/checkbox/theming/tailwinddoc.js
index 802541acfc..c7393922bc 100644
--- a/components/doc/checkbox/theming/tailwinddoc.js
+++ b/components/doc/checkbox/theming/tailwinddoc.js
@@ -5,13 +5,16 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {        
+const Tailwind = {
     checkbox: {
         root: {
-            className: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        input: ({ props, context }) => ({
-            className: [
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
+            className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
                 {
@@ -22,7 +25,7 @@ const Tailwind = {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
                     'cursor-default opacity-60': props.disabled
                 }
-            ]
+            )
         }),
         icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     }
diff --git a/components/doc/inputswitch/theming/tailwinddoc.js b/components/doc/inputswitch/theming/tailwinddoc.js
index cabaaf18f7..937f3bbafc 100644
--- a/components/doc/inputswitch/theming/tailwinddoc.js
+++ b/components/doc/inputswitch/theming/tailwinddoc.js
@@ -5,13 +5,16 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {   
+const Tailwind = {
     inputswitch: {
         root: ({ props }) => ({
             className: classNames('inline-block relative', 'w-12 h-7', {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
         slider: ({ props }) => ({
             className: classNames(
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 2c9f51575f..70bcfbbae8 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -840,6 +840,9 @@ const Tailwind = {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
         slider: ({ props }) => ({
             className: classNames(
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
@@ -1048,7 +1051,10 @@ const Tailwind = {
         root: {
             className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        input: ({ props, context }) => ({
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',

From 9253f35e3a4442cff459aacbce58afb98bd7adec Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 11:05:40 -0400
Subject: [PATCH 179/194] Locale update to use ariaLabel method (#6313)

---
 components/lib/carousel/Carousel.js           |   6 +-
 components/lib/galleria/GalleriaItem.js       |   6 +-
 components/lib/galleria/GalleriaThumbnails.js |   4 +-
 components/lib/hooks/useLocale.js             | 180 +++++++++---------
 components/lib/inputotp/InputOtp.js           |   9 +-
 5 files changed, 104 insertions(+), 101 deletions(-)

diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index 04422659f4..d67fc8de27 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
@@ -510,7 +510,7 @@ export const Carousel = React.memo(
         });
 
         const ariaSlideNumber = (value) => {
-            return localeOption('aria') ? localeOption('aria').slideNumber.replace(/{slideNumber}/g, value) : undefined;
+            return ariaLabel('slideNumber', { slideNumber: value });
         };
 
         const createItems = () => {
@@ -724,7 +724,7 @@ export const Carousel = React.memo(
         };
 
         const ariaPageLabel = (value) => {
-            return localeOption('aria') ? localeOption('aria').pageLabel.replace(/{page}/g, value) : undefined;
+            return ariaLabel('pageLabel', { page: value });
         };
 
         const createIndicator = (index) => {
diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js
index 5c8106c5a5..b8d6f96a6f 100644
--- a/components/lib/galleria/GalleriaItem.js
+++ b/components/lib/galleria/GalleriaItem.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { localeOption } from '../api/Api';
+import { ariaLabel, localeOption } from '../api/Api';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ChevronLeftIcon } from '../icons/chevronleft';
 import { ChevronRightIcon } from '../icons/chevronright';
@@ -21,11 +21,11 @@ export const GalleriaItem = React.memo(
         };
 
         const ariaSlideNumber = (value) => {
-            return localeOption('aria') ? localeOption('aria').slideNumber.replace(/{slideNumber}/g, value) : undefined;
+            return ariaLabel('slideNumber', { slideNumber: value });
         };
 
         const ariaPageLabel = (value) => {
-            return localeOption('aria') ? localeOption('aria').pageLabel.replace(/{page}/g, value) : undefined;
+            return ariaLabel('pageLabel', { page: value });
         };
 
         const next = () => {
diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
index a31ae9f437..8d50ce3498 100644
--- a/components/lib/galleria/GalleriaThumbnails.js
+++ b/components/lib/galleria/GalleriaThumbnails.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
 import { useMergeProps, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronLeftIcon } from '../icons/chevronleft';
@@ -27,7 +27,7 @@ const GalleriaThumbnailItem = React.memo((props) => {
     };
 
     const ariaPageLabel = (value) => {
-        return localeOption('aria') ? localeOption('aria').pageLabel.replace(/{page}/g, value) : undefined;
+        return ariaLabel('pageLabel', { page: value });
     };
 
     const onThumbnailKeydown = (event) => {
diff --git a/components/lib/hooks/useLocale.js b/components/lib/hooks/useLocale.js
index 23d0113ac7..2aa33505d9 100644
--- a/components/lib/hooks/useLocale.js
+++ b/components/lib/hooks/useLocale.js
@@ -5,125 +5,127 @@ import PrimeReact from '../api/Api';
 
 let locales = {
     en: {
-        startsWith: 'Starts with',
+        accept: 'Yes',
+        addRule: 'Add Rule',
+        am: 'AM',
+        apply: 'Apply',
+        cancel: 'Cancel',
+        choose: 'Choose',
+        chooseDate: 'Choose Date',
+        chooseMonth: 'Choose Month',
+        chooseYear: 'Choose Year',
+        clear: 'Clear',
+        completed: 'Completed',
         contains: 'Contains',
-        notContains: 'Not contains',
+        custom: 'Custom',
+        dateAfter: 'Date is after',
+        dateBefore: 'Date is before',
+        dateFormat: 'mm/dd/yy',
+        dateIs: 'Date is',
+        dateIsNot: 'Date is not',
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        emptyFilterMessage: 'No results found',
+        emptyMessage: 'No available options',
+        emptySearchMessage: 'No results found',
+        emptySelectionMessage: 'No selected item',
         endsWith: 'Ends with',
         equals: 'Equals',
-        notEquals: 'Not equals',
-        noFilter: 'No Filter',
+        fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
         filter: 'Filter',
-        lt: 'Less than',
-        lte: 'Less than or equal to',
+        firstDayOfWeek: 0,
         gt: 'Greater than',
         gte: 'Greater than or equal to',
-        dateIs: 'Date is',
-        dateIsNot: 'Date is not',
-        dateBefore: 'Date is before',
-        dateAfter: 'Date is after',
-        custom: 'Custom',
-        clear: 'Clear',
-        close: 'Close',
-        apply: 'Apply',
+        lt: 'Less than',
+        lte: 'Less than or equal to',
         matchAll: 'Match All',
         matchAny: 'Match Any',
-        addRule: 'Add Rule',
-        removeRule: 'Remove Rule',
-        accept: 'Yes',
-        reject: 'No',
-        choose: 'Choose',
-        upload: 'Upload',
-        cancel: 'Cancel',
-        pending: 'Pending',
-        fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        medium: 'Medium',
         monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
         monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        chooseYear: 'Choose Year',
-        chooseMonth: 'Choose Month',
-        chooseDate: 'Choose Date',
-        prevDecade: 'Previous Decade',
         nextDecade: 'Next Decade',
-        prevYear: 'Previous Year',
-        nextYear: 'Next Year',
-        prevMonth: 'Previous Month',
+        nextHour: 'Next Hour',
+        nextMinute: 'Next Minute',
         nextMonth: 'Next Month',
+        nextSecond: 'Next Second',
+        nextYear: 'Next Year',
+        noFilter: 'No Filter',
+        notContains: 'Not contains',
+        notEquals: 'Not equals',
+        now: 'Now',
+        passwordPrompt: 'Enter a password',
+        pending: 'Pending',
+        pm: 'PM',
+        prevDecade: 'Previous Decade',
         prevHour: 'Previous Hour',
-        nextHour: 'Next Hour',
         prevMinute: 'Previous Minute',
-        nextMinute: 'Next Minute',
+        prevMonth: 'Previous Month',
         prevSecond: 'Previous Second',
-        nextSecond: 'Next Second',
-        prevMilliSecond: 'Previous Second',
-        nextMilliSecond: 'Next Second',
-        am: 'am',
-        pm: 'pm',
+        prevYear: 'Previous Year',
+        reject: 'No',
+        removeRule: 'Remove Rule',
+        searchMessage: '{0} results are available',
+        selectionMessage: '{0} items selected',
+        showMonthAfterYear: false,
+        startsWith: 'Starts with',
+        strong: 'Strong',
         today: 'Today',
-        weekHeader: 'Wk',
-        firstDayOfWeek: 0,
-        showMonthAfterYear: true,
-        dateFormat: 'mm/dd/yy',
+        upload: 'Upload',
         weak: 'Weak',
-        medium: 'Medium',
-        strong: 'Strong',
-        passwordPrompt: 'Enter a password',
-        emptyFilterMessage: 'No available options',
-        emptyMessage: 'No results found',
+        weekHeader: 'Wk',
         aria: {
-            trueLabel: 'True',
-            falseLabel: 'False',
-            nullLabel: 'Not Selected',
-            star: '1 star',
-            stars: '{star} stars',
-            selectAll: 'All items selected',
-            unselectAll: 'All items unselected',
+            cancelEdit: 'Cancel Edit',
             close: 'Close',
-            previous: 'Previous',
-            next: 'Next',
-            navigation: 'Navigation',
-            scrollTop: 'Scroll Top',
-            moveTop: 'Move Top',
-            moveUp: 'Move Up',
-            moveDown: 'Move Down',
-            moveBottom: 'Move Bottom',
-            moveToTarget: 'Move to Target',
-            moveToSource: 'Move to Source',
-            moveAllToTarget: 'Move All to Target',
-            moveAllToSource: 'Move All to Source',
-            pageLabel: 'Page {page}',
+            collapseRow: 'Row Collapsed',
+            editRow: 'Edit Row',
+            expandRow: 'Row Expanded',
+            falseLabel: 'False',
+            filterConstraint: 'Filter Constraint',
+            filterOperator: 'Filter Operator',
             firstPageLabel: 'First Page',
+            gridView: 'Grid View',
+            hideFilterMenu: 'Hide Filter Menu',
+            jumpToPageDropdownLabel: 'Jump to Page Dropdown',
+            jumpToPageInputLabel: 'Jump to Page Input',
             lastPageLabel: 'Last Page',
+            listView: 'List View',
+            moveAllToSource: 'Move All to Source',
+            moveAllToTarget: 'Move All to Target',
+            moveBottom: 'Move Bottom',
+            moveDown: 'Move Down',
+            moveToSource: 'Move to Source',
+            moveToTarget: 'Move to Target',
+            moveTop: 'Move Top',
+            moveUp: 'Move Up',
+            navigation: 'Navigation',
+            next: 'Next',
             nextPageLabel: 'Next Page',
+            nullLabel: 'Not Selected',
+            pageLabel: 'Page {page}',
+            otpLabel: 'Please enter one time password character {0}',
+            passwordHide: 'Hide Password',
+            passwordShow: 'Show Password',
+            previous: 'Previous',
             previousPageLabel: 'Previous Page',
+            rotateLeft: 'Rotate Left',
+            rotateRight: 'Rotate Right',
             rowsPerPageLabel: 'Rows per page',
-            jumpToPageDropdownLabel: 'Jump to Page Dropdown',
-            jumpToPageInputLabel: 'Jump to Page Input',
+            saveEdit: 'Save Edit',
+            scrollTop: 'Scroll Top',
+            selectAll: 'All items selected',
             selectRow: 'Row Selected',
-            unselectRow: 'Row Unselected',
-            expandRow: 'Row Expanded',
-            collapseRow: 'Row Collapsed',
             showFilterMenu: 'Show Filter Menu',
-            hideFilterMenu: 'Hide Filter Menu',
-            filterOperator: 'Filter Operator',
-            filterConstraint: 'Filter Constraint',
-            editRow: 'Row Edit',
-            saveEdit: 'Save Edit',
-            cancelEdit: 'Cancel Edit',
-            listView: 'List View',
-            gridView: 'Grid View',
             slide: 'Slide',
             slideNumber: '{slideNumber}',
+            star: '1 star',
+            stars: '{star} stars',
+            trueLabel: 'True',
+            unselectAll: 'All items unselected',
+            unselectRow: 'Row Unselected',
             zoomImage: 'Zoom Image',
             zoomIn: 'Zoom In',
-            zoomOut: 'Zoom Out',
-            rotateRight: 'Rotate Right',
-            rotateLeft: 'Rotate Left',
-            selectLabel: 'Select',
-            unselectLabel: 'Unselect',
-            expandLabel: 'Expand',
-            collapseLabel: 'Collapse'
+            zoomOut: 'Zoom Out'
         }
     }
 };
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index c19c71c70d..eb6b179060 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -1,10 +1,10 @@
-import React, { useRef, useContext, useState } from 'react';
-import { useMergeProps } from '../hooks/Hooks';
-import { PrimeReactContext } from '../api/Api';
-import { InputOtpBase } from './BaseInputOtp';
 import { InputText } from '@/components/lib/inputtext/InputText';
+import React, { useContext, useRef, useState } from 'react';
+import { PrimeReactContext, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
 import { ObjectUtils } from '../utils/Utils';
+import { InputOtpBase } from './BaseInputOtp';
 
 export const InputOtp = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -179,6 +179,7 @@ export const InputOtp = React.memo(
                     invalid: props?.invalid,
                     tabIndex: props?.tabIndex,
                     unstyled: props?.unstyled,
+                    'aria-label': ariaLabel('otpLabel', { 0: inputElementIndex + 1 }),
                     className: cx('input')
                 },
                 ptm('input')

From 3da96415f64c2f41a4a654f3f4832f0c8d9f6a95 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 12:23:42 -0400
Subject: [PATCH 180/194] Fix #6353: Sidebar doc fix (#6354)

---
 components/doc/sidebar/headlessdoc.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index 22985b9580..d4e86effd3 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -198,8 +198,8 @@ import React, { useState, useRef } from 'react';
 import { Sidebar } from 'primereact/sidebar';
 import { Button } from 'primereact/button';
 import { Avatar } from 'primereact/avatar';
-import { Ripple } from 'primereact/Ripple';
-import { StyleClass } from 'primereact/StyleClass';
+import { Ripple } from 'primereact/ripple';
+import { StyleClass } from 'primereact/styleclass';
 
 export default function HeadlessDemo() {
     const [visible, setVisible] = useState(false);
@@ -405,8 +405,8 @@ import React, { useState, useRef } from 'react';
 import { Sidebar } from 'primereact/sidebar';
 import { Button } from 'primereact/button';
 import { Avatar } from 'primereact/avatar';
-import { Ripple } from 'primereact/Ripple';
-import { StyleClass } from 'primereact/StyleClass';
+import { Ripple } from 'primereact/ripple';
+import { StyleClass } from 'primereact/styleclass';
 
 export default function HeadlessDemo() {
     const [visible, setVisible] = useState<boolean>(false);

From 88e9c2adb42e03c87518253917f2bc7fc818e065 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 16:13:18 -0400
Subject: [PATCH 181/194] Fix #6358: InputOtp fix typescript case (#6361)

---
 components/lib/inputotp/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/package.json b/components/lib/inputotp/package.json
index 4424ca5c99..5949a3f1b5 100644
--- a/components/lib/inputotp/package.json
+++ b/components/lib/inputotp/package.json
@@ -2,6 +2,6 @@
     "main": "./inputotp.cjs.js",
     "module": "./inputotp.esm.js",
     "unpkg": "./inputotp.min.js",
-    "types": "./InputOtp.d.ts",
+    "types": "./inputotp.d.ts",
     "sideEffects": false
 }

From f4afde40c515dc23b32c524d77460748cc9b02b7 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 16:24:03 -0400
Subject: [PATCH 182/194] Fix #6359: Stepper proper forwardRef (#6362)

---
 components/lib/stepper/StepperContent.js    | 3 ++-
 components/lib/stepper/StepperHeader.js     | 3 ++-
 components/lib/stepper/StepperSeparator.js  | 3 ++-
 components/lib/stepperpanel/StepperPanel.js | 6 ------
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js
index 4e27353998..c0711d47e4 100644
--- a/components/lib/stepper/StepperContent.js
+++ b/components/lib/stepper/StepperContent.js
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 
 export const StepperContent = React.memo(
-    React.forwardRef((props) => {
+    React.forwardRef((props, ref) => {
         const mergeProps = useMergeProps();
         const { cx, ptm } = props;
 
         const rootProps = mergeProps(
             {
+                ref: ref,
                 id: props.id,
                 className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }),
                 role: 'tabpanel',
diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js
index c3ff1f7128..75b34cbc72 100644
--- a/components/lib/stepper/StepperHeader.js
+++ b/components/lib/stepper/StepperHeader.js
@@ -2,11 +2,12 @@ import * as React from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 
 export const StepperHeader = React.memo(
-    React.forwardRef((props) => {
+    React.forwardRef((props, ref) => {
         const mergeProps = useMergeProps();
         const { cx } = props;
 
         const buttonProps = mergeProps({
+            ref: ref,
             id: props.id,
             className: cx('stepper.action'),
             role: 'tab',
diff --git a/components/lib/stepper/StepperSeparator.js b/components/lib/stepper/StepperSeparator.js
index 0ebc1e4d01..c283198917 100644
--- a/components/lib/stepper/StepperSeparator.js
+++ b/components/lib/stepper/StepperSeparator.js
@@ -2,10 +2,11 @@ import * as React from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 
 export const StepperSeparator = React.memo(
-    React.forwardRef((props) => {
+    React.forwardRef((props, ref) => {
         const mergeProps = useMergeProps();
 
         const separatorProps = mergeProps({
+            ref: ref,
             'aria-hidden': true,
             className: props.separatorClass,
             ...props.getStepPT(props.stepperpanel, 'separator', props.index)
diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js
index cbc39232d4..781b3d1cf5 100644
--- a/components/lib/stepperpanel/StepperPanel.js
+++ b/components/lib/stepperpanel/StepperPanel.js
@@ -1,24 +1,18 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { ObjectUtils } from '../utils/Utils';
 import { StepperPanelBase } from './StepperPanelBase';
 
 export const StepperPanel = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = StepperPanelBase.getProps(inProps, context);
-        const elementRef = React.useRef(ref);
         const { isUnstyled } = StepperPanelBase.setMetaData({
             props
         });
 
         useHandleStyle(StepperPanelBase.css.styles, isUnstyled, { name: 'StepperPanel' });
 
-        React.useEffect(() => {
-            ObjectUtils.combinedRefs(elementRef, ref);
-        }, [elementRef, ref]);
-
         return <span ref={ref}>{props.children}</span>;
     })
 );

From 606485a5d0cdb86ff4e9bc715b7f61a8e73277d2 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Apr 2024 17:08:24 -0400
Subject: [PATCH 183/194] Fix Stepper demos (#6363)

---
 components/doc/stepper/basicdoc.js    | 12 ++++++------
 components/doc/stepper/lineardoc.js   | 12 ++++++------
 components/doc/stepper/verticaldoc.js | 12 ++++++------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/components/doc/stepper/basicdoc.js b/components/doc/stepper/basicdoc.js
index 7b25a5dd3e..08d6f1c0c8 100644
--- a/components/doc/stepper/basicdoc.js
+++ b/components/doc/stepper/basicdoc.js
@@ -40,9 +40,9 @@ export function BasicDoc(props) {
         `,
         javascript: `
 import React, { useRef } from "react";
-import { Stepper } from '@/components/lib/stepper/Stepper';
-import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
-import { Button } from '@/components/lib/button/Button';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
 
 export default function BasicDemo() {
     const stepperRef = useRef(null);
@@ -82,9 +82,9 @@ export default function BasicDemo() {
         `,
         typescript: `
 import React, { useRef } from "react";
-import { Stepper } from '@/components/lib/stepper/Stepper';
-import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
-import { Button } from '@/components/lib/button/Button';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
 
 export default function BasicDemo() {
     const stepperRef = useRef(null);
diff --git a/components/doc/stepper/lineardoc.js b/components/doc/stepper/lineardoc.js
index a11df8fd63..5c2454127d 100644
--- a/components/doc/stepper/lineardoc.js
+++ b/components/doc/stepper/lineardoc.js
@@ -40,9 +40,9 @@ export function LinearDoc(props) {
         `,
         javascript: `
 import React, { useRef } from "react";
-import { Stepper } from '@/components/lib/stepper/Stepper';
-import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
-import { Button } from '@/components/lib/button/Button';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
 
 export default function BasicDemo() {
     const stepperRef = useRef(null);
@@ -82,9 +82,9 @@ export default function BasicDemo() {
         `,
         typescript: `
 import React, { useRef } from "react";
-import { Stepper } from '@/components/lib/stepper/Stepper';
-import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
-import { Button } from '@/components/lib/button/Button';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
 
 export default function BasicDemo() {
     const stepperRef = useRef(null);
diff --git a/components/doc/stepper/verticaldoc.js b/components/doc/stepper/verticaldoc.js
index 42d592dd5a..6e1caaa932 100644
--- a/components/doc/stepper/verticaldoc.js
+++ b/components/doc/stepper/verticaldoc.js
@@ -40,9 +40,9 @@ export function VerticalDoc(props) {
         `,
         javascript: `
 import React, { useRef } from "react";
-import { Stepper } from '@/components/lib/stepper/Stepper';
-import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
-import { Button } from '@/components/lib/button/Button';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
 
 export default function BasicDemo() {
     const stepperRef = useRef(null);
@@ -82,9 +82,9 @@ export default function BasicDemo() {
         `,
         typescript: `
 import React, { useRef } from "react";
-import { Stepper } from '@/components/lib/stepper/Stepper';
-import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
-import { Button } from '@/components/lib/button/Button';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
 
 export default function BasicDemo() {
     const stepperRef = useRef(null);

From be62afe813dfa9726cb3d16b346ce238481d210d Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 10 Apr 2024 08:41:02 -0400
Subject: [PATCH 184/194] Add Lint Check back

---
 .github/workflows/node.js.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 5cc583c264..a000b6d962 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -35,6 +35,11 @@ jobs:
       run: |
         npm run format:check
 
+    - name: Lint Check
+      if: ${{ success() }}
+      run: |
+        npm run lint
+
     - name: TypeScript Check
       if: ${{ success() }}
       run: |

From 2ba6683073f5dc4a4d64a56cd60ff821ab7bfd4d Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 10 Apr 2024 11:09:51 -0400
Subject: [PATCH 185/194] Revert typedoc (#6368)

---
 package-lock.json | 16 ++++++++--------
 package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3e4cf272a6..9be1e946ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,7 +61,7 @@
                 "rollup-plugin-postcss": "^4.0.2",
                 "rollup-plugin-terser": "^7.0.2",
                 "sass": "^1.69.5",
-                "typedoc": "0.25.12",
+                "typedoc": "0.24.8",
                 "typescript": "5.1.6"
             },
             "engines": {
@@ -18270,24 +18270,24 @@
             "dev": true
         },
         "node_modules/typedoc": {
-            "version": "0.25.12",
-            "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.12.tgz",
-            "integrity": "sha512-F+qhkK2VoTweDXd1c42GS/By2DvI2uDF4/EpG424dTexSHdtCH52C6IcAvMA6jR3DzAWZjHpUOW+E02kyPNUNw==",
+            "version": "0.24.8",
+            "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.8.tgz",
+            "integrity": "sha512-ahJ6Cpcvxwaxfu4KtjA8qZNqS43wYt6JL27wYiIgl1vd38WW/KWX11YuAeZhuz9v+ttrutSsgK+XO1CjL1kA3w==",
             "dev": true,
             "dependencies": {
                 "lunr": "^2.3.9",
                 "marked": "^4.3.0",
-                "minimatch": "^9.0.3",
-                "shiki": "^0.14.7"
+                "minimatch": "^9.0.0",
+                "shiki": "^0.14.1"
             },
             "bin": {
                 "typedoc": "bin/typedoc"
             },
             "engines": {
-                "node": ">= 16"
+                "node": ">= 14.14"
             },
             "peerDependencies": {
-                "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x"
+                "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x"
             }
         },
         "node_modules/typedoc/node_modules/brace-expansion": {
diff --git a/package.json b/package.json
index ee3c69da3f..a6e7a0aa29 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-terser": "^7.0.2",
         "sass": "^1.69.5",
-        "typedoc": "0.25.12",
+        "typedoc": "0.24.8",
         "typescript": "5.1.6"
     },
     "engines": {

From eded6df1140476be7845f9211c6feffb1cb9e54d Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 10 Apr 2024 11:22:56 -0400
Subject: [PATCH 186/194] ignore typedoc

---
 .github/dependabot.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index ee025146f5..acc23b333e 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -7,6 +7,7 @@ updates:
     ignore:
       - dependency-name: "react"
       - dependency-name: "react-dom"
+      - dependency-name: "typedoc"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

From c072db0ce5d2586e2c39f7a541afd4b1ecd85b4c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 11:28:40 -0400
Subject: [PATCH 187/194] Bump chart.js from 4.4.1 to 4.4.2 (#6282)

Bumps [chart.js](https://github.com/chartjs/Chart.js) from 4.4.1 to 4.4.2.
- [Release notes](https://github.com/chartjs/Chart.js/releases)
- [Commits](https://github.com/chartjs/Chart.js/compare/v4.4.1...v4.4.2)

---
updated-dependencies:
- dependency-name: chart.js
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 10 +++++-----
 package.json      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9be1e946ff..5de3252864 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "10.6.3",
             "dependencies": {
                 "@docsearch/react": "3.5.2",
-                "chart.js": "4.4.1",
+                "chart.js": "4.4.2",
                 "file-saver": "2.0.5",
                 "fs-extra": "^11.2.0",
                 "jspdf": "2.5.1",
@@ -6432,14 +6432,14 @@
             }
         },
         "node_modules/chart.js": {
-            "version": "4.4.1",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
-            "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+            "version": "4.4.2",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz",
+            "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==",
             "dependencies": {
                 "@kurkle/color": "^0.3.0"
             },
             "engines": {
-                "pnpm": ">=7"
+                "pnpm": ">=8"
             }
         },
         "node_modules/chokidar": {
diff --git a/package.json b/package.json
index a6e7a0aa29..a298a72783 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     },
     "dependencies": {
         "@docsearch/react": "3.5.2",
-        "chart.js": "4.4.1",
+        "chart.js": "4.4.2",
         "file-saver": "2.0.5",
         "fs-extra": "^11.2.0",
         "jspdf": "2.5.1",

From 13a4f13aad5fddcee051a6ede077fe3a505a2f4c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 11:28:54 -0400
Subject: [PATCH 188/194] Bump @testing-library/user-event from 14.5.1 to
 14.5.2 (#6280)

Bumps [@testing-library/user-event](https://github.com/testing-library/user-event) from 14.5.1 to 14.5.2.
- [Release notes](https://github.com/testing-library/user-event/releases)
- [Changelog](https://github.com/testing-library/user-event/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/user-event/compare/v14.5.1...v14.5.2)

---
updated-dependencies:
- dependency-name: "@testing-library/user-event"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5de3252864..640d048c28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
                 "@svgr/webpack": "^8.1.0",
                 "@testing-library/jest-dom": "^6.4.2",
                 "@testing-library/react": "^14.1.2",
-                "@testing-library/user-event": "^14.5.1",
+                "@testing-library/user-event": "^14.5.2",
                 "@types/node": "^20.11.24",
                 "@types/react": "^18.2.39",
                 "@types/react-dom": "^18.2.18",
@@ -4376,9 +4376,9 @@
             }
         },
         "node_modules/@testing-library/user-event": {
-            "version": "14.5.1",
-            "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
-            "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==",
+            "version": "14.5.2",
+            "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+            "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
             "dev": true,
             "engines": {
                 "node": ">=12",
diff --git a/package.json b/package.json
index a298a72783..079455318d 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
         "@svgr/webpack": "^8.1.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.1.2",
-        "@testing-library/user-event": "^14.5.1",
+        "@testing-library/user-event": "^14.5.2",
         "@types/node": "^20.11.24",
         "@types/react": "^18.2.39",
         "@types/react-dom": "^18.2.18",

From 398f5c71c50f3675c799e15050b3d7e376207442 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 11:31:10 -0400
Subject: [PATCH 189/194] Bump prettier from 3.1.0 to 3.2.5 (#6372)

Bumps [prettier](https://github.com/prettier/prettier) from 3.1.0 to 3.2.5.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/3.1.0...3.2.5)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 640d048c28..f9e76a32f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,7 +56,7 @@
                 "gulp-uglifycss": "^1.1.0",
                 "jest": "^29.7.0",
                 "jest-environment-jsdom": "^29.7.0",
-                "prettier": "3.1.0",
+                "prettier": "3.2.5",
                 "rollup": "^2.79.1",
                 "rollup-plugin-postcss": "^4.0.2",
                 "rollup-plugin-terser": "^7.0.2",
@@ -15461,9 +15461,9 @@
             }
         },
         "node_modules/prettier": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
-            "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==",
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+            "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
             "dev": true,
             "bin": {
                 "prettier": "bin/prettier.cjs"
diff --git a/package.json b/package.json
index 079455318d..6a2248be1a 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
         "gulp-uglifycss": "^1.1.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "prettier": "3.1.0",
+        "prettier": "3.2.5",
         "rollup": "^2.79.1",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-terser": "^7.0.2",

From 4f1efe4f16967a33728d9f109e2aef012a5dec92 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 11:31:18 -0400
Subject: [PATCH 190/194] Bump @types/react-transition-group from 4.4.9 to
 4.4.10 (#6373)

Bumps [@types/react-transition-group](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-transition-group) from 4.4.9 to 4.4.10.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-transition-group)

---
updated-dependencies:
- dependency-name: "@types/react-transition-group"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9e76a32f9..6c608dfebe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
                 "@types/node": "^20.11.24",
                 "@types/react": "^18.2.39",
                 "@types/react-dom": "^18.2.18",
-                "@types/react-transition-group": "^4.4.9",
+                "@types/react-transition-group": "^4.4.10",
                 "@typescript-eslint/eslint-plugin": "^6.13.1",
                 "eslint": "8.57.0",
                 "eslint-config-next": "14.1.0",
@@ -4557,9 +4557,9 @@
             }
         },
         "node_modules/@types/react-transition-group": {
-            "version": "4.4.9",
-            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz",
-            "integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==",
+            "version": "4.4.10",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+            "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
             "dev": true,
             "dependencies": {
                 "@types/react": "*"
diff --git a/package.json b/package.json
index 6a2248be1a..ab0410c620 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
         "@types/node": "^20.11.24",
         "@types/react": "^18.2.39",
         "@types/react-dom": "^18.2.18",
-        "@types/react-transition-group": "^4.4.9",
+        "@types/react-transition-group": "^4.4.10",
         "@typescript-eslint/eslint-plugin": "^6.13.1",
         "eslint": "8.57.0",
         "eslint-config-next": "14.1.0",

From 318be8094bd7a77de7ebdffa47a11c60a0e1c5d9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 11:31:26 -0400
Subject: [PATCH 191/194] Bump eslint-config-next from 14.1.0 to 14.1.4 (#6369)

Bumps [eslint-config-next](https://github.com/vercel/next.js/tree/HEAD/packages/eslint-config-next) from 14.1.0 to 14.1.4.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](https://github.com/vercel/next.js/commits/v14.1.4/packages/eslint-config-next)

---
updated-dependencies:
- dependency-name: eslint-config-next
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 30 +++++++++++++++---------------
 package.json      |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6c608dfebe..a95979cd5c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,7 @@
                 "@types/react-transition-group": "^4.4.10",
                 "@typescript-eslint/eslint-plugin": "^6.13.1",
                 "eslint": "8.57.0",
-                "eslint-config-next": "14.1.0",
+                "eslint-config-next": "14.1.4",
                 "eslint-config-prettier": "^9.0.0",
                 "eslint-plugin-jest-dom": "^5.1.0",
                 "gulp": "^4.0.2",
@@ -3280,9 +3280,9 @@
             "integrity": "sha512-H/69Lc5Q02dq3o+dxxy5O/oNxFsZpdL6WREtOOtOM1B/weonIwDXkekr1KV5DPVPr12IHFPrMrcJQ6bgPMfn7A=="
         },
         "node_modules/@next/eslint-plugin-next": {
-            "version": "14.1.0",
-            "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.0.tgz",
-            "integrity": "sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==",
+            "version": "14.1.4",
+            "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.4.tgz",
+            "integrity": "sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==",
             "dev": true,
             "dependencies": {
                 "glob": "10.3.10"
@@ -3320,9 +3320,9 @@
             }
         },
         "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
-            "version": "9.0.3",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-            "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+            "version": "9.0.4",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+            "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
             "dev": true,
             "dependencies": {
                 "brace-expansion": "^2.0.1"
@@ -7884,12 +7884,12 @@
             }
         },
         "node_modules/eslint-config-next": {
-            "version": "14.1.0",
-            "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.1.0.tgz",
-            "integrity": "sha512-SBX2ed7DoRFXC6CQSLc/SbLY9Ut6HxNB2wPTcoIWjUMd7aF7O/SIE7111L8FdZ9TXsNV4pulUDnfthpyPtbFUg==",
+            "version": "14.1.4",
+            "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.1.4.tgz",
+            "integrity": "sha512-cihIahbhYAWwXJwZkAaRPpUi5t9aOi/HdfWXOjZeUOqNWXHD8X22kd1KG58Dc3MVaRx3HoR/oMGk2ltcrqDn8g==",
             "dev": true,
             "dependencies": {
-                "@next/eslint-plugin-next": "14.1.0",
+                "@next/eslint-plugin-next": "14.1.4",
                 "@rushstack/eslint-patch": "^1.3.3",
                 "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
                 "eslint-import-resolver-node": "^0.3.6",
@@ -14712,12 +14712,12 @@
             }
         },
         "node_modules/path-scurry": {
-            "version": "1.10.1",
-            "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
-            "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
+            "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
             "dev": true,
             "dependencies": {
-                "lru-cache": "^9.1.1 || ^10.0.0",
+                "lru-cache": "^10.2.0",
                 "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
             },
             "engines": {
diff --git a/package.json b/package.json
index ab0410c620..cf4e9a9038 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
         "@types/react-transition-group": "^4.4.10",
         "@typescript-eslint/eslint-plugin": "^6.13.1",
         "eslint": "8.57.0",
-        "eslint-config-next": "14.1.0",
+        "eslint-config-next": "14.1.4",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-jest-dom": "^5.1.0",
         "gulp": "^4.0.2",

From 7a3210f5fdd75ed307efa8d043c3286ef3ede193 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Thu, 11 Apr 2024 17:10:19 -0400
Subject: [PATCH 192/194] Fix #6382: InputOtp wrong import (#6383)

---
 components/lib/inputotp/InputOtp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index eb6b179060..6acd94dc69 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -1,8 +1,8 @@
-import { InputText } from '@/components/lib/inputtext/InputText';
 import React, { useContext, useRef, useState } from 'react';
 import { PrimeReactContext, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
 import { ObjectUtils } from '../utils/Utils';
 import { InputOtpBase } from './BaseInputOtp';
 

From 9e57a6c0459b2466a3710090b87664a57101dcbc Mon Sep 17 00:00:00 2001
From: Niclas <NiclasvanEyk@users.noreply.github.com>
Date: Fri, 12 Apr 2024 17:27:22 +0200
Subject: [PATCH 193/194] Add missing children prop in FloatLabel.d.ts (#6388)

---
 components/lib/floatlabel/FloatLabel.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/lib/floatlabel/FloatLabel.d.ts b/components/lib/floatlabel/FloatLabel.d.ts
index a4d83807f4..648c1640b6 100644
--- a/components/lib/floatlabel/FloatLabel.d.ts
+++ b/components/lib/floatlabel/FloatLabel.d.ts
@@ -49,6 +49,11 @@ export interface FloatLabelPassThroughOptions {
  * @group Properties
  */
 export interface FloatLabelProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {FloatLabelPassThroughOptions}

From d8c7f7d9c08794c951e32ab74f558450fcb16cd9 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Fri, 12 Apr 2024 15:28:07 +0000
Subject: [PATCH 194/194] Update API doc

---
 components/doc/common/apidoc/index.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 671bfa6758..ff90bc2112 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -25697,6 +25697,14 @@
                 "props": {
                     "description": "Defines valid properties in FloatLabel component.",
                     "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
                         {
                             "name": "pt",
                             "optional": true,