From ff72e63bf04500a160c70e41a7fbad85a9043c7c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 3 Dec 2020 16:49:18 +0300
Subject: [PATCH] Splitter Component - #737

---
 exports/splitter.d.ts                         |   1 +
 exports/splitter.js                           |   3 +
 exports/splitterpanel.d.ts                    |   1 +
 exports/splitterpanel.js                      |   3 +
 public/themes/arya-blue/theme.css             |  65 +++--
 public/themes/arya-green/theme.css            |  65 +++--
 public/themes/arya-orange/theme.css           |  65 +++--
 public/themes/arya-purple/theme.css           |  65 +++--
 public/themes/bootstrap4-dark-blue/theme.css  |  65 +++--
 .../themes/bootstrap4-dark-purple/theme.css   |  65 +++--
 public/themes/bootstrap4-light-blue/theme.css |  65 +++--
 .../themes/bootstrap4-light-purple/theme.css  |  65 +++--
 public/themes/fluent-light/theme.css          |  65 +++--
 public/themes/luna-amber/theme.css            |  65 +++--
 public/themes/luna-blue/theme.css             |  65 +++--
 public/themes/luna-green/theme.css            |  65 +++--
 public/themes/luna-pink/theme.css             |  65 +++--
 public/themes/md-dark-deeppurple/theme.css    |  65 +++--
 public/themes/md-dark-indigo/theme.css        |  65 +++--
 public/themes/md-light-deeppurple/theme.css   |  65 +++--
 public/themes/md-light-indigo/theme.css       |  65 +++--
 public/themes/mdc-dark-deeppurple/theme.css   |  65 +++--
 public/themes/mdc-dark-indigo/theme.css       |  65 +++--
 public/themes/mdc-light-deeppurple/theme.css  |  65 +++--
 public/themes/mdc-light-indigo/theme.css      |  65 +++--
 public/themes/nova-accent/theme.css           |  65 +++--
 public/themes/nova-alt/theme.css              |  65 +++--
 public/themes/nova-vue/theme.css              |  65 +++--
 public/themes/nova/theme.css                  |  65 +++--
 public/themes/rhea/theme.css                  |  65 +++--
 public/themes/saga-blue/theme.css             |  65 +++--
 public/themes/saga-green/theme.css            |  65 +++--
 public/themes/saga-orange/theme.css           |  65 +++--
 public/themes/saga-purple/theme.css           |  65 +++--
 public/themes/vela-blue/theme.css             |  65 +++--
 public/themes/vela-green/theme.css            |  65 +++--
 public/themes/vela-orange/theme.css           |  65 +++--
 public/themes/vela-purple/theme.css           |  65 +++--
 src/AppMenu.vue                               |   3 +-
 src/components/splitter/Splitter.d.ts         |   8 +
 src/components/splitter/Splitter.vue          | 226 +++++++++++++++
 .../splitterpanel/SplitterPanel.d.ts          |   8 +
 .../splitterpanel/SplitterPanel.vue           |  31 ++
 src/main.js                                   |   4 +
 src/router/index.js                           |   5 +
 src/views/progressbar/ProgressBarDoc.vue      |   3 +-
 src/views/splitter/SplitterDemo.vue           |  74 +++++
 src/views/splitter/SplitterDoc.vue            | 268 ++++++++++++++++++
 48 files changed, 2030 insertions(+), 818 deletions(-)
 create mode 100644 exports/splitter.d.ts
 create mode 100644 exports/splitter.js
 create mode 100644 exports/splitterpanel.d.ts
 create mode 100644 exports/splitterpanel.js
 create mode 100644 src/components/splitter/Splitter.d.ts
 create mode 100644 src/components/splitter/Splitter.vue
 create mode 100644 src/components/splitterpanel/SplitterPanel.d.ts
 create mode 100644 src/components/splitterpanel/SplitterPanel.vue
 create mode 100644 src/views/splitter/SplitterDemo.vue
 create mode 100644 src/views/splitter/SplitterDoc.vue

