From 4ccacafa4ed5860d822e7edab9bc945fc5a91c12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Mon, 22 Jan 2024 15:50:20 +0300
Subject: [PATCH 1/6] Added empty message into tree

---
 components/lib/tree/Tree.js     | 66 +++++++++++++++++++++++----------
 components/lib/tree/TreeBase.js |  2 +
 2 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index a827e1fe68..610eabd594 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PrimeReactContext } from '../api/Api';
+import { localeOption, PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { useUpdateEffect } from '../hooks/useUpdateEffect';
@@ -408,33 +408,59 @@ export const Tree = React.memo(
             );
         };
 
-        const createRootChildren = () => {
-            if (props.filter) {
-                filterChanged.current = true;
-                _filter();
-            }
+        const createEmptyMessageNode = () => {
+            const emptyMessageProps = mergeProps(
+                {
+                    className: classNames(props.contentClassName, cx('emptyMessage'))
+                },
+                ptm('emptyMessage')
+            );
+
+            return (
+                <li {...emptyMessageProps}>
+                    <span className="p-treenode-content">{localeOption('emptyMessage')}</span>
+                </li>
+            );
+        };
 
-            const value = getRootNode();
+        const createRootChildrenContainer = (children) => {
+            const containerProps = mergeProps(
+                {
+                    className: classNames(props.contentClassName, cx('container')),
+                    role: 'tree',
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
+                    style: props.contentStyle,
+                    ...ariaProps
+                },
+                ptm('container')
+            );
 
+            return <ul {...containerProps}>{children}</ul>;
+        };
+
+        const createRootChildren = (value) => {
             return value.map((node, index) => createRootChild(node, index, index === value.length - 1));
         };
 
         const createModel = () => {
             if (props.value) {
-                const rootNodes = createRootChildren();
-                const containerProps = mergeProps(
-                    {
-                        className: classNames(props.contentClassName, cx('container')),
-                        role: 'tree',
-                        'aria-label': props.ariaLabel,
-                        'aria-labelledby': props.ariaLabelledBy,
-                        style: props.contentStyle,
-                        ...ariaProps
-                    },
-                    ptm('container')
-                );
+                if (props.filter) {
+                    filterChanged.current = true;
+                    _filter();
+                }
 
-                return <ul {...containerProps}>{rootNodes}</ul>;
+                const value = getRootNode();
+
+                if (value.length > 0) {
+                    const rootNodes = createRootChildren(value);
+
+                    return createRootChildrenContainer(rootNodes);
+                } else {
+                    const emptyMessageNode = createEmptyMessageNode();
+
+                    return createRootChildrenContainer(emptyMessageNode);
+                }
             }
 
             return null;
diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js
index 5c96d169c9..3b7335bc57 100644
--- a/components/lib/tree/TreeBase.js
+++ b/components/lib/tree/TreeBase.js
@@ -6,6 +6,7 @@ const classes = {
     loadingIcon: 'p-tree-loading-icon',
     loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
     searchIcon: 'p-tree-filter-icon',
+    emptyMessage: 'p-treenode p-tree-empty-message',
     filterContainer: 'p-tree-filter-container',
     input: 'p-tree-filter p-inputtext p-component',
     header: 'p-tree-header',
@@ -117,6 +118,7 @@ export const TreeBase = ComponentBase.extend({
         value: null,
         checkboxIcon: null,
         disabled: false,
+        emptyMessage: null,
         selectionMode: null,
         selectionKeys: null,
         onSelectionChange: null,

From 653a95985d4ee9027b151ffa4a468b402cf0649d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Wed, 24 Jan 2024 05:17:56 +0300
Subject: [PATCH 2/6] Fix: Added TS Support to Doc Highlights

---
 components/doc/common/codeeditor/templates.js | 96 +++++++++++++++----
 1 file changed, 79 insertions(+), 17 deletions(-)

diff --git a/components/doc/common/codeeditor/templates.js b/components/doc/common/codeeditor/templates.js
index 37f9ed7cbb..46c35743b0 100644
--- a/components/doc/common/codeeditor/templates.js
+++ b/components/doc/common/codeeditor/templates.js
@@ -9,7 +9,59 @@ const PrimeReact = {
 
 const app_dependencies = pkg ? pkg.dependencies : {};
 
-const getConfiguredDependencies = (isUnstyled) => {
+const typeScriptDependencies = {
+    '@types/react-dom': '^18.0.0',
+    '@vitejs/plugin-react': '^1.3.0',
+    typescript: '^4.6.3'
+};
+
+const typeScriptFiles = {
+    'tsconfig.json': {
+        content: `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+    `
+    },
+    'tsconfig.node.json': {
+        content: `{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["vite.config.ts"]
+}`
+    }
+};
+
+const getConfiguredDependencies = (isUnstyled, isTypeScript) => {
     const defaultDependencies = {
         '@types/react': '^18.2.38', // For stackblitz
         react: app_dependencies['react'] || 'latest',
@@ -18,7 +70,8 @@ const getConfiguredDependencies = (isUnstyled) => {
         primereact: PrimeReact.version || 'latest', // latest
         primeicons: app_dependencies['primeicons'] || 'latest',
         vite: 'latest',
-        '@vitejs/plugin-react': 'latest'
+        '@vitejs/plugin-react': 'latest',
+        ...(isTypeScript ? typeScriptDependencies : '')
     };
 
     if (isUnstyled) {
@@ -36,7 +89,9 @@ const getConfiguredDependencies = (isUnstyled) => {
     }
 };
 
-const getUnstyledFiles = (path) => {
+const getUnstyledFiles = (path, isTypeScript) => {
+    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
+
     const tailwindConfig = {
         content: `/** @type {import('tailwindcss').Config} */
 export default {
@@ -134,7 +189,7 @@ import './index.css';
 import './flags.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''});
 root.render(
     <React.StrictMode>
         <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
@@ -145,10 +200,12 @@ root.render(
 );`
     };
 
-    return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.jsx`]: themeSwitcher };
+    return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.${fileExtension}`]: themeSwitcher };
 };
 
-const getStyledFiles = (path) => {
+const getStyledFiles = (path, isTypeScript) => {
+    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
+
     const globalCss = {
         content: `html {
     font-size: 14px;
@@ -185,7 +242,7 @@ import './index.css';
 import './flags.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''});
 root.render(
 <React.StrictMode>
     <PrimeReactProvider>
@@ -195,16 +252,18 @@ root.render(
 );`
     };
 
-    return { [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: globalCss };
+    return { [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: globalCss };
 };
 
 const getVite = (props = {}, template = 'javascript') => {
     const path = 'src/';
     const isUnstyled = props.embedded;
+    const isTypeScript = template === 'typescript';
+    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
 
     const { code: sources, title = 'primereact_demo', description = '', dependencies: pDependencies = {} } = props;
 
-    const configuredDependencies = getConfiguredDependencies(isUnstyled);
+    const configuredDependencies = getConfiguredDependencies(isUnstyled, isTypeScript);
     const dependencies = { ...configuredDependencies, ...pDependencies, 'react-scripts': '5.0.1' };
 
     const extFiles = {};
@@ -216,6 +275,8 @@ const getVite = (props = {}, template = 'javascript') => {
             };
         });
 
+    const buildType = isTypeScript ? 'tsc && vite build' : 'vite build';
+
     const packageJson = {
         content: {
             name: title.toLowerCase().replaceAll(' ', '_'),
@@ -223,10 +284,10 @@ const getVite = (props = {}, template = 'javascript') => {
             type: 'module',
             scripts: {
                 dev: 'vite',
-                build: 'vite build',
+                build: buildType,
                 preview: 'vite preview'
             },
-            main: `${path}main.jsx`,
+            main: `${path}main.${fileExtension}`,
             keywords: ['primereact', 'react', 'vite', 'starter'],
             dependencies
         }
@@ -261,33 +322,34 @@ export default defineConfig({
     </head>
     <body>
         <div id="root"></div>
-        <script type="module" src="/src/main.jsx"></script>
+        <script type="module" src="/src/main.${fileExtension}"></script>
     </body>
 </html>`
     };
 
-    const configuredFiles = isUnstyled ? getUnstyledFiles(path) : getStyledFiles(path);
+    const configuredFiles = isUnstyled ? getUnstyledFiles(path, isTypeScript) : getStyledFiles(path, isTypeScript);
 
     let files = {
         'package.json': packageJson,
         'vite.config.js': viteConfig,
         'index.html': indexHtml,
         [`${path}flags.css`]: flagsCss,
-        [`${path}App.jsx`]: {
+        [`${path}App.${fileExtension}`]: {
             content: sources[template].replace(/^\n/, '')
         },
-        ...configuredFiles
+        ...configuredFiles,
+        ...(isTypeScript ? typeScriptFiles : '')
     };
 
     if (props.service) {
         props.service.forEach((name) => {
-            files[`${path}service/${name}.jsx`] = {
+            files[`${path}service/${name}.${fileExtension}`] = {
                 content: services[name]
             };
         });
     }
 
-    return { files, dependencies, sourceFileName: `${path}App.jsx` };
+    return { files, dependencies, sourceFileName: `${path}App.${fileExtension}` };
 };
 
 const flagsCss = {

From 0346efa37ac039da2988484c3dbd038839e4277f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Wed, 24 Jan 2024 05:18:29 +0300
Subject: [PATCH 3/6] Revert "Fix: Added TS Support to Doc Highlights"

This reverts commit 653a95985d4ee9027b151ffa4a468b402cf0649d.
---
 components/doc/common/codeeditor/templates.js | 96 ++++---------------
 1 file changed, 17 insertions(+), 79 deletions(-)

diff --git a/components/doc/common/codeeditor/templates.js b/components/doc/common/codeeditor/templates.js
index 46c35743b0..37f9ed7cbb 100644
--- a/components/doc/common/codeeditor/templates.js
+++ b/components/doc/common/codeeditor/templates.js
@@ -9,59 +9,7 @@ const PrimeReact = {
 
 const app_dependencies = pkg ? pkg.dependencies : {};
 
-const typeScriptDependencies = {
-    '@types/react-dom': '^18.0.0',
-    '@vitejs/plugin-react': '^1.3.0',
-    typescript: '^4.6.3'
-};
-
-const typeScriptFiles = {
-    'tsconfig.json': {
-        content: `{
-  "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "allowJs": true,
-
-    /* Bundler mode */
-    "moduleResolution": "node",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
-    `
-    },
-    'tsconfig.node.json': {
-        content: `{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
-  },
-  "include": ["vite.config.ts"]
-}`
-    }
-};
-
-const getConfiguredDependencies = (isUnstyled, isTypeScript) => {
+const getConfiguredDependencies = (isUnstyled) => {
     const defaultDependencies = {
         '@types/react': '^18.2.38', // For stackblitz
         react: app_dependencies['react'] || 'latest',
@@ -70,8 +18,7 @@ const getConfiguredDependencies = (isUnstyled, isTypeScript) => {
         primereact: PrimeReact.version || 'latest', // latest
         primeicons: app_dependencies['primeicons'] || 'latest',
         vite: 'latest',
-        '@vitejs/plugin-react': 'latest',
-        ...(isTypeScript ? typeScriptDependencies : '')
+        '@vitejs/plugin-react': 'latest'
     };
 
     if (isUnstyled) {
@@ -89,9 +36,7 @@ const getConfiguredDependencies = (isUnstyled, isTypeScript) => {
     }
 };
 
-const getUnstyledFiles = (path, isTypeScript) => {
-    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
-
+const getUnstyledFiles = (path) => {
     const tailwindConfig = {
         content: `/** @type {import('tailwindcss').Config} */
 export default {
@@ -189,7 +134,7 @@ import './index.css';
 import './flags.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''});
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     <React.StrictMode>
         <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
@@ -200,12 +145,10 @@ root.render(
 );`
     };
 
-    return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.${fileExtension}`]: themeSwitcher };
+    return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.jsx`]: themeSwitcher };
 };
 
-const getStyledFiles = (path, isTypeScript) => {
-    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
-
+const getStyledFiles = (path) => {
     const globalCss = {
         content: `html {
     font-size: 14px;
@@ -242,7 +185,7 @@ import './index.css';
 import './flags.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''});
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
 <React.StrictMode>
     <PrimeReactProvider>
@@ -252,18 +195,16 @@ root.render(
 );`
     };
 
-    return { [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: globalCss };
+    return { [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: globalCss };
 };
 
 const getVite = (props = {}, template = 'javascript') => {
     const path = 'src/';
     const isUnstyled = props.embedded;
-    const isTypeScript = template === 'typescript';
-    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
 
     const { code: sources, title = 'primereact_demo', description = '', dependencies: pDependencies = {} } = props;
 
-    const configuredDependencies = getConfiguredDependencies(isUnstyled, isTypeScript);
+    const configuredDependencies = getConfiguredDependencies(isUnstyled);
     const dependencies = { ...configuredDependencies, ...pDependencies, 'react-scripts': '5.0.1' };
 
     const extFiles = {};
@@ -275,8 +216,6 @@ const getVite = (props = {}, template = 'javascript') => {
             };
         });
 
-    const buildType = isTypeScript ? 'tsc && vite build' : 'vite build';
-
     const packageJson = {
         content: {
             name: title.toLowerCase().replaceAll(' ', '_'),
@@ -284,10 +223,10 @@ const getVite = (props = {}, template = 'javascript') => {
             type: 'module',
             scripts: {
                 dev: 'vite',
-                build: buildType,
+                build: 'vite build',
                 preview: 'vite preview'
             },
-            main: `${path}main.${fileExtension}`,
+            main: `${path}main.jsx`,
             keywords: ['primereact', 'react', 'vite', 'starter'],
             dependencies
         }
@@ -322,34 +261,33 @@ export default defineConfig({
     </head>
     <body>
         <div id="root"></div>
-        <script type="module" src="/src/main.${fileExtension}"></script>
+        <script type="module" src="/src/main.jsx"></script>
     </body>
 </html>`
     };
 
-    const configuredFiles = isUnstyled ? getUnstyledFiles(path, isTypeScript) : getStyledFiles(path, isTypeScript);
+    const configuredFiles = isUnstyled ? getUnstyledFiles(path) : getStyledFiles(path);
 
     let files = {
         'package.json': packageJson,
         'vite.config.js': viteConfig,
         'index.html': indexHtml,
         [`${path}flags.css`]: flagsCss,
-        [`${path}App.${fileExtension}`]: {
+        [`${path}App.jsx`]: {
             content: sources[template].replace(/^\n/, '')
         },
-        ...configuredFiles,
-        ...(isTypeScript ? typeScriptFiles : '')
+        ...configuredFiles
     };
 
     if (props.service) {
         props.service.forEach((name) => {
-            files[`${path}service/${name}.${fileExtension}`] = {
+            files[`${path}service/${name}.jsx`] = {
                 content: services[name]
             };
         });
     }
 
-    return { files, dependencies, sourceFileName: `${path}App.${fileExtension}` };
+    return { files, dependencies, sourceFileName: `${path}App.jsx` };
 };
 
 const flagsCss = {

From f8af6a902287e14bb6c57db9612778e1cd2ed682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 15 Feb 2024 09:48:15 +0300
Subject: [PATCH 4/6] Added contrast severity option

---
 components/doc/splitbutton/outlineddoc.js   | 4 ++++
 components/doc/splitbutton/raiseddoc.js     | 4 ++++
 components/doc/splitbutton/roundeddoc.js    | 4 ++++
 components/doc/splitbutton/severitydoc.js   | 4 ++++
 components/doc/splitbutton/templatedoc.js   | 8 ++++----
 components/lib/splitbutton/splitbutton.d.ts | 4 ++--
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/components/doc/splitbutton/outlineddoc.js b/components/doc/splitbutton/outlineddoc.js
index cce4906ba0..0945e31d34 100644
--- a/components/doc/splitbutton/outlineddoc.js
+++ b/components/doc/splitbutton/outlineddoc.js
@@ -53,6 +53,7 @@ export function OutlinedDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function OutlinedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function OutlinedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function OutlinedDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/raiseddoc.js b/components/doc/splitbutton/raiseddoc.js
index f94d8efc63..b8ae8bc513 100644
--- a/components/doc/splitbutton/raiseddoc.js
+++ b/components/doc/splitbutton/raiseddoc.js
@@ -53,6 +53,7 @@ export function RaisedDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function RaisedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function RaisedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function RaisedDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/roundeddoc.js b/components/doc/splitbutton/roundeddoc.js
index fd7dc2310f..5cf4d48ba0 100644
--- a/components/doc/splitbutton/roundeddoc.js
+++ b/components/doc/splitbutton/roundeddoc.js
@@ -53,6 +53,7 @@ export function RoundedDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function RoundedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function RoundedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function RoundedDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/severitydoc.js b/components/doc/splitbutton/severitydoc.js
index ccbecab98b..379863e402 100644
--- a/components/doc/splitbutton/severitydoc.js
+++ b/components/doc/splitbutton/severitydoc.js
@@ -53,6 +53,7 @@ export function SeverityDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function SeverityDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function SeverityDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function SeverityDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/templatedoc.js b/components/doc/splitbutton/templatedoc.js
index 45c25ed11f..8cb1a13bba 100644
--- a/components/doc/splitbutton/templatedoc.js
+++ b/components/doc/splitbutton/templatedoc.js
@@ -42,7 +42,7 @@ export function TemplateDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+<SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -87,7 +87,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
         </div>
     )
 }
@@ -136,7 +136,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
         </div>
     )
 }
@@ -152,7 +152,7 @@ export default function TemplateDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Toast ref={toast}></Toast>
-                <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+                <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts
index de1f048fe7..a3d7e780f2 100644
--- a/components/lib/splitbutton/splitbutton.d.ts
+++ b/components/lib/splitbutton/splitbutton.d.ts
@@ -127,9 +127,9 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
      */
     outlined?: boolean | undefined;
     /**
-     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger".
+     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger", "contrast".
      */
-    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'contrast' | undefined;
     /**
      * Defines the size of the button, valid values are "small" and "large".
      */

From cac4a811bc0c346dc4ae8d542f72c31c89866f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 15 Feb 2024 09:48:52 +0300
Subject: [PATCH 5/6] Theme updates due to contrast severity

---
 public/themes/arya-blue/theme.css             |  77 +++-
 public/themes/arya-green/theme.css            |  77 +++-
 public/themes/arya-orange/theme.css           |  77 +++-
 public/themes/bootstrap4-dark-blue/theme.css  | 125 ++++-
 public/themes/bootstrap4-light-blue/theme.css | 125 ++++-
 public/themes/fluent-light/theme.css          |  77 +++-
 public/themes/lara-dark-amber/theme.css       | 125 ++++-
 public/themes/lara-dark-blue/theme.css        | 125 ++++-
 public/themes/lara-dark-cyan/theme.css        | 125 ++++-
 public/themes/lara-dark-green/theme.css       | 125 ++++-
 public/themes/lara-dark-indigo/theme.css      | 125 ++++-
 public/themes/lara-dark-pink/theme.css        | 125 ++++-
 public/themes/lara-dark-teal/theme.css        | 125 ++++-
 public/themes/lara-light-amber/theme.css      | 125 ++++-
 public/themes/lara-light-blue/theme.css       | 125 ++++-
 public/themes/lara-light-cyan/theme.css       | 125 ++++-
 public/themes/lara-light-green/theme.css      | 125 ++++-
 public/themes/lara-light-indigo/theme.css     | 125 ++++-
 public/themes/lara-light-pink/theme.css       | 125 ++++-
 public/themes/lara-light-teal/theme.css       | 125 ++++-
 public/themes/luna-amber/theme.css            |  77 +++-
 public/themes/luna-blue/theme.css             |  77 +++-
 public/themes/luna-green/theme.css            |  77 +++-
 public/themes/luna-pink/theme.css             |  77 +++-
 public/themes/md-dark-indigo/theme.css        | 431 ++++++++++++------
 public/themes/md-light-indigo/theme.css       | 159 ++++++-
 public/themes/mdc-dark-indigo/theme.css       | 431 ++++++++++++------
 public/themes/mdc-light-indigo/theme.css      | 159 ++++++-
 public/themes/mira/theme.css                  |  77 +++-
 public/themes/nano/theme.css                  |  77 +++-
 public/themes/nova-accent/theme.css           |  77 +++-
 public/themes/nova-alt/theme.css              |  77 +++-
 public/themes/nova/theme.css                  |  77 +++-
 public/themes/rhea/theme.css                  |  77 +++-
 public/themes/saga-blue/theme.css             |  77 +++-
 public/themes/saga-green/theme.css            |  77 +++-
 public/themes/saga-orange/theme.css           |  77 +++-
 public/themes/soho-dark/theme.css             | 175 +++++--
 public/themes/soho-light/theme.css            | 125 ++++-
 public/themes/tailwind-light/theme.css        |  77 +++-
 public/themes/vela-blue/theme.css             |  77 +++-
 public/themes/vela-green/theme.css            |  77 +++-
 public/themes/vela-orange/theme.css           |  77 +++-
 public/themes/viva-dark/theme.css             | 125 ++++-
 public/themes/viva-light/theme.css            | 125 ++++-
 45 files changed, 5005 insertions(+), 342 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index f4d0f37f2b..3f65aa7466 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #2396f2;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #64b5f6;
+  }
+  .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: #64b5f6;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/arya-green/theme.css b/public/themes/arya-green/theme.css
index ba69e82390..3f44d9b827 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #54b358;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #81c784;
+  }
+  .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: #81c784;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index e591e7aa8d..abd50a6c65 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #ffc50c;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffd54f;
+  }
+  .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: #ffd54f;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 8e73324138..274cb79480 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #151515;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f19ea6;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e3f3fe;
@@ -2446,6 +2463,54 @@
     border-color: transparent;
     color: #f19ea6;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #8dd0ff;
     background: transparent;
@@ -6223,6 +6288,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e3f3fe;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #8dd0ff;
+  }
+  .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: #8dd0ff;
+    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 b8d33e02c2..ea273b88c8 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #ffffff;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #495057;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #dc3545;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
@@ -2446,6 +2463,54 @@
     border-color: transparent;
     color: #dc3545;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(33, 37, 41, 0.16);
+    border-color: transparent;
+    color: #212529;
+  }
   .p-button.p-button-link {
     color: #007bff;
     background: transparent;
@@ -6223,6 +6288,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e9ecef;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007bff;
+  }
+  .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: #007bff;
+    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 7809f02929..0d0b6e3c51 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #ffffff;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #323130;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #a4252c;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: inset 0 0 0 1px #605e5c;
@@ -6165,6 +6182,64 @@
     outline-offset: 0;
     box-shadow: inset 0 0 0 1px #605e5c;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #edebe9;
+    border-radius: 2px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #0078d4;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 2px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #0078d4;
+    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: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .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: 2px;
+    border-top-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 2px;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 03f46db27a..7515e8bb98 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #fde68a;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #fbbf24;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #fbbf24;
+  }
+  .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: #fbbf24;
+    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;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index ef8586f593..9beaf28a6a 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #bfdbfe;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #60a5fa;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #60a5fa;
+  }
+  .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: #60a5fa;
+    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;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index ebb8d6400b..a5f5ee0b55 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #a5f3fc;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #22d3ee;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #22d3ee;
+  }
+  .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: #22d3ee;
+    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;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 710ca089f2..5f56096c60 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #a7f3d0;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #34d399;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #34d399;
+  }
+  .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: #34d399;
+    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;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 8775095ca4..2e097168a2 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #c7d2fe;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #818cf8;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #818cf8;
+  }
+  .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: #818cf8;
+    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;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index d19ccaa6b9..4d573b7895 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #fbcfe8;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #f472b6;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #f472b6;
+  }
+  .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: #f472b6;
+    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;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index dc7162cce9..6a4e17ac40 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #99f6e4;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #f87171;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #2dd4bf;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #2dd4bf;
+  }
+  .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: #2dd4bf;
+    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;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index cf8d173f99..9aeb655180 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #b45309;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #fef08a;
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #b45309;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #fef08a;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #f59e0b;
+  }
+  .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: #f59e0b;
+    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;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 2c9e24fe47..725ff36f8f 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #1d4ed8;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #bfdbfe;
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #1d4ed8;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #3b82f6;
+  }
+  .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: #3b82f6;
+    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;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 16dd45a914..788d6bfc38 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #0e7490;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a5f3fc;
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #0e7490;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a5f3fc;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #06b6d4;
+  }
+  .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: #06b6d4;
+    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;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 425562dead..8025372449 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #047857;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #047857;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #10b981;
+  }
+  .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: #10b981;
+    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;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 429a4e4ad7..d8fdd90b1b 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #4338ca;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #c7d2fe;
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #4338ca;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #c7d2fe;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #6366f1;
+  }
+  .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: #6366f1;
+    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;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index e05e707fea..31f814b5aa 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #be185d;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #fbcfe8;
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #be185d;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #fbcfe8;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ec4899;
+  }
+  .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: #ec4899;
+    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;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 533d8231f8..bc3fece998 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1742,9 +1742,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #0f766e;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1757,7 +1774,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #99f6e4;
@@ -2454,6 +2471,54 @@
     border-color: transparent;
     color: #ef4444;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
   .p-button.p-button-link {
     color: #0f766e;
     background: transparent;
@@ -6182,6 +6247,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #99f6e4;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #14b8a6;
+  }
+  .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: #14b8a6;
+    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;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 985671cf93..3c00680356 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #212529;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #dedede;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e4018d;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
@@ -6174,6 +6191,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffe082;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ffe082;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index e939b06272..1ef12dea3b 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #212529;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #dedede;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e4018d;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
@@ -6174,6 +6191,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #81d4fa;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #81d4fa;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 67a5a9ec32..4b0b99062c 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #212529;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #dedede;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e4018d;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
@@ -6174,6 +6191,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #c5e1a5;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #c5e1a5;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 37758d2db3..94ec5f22fe 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #212529;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #dedede;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e4018d;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
@@ -6174,6 +6191,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #f48fb1;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #f48fb1;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index c836ad32c2..62d7ca425c 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,20 +733,20 @@
     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 {
     width: 18px;
     height: 18px;
   }
   .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;
