From 9a29cbc990e609a4332ac15a1894a41956e62028 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 4 Feb 2024 19:11:37 +0300
Subject: [PATCH] Fixed #5203 - MeterGroup Refactor

---
 .../lib/metergroup/style/MeterGroupStyle.js   |  49 ++--
 doc/metergroup/BasicDoc.vue                   |   2 +-
 doc/metergroup/IconDoc.vue                    |  69 ++++++
 doc/metergroup/LabelDoc.vue                   |  36 +--
 doc/metergroup/MinMaxDoc.vue                  |  32 +--
 doc/metergroup/MultipleDoc.vue                |  23 +-
 doc/metergroup/TemplateDoc.vue                | 213 ++++++++++++++++++
 doc/metergroup/TemplatingDoc.vue              | 153 -------------
 doc/metergroup/VerticalDoc.vue                |  37 +--
 pages/metergroup/index.vue                    |  28 ++-
 public/themes/arya-blue/theme.css             |  41 ++--
 public/themes/arya-green/theme.css            |  41 ++--
 public/themes/arya-orange/theme.css           |  41 ++--
 public/themes/arya-purple/theme.css           |  41 ++--
 public/themes/aura-dark-amber/theme.css       |  41 ++--
 public/themes/aura-dark-blue/theme.css        |  41 ++--
 public/themes/aura-dark-cyan/theme.css        |  41 ++--
 public/themes/aura-dark-green/theme.css       |  41 ++--
 public/themes/aura-dark-indigo/theme.css      |  41 ++--
 public/themes/aura-dark-lime/theme.css        |  41 ++--
 public/themes/aura-dark-noir/theme.css        |  41 ++--
 public/themes/aura-dark-pink/theme.css        |  41 ++--
 public/themes/aura-dark-purple/theme.css      |  41 ++--
 public/themes/aura-dark-teal/theme.css        |  41 ++--
 public/themes/aura-light-amber/theme.css      |  41 ++--
 public/themes/aura-light-blue/theme.css       |  41 ++--
 public/themes/aura-light-cyan/theme.css       |  41 ++--
 public/themes/aura-light-green/theme.css      |  41 ++--
 public/themes/aura-light-indigo/theme.css     |  41 ++--
 public/themes/aura-light-lime/theme.css       |  41 ++--
 public/themes/aura-light-noir/theme.css       |  41 ++--
 public/themes/aura-light-pink/theme.css       |  41 ++--
 public/themes/aura-light-purple/theme.css     |  41 ++--
 public/themes/aura-light-teal/theme.css       |  41 ++--
 public/themes/bootstrap4-dark-blue/theme.css  |  41 ++--
 .../themes/bootstrap4-dark-purple/theme.css   |  41 ++--
 public/themes/bootstrap4-light-blue/theme.css |  41 ++--
 .../themes/bootstrap4-light-purple/theme.css  |  41 ++--
 public/themes/fluent-light/theme.css          |  41 ++--
 public/themes/lara-dark-amber/theme.css       |  41 ++--
 public/themes/lara-dark-blue/theme.css        |  41 ++--
 public/themes/lara-dark-cyan/theme.css        |  41 ++--
 public/themes/lara-dark-green/theme.css       |  41 ++--
 public/themes/lara-dark-indigo/theme.css      |  41 ++--
 public/themes/lara-dark-pink/theme.css        |  41 ++--
 public/themes/lara-dark-purple/theme.css      |  41 ++--
 public/themes/lara-dark-teal/theme.css        |  41 ++--
 public/themes/lara-light-amber/theme.css      |  41 ++--
 public/themes/lara-light-blue/theme.css       |  41 ++--
 public/themes/lara-light-cyan/theme.css       |  41 ++--
 public/themes/lara-light-green/theme.css      |  41 ++--
 public/themes/lara-light-indigo/theme.css     |  41 ++--
 public/themes/lara-light-pink/theme.css       |  41 ++--
 public/themes/lara-light-purple/theme.css     |  41 ++--
 public/themes/lara-light-teal/theme.css       |  41 ++--
 public/themes/luna-amber/theme.css            |  41 ++--
 public/themes/luna-blue/theme.css             |  41 ++--
 public/themes/luna-green/theme.css            |  41 ++--
 public/themes/luna-pink/theme.css             |  41 ++--
 public/themes/md-dark-deeppurple/theme.css    |  41 ++--
 public/themes/md-dark-indigo/theme.css        |  41 ++--
 public/themes/md-light-deeppurple/theme.css   |  41 ++--
 public/themes/md-light-indigo/theme.css       |  41 ++--
 public/themes/mdc-dark-deeppurple/theme.css   |  41 ++--
 public/themes/mdc-dark-indigo/theme.css       |  41 ++--
 public/themes/mdc-light-deeppurple/theme.css  |  41 ++--
 public/themes/mdc-light-indigo/theme.css      |  41 ++--
 public/themes/mira/theme.css                  |  41 ++--
 public/themes/nano/theme.css                  |  41 ++--
 public/themes/nova-accent/theme.css           |  41 ++--
 public/themes/nova-alt/theme.css              |  41 ++--
 public/themes/nova-vue/theme.css              |  41 ++--
 public/themes/nova/theme.css                  |  41 ++--
 public/themes/rhea/theme.css                  |  41 ++--
 public/themes/saga-blue/theme.css             |  41 ++--
 public/themes/saga-green/theme.css            |  41 ++--
 public/themes/saga-orange/theme.css           |  41 ++--
 public/themes/saga-purple/theme.css           |  41 ++--
 public/themes/soho-dark/theme.css             |  41 ++--
 public/themes/soho-light/theme.css            |  41 ++--
 public/themes/tailwind-light/theme.css        |  41 ++--
 public/themes/vela-blue/theme.css             |  41 ++--
 public/themes/vela-green/theme.css            |  41 ++--
 public/themes/vela-orange/theme.css           |  41 ++--
 public/themes/vela-purple/theme.css           |  41 ++--
 public/themes/viva-dark/theme.css             |  41 ++--
 public/themes/viva-light/theme.css            |  41 ++--
 87 files changed, 2007 insertions(+), 1792 deletions(-)
 create mode 100644 doc/metergroup/IconDoc.vue
 create mode 100644 doc/metergroup/TemplateDoc.vue
 delete mode 100644 doc/metergroup/TemplatingDoc.vue