diff --git a/exports/splitter.d.ts b/exports/splitter.d.ts
new file mode 100644
index 000000000..046ffcb8a
--- /dev/null
+++ b/exports/splitter.d.ts
@@ -0,0 +1 @@
+export * from './components/splitter/Splitter';
\ No newline at end of file
diff --git a/exports/splitter.js b/exports/splitter.js
new file mode 100644
index 000000000..e5ddc8e95
--- /dev/null
+++ b/exports/splitter.js
@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/splitter/Splitter.vue');
+            
\ No newline at end of file
diff --git a/exports/splitterpanel.d.ts b/exports/splitterpanel.d.ts
new file mode 100644
index 000000000..10d580e5c
--- /dev/null
+++ b/exports/splitterpanel.d.ts
@@ -0,0 +1 @@
+export * from './components/splitterpanel/SplitterPanel';
\ No newline at end of file
diff --git a/exports/splitterpanel.js b/exports/splitterpanel.js
new file mode 100644
index 000000000..cd7eef108
--- /dev/null
+++ b/exports/splitterpanel.js
@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/splitterpanel/SplitterPanel.vue');
+            
\ No newline at end of file
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index ddf371742..96ea80685 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #383838;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #383838;
+  background: #1e1e1e;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #383838;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #383838;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #383838;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #383838;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #383838;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index bb45177c7..37b5aaa8c 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #383838;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #383838;
+  background: #1e1e1e;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #383838;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #383838;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #383838;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #383838;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #383838;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 21de482d7..1f4bd9ee9 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #383838;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #383838;
+  background: #1e1e1e;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #383838;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #383838;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #383838;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #383838;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #383838;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 03171a7f9..2b076e16c 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #383838;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #383838;
+  background: #1e1e1e;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #383838;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #383838;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #383838;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #383838;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #383838;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 607a480bb..f9c459691 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2816,6 +2816,30 @@
   padding: 1.25rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #2a323d;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #3f4b5b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #3f4b5b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #3f4b5b;
   padding: 1rem 1.25rem;
@@ -2871,6 +2895,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #3f4b5b;
+  background: #2a323d;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: color 0.15s, box-shadow 0.15s;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #3f4b5b;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #3f4b5b;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #3f4b5b;
@@ -4350,30 +4391,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #2a323d;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #3f4b5b;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #3f4b5b;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index b29cc2c26..790ae8abc 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -2816,6 +2816,30 @@
   padding: 1.25rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #2a323d;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #3f4b5b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #3f4b5b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #3f4b5b;
   padding: 1rem 1.25rem;
@@ -2871,6 +2895,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #3f4b5b;
+  background: #2a323d;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: color 0.15s, box-shadow 0.15s;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #3f4b5b;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #3f4b5b;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #3f4b5b;
@@ -4350,30 +4391,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #2a323d;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #3f4b5b;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #3f4b5b;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 0566eeb0f..2bfaa3cba 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2816,6 +2816,30 @@
   padding: 1.25rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #dee2e6;
   padding: 1rem 1.25rem;