@@ -790,13 +790,13 @@
     border-color: #f44435;
   }
   .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-checkbox-box.p-highlight {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
     background: #9FA8DA;
@@ -856,12 +856,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 {
@@ -976,7 +976,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;
@@ -991,13 +991,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;
@@ -1039,7 +1039,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;
@@ -1081,7 +1081,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;
@@ -1103,14 +1103,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,
@@ -1171,7 +1171,7 @@
     height: 1rem;
   }
   .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;
   }
@@ -1193,7 +1193,7 @@
     box-shadow: none;
   }
   .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
   }
   .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
     background: rgba(159, 168, 218, 0.5);
@@ -1214,7 +1214,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;
@@ -1281,13 +1281,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;
@@ -1327,14 +1327,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;
@@ -1387,15 +1387,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;
@@ -1427,7 +1427,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;
@@ -1523,7 +1523,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;
@@ -1538,13 +1538,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;
@@ -1556,7 +1556,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;
   }
@@ -1585,7 +1585,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;
@@ -1649,7 +1649,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;
@@ -1695,7 +1695,7 @@
     height: 20px;
   }
   .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;
@@ -1734,10 +1734,10 @@
     outline: 0 none;
   }
   .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-radiobutton-box:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
     background: #121212;
@@ -1745,9 +1745,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #121212;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #9FA8DA;
     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);