diff --git a/components/lib/metergroup/style/MeterGroupStyle.js b/components/lib/metergroup/style/MeterGroupStyle.js
index a7abe3a76..c1e4798f1 100644
--- a/components/lib/metergroup/style/MeterGroupStyle.js
+++ b/components/lib/metergroup/style/MeterGroupStyle.js
@@ -3,48 +3,40 @@ import BaseStyle from 'primevue/base/style';
 const css = `
 @layer primevue {
     .p-metergroup {
-        position: relative;
-        overflow: hidden;
-    }
-
-    .p-metergroup-vertical.p-metergroup {
         display: flex;
     }
 
-    .p-metergroup-vertical .p-metergroup-meter-container {
+    .p-metergroup-meters {
+        display: flex;
+    }
+
+    .p-metergroup-vertical .p-metergroup-meters {
         flex-direction: column;
     }
 
-    .p-metergroup-meter-container {
-        display: flex;
-    }
-
-    .p-metergroup-label-list {
+    .p-metergroup-labels {
         display: flex;
+        flex-wrap: wrap;
         margin: 0;
         padding: 0;
         list-style-type: none;
     }
 
-    .p-metergroup-vertical .p-metergroup-label-list {
+    .p-metergroup-vertical .p-metergroup-labels {
         align-items: start;
     }
 
-    .p-metergroup-horizontal .p-metergroup-label-list-vertical {
+    .p-metergroup-labels-vertical {
         flex-direction: column;
     }
 
-    .p-metergroup-vertical .p-metergroup-label-list-horizontal {
-        flex-direction: column;
-    }
-
-    .p-metergroup-label-list-item {
+    .p-metergroup-label {
         display: inline-flex;
         align-items: center;
     }
 
-    .p-metergroup-label-type {
-        display: inline-block;
+    .p-metergroup-label-marker {
+        display: inline-flex;
     }
 }
 `;
@@ -57,22 +49,19 @@ const classes = {
             'p-metergroup-vertical': props.orientation === 'vertical'
         }
     ],
-    metercontainer: 'p-metergroup-meter-container',
+    metercontainer: 'p-metergroup-meters',
     meter: 'p-metergroup-meter',
     labellist: ({ props }) => [
-        'p-metergroup-label-list',
-
+        'p-metergroup-labels',
         {
-            'p-metergroup-label-list-start': props.labelPosition === 'start',
-            'p-metergroup-label-list-end': props.labelPosition === 'end',
-            'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
-            'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
+            'p-metergroup-labels-vertical': props.labelOrientation === 'vertical',
+            'p-metergroup-labels-horizontal': props.labelOrientation === 'horizontal'
         }
     ],
-    labellistitem: 'p-metergroup-label-list-item',
+    labellistitem: 'p-metergroup-label',
     labelicon: 'p-metergroup-label-icon',