@@ -2871,6 +2895,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #dee2e6;
+  background: #ffffff;
+  border-radius: 4px;
+  color: #212529;
+}
+.p-splitter .p-splitter-gutter {
+  transition: box-shadow 0.15s;
+  background: #efefef;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #dee2e6;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #dee2e6;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #dee2e6;
@@ -4350,30 +4391,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #dee2e6;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #dee2e6;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index d2075e44d..d8f3b302e 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -2816,6 +2816,30 @@
   padding: 1.25rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #dee2e6;
   padding: 1rem 1.25rem;
@@ -2871,6 +2895,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #dee2e6;
+  background: #ffffff;
+  border-radius: 4px;
+  color: #212529;
+}
+.p-splitter .p-splitter-gutter {
+  transition: box-shadow 0.15s;
+  background: #efefef;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #dee2e6;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #dee2e6;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #dee2e6;
@@ -4350,30 +4391,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #dee2e6;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #dee2e6;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index bd03f8ebf..ac6b4b3be 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -2779,6 +2779,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #edebe9;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #edebe9;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #a19f9d;
   padding: 1rem;
@@ -2834,6 +2858,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #a19f9d;
+  background: #ffffff;
+  border-radius: 2px;
+  color: #323130;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #faf9f8;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #edebe9;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #edebe9;
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: 0 none;
@@ -4289,30 +4330,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #edebe9;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #edebe9;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 2px;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 0889c4cbe..dd2a0574a 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2791,6 +2791,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
@@ -2846,6 +2870,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #191919;
+  background: #323232;
+  border-radius: 3px;
+  color: #dedede;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #191919;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #4b4b4b;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #4b4b4b;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4301,30 +4342,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #323232;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #4b4b4b;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #4b4b4b;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 3cc946cbb..d544788a9 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2791,6 +2791,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
@@ -2846,6 +2870,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #191919;
+  background: #323232;
+  border-radius: 3px;
+  color: #dedede;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #191919;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #4b4b4b;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #4b4b4b;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4301,30 +4342,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #323232;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #4b4b4b;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #4b4b4b;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 4469547f0..6e61f484f 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2791,6 +2791,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
@@ -2846,6 +2870,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #191919;
+  background: #323232;
+  border-radius: 3px;
+  color: #dedede;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #191919;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #4b4b4b;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #4b4b4b;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4301,30 +4342,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #323232;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #4b4b4b;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #4b4b4b;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 59bdb6783..ffb76de04 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2791,6 +2791,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
@@ -2846,6 +2870,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #191919;
+  background: #323232;
+  border-radius: 3px;
+  color: #dedede;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #191919;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #4b4b4b;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #4b4b4b;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4301,30 +4342,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #323232;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #4b4b4b;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #4b4b4b;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 0005ddde2..d3cf67c93 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -2828,6 +2828,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 1rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #1e1e1e;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(255, 255, 255, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(255, 255, 255, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: solid rgba(255, 255, 255, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1.25rem 0;
-  padding: 0 1.25rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1.25rem;
-  padding: 1.25rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index a9bd391ca..aba558117 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -2828,6 +2828,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 1rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #1e1e1e;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(255, 255, 255, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(255, 255, 255, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: solid rgba(255, 255, 255, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1.25rem 0;
-  padding: 0 1.25rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1.25rem;
-  padding: 1.25rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 76aff7abc..04bea28d1 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -2828,6 +2828,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #e0e0e0;
   padding: 1rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #e0e0e0;
+  background: #ffffff;
+  border-radius: 4px;
+  color: #000001;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(0, 0, 0, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(0, 0, 0, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: solid rgba(0, 0, 0, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1.25rem 0;
-  padding: 0 1.25rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1.25rem;
-  padding: 1.25rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 4ed1de3fe..d3a8f6198 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -2828,6 +2828,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #e0e0e0;
   padding: 1rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #e0e0e0;
+  background: #ffffff;
+  border-radius: 4px;
+  color: #000001;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(0, 0, 0, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(0, 0, 0, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: solid rgba(0, 0, 0, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1.25rem 0;
-  padding: 0 1.25rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1.25rem;
-  padding: 1.25rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 5a70691dd..086fb27a4 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -2828,6 +2828,30 @@
   padding: 0.75rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 0.75rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #1e1e1e;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(255, 255, 255, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(255, 255, 255, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: solid rgba(255, 255, 255, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index b3f9b6a56..a2bd1ccda 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -2828,6 +2828,30 @@
   padding: 0.75rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 0.75rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #1e1e1e;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(255, 255, 255, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(255, 255, 255, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: solid rgba(255, 255, 255, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1e1e1e;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(255, 255, 255, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 4208b05ec..4f79d420a 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -2828,6 +2828,30 @@
   padding: 0.75rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #e0e0e0;
   padding: 0.75rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #e0e0e0;
+  background: #ffffff;
+  border-radius: 4px;
+  color: #000001;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(0, 0, 0, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(0, 0, 0, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: solid rgba(0, 0, 0, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 1d070602c..a504423ce 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -2828,6 +2828,30 @@
   padding: 0.75rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #e0e0e0;
   padding: 0.75rem;
@@ -2883,6 +2907,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #e0e0e0;
+  background: #ffffff;
+  border-radius: 4px;
+  color: #000001;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(0, 0, 0, 0.04);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: rgba(0, 0, 0, 0.12);
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: rgba(0, 0, 0, 0.12);
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: solid rgba(0, 0, 0, 0.12);
@@ -4362,30 +4403,6 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 670ade742..36e5608d4 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -2779,6 +2779,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #007ad9;
   padding: 0.857rem 1rem;
@@ -2834,6 +2858,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #c8c8c8;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #333333;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #eaeaea;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #d8dae2;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #d8dae2;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4289,30 +4330,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #c8c8c8;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #c8c8c8;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index a7fceb38a..6cfeb3467 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -2791,6 +2791,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #333333;
   padding: 0.857rem 1rem;
@@ -2846,6 +2870,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #c8c8c8;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #333333;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #eaeaea;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #d8dae2;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #d8dae2;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4301,30 +4342,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #c8c8c8;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #c8c8c8;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 91b0ea38b..74cdc36a6 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2791,6 +2791,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #c8c8c8;
   padding: 0.857rem 1rem;
@@ -2846,6 +2870,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #c8c8c8;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #333333;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #eaeaea;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #d8dae2;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #d8dae2;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4301,30 +4342,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #c8c8c8;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #c8c8c8;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f048a9e06..a07c6205b 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -2791,6 +2791,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #c8c8c8;
   padding: 0.857rem 1rem;
@@ -2846,6 +2870,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #c8c8c8;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #333333;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #eaeaea;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #d8dae2;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #d8dae2;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4301,30 +4342,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #c8c8c8;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #c8c8c8;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 51eb28057..3d8032041 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2779,6 +2779,30 @@
   padding: 0.571rem 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dadada;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dadada;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #7B95A3;
   padding: 0.857rem 1rem;
@@ -2834,6 +2858,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #dadada;
+  background: #ffffff;
+  border-radius: 2px;
+  color: #666666;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #eaeaea;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #dadada;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #dadada;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 0 none;
@@ -4289,30 +4330,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #dadada;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #dadada;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 2px;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 1c239ea06..4c0be0838 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #dee2e6;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #dee2e6;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #495057;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #f8f9fa;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #dee2e6;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #dee2e6;
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: 1px solid #dee2e6;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #dee2e6;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #dee2e6;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 74fa4aad9..df50778ad 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #dee2e6;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #dee2e6;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #495057;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #f8f9fa;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #dee2e6;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #dee2e6;
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: 1px solid #dee2e6;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #dee2e6;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #dee2e6;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index afbd0b18a..0d8668782 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #dee2e6;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #dee2e6;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #495057;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #f8f9fa;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #dee2e6;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #dee2e6;
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: 1px solid #dee2e6;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #dee2e6;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #dee2e6;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 843a4ec41..621c143ab 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #dee2e6;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #dee2e6;
+  background: #ffffff;
+  border-radius: 3px;
+  color: #495057;
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: #f8f9fa;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #dee2e6;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #dee2e6;
+}
+
 .p-tabview .p-tabview-nav {
   background: #ffffff;
   border: 1px solid #dee2e6;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #dee2e6;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #dee2e6;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 5bcc5320b..84e69fcde 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #304562;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #304562;
+  background: #1f2d40;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #304562;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #304562;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #304562;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1f2d40;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #304562;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #304562;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 6f6828d78..bb769023e 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #304562;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #304562;
+  background: #1f2d40;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #304562;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #304562;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #304562;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1f2d40;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #304562;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #304562;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 7959f2543..29544d368 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #304562;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #304562;
+  background: #1f2d40;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #304562;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #304562;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #304562;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1f2d40;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #304562;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #304562;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 06d49037b..a14aae9b3 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -2804,6 +2804,30 @@
   padding: 1rem;
 }
 