@@ -1760,7 +1777,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f44435;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: none;
@@ -1815,7 +1832,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;
   }
@@ -1855,7 +1872,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;
   }
@@ -1881,7 +1898,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;
   }
@@ -1911,7 +1928,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;
@@ -1962,13 +1979,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.p-button {
     background: #2f2f2f;
@@ -2457,6 +2474,54 @@
     border-color: transparent;
     color: #ef9a9a;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #9FA8DA;
     background: transparent;
@@ -3279,7 +3344,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;
@@ -3287,12 +3352,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;
@@ -3301,7 +3366,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;
@@ -3365,12 +3430,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;
@@ -3383,10 +3448,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 {
@@ -3550,12 +3615,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;
@@ -3628,11 +3693,11 @@
     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);
+    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(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 {
@@ -4044,7 +4109,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;
@@ -4054,7 +4119,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;
@@ -4116,10 +4181,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;
@@ -4127,7 +4192,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);
@@ -4542,7 +4607,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);
@@ -4563,7 +4628,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 {
@@ -4705,7 +4770,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);
@@ -4745,7 +4810,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 {
@@ -4806,7 +4871,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 {
@@ -4856,7 +4921,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);
@@ -4943,7 +5008,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);
@@ -4978,7 +5043,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 {
@@ -5058,7 +5123,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);
@@ -5086,7 +5151,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 {
@@ -5115,7 +5180,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 {
@@ -5181,7 +5246,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 {
@@ -5231,7 +5296,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);
@@ -5392,7 +5457,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);
@@ -5416,7 +5481,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) {
@@ -5493,7 +5558,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);
@@ -5534,7 +5599,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 {
@@ -5584,7 +5649,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;
@@ -5690,7 +5755,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);
@@ -5711,7 +5776,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 {
@@ -6102,7 +6167,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 {
@@ -6128,7 +6193,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;
@@ -6234,6 +6299,64 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(159, 168, 218, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #9FA8DA;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #9FA8DA;
+    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: 4px;
@@ -6372,8 +6495,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;
@@ -6383,13 +6506,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;
   }
@@ -6586,8 +6709,39 @@
   .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 {
     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-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-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-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-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-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);
+  }
   .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);
@@ -6637,7 +6791,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;
@@ -6664,8 +6818,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;
@@ -6675,13 +6829,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;
   }