-    labellisttype: 'p-metergroup-label-type',
-    label: 'p-metergroup-label'
+    labellisttype: 'p-metergroup-label-marker',
+    label: 'p-metergroup-label-text'
 };
 
 export default BaseStyle.extend({
diff --git a/doc/metergroup/BasicDoc.vue b/doc/metergroup/BasicDoc.vue
index bbb6d0bae..e67b02c23 100644
--- a/doc/metergroup/BasicDoc.vue
+++ b/doc/metergroup/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>MeterGroup requires <i>value</i> as the data to display.</p>
+        <p>MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.</p>
     </DocSectionText>
     <div class="card">
         <MeterGroup :value="value" />
diff --git a/doc/metergroup/IconDoc.vue b/doc/metergroup/IconDoc.vue
new file mode 100644
index 000000000..db2c19cb6
--- /dev/null
+++ b/doc/metergroup/IconDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icons can be displayed next to the labels instead of the default marker.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+                { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+                { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+                { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+                { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+                { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+                { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+    { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+    { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+    { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/LabelDoc.vue b/doc/metergroup/LabelDoc.vue
index 72c9c0517..1bf85a2f3 100644
--- a/doc/metergroup/LabelDoc.vue
+++ b/doc/metergroup/LabelDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Default layout of MeterGroup is <i>horizontal</i>, and also <i>labelOrientation</i> property can be set as <i>vertical</i>.In addition, position of the label can be changed using <i>labelPosition</i> property that the default value is
-            <i>end</i> and also <i>start</i> option is available.
+            The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the
+            <i>labelOrientation</i> option.
         </p>
     </DocSectionText>
     <div class="card">
-        <MeterGroup :value="value" labelPosition="start" />
+        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,19 +16,19 @@ export default {
     data() {
         return {
             value: [
-                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
-                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
             ],
             code: {
                 basic: `
-<MeterGroup :value="value" labelPosition="start" />
+<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
 `,
                 options: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" labelPosition="start" />
+        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
     </div>
 </template>
 
@@ -37,10 +37,10 @@ export default {
     data() {
         return {
             value: [
-                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
-                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
             ]
         };
     }
@@ -50,7 +50,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" labelPosition="start" />
+        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
     </div>
 </template>
 
@@ -58,10 +58,10 @@ export default {
 import { ref } from "vue";
 
 const value = ref([
-    { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-    { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-    { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
-    { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+    { label: 'Apps', color: '#34d399', value: 16 },
+    { label: 'Messages', color: '#fbbf24', value: 8 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 10 }
 ]);
 <\/script>
 `
diff --git a/doc/metergroup/MinMaxDoc.vue b/doc/metergroup/MinMaxDoc.vue
index acd1c6947..6294de068 100644
--- a/doc/metergroup/MinMaxDoc.vue
+++ b/doc/metergroup/MinMaxDoc.vue
@@ -3,7 +3,7 @@
         <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
     </DocSectionText>
     <div class="card">
-        <MeterGroup :value="value" :max="120" />
+        <MeterGroup :value="value" :max="200" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -13,19 +13,19 @@ export default {
     data() {
         return {
             value: [
-                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
-                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
             ],
             code: {
                 basic: `
-<MeterGroup :value="value" :max="120"  />
+<MeterGroup :value="value" :max="200"  />
 `,
                 options: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" :max="120"  />
+        <MeterGroup :value="value" :max="200"  />
     </div>
 </template>
 
@@ -34,10 +34,10 @@ export default {
     data() {
         return {
             value: [
-                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
-                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
             ],
         };
     }
@@ -47,7 +47,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" :max="120"  />
+        <MeterGroup :value="value" :max="200"  />
     </div>
 </template>
 
@@ -55,10 +55,10 @@ export default {
 import { ref } from "vue";
 
 const value = ref([
-    { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
-    { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
-    { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
-    { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+    { label: 'Apps', color: '#34d399', value: 16 },
+    { label: 'Messages', color: '#fbbf24', value: 8 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 10 }
 ]);
 <\/script>
 `
diff --git a/doc/metergroup/MultipleDoc.vue b/doc/metergroup/MultipleDoc.vue
index 9a3c94b9a..3fd4bf1af 100644
--- a/doc/metergroup/MultipleDoc.vue
+++ b/doc/metergroup/MultipleDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p><i>value</i> property accepts multiple meter group objects.</p>
+        <p>Adding more items to the array displays the meters in a group.</p>
     </DocSectionText>
     <div class="card">
         <MeterGroup :value="value" />
@@ -13,9 +13,10 @@ export default {
     data() {
         return {
             value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
             ],
             code: {
                 basic: `
@@ -33,9 +34,10 @@ export default {
     data() {
         return {
             value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
             ]
         };
     }
@@ -53,9 +55,10 @@ export default {
 import { ref } from "vue";
 
 const value = ref([
-    { color: '#239EF0', label: 'Mortgage', value: 25 },
-    { color: '#FAA419', label: 'Loan', value: 15 },
-    { color: '#EE5879', label: 'Credit Card', value: 20 }
+    { label: 'Apps', color: '#34d399', value: 16 },
+    { label: 'Messages', color: '#fbbf24', value: 8 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 10 }
 ]);
 <\/script>
 `
diff --git a/doc/metergroup/TemplateDoc.vue b/doc/metergroup/TemplateDoc.vue
new file mode 100644
index 000000000..dabb5268a
--- /dev/null
+++ b/doc/metergroup/TemplateDoc.vue
@@ -0,0 +1,213 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MeterGroup provides templating support for labels, meter items, and content around the meters.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-wrap gap-3">
+                    <template v-for="val of value" :key="val.label">
+                        <Card class="flex-1">
+                            <template #content>
+                                <div class="flex justify-content-between gap-5">
+                                    <div class="flex flex-column gap-1">
+                                        <span class="text-secondary text-sm">{{ val.label }}</span>
+                                        <span class="font-bold text-lg">{{ val.value }}%</span>
+                                    </div>
+                                    <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
+                                        <i :class="val.icon" />
+                                    </span>
+                                </div>
+                            </template>
+                        </Card>
+                    </template>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex justify-content-between mt-3 mb-2 relative">
+                    <span>Storage</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+                    <span class="font-medium">1TB</span>
+                </div>
+            </template>
+            <template #end>
+                <div class="flex justify-content-between mt-3">
+                    <Button label="Manage Storage" outlined size="small" />
+                    <Button label="Update Plan" size="small" />
+                </div>
+            </template>
+        </MeterGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+                { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+                { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+                { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" labelPosition="start">
+    <template #label="{ value }">
+        <div class="flex flex-wrap gap-3">
+            <template v-for="val of value" :key="val.label">
+                <Card class="flex-1">
+                    <template #content>
+                        <div class="flex justify-content-between gap-5">
+                            <div class="flex flex-column gap-1">
+                                <span class="text-secondary text-sm">{{ val.label }}</span>
+                                <span class="font-bold text-lg">{{ val.value }}%</span>
+                            </div>
+                            <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                <i :class="val.icon" />
+                            </span>
+                        </div>
+                    </template>
+                </Card>
+            </template>
+        </div>
+    </template>
+    <template #meter="slotProps">
+        <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
+    </template>
+    <template #start="{ totalPercent }">
+        <div class="flex justify-content-between mt-3 mb-2 relative">
+            <span>Storage</span>
+            <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+            <span class="font-medium">1TB</span>
+        </div>
+    </template>
+    <template #end>
+        <div class="flex justify-content-between mt-3">
+            <Button label="Manage Storage" outlined size="small" />
+            <Button label="Update Plan" size="small" />
+        </div>
+    </template>
+</MeterGroup>
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-wrap gap-3">
+                    <template v-for="val of value" :key="val.label">
+                        <Card class="flex-1">
+                            <template #content>
+                                <div class="flex justify-content-between gap-5">
+                                    <div class="flex flex-column gap-1">
+                                        <span class="text-secondary text-sm">{{ val.label }}</span>
+                                        <span class="font-bold text-lg">{{ val.value }}%</span>
+                                    </div>
+                                    <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                        <i :class="val.icon" />
+                                    </span>
+                                </div>
+                            </template>
+                        </Card>
+                    </template>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex justify-content-between mt-3 mb-2 relative">
+                    <span>Storage</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+                    <span class="font-medium">1TB</span>
+                </div>
+            </template>
+            <template #end>
+                <div class="flex justify-content-between mt-3">
+                    <Button label="Manage Storage" outlined size="small" />
+                    <Button label="Update Plan" size="small" />
+                </div>
+            </template>
+        </MeterGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+                { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+                { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+                { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-wrap gap-3">
+                    <template v-for="val of value" :key="i">
+                        <Card class="flex-1">
+                            <template #content>
+                                <div class="flex justify-content-between gap-5">
+                                    <div class="flex flex-column gap-1">
+                                        <span class="text-secondary text-sm">{{ val.label }}</span>
+                                        <span class="font-bold text-lg">{{ val.value }}%</span>
+                                    </div>
+                                    <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                        <i :class="val.icon" />
+                                    </span>
+                                </div>
+                            </template>
+                        </Card>
+                    </template>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex justify-content-between mt-3 mb-2 relative">
+                    <span>Storage</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+                    <span class="font-medium">1TB</span>
+                </div>
+            </template>
+            <template #end>
+                <div class="flex justify-content-between mt-3">
+                    <Button label="Manage Storage" outlined size="small" />
+                    <Button label="Update Plan" size="small" />
+                </div>
+            </template>
+        </MeterGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+    { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+    { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+    { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/TemplatingDoc.vue b/doc/metergroup/TemplatingDoc.vue
deleted file mode 100644
index fd9c09121..000000000
--- a/doc/metergroup/TemplatingDoc.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            MeterGroup offers meter customization with the <i>meter</i> template that receives the meter instance from the value as a parameter and also <i>label</i> template receives value instance. In addition, the <i>start</i> and <i>end</i> slots
-            are available to define the start and end templating for MeterGroup respectively.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start">
-            <template #label="{ value }">
-                <div class="flex flex-column text-sm gap-2">
-                    <template v-for="(val, i) of value" :key="i">
-                        <span :style="{ color: val.color }" class="flex gap-2">
-                            <i :class="val.icon" />
-                            {{ val.label }} ({{ val.value }}%)</span
-                        >
-                    </template>
-                </div>
-            </template>
-            <template #start="{ totalPercent }">
-                <div class="flex justify-content-between mt-3 mb-2">
-                    <span>Account </span>
-                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-                    <span>Savings: 1000$ </span>
-                </div>
-            </template>
-            <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
-            </template>
-        </MeterGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25, icon: 'pi pi-home' },
-                { color: '#FAA419', label: 'Loan', value: 15, icon: 'pi pi-money-bill' },
-                { color: '#EE5879', label: 'Credit Card', value: 20, icon: 'pi pi-credit-card' }
-            ],
-            code: {
-                basic: `
-<MeterGroup :value="value" labelPosition="start">
-    <template #label="{ value }">
-        <div class="flex flex-column text-sm gap-2">
-            <template v-for="(val, i) of value" :key="i">
-                <span :style="{ color: val.color }" class="flex gap-2">
-                    <i :class="val.icon" />
-                    {{ val.label }} ({{ val.value }}%)</span
-                >
-            </template>
-        </div>
-    </template>
-    <template #start="{ totalPercent }">
-        <div class="flex justify-content-between mt-3 mb-2">
-            <span>Account </span>
-            <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-            <span>Savings: 1000$ </span>
-        </div>
-    </template>
-    <template #meter="slotProps">
-        <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
-    </template>
-</MeterGroup>
-`,
-                options: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start">
-            <template #label="{ value }">
-                <div class="flex flex-column text-sm gap-2">
-                    <template v-for="(val, i) of value" :key="i">
-                        <span :style="{ color: val.color }" class="flex gap-2">
-                            <i :class="val.icon" />
-                            {{ val.label }} ({{ val.value }}%)</span
-                        >
-                    </template>
-                </div>
-            </template>
-            <template #start="{ totalPercent }">
-                <div class="flex justify-content-between mt-3 mb-2">
-                    <span>Account </span>
-                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-                    <span>Savings: 1000$ </span>
-                </div>
-            </template>
-            <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
-            </template>
-        </MeterGroup>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { color: '#239EF0', label: 'Mortgage', value: 25 },
-                { color: '#FAA419', label: 'Loan', value: 15 },
-                { color: '#EE5879', label: 'Credit Card', value: 20 }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start">
-            <template #label="{ value }">
-                <div class="flex flex-column text-sm gap-2">
-                    <template v-for="(val, i) of value" :key="i">
-                        <span :style="{ color: val.color }" class="flex gap-2">
-                            <i :class="val.icon" />
-                            {{ val.label }} ({{ val.value }}%)</span
-                        >
-                    </template>
-                </div>
-            </template>
-            <template #start="{ totalPercent }">
-                <div class="flex justify-content-between mt-3 mb-2">
-                    <span>Account </span>
-                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-                    <span>Savings: 1000$ </span>
-                </div>
-            </template>
-            <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
-            </template>
-        </MeterGroup>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([
-    { color: '#239EF0', label: 'Mortgage', value: 25 },
-    { color: '#FAA419', label: 'Loan', value: 15 },
-    { color: '#EE5879', label: 'Credit Card', value: 20 }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/metergroup/VerticalDoc.vue b/doc/metergroup/VerticalDoc.vue
index ac5e4712c..fc0565d9b 100644
--- a/doc/metergroup/VerticalDoc.vue
+++ b/doc/metergroup/VerticalDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
+        <p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts either <i>horizontal</i> or <i>vertical</i> as available options.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center" style="height: 350px">
-        <MeterGroup :value="value" orientation="vertical" />
+    <div class="card flex justify-content-center" style="height: 360px">
+        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -13,18 +13,19 @@ export default {
     data() {
         return {
             value: [
-                { color: '#4ADE81', label: 'E-mails', value: 17 },
-                { color: '#FB923C', label: 'Messages', value: 36 },
-                { color: '#C084FC', label: 'Other', value: 24 }
+                { label: 'Apps', color: '#34d399', value: 24 },
+                { label: 'Messages', color: '#fbbf24', value: 16 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 12 }
             ],
             code: {
                 basic: `
-<MeterGroup :value="value" orientation="vertical" />
+<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center" style="height: 350px">
-        <MeterGroup :value="value" orientation="vertical" />
+    <div class="card flex justify-content-center" style="height: 360px">
+        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
     </div>
 </template>
 
@@ -33,9 +34,10 @@ export default {
     data() {
         return {
             value: [
-                { color: '#4ADE81', label: 'E-mails', value: 17 },
-                { color: '#FB923C', label: 'Messages', value: 36 },
-                { color: '#C084FC', label: 'Other', value: 24 }
+                { label: 'Apps', color: '#34d399', value: 24 },
+                { label: 'Messages', color: '#fbbf24', value: 16 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 12 }
             ]
         };
     }
@@ -44,8 +46,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center" style="height: 350px">
-        <MeterGroup :value="value" orientation="vertical" />
+    <div class="card flex justify-content-center" style="height: 360px">
+        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
     </div>
 </template>
 
@@ -53,9 +55,10 @@ export default {
 import { ref } from "vue";
 
 const value = ref([
-    { color: '#4ADE81', label: 'E-mails', value: 17 },
-    { color: '#FB923C', label: 'Messages', value: 36 },
-    { color: '#C084FC', label: 'Other', value: 24 }
+    { label: 'Apps', color: '#34d399', value: 24 },
+    { label: 'Messages', color: '#fbbf24', value: 16 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 12 }
 ]);
 <\/script>
 `
diff --git a/pages/metergroup/index.vue b/pages/metergroup/index.vue
index 3028b9508..51243f2b4 100644
--- a/pages/metergroup/index.vue
+++ b/pages/metergroup/index.vue
@@ -1,16 +1,25 @@
 <template>
-    <DocComponent title="Vue MeterGroup Component" header="MeterGroup" description="MeterGroup is a group of process status indicators." :componentDocs="docs" :apiDocs="['MeterGroup']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+    <DocComponent
+        title="Vue MeterGroup Component"
+        header="MeterGroup"
+        description="MeterGroup displays scalar measurements within a known range."
+        :componentDocs="docs"
+        :apiDocs="['MeterGroup']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
-import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
+import IconDoc from '@/doc/metergroup/IconDoc.vue';
 import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
-import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
 import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
-import TemplatingDoc from '@/doc/metergroup/TemplatingDoc.vue';
 import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
+import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
+import TemplateDoc from '@/doc/metergroup/TemplateDoc.vue';
+import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
 import PTComponent from '@/doc/metergroup/pt/index.vue';
 import ThemingDoc from '@/doc/metergroup/theming/index.vue';
 
@@ -33,6 +42,11 @@ export default {
                     label: 'Multiple',
                     component: MultipleDoc
                 },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
                 {
                     id: 'label',
                     label: 'Label',
@@ -49,9 +63,9 @@ export default {
                     component: MinMaxDoc
                 },
                 {
-                    id: 'templating',
-                    label: 'Templating',
-                    component: TemplatingDoc
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
                 },
                 {
                     id: 'accessibility',
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 3f38c655c..964a9e09e 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #93cbf9;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #383838;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #64B5F6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index d22fce54c..1e6708870 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #a7d8a9;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #383838;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #81C784;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 0377c0293..0ee41c7d9 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #ffe284;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #383838;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #FFD54F;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 1c4b2f892..8f166d054 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #cf95d9;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #383838;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #BA68C8;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #BA68C8;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
index f6a68b5a4..74f5b2f79 100644
--- a/public/themes/aura-dark-amber/theme.css
+++ b/public/themes/aura-dark-amber/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #fbbf24;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
index 184096eaa..c7b4e3ec4 100644
--- a/public/themes/aura-dark-blue/theme.css
+++ b/public/themes/aura-dark-blue/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #60a5fa;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
index 505ab9f21..3e957e188 100644
--- a/public/themes/aura-dark-cyan/theme.css
+++ b/public/themes/aura-dark-cyan/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #22d3ee;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
index 3041f1a81..1780e006b 100644
--- a/public/themes/aura-dark-green/theme.css
+++ b/public/themes/aura-dark-green/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #34d399;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css
index 08792a50d..e60b2c267 100644
--- a/public/themes/aura-dark-indigo/theme.css
+++ b/public/themes/aura-dark-indigo/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #818cf8;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css
index 955a6b8b4..c8d46f225 100644
--- a/public/themes/aura-dark-lime/theme.css
+++ b/public/themes/aura-dark-lime/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #a3e635;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #a3e635;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css
index 8796d296c..a085e1220 100644
--- a/public/themes/aura-dark-noir/theme.css
+++ b/public/themes/aura-dark-noir/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #fafafa;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #fafafa;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css
index ae770b3e8..a11fab816 100644
--- a/public/themes/aura-dark-pink/theme.css
+++ b/public/themes/aura-dark-pink/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #f472b6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css
index 9642c456a..f2fd1d73a 100644
--- a/public/themes/aura-dark-purple/theme.css
+++ b/public/themes/aura-dark-purple/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #a78bfa;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #a78bfa;
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 100%;
-    margin-right: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
-    margin-right: 1rem;
-  }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css
index 31248e755..41b28e570 100644
--- a/public/themes/aura-dark-teal/theme.css
+++ b/public/themes/aura-dark-teal/theme.css
@@ -5743,7 +5743,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f3f46;
     border-radius: 6px;
   }
@@ -5751,25 +5754,29 @@
     border: 0 none;
     background: #2dd4bf;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5780,13 +5787,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5798,9 +5802,6 @@
     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;
diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css
index d8f773bb4..2e61db411 100644
--- a/public/themes/aura-light-amber/theme.css
+++ b/public/themes/aura-light-amber/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #f59e0b;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css
index e242e33b0..ccd18c757 100644
--- a/public/themes/aura-light-blue/theme.css
+++ b/public/themes/aura-light-blue/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #3B82F6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css
index 05508bbf2..bcef7b322 100644
--- a/public/themes/aura-light-cyan/theme.css
+++ b/public/themes/aura-light-cyan/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #06b6d4;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css
index 3298df490..0011a2b3f 100644
--- a/public/themes/aura-light-green/theme.css
+++ b/public/themes/aura-light-green/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #10b981;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css
index 009d893d5..ca4e5c3b5 100644
--- a/public/themes/aura-light-indigo/theme.css
+++ b/public/themes/aura-light-indigo/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #6366F1;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css
index 0c81942e5..d7a9e155a 100644
--- a/public/themes/aura-light-lime/theme.css
+++ b/public/themes/aura-light-lime/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #84cc16;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #84cc16;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css
index 64e3a6534..2f8da09dd 100644
--- a/public/themes/aura-light-noir/theme.css
+++ b/public/themes/aura-light-noir/theme.css
@@ -5753,7 +5753,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5761,25 +5764,29 @@
     border: 0 none;
     background: #020617;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #020617;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5790,13 +5797,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5808,9 +5812,6 @@
     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;
diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css
index 9f9510967..808bd2217 100644
--- a/public/themes/aura-light-pink/theme.css
+++ b/public/themes/aura-light-pink/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #ec4899;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css
index ae6624d3e..7b72f9fd8 100644
--- a/public/themes/aura-light-purple/theme.css
+++ b/public/themes/aura-light-purple/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #8B5CF6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #8B5CF6;
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 100%;
-    margin-right: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
-    margin-right: 1rem;
-  }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css
index 3b6dd147c..583e63ef5 100644
--- a/public/themes/aura-light-teal/theme.css
+++ b/public/themes/aura-light-teal/theme.css
@@ -5745,7 +5745,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e2e8f0;
     border-radius: 6px;
   }
@@ -5753,25 +5756,29 @@
     border: 0 none;
     background: #14b8a6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.25rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5782,13 +5789,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5800,9 +5804,6 @@
     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;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 8e6867003..aef73917d 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -5666,7 +5666,10 @@
     box-shadow: 0 0 0 1px #e3f3fe;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f4b5b;
     border-radius: 4px;
   }
@@ -5674,25 +5677,29 @@
     border: 0 none;
     background: #8dd0ff;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5703,13 +5710,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5721,9 +5725,6 @@
     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;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index f1da70159..e13fedb79 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -5666,7 +5666,10 @@
     box-shadow: 0 0 0 1px #f0e6f5;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3f4b5b;
     border-radius: 4px;
   }
@@ -5674,25 +5677,29 @@
     border: 0 none;
     background: #c298d8;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #c298d8;
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 100%;
-    margin-right: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
-    margin-right: 1rem;
-  }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5703,13 +5710,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5721,9 +5725,6 @@
     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;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index cbe32e2fb..0b9320e38 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -5666,7 +5666,10 @@
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e9ecef;
     border-radius: 4px;
   }
@@ -5674,25 +5677,29 @@
     border: 0 none;
     background: #007bff;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5703,13 +5710,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5721,9 +5725,6 @@
     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;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 10cc19c6b..346c29033 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -5666,7 +5666,10 @@
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e9ecef;
     border-radius: 4px;
   }
@@ -5674,25 +5677,29 @@
     border: 0 none;
     background: #883cae;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #883cae;
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 100%;
-    margin-right: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
-    margin-right: 1rem;
-  }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5703,13 +5710,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5721,9 +5725,6 @@
     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;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 044aec8bc..a46a90e9c 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -5556,7 +5556,10 @@
     box-shadow: inset 0 0 0 1px #605e5c;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #edebe9;
     border-radius: 2px;
   }
@@ -5564,25 +5567,29 @@
     border: 0 none;
     background: #0078d4;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 2px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5593,13 +5600,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5611,9 +5615,6 @@
     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;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 0a35d3177..aa19ff669 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #fbbf24;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 47014aeb0..bef115913 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #60a5fa;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 4b815b992..1a0f0269d 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #22d3ee;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 7cdee0934..cef2f9111 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #34d399;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index c7dea0410..8172f74c4 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #818cf8;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 137fa1fab..2d1b2ac25 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #f472b6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 86b8a287f..de30873a4 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #a78bfa;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #a78bfa;
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 100%;
-    margin-right: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
-    margin-right: 1rem;
-  }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 0d04af876..b5418ec65 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #424b57;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #2dd4bf;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 053c58c44..4010de8eb 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #fef08a;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #f59e0b;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index c54f2a7ad..29ebe0b4f 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #BFDBFE;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #3B82F6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index e4e53b870..9c5dac1b4 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #a5f3fc;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #06b6d4;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 91522027f..985713488 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #10b981;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 5af2625e8..407b1c06a 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #C7D2FE;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #6366F1;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index e29ca08bc..7617e4fec 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #fbcfe8;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #ec4899;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index eb630a6c1..d1f1c0e0e 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #DDD6FE;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #8B5CF6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #8B5CF6;
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 100%;
-    margin-right: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
-    margin-right: 1rem;
-  }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 7c7d8547b..ae4306867 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -5694,7 +5694,10 @@
     box-shadow: 0 0 0 0.2rem #99f6e4;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 6px;
   }
@@ -5702,25 +5705,29 @@
     border: 0 none;
     background: #14b8a6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5731,13 +5738,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5749,9 +5753,6 @@
     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;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 1ec7536d3..7a2878b57 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -5568,7 +5568,10 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5576,25 +5579,29 @@
     border: 0 none;
     background: #FFE082;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5605,13 +5612,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5623,9 +5627,6 @@
     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;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index f0abffed1..fd2956dc6 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -5568,7 +5568,10 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5576,25 +5579,29 @@
     border: 0 none;
     background: #81D4FA;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5605,13 +5612,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5623,9 +5627,6 @@
     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;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 1f496d928..10da4b0c7 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -5568,7 +5568,10 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5576,25 +5579,29 @@
     border: 0 none;
     background: #C5E1A5;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5605,13 +5612,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5623,9 +5627,6 @@
     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;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index b0842df0f..94c2ea9f2 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -5568,7 +5568,10 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5576,25 +5579,29 @@
     border: 0 none;
     background: #F48FB1;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5605,13 +5612,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5623,9 +5627,6 @@
     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;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index ec2aac2b6..23af3c50b 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -5749,7 +5749,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(206, 147, 216, 0.32);
     border-radius: 4px;
   }
@@ -5757,25 +5760,29 @@
     border: 0 none;
     background: #CE93D8;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #CE93D8;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5786,13 +5793,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5804,9 +5808,6 @@
     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;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index ea320d005..46c3d82ed 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -5749,7 +5749,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(159, 168, 218, 0.32);
     border-radius: 4px;
   }
@@ -5757,25 +5760,29 @@
     border: 0 none;
     background: #9FA8DA;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5786,13 +5793,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5804,9 +5808,6 @@
     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;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index e2adccff1..85a835818 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -5748,7 +5748,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(103, 58, 183, 0.32);
     border-radius: 4px;
   }
@@ -5756,25 +5759,29 @@
     border: 0 none;
     background: #673AB7;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #673AB7;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5785,13 +5792,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5803,9 +5807,6 @@
     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;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 7b73f0811..e0d2becd9 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -5748,7 +5748,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(63, 81, 181, 0.32);
     border-radius: 4px;
   }
@@ -5756,25 +5759,29 @@
     border: 0 none;
     background: #3F51B5;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5785,13 +5792,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5803,9 +5807,6 @@
     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;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index e235c97ca..cb6bcbfc0 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -5749,7 +5749,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(206, 147, 216, 0.32);
     border-radius: 4px;
   }
@@ -5757,25 +5760,29 @@
     border: 0 none;
     background: #CE93D8;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #CE93D8;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5786,13 +5793,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5804,9 +5808,6 @@
     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;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 5145aa6f3..94ce1ac20 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -5749,7 +5749,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(159, 168, 218, 0.32);
     border-radius: 4px;
   }
@@ -5757,25 +5760,29 @@
     border: 0 none;
     background: #9FA8DA;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5786,13 +5793,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5804,9 +5808,6 @@
     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;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index cbccdace5..9b9817a54 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -5748,7 +5748,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(103, 58, 183, 0.32);
     border-radius: 4px;
   }
@@ -5756,25 +5759,29 @@
     border: 0 none;
     background: #673AB7;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #673AB7;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5785,13 +5792,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5803,9 +5807,6 @@
     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;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 560504e6e..3f4ab4c7f 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -5748,7 +5748,10 @@
     box-shadow: none;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: rgba(63, 81, 181, 0.32);
     border-radius: 4px;
   }
@@ -5756,25 +5759,29 @@
     border: 0 none;
     background: #3F51B5;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 4px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5785,13 +5792,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5803,9 +5807,6 @@
     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;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 4c1092c23..a3f825226 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -5633,7 +5633,10 @@
     box-shadow: 0 0 0 0.2rem #C0D0E0;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #E5E9F0;
     border-radius: 4px;
   }
@@ -5641,25 +5644,29 @@
     border: 0 none;
     background: #5E81AC;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5670,13 +5677,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5688,9 +5692,6 @@
     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;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index a1ee59d0d..f86be4c35 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 0.2rem #90c9f5;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #dee2e6;
     border-radius: 1px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #1174c0;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index b46019251..391828172 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -5556,7 +5556,10 @@
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5564,25 +5567,29 @@
     border: 0 none;
     background: #007ad9;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5593,13 +5600,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5611,9 +5615,6 @@
     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;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 2180bca56..f882ded94 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -5568,7 +5568,10 @@
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5576,25 +5579,29 @@
     border: 0 none;
     background: #007ad9;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5605,13 +5612,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5623,9 +5627,6 @@
     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;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index eaf90c5b8..9ed1b3a33 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -5568,7 +5568,10 @@
     box-shadow: 0 0 0 0.2rem #c2e9d8;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5576,25 +5579,29 @@
     border: 0 none;
     background: #41b883;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #41b883;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5605,13 +5612,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5623,9 +5627,6 @@
     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;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 5cd7ddfa9..e7111246d 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -5568,7 +5568,10 @@
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #eaeaea;
     border-radius: 3px;
   }
@@ -5576,25 +5579,29 @@
     border: 0 none;
     background: #007ad9;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5605,13 +5612,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5623,9 +5627,6 @@
     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;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 7b741c504..43f1ce49f 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -5556,7 +5556,10 @@
     box-shadow: 0 0 0 0.2rem #e4e9ec;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #efefef;
     border-radius: 2px;
   }
@@ -5564,25 +5567,29 @@
     border: 0 none;
     background: #7B95A3;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 24px;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5593,13 +5600,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5611,9 +5615,6 @@
     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;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 12b05419f..e9fcda33d 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 0.2rem #a6d5fa;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #dee2e6;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #2196F3;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 3cd7e8ce7..67febbe14 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 0.2rem #b7e0b8;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #dee2e6;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #4CAF50;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 17363ae8e..48c41e98e 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 0.2rem #ffe69c;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #dee2e6;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #FFC107;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 12616c2e5..772433b1d 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 0.2rem #df9eea;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #dee2e6;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #9C27B0;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #9C27B0;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 825133fab..742662f28 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -5629,7 +5629,10 @@
     box-shadow: 0 0 0 1px #e0d8fc;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #3e4053;
     border-radius: 6px;
   }
@@ -5637,25 +5640,29 @@
     border: 0 none;
     background: #b19df7;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5666,13 +5673,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5684,9 +5688,6 @@
     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;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index d0bc4a5eb..b740c2f74 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -5629,7 +5629,10 @@
     box-shadow: 0 0 0 1px #c7bbfa;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #dfe7ef;
     border-radius: 6px;
   }
@@ -5637,25 +5640,29 @@
     border: 0 none;
     background: #7254f3;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5666,13 +5673,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5684,9 +5688,6 @@
     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;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index b42b33367..cbb3075a7 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -5640,7 +5640,10 @@
     box-shadow: 0 0 0 1px #6366F1;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #e5e7eb;
     border-radius: 0.375rem;
   }
@@ -5648,25 +5651,29 @@
     border: 0 none;
     background: #4F46E5;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5677,13 +5684,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5695,9 +5699,6 @@
     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;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 829dc998f..53c0f46a9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #93cbf9;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #304562;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #64B5F6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 328db31bc..621c7de67 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #a7d8a9;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #304562;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #81C784;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index de0055499..afdf0ecd7 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #ffe284;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #304562;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #FFD54F;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index bbb0793a3..f363e0000 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -5605,7 +5605,10 @@
     box-shadow: 0 0 0 1px #cf95d9;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #304562;
     border-radius: 3px;
   }
@@ -5613,25 +5616,29 @@
     border: 0 none;
     background: #BA68C8;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     background: #BA68C8;
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5642,13 +5649,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5660,9 +5664,6 @@
     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;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 6e6f6892a..4757c4539 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -5686,7 +5686,10 @@
     box-shadow: 0 0 0 1px #9eade6;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #263238;
     border-radius: 6px;
   }
@@ -5694,25 +5697,29 @@
     border: 0 none;
     background: #9eade6;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5723,13 +5730,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5741,9 +5745,6 @@
     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;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 3e15899c9..0f1547edb 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -5686,7 +5686,10 @@
     box-shadow: 0 0 0 0.1rem #bbc7ee;
   }
 
-  .p-metergroup .p-metergroup-meter-container {
+  .p-metergroup {
+    gap: 1rem;
+  }
+  .p-metergroup .p-metergroup-meters {
     background: #ebebeb;
     border-radius: 6px;
   }
@@ -5694,25 +5697,29 @@
     border: 0 none;
     background: #5472d4;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
-    line-height: 1.5rem;
+  .p-metergroup .p-metergroup-labels .p-metergroup-label {
+    gap: 0.5rem;
   }
-  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
     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 {
+  .p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.5rem;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
+    gap: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
+    gap: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal {
+    flex-direction: column;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
     height: 0.5rem;
   }
   .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
@@ -5723,13 +5730,10 @@
     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-vertical {
+    flex-direction: row;
   }
-  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
-    margin-top: 1rem;
-  }
-  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meters {
     width: 0.5rem;
     height: 100%;
   }
@@ -5741,9 +5745,6 @@
     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;