+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header {
   border: 1px solid #304562;
   padding: 1rem;
@@ -2859,6 +2883,23 @@
   border: 0 none;
 }
 
+.p-splitter {
+  border: 1px solid #304562;
+  background: #1f2d40;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-splitter .p-splitter-gutter {
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+  background: #304562;
+}
+.p-splitter.p-splitter-resizing .p-splitter-gutter {
+  background: #304562;
+}
+
 .p-tabview .p-tabview-nav {
   background: transparent;
   border: 1px solid #304562;
@@ -4338,30 +4379,6 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.p-divider .p-divider-content {
-  background-color: #1f2d40;
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #304562;
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #304562;
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 671538802..2a41574e3 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -166,8 +166,10 @@
                 <router-link to="/accordion">Accordion</router-link>
                 <router-link to="/card">Card</router-link>
                 <router-link to="/deferredcontent">Deferred</router-link>
+                <router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
                 <router-link to="/fieldset">Fieldset</router-link>
                 <router-link to="/panel">Panel</router-link>
+                <router-link to="/splitter">Splitter <Tag value="New"></Tag></router-link>
                 <router-link to="/scrollpanel">ScrollPanel</router-link>
                 <router-link to="/tabview">TabView</router-link>
                 <router-link to="/toolbar">Toolbar</router-link>
@@ -251,7 +253,6 @@
                 <router-link to="/avatar">Avatar <Tag value="New"></Tag></router-link>
                 <router-link to="/badge">Badge <Tag value="New"></Tag></router-link>
                 <router-link to="/blockui">BlockUI</router-link>
-                <router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/scrolltop">ScrollTop <Tag value="New"></Tag></router-link>
                 <router-link to="/skeleton">Skeleton <Tag value="New"></Tag></router-link>
diff --git a/src/components/splitter/Splitter.d.ts b/src/components/splitter/Splitter.d.ts
new file mode 100644
index 000000000..cfb326655
--- /dev/null
+++ b/src/components/splitter/Splitter.d.ts
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+
+declare class Splitter extends Vue {
+    layout?: string;
+    gutterSize?: number;
+}
+
+export default Splitter;
\ No newline at end of file
diff --git a/src/components/splitter/Splitter.vue b/src/components/splitter/Splitter.vue
new file mode 100644
index 000000000..318ca4a58
--- /dev/null
+++ b/src/components/splitter/Splitter.vue
@@ -0,0 +1,226 @@
+<template>
+    <div :class="containerClass">
+        <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
+             <component :is="panel"></component>
+             <div ref="gutter" class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle" @mousedown="onGutterMouseDown($event)">
+                 <div class="p-splitter-gutter-handle"></div>
+             </div>
+        </template>
+    </div>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    name: 'splitter',
+    props: {
+        layout: {
+            type: String,
+            default: 'horizontal'
+        },
+        gutterSize: {
+            type: Number,
+            default: 4
+        }
+    },
+    dragging: false,
+    mouseMoveListener: null,
+    mouseUpListener: null,
+    size: null,
+    startPos: null,
+    prevPanelElement: null,
+    nextPanelElement: null,
+    nextPanelSize: null,
+    prevPanelSize: null,
+    mounted() {
+        this.initialize();
+    },
+    beforeUnmount() {
+        this.clear();
+        this.unbindListeners();
+    },
+    methods: {
+        isSplitterPanel(child) {
+            return child.type.name === 'splitterpanel';
+        },
+        initialize() {
+            if (this.panels && this.panels.length) {
+                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
+
+                this.panels.forEach((panel, i) => {
+                    let panelSize = panel.props && panel.props.size ? panel.props.size: null;
+
+                    if (panelSize)
+                        children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                    else
+                        children[i].style.flexBasis = 'calc(' + (100 / this.panels.length) + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                });
+            }
+        },
+        onGutterMouseDown(event) {
+            this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
+            this.dragging = true;
+            this.startPos = this.layout === 'horizontal' ? event.pageX : event.pageY;
+            this.prevPanelElement = event.currentTarget.previousElementSibling;
+            this.nextPanelElement = event.currentTarget.nextElementSibling;
+            this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
+            this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
+            DomHandler.addClass(this.$el, 'p-splitter-resizing');
+            this.bindListeners();
+        },
+        bindListeners() {
+            if (!this.mouseMoveListener) {
+                this.mouseMoveListener = event => {
+                    let newPos;
+                    if (this.horizontal)
+                        newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
+                    else
+                        newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
+
+                    let newPrevPanelSize = this.prevPanelSize + newPos;
+                    let newNextPanelSize = this.nextPanelSize - newPos;
+                    
+                    if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
+                        this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                        this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                    }
+                };
+                document.addEventListener('mousemove', this.mouseMoveListener);
+            }
+
+            if (!this.mouseUpListener) {
+                this.mouseUpListener = () => {
+                    this.clear();
+                    this.unbindListeners();
+                };
+                document.addEventListener('mouseup', this.mouseUpListener);
+            }
+        },
+        validateResize(newPrevPanelSize, newNextPanelSize) {
+            if (this.panels[0].props && this.panels[0].props.minSize && this.panels[0].props.minSize > newPrevPanelSize) {
+                return false;
+            }
+
+            if (this.panels[1].props && this.panels[1].props.minSize && this.panels[1].props.minSize > newNextPanelSize) {
+                return false;
+            }
+
+            return true;
+        },
+        unbindListeners() {
+            if (this.mouseMoveListener) {
+                document.removeEventListener('mousemove', this.mouseMoveListener);
+                this.mouseMoveListener = null;
+            }
+
+            if (this.mouseUpListener) {
+                document.removeEventListener('mouseup', this.mouseUpListener);
+                this.mouseUpListener = null;
+            }
+        },
+        clear() {
+            this.dragging = false;
+            this.size = null;
+            this.startPos = null;
+            this.prevPanelElement = null;
+            this.nextPanelElement = null;
+            this.prevPanelSize = null;
+            this.nextPanelSize = null;
+            DomHandler.removeClass(this.$el, 'p-splitter-resizing');
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-splitter p-component', 'p-splitter-' + this.layout];
+        },
+        panels() {
+            const panels = [];
+            this.$slots.default().forEach(child => {
+                    if (this.isSplitterPanel(child)) {
+                        panels.push(child);
+                    }
+                    else if (child.children.length > 0) {
+                        child.children.forEach(nestedChild => {
+                            if (this.isSplitterPanel(nestedChild)) {
+                                panels.push(nestedChild)
+                            }
+                        });
+                    }
+                }
+            )
+            return panels;
+        },
+        gutterStyle() {
+            if (this.horizontal)
+                return {width: this.gutterSize + 'px'};
+            else
+                return {height: this.gutterSize + 'px'};
+        },
+        horizontal() {
+            return this.layout === 'horizontal';
+        }
+    }
+}
+</script>
+
+<style>
+.p-splitter {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.p-splitter-vertical {
+    flex-direction: column;
+}
+
+.p-splitter-panel {
+    flex-grow: 1;
+}
+
+.p-splitter-panel-nested {
+    display: flex;
+}
+
+.p-splitter-panel .p-splitter {
+    flex-grow: 1;
+    border: 0 none;
+}
+
+.p-splitter-gutter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: col-resize;
+}
+
+.p-splitter-horizontal.p-splitter-resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    height: 24px;
+    width: 100%;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+    cursor: col-resize;
+}
+
+.p-splitter-vertical.p-splitter-resizing {
+    cursor: row-resize;
+    user-select: none;
+}
+
+.p-splitter-vertical > .p-splitter-gutter {
+    cursor: row-resize;
+}
+
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    width: 24px;
+    height: 100%;
+}
+</style>
diff --git a/src/components/splitterpanel/SplitterPanel.d.ts b/src/components/splitterpanel/SplitterPanel.d.ts
new file mode 100644
index 000000000..ae428ee2e
--- /dev/null
+++ b/src/components/splitterpanel/SplitterPanel.d.ts
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+
+declare class SplitterPanel extends Vue {
+    size?: number;
+    minSize?: number;
+}
+
+export default SplitterPanel;
\ No newline at end of file
diff --git a/src/components/splitterpanel/SplitterPanel.vue b/src/components/splitterpanel/SplitterPanel.vue
new file mode 100644
index 000000000..c57b0b042
--- /dev/null
+++ b/src/components/splitterpanel/SplitterPanel.vue
@@ -0,0 +1,31 @@
+<template>
+    <div ref="container" :class="containerClass">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'splitterpanel',
+    props: {
+        size: {
+            type: Number,
+            default: null
+        },
+        minSize: {
+            type: Number,
+            default: null
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-splitter-panel', {'p-splitter-panel-nested': this.isNested}];
+        },
+        isNested() {
+            return this.$slots.default().some(child => {
+                return child.type.name === 'splitter';
+            });
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a11ca3b6e..af6f556bb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -68,6 +68,8 @@ import Skeleton from './components/skeleton/Skeleton';
 import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
 import SplitButton from './components/splitbutton/SplitButton';
+import Splitter from './components/splitter/Splitter';
+import SplitterPanel from './components/splitterpanel/SplitterPanel';
 import Steps from './components/steps/Steps';
 import TabMenu from './components/tabmenu/TabMenu';
 import TabView from './components/tabview/TabView';
@@ -180,6 +182,8 @@ app.component('Slider', Slider);
 app.component('Sidebar', Sidebar);
 app.component('Skeleton', Skeleton);
 app.component('SplitButton', SplitButton);
+app.component('Splitter', Splitter);
+app.component('SplitterPanel', SplitterPanel);
 app.component('Steps', Steps);
 app.component('TabView', TabView);
 app.component('TabPanel', TabPanel);
diff --git a/src/router/index.js b/src/router/index.js
index 248bb383f..8d92ce18b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -392,6 +392,11 @@ const routes = [
         name: 'skeleton',
         component: () => import('../views/skeleton/SkeletonDemo.vue')
     },
+    {
+        path: '/splitter',
+        name: 'splitter',
+        component: () => import('../views/splitter/SplitterDemo.vue')
+    },
     {
         path: '/listbox',
         name: 'listbox',
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 060a39b88..a17de7b38 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -44,6 +44,7 @@ data() {
 </code></pre>
 
 				<h5>Properties</h5>
+				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
@@ -117,7 +118,7 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/prograssbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
 <pre v-code>
diff --git a/src/views/splitter/SplitterDemo.vue b/src/views/splitter/SplitterDemo.vue
new file mode 100644
index 000000000..a180cf00a
--- /dev/null
+++ b/src/views/splitter/SplitterDemo.vue
@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Splitter</h1>
+                <p>Splitter is utilized to separate and resize panels.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Horizontal</h5>
+                <Splitter style="height: 300px">
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                        Panel 1
+                    </SplitterPanel>
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                        Panel 2
+                    </SplitterPanel>
+                </Splitter>
+            </div>
+
+            <div class="card">
+                <h5>Vertical</h5>
+                <Splitter style="height: 300px" layout="vertical">
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                        Panel 1
+                    </SplitterPanel>
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                        Panel 2
+                    </SplitterPanel>
+                </Splitter>
+            </div>
+
+            <div class="card">
+                <h5>Nested</h5>
+                <Splitter style="height: 300px">
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
+                        Panel 1
+                    </SplitterPanel>
+                    <SplitterPanel :size="80">
+                        <Splitter layout="vertical">
+                            <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15">
+                                Panel 2
+                            </SplitterPanel>
+                            <SplitterPanel :size="85">
+                                <Splitter>
+                                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20">
+                                        Panel 3
+                                    </SplitterPanel>
+                                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80">
+                                        Panel 4
+                                    </SplitterPanel>
+                                </Splitter>
+                            </SplitterPanel>
+                        </Splitter>
+                    </SplitterPanel>
+                </Splitter>
+            </div>
+        </div>
+
+        <SplitterDoc />
+    </div>
+</template>
+
+<script>
+import SplitterDoc from './SplitterDoc';
+
+export default {
+    components: {
+        'SplitterDoc': SplitterDoc
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue
new file mode 100644
index 000000000..f59def706
--- /dev/null
+++ b/src/views/splitter/SplitterDoc.vue
@@ -0,0 +1,268 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import Splitter from 'primevue/splitter';
+import SplitterPanel from 'primevue/splitterpanel';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Splitter requires two SplitterPanel components to wrap.</p>
+<pre v-code>
+<code>
+&lt;Splitter style="height: 300px"&gt;
+	&lt;SplitterPanel&gt;
+		Panel 1
+	&lt;/SplitterPanel&gt;
+	&lt;SplitterPanel&gt;
+		Panel 2
+	&lt;/SplitterPanel&gt;
+&lt;/Splitter&gt;
+
+</code></pre>
+
+				<h5>Layout</h5>
+				<p>Default orientation is configured with the <i>layout</i> property and default is the "horizontal" whereas other alternative is the "vertical".</p>
+<pre v-code>
+<code>
+&lt;Splitter style="height: 300px" layout="vertical"&gt;
+	&lt;SplitterPanel&gt;
+		Panel 1
+	&lt;/SplitterPanel&gt;
+	&lt;SplitterPanel&gt;
+		Panel 2
+	&lt;/SplitterPanel&gt;
+&lt;/Splitter&gt;
+
+</code></pre>
+
+				<h5>Initial Sizes</h5>
+				<p>When no size is defined, panels are split 50/50, use the <i>size</i> property to give relative widths e.g. 20/80.</p>
+<pre v-code>
+<code>
+&lt;Splitter style="height: 300px"&gt;
+	&lt;SplitterPanel :size="20" &gt;
+		Panel 1
+	&lt;/SplitterPanel&gt;
+	&lt;SplitterPanel  :size="80"&gt;
+		Panel 2
+	&lt;/SplitterPanel&gt;
+&lt;/Splitter&gt;
+
+</code></pre>
+
+				<h5>Minimum Size</h5>
+				<p>Minimum size defines the lowest boundary for the size of a panel.</p>
+<pre v-code>
+<code>
+&lt;Splitter style="height: 300px"&gt;
+	&lt;SplitterPanel :size="20" :minSize="10"&gt;
+		Panel 1
+	&lt;/SplitterPanel&gt;
+	&lt;SplitterPanel  :size="80" :minSize="20"&gt;
+		Panel 2
+	&lt;/SplitterPanel&gt;
+&lt;/Splitter&gt;
+
+</code></pre>
+
+				<h5>Nested Panels</h5>
+				<p>Splitters can be combined to create advanced layouts.</p>
+<pre v-code>
+<code>
+&lt;Splitter style="height: 300px"&gt;
+	&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10"&gt;
+		Panel 1
+	&lt;/SplitterPanel&gt;
+	&lt;SplitterPanel :size="80"&gt;
+		&lt;Splitter layout="vertical"&gt;
+			&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15"&gt;
+				Panel 2
+			&lt;/SplitterPanel&gt;
+			&lt;SplitterPanel :size="85"&gt;
+				&lt;Splitter&gt;
+					&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20"&gt;
+						Panel 3
+					&lt;/SplitterPanel&gt;
+					&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80"&gt;
+						Panel 4
+					&lt;/SplitterPanel&gt;
+				&lt;/Splitter&gt;
+			&lt;/SplitterPanel&gt;
+		&lt;/Splitter&gt;
+	&lt;/SplitterPanel&gt;
+&lt;/Splitter&gt;
+
+</code></pre>
+
+				<h5>Properties of SplitterPanel</h5>
+				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>size</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Size of the element relative to 100%.</td>
+                            </tr>
+                            <tr>
+                                <td>minSize</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Minimum size of the element relative to 100%.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Properties of Splitter</h5>
+				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>layout</td>
+                                <td>string</td>
+                                <td>horizontal</td>
+                                <td>Orientation of the panels, valid values are "horizontal" and "vertical".</td>
+                            </tr>
+                            <tr>
+                                <td>gutterSize</td>
+                                <td>number</td>
+                                <td>4</td>
+                                <td>Size of the divider in pixels.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-splitter</td>
+                                <td>Container element.</td>
+                            </tr>
+							<tr>
+                                <td>p-splitter</td>
+                                <td>Container element during resize.</td>
+                            </tr>
+							<tr>
+                                <td>p-splitter-horizontal</td>
+                                <td>Container element with horizontal layout.</td>
+                            </tr>
+							<tr>
+                                <td>p-splitter-vertical</td>
+                                <td>Container element with vertical layout.</td>
+                            </tr>
+							<tr>
+                                <td>p-splitter-panel</td>
+                                <td>Splitter panel element.</td>
+                            </tr>
+							<tr>
+                                <td>p-splitter-gutter</td>
+                                <td>Gutter element to use when resizing the panels.</td>
+                            </tr>
+							<tr>
+                                <td>p-splitter-gutter-handle</td>
+                                <td>Handl element of the gutter.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/splitter" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;div class="card"&gt;
+	&lt;h5&gt;Horizontal&lt;/h5&gt;
+	&lt;Splitter style="height: 300px"&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center"&gt;
+			Panel 1
+		&lt;/SplitterPanel&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center"&gt;
+			Panel 2
+		&lt;/SplitterPanel&gt;
+	&lt;/Splitter&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+	&lt;h5&gt;Vertical&lt;/h5&gt;
+	&lt;Splitter style="height: 300px" layout="vertical"&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center"&gt;
+			Panel 1
+		&lt;/SplitterPanel&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center"&gt;
+			Panel 2
+		&lt;/SplitterPanel&gt;
+	&lt;/Splitter&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+	&lt;h5&gt;Nested&lt;/h5&gt;
+	&lt;Splitter style="height: 300px"&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10"&gt;
+			Panel 1
+		&lt;/SplitterPanel&gt;
+		&lt;SplitterPanel :size="80"&gt;
+			&lt;Splitter layout="vertical"&gt;
+				&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15"&gt;
+					Panel 2
+				&lt;/SplitterPanel&gt;
+				&lt;SplitterPanel :size="85"&gt;
+					&lt;Splitter&gt;
+						&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20"&gt;
+							Panel 3
+						&lt;/SplitterPanel&gt;
+						&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80"&gt;
+							Panel 4
+						&lt;/SplitterPanel&gt;
+					&lt;/Splitter&gt;
+				&lt;/SplitterPanel&gt;
+			&lt;/Splitter&gt;
+		&lt;/SplitterPanel&gt;
+	&lt;/Splitter&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+			</TabPanel>
+		</TabView>
+	</div>
+</template>