@@ -6742,8 +6896,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;
@@ -6753,13 +6907,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;
   }
@@ -6798,15 +6952,15 @@
     transition: box-shadow 0.2s;
   }
   .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;
   }
   .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus {
     border-color: #9FA8DA;
@@ -6866,8 +7020,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;
@@ -6877,13 +7031,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;
   }
@@ -6953,8 +7107,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;
@@ -6964,13 +7118,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;
   }
@@ -7016,20 +7170,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;
   }
@@ -7049,8 +7203,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;
@@ -7166,6 +7320,9 @@
   .p-menubar .p-menuitem .p-menuitem-link:focus {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
   .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger {
     background-image: none;
     background: transparent;
@@ -7192,8 +7349,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;
@@ -7203,13 +7360,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;
   }
@@ -7357,10 +7514,10 @@
     transition: box-shadow 0.2s;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus {
     border-color: #9FA8DA;
@@ -7602,8 +7759,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;
@@ -7613,13 +7770,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-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 07ed790ef5..dca8ca8376 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1745,9 +1745,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #ffffff;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #3F51B5;
     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);
@@ -1760,7 +1777,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #b00020;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: none;
@@ -2457,6 +2474,54 @@
     border-color: transparent;
     color: #d32f2f;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(33, 33, 33, 0.16);
+    border-color: transparent;
+    color: #212121;
+  }
   .p-button.p-button-link {
     color: #3F51B5;
     background: transparent;
@@ -6234,6 +6299,64 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(63, 81, 181, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #3F51B5;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #3F51B5;
+    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: 4px;
@@ -6586,6 +6709,37 @@
   .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 {
     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-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-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-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-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-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);
+  }
   .p-calendar-w-btn {
     border: 1px solid rgba(0, 0, 0, 0.38);
     background: #ffffff;
@@ -7166,6 +7320,9 @@
   .p-menubar .p-menuitem .p-menuitem-link:focus {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
   .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger {
     background-image: none;
     background: transparent;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 745ee08ace..870ac1c3b5 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,20 +733,20 @@
     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 {
     width: 18px;
     height: 18px;
   }
   .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;
@@ -790,13 +790,13 @@
     border-color: #f44435;
   }
   .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-checkbox-box.p-highlight {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
     background: #9FA8DA;
@@ -856,12 +856,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 {
@@ -976,7 +976,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;
@@ -991,13 +991,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;
@@ -1039,7 +1039,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;
@@ -1081,7 +1081,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;
@@ -1103,14 +1103,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,
@@ -1171,7 +1171,7 @@
     height: 1rem;
   }
   .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;
   }
@@ -1193,7 +1193,7 @@
     box-shadow: none;
   }
   .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
   }
   .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
     background: rgba(159, 168, 218, 0.5);
@@ -1214,7 +1214,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;
@@ -1281,13 +1281,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;
@@ -1327,14 +1327,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;
@@ -1387,15 +1387,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;
@@ -1427,7 +1427,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;
@@ -1523,7 +1523,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;
@@ -1538,13 +1538,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;
@@ -1556,7 +1556,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;
   }
@@ -1585,7 +1585,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;
@@ -1649,7 +1649,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;
@@ -1695,7 +1695,7 @@
     height: 20px;
   }
   .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;
@@ -1734,10 +1734,10 @@
     outline: 0 none;
   }
   .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-radiobutton-box:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
     background: #121212;
@@ -1745,9 +1745,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #121212;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #9FA8DA;
     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);
@@ -1760,7 +1777,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f44435;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: none;
@@ -1815,7 +1832,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;
   }
@@ -1855,7 +1872,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;
   }
@@ -1881,7 +1898,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;
   }
@@ -1911,7 +1928,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;
@@ -1962,13 +1979,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.p-button {
     background: #2f2f2f;
@@ -2457,6 +2474,54 @@
     border-color: transparent;
     color: #ef9a9a;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #9FA8DA;
     background: transparent;
@@ -3279,7 +3344,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;
@@ -3287,12 +3352,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;
@@ -3301,7 +3366,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;
@@ -3365,12 +3430,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;
@@ -3383,10 +3448,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 {
@@ -3550,12 +3615,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;
@@ -3628,11 +3693,11 @@
     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);
+    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(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 {
@@ -4044,7 +4109,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;
@@ -4054,7 +4119,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;
@@ -4116,10 +4181,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;
@@ -4127,7 +4192,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);
@@ -4542,7 +4607,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);
@@ -4563,7 +4628,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 {
@@ -4705,7 +4770,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);
@@ -4745,7 +4810,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 {
@@ -4806,7 +4871,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 {
@@ -4856,7 +4921,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);
@@ -4943,7 +5008,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);
@@ -4978,7 +5043,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 {
@@ -5058,7 +5123,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);
@@ -5086,7 +5151,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 {
@@ -5115,7 +5180,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 {
@@ -5181,7 +5246,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 {
@@ -5231,7 +5296,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);
@@ -5392,7 +5457,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);
@@ -5416,7 +5481,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) {
@@ -5493,7 +5558,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);
@@ -5534,7 +5599,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 {
@@ -5584,7 +5649,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;
@@ -5690,7 +5755,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);
@@ -5711,7 +5776,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 {
@@ -6102,7 +6167,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 {
@@ -6128,7 +6193,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;
@@ -6234,6 +6299,64 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(159, 168, 218, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #9FA8DA;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #9FA8DA;
+    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: 4px;
@@ -6372,8 +6495,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;
@@ -6383,13 +6506,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;
   }
@@ -6586,8 +6709,39 @@
   .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 {
     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-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-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-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-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-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);
+  }
   .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);
@@ -6637,7 +6791,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;
@@ -6664,8 +6818,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;
@@ -6675,13 +6829,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;
   }
@@ -6742,8 +6896,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;
@@ -6753,13 +6907,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;
   }
@@ -6798,15 +6952,15 @@
     transition: box-shadow 0.2s;
   }
   .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;
   }
   .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus {
     border-color: #9FA8DA;
@@ -6866,8 +7020,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;
@@ -6877,13 +7031,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;
   }
@@ -6953,8 +7107,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;
@@ -6964,13 +7118,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;
   }
@@ -7016,20 +7170,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;
   }
@@ -7049,8 +7203,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;
@@ -7166,6 +7320,9 @@
   .p-menubar .p-menuitem .p-menuitem-link:focus {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
   .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger {
     background-image: none;
     background: transparent;
@@ -7192,8 +7349,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;
@@ -7203,13 +7360,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;
   }
@@ -7357,10 +7514,10 @@
     transition: box-shadow 0.2s;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus {
     border-color: #9FA8DA;
@@ -7602,8 +7759,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;
@@ -7613,13 +7770,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-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 03b43807e8..804a332b5d 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1745,9 +1745,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #ffffff;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #3F51B5;
     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);
@@ -1760,7 +1777,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #b00020;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: none;
@@ -2457,6 +2474,54 @@
     border-color: transparent;
     color: #d32f2f;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(33, 33, 33, 0.16);
+    border-color: transparent;
+    color: #212121;
+  }
   .p-button.p-button-link {
     color: #3F51B5;
     background: transparent;
@@ -6234,6 +6299,64 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(63, 81, 181, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #3F51B5;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #3F51B5;
+    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: 4px;
@@ -6586,6 +6709,37 @@
   .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 {
     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-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-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-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-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-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);
+  }
   .p-calendar-w-btn {
     border: 1px solid rgba(0, 0, 0, 0.38);
     background: #ffffff;
@@ -7166,6 +7320,9 @@
   .p-menubar .p-menuitem .p-menuitem-link:focus {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
   .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger {
     background-image: none;
     background: transparent;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index d873599dfc..67b20f13c6 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1747,9 +1747,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #81a1c1;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4c566a;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1762,7 +1779,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #bf616a;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #c0d0e0;
@@ -6236,6 +6253,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #c0d0e0;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e9f0;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #5e81ac;
+  }
+  .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: #5e81ac;
+    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/nano/theme.css b/public/themes/nano/theme.css
index 5d174c729e..9803495615 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #0e5d9a;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #343a3f;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e74c3c;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #90c9f5;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #90c9f5;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 1px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #1174c0;
+  }
+  .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: #1174c0;
+    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: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .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: 1px;
+    border-top-right-radius: 1px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .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/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 584a16b509..5332055c02 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #005b9f;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #333333;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e4018d;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
@@ -6165,6 +6182,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007ad9;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #007ad9;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index d63f2e988e..a60afe59c7 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #ffffff;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #333333;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e4018d;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
@@ -6174,6 +6191,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007ad9;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #007ad9;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 54fb418ce1..325fdfcb4d 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1731,9 +1731,26 @@
   .p-highlight .p-radiobutton .p-radiobutton-box {
     border-color: #ffffff;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #333333;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1746,7 +1763,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e4018d;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
@@ -6174,6 +6191,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007ad9;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #007ad9;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 4fdfdbba5f..a6614f4e3c 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #617c8a;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #666666;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f3b9b9;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #e4e9ec;
@@ -6165,6 +6182,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #e4e9ec;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #efefef;
+    border-radius: 2px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #7b95a3;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #7b95a3;
+    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: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .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: 2px;
+    border-top-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 24px;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 21ecd1a446..74df840254 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #0b7ad1;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #495057;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e74c3c;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a6d5fa;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a6d5fa;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #2196f3;
+  }
+  .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: #2196f3;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/saga-green/theme.css b/public/themes/saga-green/theme.css
index 848416417a..be2d4936a0 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #3d8c40;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #495057;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e74c3c;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #b7e0b8;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #b7e0b8;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #4caf50;
+  }
+  .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: #4caf50;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index cb2519d539..dce5b0c37d 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #d29d00;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #495057;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #e74c3c;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #ffe69c;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #ffe69c;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffc107;
+  }
+  .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: #ffc107;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index d23b0688e9..aa88f4205c 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;
@@ -755,7 +755,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 {
@@ -769,7 +769,7 @@
   .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
     border-color: #b19df7;
@@ -783,7 +783,7 @@
   .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-checkbox.p-invalid > .p-checkbox-box {
     border-color: #ff9a9a;
@@ -1715,7 +1715,7 @@
     width: 12px;
     height: 12px;
     transition-duration: 0.2s;
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-radiobutton .p-radiobutton-box.p-highlight {
     border-color: #b19df7;
@@ -1724,7 +1724,7 @@
   .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-radiobutton.p-invalid > .p-radiobutton-box {
     border-color: #ff9a9a;
@@ -1744,9 +1744,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #9378f4;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1759,7 +1776,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e0d8fc;
@@ -1795,20 +1812,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;
@@ -1991,26 +2008,26 @@
   .p-togglebutton.p-button.p-highlight {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton.p-button.p-highlight .p-button-icon-left,
   .p-togglebutton.p-button.p-highlight .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton.p-button.p-highlight:hover {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
   .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton.p-button.p-invalid > .p-button {
     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;
@@ -2020,12 +2037,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 {
@@ -2107,7 +2124,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);
@@ -2456,6 +2473,54 @@
     border-color: transparent;
     color: #eb9a9c;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #b19df7;
     background: transparent;
@@ -3878,7 +3943,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;
@@ -4315,7 +4380,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;
@@ -4326,7 +4391,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;
@@ -6140,7 +6205,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;
@@ -6184,6 +6249,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e0d8fc;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #3e4053;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #b19df7;
+  }
+  .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: #b19df7;
+    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;
@@ -6196,7 +6319,7 @@
     background: #b19df7;
   }
   .p-progressbar .p-progressbar-label {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     line-height: 1.5rem;
   }
   .p-terminal {
@@ -6212,7 +6335,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;
@@ -6253,7 +6376,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 957fef8f0b..55d3760bc8 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1744,9 +1744,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #5935f1;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #043d75;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1759,7 +1776,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ea5455;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #c7bbfa;
@@ -2456,6 +2473,54 @@
     border-color: transparent;
     color: #ea5455;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(33, 37, 41, 0.16);
+    border-color: transparent;
+    color: #212529;
+  }
   .p-button.p-button-link {
     color: #5935f1;
     background: transparent;
@@ -6184,6 +6249,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #c7bbfa;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dfe7ef;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #7254f3;
+  }
+  .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: #7254f3;
+    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;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 5afb470ab2..74ab005936 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1753,9 +1753,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #4f46e5;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #3f3f46;
     transition: none;
@@ -1768,7 +1785,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #ef4444;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #6366f1;
@@ -6242,6 +6259,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #6366f1;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 0.375rem;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #4f46e5;
+  }
+  .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: #4f46e5;
+    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: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .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: 0.375rem;
+    border-top-right-radius: 0.375rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .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/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index d980247cc2..577e30e079 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #2396f2;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #64b5f6;
+  }
+  .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: #64b5f6;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/vela-green/theme.css b/public/themes/vela-green/theme.css
index 99cb80121d..7948b4f03b 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #54b358;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #81c784;
+  }
+  .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: #81c784;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 6b6b01f861..805236338e 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #ffc50c;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffd54f;
+  }
+  .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: #ffd54f;
+    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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 12e9cf1f13..68024b99cc 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1751,9 +1751,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #7f93de;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
@@ -1766,7 +1783,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #df7e6c;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #9eade6;
@@ -2463,6 +2480,54 @@
     border-color: transparent;
     color: #e693a9;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
   .p-button.p-button-link {
     color: #7f93de;
     background: transparent;
@@ -6240,6 +6305,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #9eade6;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #263238;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #9eade6;
+  }
+  .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: #9eade6;
+    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;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 6cd951e990..312be7cb8f 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1751,9 +1751,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #3c5ece;
   }
+  .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;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #6c6c6c;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
@@ -1766,7 +1783,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #df7e6c;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem #bbc7ee;
@@ -2463,6 +2480,54 @@
     border-color: transparent;
     color: #d45472;
   }
+  .p-button.p-button-contrast, .p-buttonset.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background: rgba(59, 59, 59, 0.16);
+    border-color: transparent;
+    color: #3b3b3b;
+  }
   .p-button.p-button-link {
     color: #3c5ece;
     background: transparent;
@@ -6240,6 +6305,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem #bbc7ee;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #ebebeb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #5472d4;
+  }
+  .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: #5472d4;
+    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;

From 22fc14468e9cf14c847b0b778bd09c3071dde975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Thu, 15 Feb 2024 14:29:48 +0300
Subject: [PATCH 6/6] Tailwind doc contrast variant

---
 components/doc/splitbutton/theming/tailwinddoc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/doc/splitbutton/theming/tailwinddoc.js b/components/doc/splitbutton/theming/tailwinddoc.js
index 2b2cee543c..7b21d973b8 100644
--- a/components/doc/splitbutton/theming/tailwinddoc.js
+++ b/components/doc/splitbutton/theming/tailwinddoc.js
@@ -95,6 +95,7 @@ export default function UnstyledDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" className="mb-2" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" className="mb-2" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" className="mb-2" />
         </div>
     )
 }