diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94e649f7..30e9bb9a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,20 @@
 ## [CoreUI for Vue.js](./README.md) version `changelog`
 
+##### `v2.1.1`
+- chore: update `@coreui/coreui` to `^2.1.5`
+- chore: update `@coreui/vue` to `^2.1.1`
+- chore: update `bootstrap` to `^4.2.1`
+- chore: update `core-js` to `^2.6.1`
+- chore: update `css-vars-ponyfill` to `^1.16.2`
+- chore: update `vue` to `^2.5.21`
+- chore: update `@vue/cli-plugin-babel` to `^3.3.0`
+- chore: update `@vue/cli-plugin-e2e-nightwatch` to `^3.3.0`
+- chore: update `@vue/cli-plugin-eslint` to `^3.3.0`
+- chore: update `@vue/cli-plugin-unit-jest` to `^3.3.0`
+- chore: update `@vue/cli-service` to `^3.3.0`
+- chore: update `@vue/test-utils` to `^1.0.0-beta.28`
+- chore: update `vue-template-compiler` to `^2.5.21`
+
 ##### `v2.1.0`
 - feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming:
   - attributes: `rel`, `target`, `hidden`, `disabled`, etc...  
diff --git a/package.json b/package.json
index 59a5fe5f..74d2dc00 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -14,38 +14,38 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.1.4",
+    "@coreui/coreui": "^2.1.5",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
-    "@coreui/vue": "^2.1.0",
-    "bootstrap": "^4.1.3",
+    "@coreui/vue": "^2.1.1",
+    "bootstrap": "^4.2.1",
     "bootstrap-vue": "^2.0.0-rc.11",
     "chart.js": "^2.7.3",
-    "core-js": "^2.6.0",
-    "css-vars-ponyfill": "^1.15.3",
+    "core-js": "^2.6.1",
+    "css-vars-ponyfill": "^1.16.2",
     "flag-icon-css": "^3.2.0",
     "font-awesome": "^4.7.0",
     "perfect-scrollbar": "^1.4.0",
     "simple-line-icons": "^2.4.1",
-    "vue": "^2.5.19",
+    "vue": "^2.5.21",
     "vue-chartjs": "^3.4.0",
     "vue-perfect-scrollbar": "^0.1.0",
     "vue-router": "^3.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.1",
-    "@vue/cli-plugin-unit-jest": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
-    "@vue/test-utils": "^1.0.0-beta.27",
+    "@vue/cli-plugin-babel": "^3.3.0",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.3.0",
+    "@vue/cli-plugin-eslint": "^3.3.0",
+    "@vue/cli-plugin-unit-jest": "^3.3.0",
+    "@vue/cli-service": "^3.3.0",
+    "@vue/test-utils": "^1.0.0-beta.28",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
     "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.5.19"
+    "vue-template-compiler": "^2.5.21"
   },
   "browserslist": [
     "> 1%",
diff --git a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
index 35b3866d..2cf53071 100644
--- a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
@@ -45,7 +45,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-11"
+          id="switch-id-668"
           name="switch1"
           uncheckedvalue="no"
           value="yes"
@@ -57,7 +57,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-12"
+          id="switch-id-669"
           value="true"
         />
          
@@ -67,7 +67,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-13"
+          id="switch-id-670"
           value="true"
         />
          
@@ -77,7 +77,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-14"
+          id="switch-id-671"
           value="true"
         />
          
@@ -87,7 +87,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-15"
+          id="switch-id-672"
           value="true"
         />
          
@@ -97,7 +97,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-16"
+          id="switch-id-673"
           value="true"
         />
          
@@ -107,7 +107,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-17"
+          id="switch-id-674"
           value="true"
         />
          
@@ -117,7 +117,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-18"
+          id="switch-id-675"
           value="true"
         />
          
@@ -127,7 +127,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-19"
+          id="switch-id-676"
           value="true"
         />
       </b-card-stub>
@@ -160,7 +160,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-20"
+          id="switch-id-677"
           value="true"
           variant="pill"
         />
@@ -171,7 +171,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-21"
+          id="switch-id-678"
           value="true"
           variant="pill"
         />
@@ -182,7 +182,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-22"
+          id="switch-id-679"
           value="true"
           variant="pill"
         />
@@ -193,7 +193,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-23"
+          id="switch-id-680"
           value="true"
           variant="pill"
         />
@@ -204,7 +204,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-24"
+          id="switch-id-681"
           value="true"
           variant="pill"
         />
@@ -215,7 +215,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-25"
+          id="switch-id-682"
           value="true"
           variant="pill"
         />
@@ -226,7 +226,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-26"
+          id="switch-id-683"
           value="true"
           variant="pill"
         />
@@ -237,7 +237,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-27"
+          id="switch-id-684"
           value="true"
           variant="pill"
         />
@@ -248,7 +248,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-28"
+          id="switch-id-685"
           value="true"
           variant="pill"
         />
@@ -282,7 +282,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-29"
+          id="switch-id-686"
           value="true"
           variant="3d"
         />
@@ -293,7 +293,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-30"
+          id="switch-id-687"
           value="true"
           variant="3d"
         />
@@ -304,7 +304,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-31"
+          id="switch-id-688"
           value="true"
           variant="3d"
         />
@@ -315,7 +315,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-32"
+          id="switch-id-689"
           value="true"
           variant="3d"
         />
@@ -326,7 +326,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-33"
+          id="switch-id-690"
           value="true"
           variant="3d"
         />
@@ -337,7 +337,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-34"
+          id="switch-id-691"
           value="true"
           variant="3d"
         />
@@ -348,7 +348,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-35"
+          id="switch-id-692"
           value="true"
           variant="3d"
         />
@@ -359,7 +359,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-36"
+          id="switch-id-693"
           value="true"
           variant="3d"
         />
@@ -370,7 +370,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-37"
+          id="switch-id-694"
           value="true"
           variant="3d"
         />
@@ -409,7 +409,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-38"
+          id="switch-id-695"
           value="true"
           variant="3d"
         />
@@ -421,7 +421,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-39"
+          id="switch-id-696"
           value="true"
           variant="3d"
         />
@@ -433,7 +433,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-40"
+          id="switch-id-697"
           value="true"
           variant="3d"
         />
@@ -445,7 +445,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-41"
+          id="switch-id-698"
           value="true"
           variant="3d"
         />
@@ -457,7 +457,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-42"
+          id="switch-id-699"
           value="true"
           variant="3d"
         />
@@ -469,7 +469,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-43"
+          id="switch-id-700"
           value="true"
           variant="3d"
         />
@@ -481,7 +481,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-44"
+          id="switch-id-701"
           value="true"
           variant="3d"
         />
@@ -493,7 +493,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-45"
+          id="switch-id-702"
           value="true"
           variant="3d"
         />
@@ -504,7 +504,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-46"
+          id="switch-id-703"
           value="true"
           variant="3d"
         />
@@ -542,7 +542,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-47"
+          id="switch-id-704"
           outline="alt"
           value="true"
           variant="3d"
@@ -554,7 +554,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-48"
+          id="switch-id-705"
           outline="alt"
           value="true"
           variant="3d"
@@ -566,7 +566,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-49"
+          id="switch-id-706"
           outline="alt"
           value="true"
           variant="3d"
@@ -578,7 +578,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-50"
+          id="switch-id-707"
           outline="alt"
           value="true"
           variant="3d"
@@ -590,7 +590,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-51"
+          id="switch-id-708"
           outline="alt"
           value="true"
           variant="3d"
@@ -602,7 +602,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-52"
+          id="switch-id-709"
           outline="alt"
           value="true"
           variant="3d"
@@ -614,7 +614,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-53"
+          id="switch-id-710"
           outline="alt"
           value="true"
           variant="3d"
@@ -626,7 +626,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-54"
+          id="switch-id-711"
           outline="alt"
           value="true"
           variant="3d"
@@ -638,7 +638,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-55"
+          id="switch-id-712"
           outline="alt"
           value="true"
           variant="3d"
@@ -677,7 +677,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-56"
+          id="switch-id-713"
           label="true"
           value="true"
           variant="3d"
@@ -689,7 +689,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-57"
+          id="switch-id-714"
           label="true"
           value="true"
           variant="3d"
@@ -701,7 +701,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-58"
+          id="switch-id-715"
           label="true"
           value="true"
           variant="3d"
@@ -713,7 +713,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-59"
+          id="switch-id-716"
           label="true"
           value="true"
           variant="3d"
@@ -725,7 +725,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-60"
+          id="switch-id-717"
           label="true"
           value="true"
           variant="3d"
@@ -737,7 +737,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-61"
+          id="switch-id-718"
           label="true"
           value="true"
           variant="3d"
@@ -749,7 +749,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-62"
+          id="switch-id-719"
           label="true"
           value="true"
           variant="3d"
@@ -761,7 +761,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-63"
+          id="switch-id-720"
           label="true"
           value="true"
           variant="3d"
@@ -773,7 +773,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-64"
+          id="switch-id-721"
           label="true"
           value="true"
           variant="3d"
@@ -812,7 +812,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-65"
+          id="switch-id-722"
           label="true"
           outline="alt"
           value="true"
@@ -825,7 +825,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-66"
+          id="switch-id-723"
           label="true"
           outline="alt"
           value="true"
@@ -838,7 +838,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-67"
+          id="switch-id-724"
           label="true"
           outline="alt"
           value="true"
@@ -851,7 +851,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-68"
+          id="switch-id-725"
           label="true"
           outline="alt"
           value="true"
@@ -864,7 +864,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-69"
+          id="switch-id-726"
           label="true"
           outline="alt"
           value="true"
@@ -877,7 +877,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-70"
+          id="switch-id-727"
           label="true"
           outline="alt"
           value="true"
@@ -890,7 +890,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-71"
+          id="switch-id-728"
           label="true"
           outline="alt"
           value="true"
@@ -903,7 +903,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           defaultchecked="true"
-          id="switch-id-72"
+          id="switch-id-729"
           label="true"
           outline="alt"
           value="true"
@@ -916,7 +916,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-73"
+          id="switch-id-730"
           label="true"
           outline="alt"
           value="true"
@@ -956,7 +956,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-74"
+          id="switch-id-731"
           label="true"
           outline="alt"
           value="true"
@@ -969,7 +969,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-75"
+          id="switch-id-732"
           label="true"
           outline="alt"
           value="true"
@@ -982,7 +982,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-76"
+          id="switch-id-733"
           label="true"
           outline="alt"
           value="true"
@@ -995,7 +995,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-77"
+          id="switch-id-734"
           label="true"
           outline="alt"
           value="true"
@@ -1008,7 +1008,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-78"
+          id="switch-id-735"
           label="true"
           outline="alt"
           value="true"
@@ -1021,7 +1021,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-79"
+          id="switch-id-736"
           label="true"
           outline="alt"
           value="true"
@@ -1034,7 +1034,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-80"
+          id="switch-id-737"
           label="true"
           outline="alt"
           value="true"
@@ -1047,7 +1047,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           defaultchecked="true"
-          id="switch-id-81"
+          id="switch-id-738"
           label="true"
           outline="alt"
           value="true"
@@ -1060,7 +1060,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-82"
+          id="switch-id-739"
           label="true"
           outline="alt"
           value="true"
@@ -1100,7 +1100,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-83"
+          id="switch-id-740"
           outline="true"
           value="true"
         />
@@ -1111,7 +1111,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-84"
+          id="switch-id-741"
           outline="true"
           value="true"
         />
@@ -1122,7 +1122,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-85"
+          id="switch-id-742"
           outline="true"
           value="true"
         />
@@ -1133,7 +1133,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-86"
+          id="switch-id-743"
           outline="true"
           value="true"
         />
@@ -1144,7 +1144,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-87"
+          id="switch-id-744"
           outline="true"
           value="true"
         />
@@ -1155,7 +1155,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-88"
+          id="switch-id-745"
           outline="true"
           value="true"
         />
@@ -1166,7 +1166,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-89"
+          id="switch-id-746"
           outline="true"
           value="true"
         />
@@ -1177,7 +1177,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-90"
+          id="switch-id-747"
           outline="true"
           value="true"
         />
@@ -1188,7 +1188,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-91"
+          id="switch-id-748"
           outline="true"
           value="true"
         />
@@ -1226,7 +1226,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-92"
+          id="switch-id-749"
           outline="true"
           value="true"
           variant="pill"
@@ -1238,7 +1238,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-93"
+          id="switch-id-750"
           outline="true"
           value="true"
           variant="pill"
@@ -1250,7 +1250,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-94"
+          id="switch-id-751"
           outline="true"
           value="true"
           variant="pill"
@@ -1262,7 +1262,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-95"
+          id="switch-id-752"
           outline="true"
           value="true"
           variant="pill"
@@ -1274,7 +1274,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-96"
+          id="switch-id-753"
           outline="true"
           value="true"
           variant="pill"
@@ -1286,7 +1286,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-97"
+          id="switch-id-754"
           outline="true"
           value="true"
           variant="pill"
@@ -1298,7 +1298,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-98"
+          id="switch-id-755"
           outline="true"
           value="true"
           variant="pill"
@@ -1310,7 +1310,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-99"
+          id="switch-id-756"
           outline="true"
           value="true"
           variant="pill"
@@ -1322,7 +1322,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-100"
+          id="switch-id-757"
           outline="true"
           value="true"
           variant="pill"
@@ -1361,7 +1361,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-101"
+          id="switch-id-758"
           outline="alt"
           value="true"
         />
@@ -1372,7 +1372,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-102"
+          id="switch-id-759"
           outline="alt"
           value="true"
         />
@@ -1383,7 +1383,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-103"
+          id="switch-id-760"
           outline="alt"
           value="true"
         />
@@ -1394,7 +1394,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-104"
+          id="switch-id-761"
           outline="alt"
           value="true"
         />
@@ -1405,7 +1405,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-105"
+          id="switch-id-762"
           outline="alt"
           value="true"
         />
@@ -1416,7 +1416,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-106"
+          id="switch-id-763"
           outline="alt"
           value="true"
         />
@@ -1427,7 +1427,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-107"
+          id="switch-id-764"
           outline="alt"
           value="true"
         />
@@ -1438,7 +1438,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-108"
+          id="switch-id-765"
           outline="alt"
           value="true"
         />
@@ -1449,7 +1449,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-109"
+          id="switch-id-766"
           outline="alt"
           value="true"
         />
@@ -1487,7 +1487,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-110"
+          id="switch-id-767"
           outline="alt"
           value="true"
           variant="pill"
@@ -1499,7 +1499,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-111"
+          id="switch-id-768"
           outline="alt"
           value="true"
           variant="pill"
@@ -1511,7 +1511,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-112"
+          id="switch-id-769"
           outline="alt"
           value="true"
           variant="pill"
@@ -1523,7 +1523,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-113"
+          id="switch-id-770"
           outline="alt"
           value="true"
           variant="pill"
@@ -1535,7 +1535,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-114"
+          id="switch-id-771"
           outline="alt"
           value="true"
           variant="pill"
@@ -1547,7 +1547,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-115"
+          id="switch-id-772"
           outline="alt"
           value="true"
           variant="pill"
@@ -1559,7 +1559,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-116"
+          id="switch-id-773"
           outline="alt"
           value="true"
           variant="pill"
@@ -1571,7 +1571,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-117"
+          id="switch-id-774"
           outline="alt"
           value="true"
           variant="pill"
@@ -1583,7 +1583,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-118"
+          id="switch-id-775"
           outline="alt"
           value="true"
           variant="pill"
@@ -1622,7 +1622,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-119"
+          id="switch-id-776"
           label="true"
           value="true"
         />
@@ -1633,7 +1633,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-120"
+          id="switch-id-777"
           label="true"
           value="true"
         />
@@ -1644,7 +1644,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-121"
+          id="switch-id-778"
           label="true"
           value="true"
         />
@@ -1655,7 +1655,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-122"
+          id="switch-id-779"
           label="true"
           value="true"
         />
@@ -1666,7 +1666,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-123"
+          id="switch-id-780"
           label="true"
           value="true"
         />
@@ -1677,7 +1677,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-124"
+          id="switch-id-781"
           label="true"
           value="true"
         />
@@ -1688,7 +1688,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-125"
+          id="switch-id-782"
           label="true"
           value="true"
         />
@@ -1699,7 +1699,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-126"
+          id="switch-id-783"
           label="true"
           value="true"
         />
@@ -1710,7 +1710,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-127"
+          id="switch-id-784"
           label="true"
           value="true"
         />
@@ -1748,7 +1748,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-128"
+          id="switch-id-785"
           label="true"
           value="true"
           variant="pill"
@@ -1760,7 +1760,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-129"
+          id="switch-id-786"
           label="true"
           value="true"
           variant="pill"
@@ -1772,7 +1772,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-130"
+          id="switch-id-787"
           label="true"
           value="true"
           variant="pill"
@@ -1784,7 +1784,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-131"
+          id="switch-id-788"
           label="true"
           value="true"
           variant="pill"
@@ -1796,7 +1796,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-132"
+          id="switch-id-789"
           label="true"
           value="true"
           variant="pill"
@@ -1808,7 +1808,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-133"
+          id="switch-id-790"
           label="true"
           value="true"
           variant="pill"
@@ -1820,7 +1820,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-134"
+          id="switch-id-791"
           label="true"
           value="true"
           variant="pill"
@@ -1832,7 +1832,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-135"
+          id="switch-id-792"
           label="true"
           value="true"
           variant="pill"
@@ -1844,7 +1844,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-136"
+          id="switch-id-793"
           label="true"
           value="true"
           variant="pill"
@@ -1883,7 +1883,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-137"
+          id="switch-id-794"
           label="true"
           outline="true"
           value="true"
@@ -1895,7 +1895,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-138"
+          id="switch-id-795"
           label="true"
           outline="true"
           value="true"
@@ -1907,7 +1907,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-139"
+          id="switch-id-796"
           label="true"
           outline="true"
           value="true"
@@ -1919,7 +1919,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-140"
+          id="switch-id-797"
           label="true"
           outline="true"
           value="true"
@@ -1931,7 +1931,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-141"
+          id="switch-id-798"
           label="true"
           outline="true"
           value="true"
@@ -1943,7 +1943,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-142"
+          id="switch-id-799"
           label="true"
           outline="true"
           value="true"
@@ -1955,7 +1955,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-143"
+          id="switch-id-800"
           label="true"
           outline="true"
           value="true"
@@ -1967,7 +1967,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-144"
+          id="switch-id-801"
           label="true"
           outline="true"
           value="true"
@@ -1979,7 +1979,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-145"
+          id="switch-id-802"
           label="true"
           outline="true"
           value="true"
@@ -2018,7 +2018,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-146"
+          id="switch-id-803"
           label="true"
           outline="true"
           value="true"
@@ -2031,7 +2031,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-147"
+          id="switch-id-804"
           label="true"
           outline="true"
           value="true"
@@ -2044,7 +2044,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-148"
+          id="switch-id-805"
           label="true"
           outline="true"
           value="true"
@@ -2057,7 +2057,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-149"
+          id="switch-id-806"
           label="true"
           outline="true"
           value="true"
@@ -2070,7 +2070,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-150"
+          id="switch-id-807"
           label="true"
           outline="true"
           value="true"
@@ -2083,7 +2083,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-151"
+          id="switch-id-808"
           label="true"
           outline="true"
           value="true"
@@ -2096,7 +2096,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-152"
+          id="switch-id-809"
           label="true"
           outline="true"
           value="true"
@@ -2109,7 +2109,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-153"
+          id="switch-id-810"
           label="true"
           outline="true"
           value="true"
@@ -2122,7 +2122,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-154"
+          id="switch-id-811"
           label="true"
           outline="true"
           value="true"
@@ -2162,7 +2162,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-155"
+          id="switch-id-812"
           label="true"
           outline="alt"
           value="true"
@@ -2174,7 +2174,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-156"
+          id="switch-id-813"
           label="true"
           outline="alt"
           value="true"
@@ -2186,7 +2186,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-157"
+          id="switch-id-814"
           label="true"
           outline="alt"
           value="true"
@@ -2198,7 +2198,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-158"
+          id="switch-id-815"
           label="true"
           outline="alt"
           value="true"
@@ -2210,7 +2210,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-159"
+          id="switch-id-816"
           label="true"
           outline="alt"
           value="true"
@@ -2222,7 +2222,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-160"
+          id="switch-id-817"
           label="true"
           outline="alt"
           value="true"
@@ -2234,7 +2234,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-161"
+          id="switch-id-818"
           label="true"
           outline="alt"
           value="true"
@@ -2246,7 +2246,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-162"
+          id="switch-id-819"
           label="true"
           outline="alt"
           value="true"
@@ -2258,7 +2258,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-163"
+          id="switch-id-820"
           label="true"
           outline="alt"
           value="true"
@@ -2297,7 +2297,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-164"
+          id="switch-id-821"
           label="true"
           outline="alt"
           value="true"
@@ -2310,7 +2310,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="Off"
           dataon="On"
-          id="switch-id-165"
+          id="switch-id-822"
           label="true"
           outline="alt"
           value="true"
@@ -2323,7 +2323,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="Off"
           dataon="On"
-          id="switch-id-166"
+          id="switch-id-823"
           label="true"
           outline="alt"
           value="true"
@@ -2336,7 +2336,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="Off"
           dataon="On"
-          id="switch-id-167"
+          id="switch-id-824"
           label="true"
           outline="alt"
           value="true"
@@ -2349,7 +2349,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="Off"
           dataon="On"
-          id="switch-id-168"
+          id="switch-id-825"
           label="true"
           outline="alt"
           value="true"
@@ -2362,7 +2362,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="Off"
           dataon="On"
-          id="switch-id-169"
+          id="switch-id-826"
           label="true"
           outline="alt"
           value="true"
@@ -2375,7 +2375,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="Off"
           dataon="On"
-          id="switch-id-170"
+          id="switch-id-827"
           label="true"
           outline="alt"
           value="true"
@@ -2388,7 +2388,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="Off"
           dataon="On"
-          id="switch-id-171"
+          id="switch-id-828"
           label="true"
           outline="alt"
           value="true"
@@ -2401,7 +2401,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="Off"
           dataon="On"
           disabled="true"
-          id="switch-id-172"
+          id="switch-id-829"
           label="true"
           outline="alt"
           value="true"
@@ -2441,7 +2441,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="no"
           dataon="yes"
-          id="switch-id-173"
+          id="switch-id-830"
           label="true"
           value="true"
         />
@@ -2452,7 +2452,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-174"
+          id="switch-id-831"
           label="true"
           value="true"
         />
@@ -2463,7 +2463,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-175"
+          id="switch-id-832"
           label="true"
           value="true"
         />
@@ -2474,7 +2474,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-176"
+          id="switch-id-833"
           label="true"
           value="true"
         />
@@ -2485,7 +2485,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-177"
+          id="switch-id-834"
           label="true"
           value="true"
         />
@@ -2496,7 +2496,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-178"
+          id="switch-id-835"
           label="true"
           value="true"
         />
@@ -2507,7 +2507,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-179"
+          id="switch-id-836"
           label="true"
           value="true"
         />
@@ -2518,7 +2518,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-180"
+          id="switch-id-837"
           label="true"
           value="true"
         />
@@ -2529,7 +2529,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-181"
+          id="switch-id-838"
           label="true"
           value="true"
         />
@@ -2567,7 +2567,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-182"
+          id="switch-id-839"
           label="true"
           value="true"
           variant="pill"
@@ -2579,7 +2579,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-183"
+          id="switch-id-840"
           label="true"
           value="true"
           variant="pill"
@@ -2591,7 +2591,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-184"
+          id="switch-id-841"
           label="true"
           value="true"
           variant="pill"
@@ -2603,7 +2603,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-185"
+          id="switch-id-842"
           label="true"
           value="true"
           variant="pill"
@@ -2615,7 +2615,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-186"
+          id="switch-id-843"
           label="true"
           value="true"
           variant="pill"
@@ -2627,7 +2627,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-187"
+          id="switch-id-844"
           label="true"
           value="true"
           variant="pill"
@@ -2639,7 +2639,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-188"
+          id="switch-id-845"
           label="true"
           value="true"
           variant="pill"
@@ -2651,7 +2651,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-189"
+          id="switch-id-846"
           label="true"
           value="true"
           variant="pill"
@@ -2663,7 +2663,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-190"
+          id="switch-id-847"
           label="true"
           value="true"
           variant="pill"
@@ -2702,7 +2702,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-191"
+          id="switch-id-848"
           label="true"
           outline="true"
           value="true"
@@ -2714,7 +2714,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-192"
+          id="switch-id-849"
           label="true"
           outline="true"
           value="true"
@@ -2726,7 +2726,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-193"
+          id="switch-id-850"
           label="true"
           outline="true"
           value="true"
@@ -2738,7 +2738,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-194"
+          id="switch-id-851"
           label="true"
           outline="true"
           value="true"
@@ -2750,7 +2750,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-195"
+          id="switch-id-852"
           label="true"
           outline="true"
           value="true"
@@ -2762,7 +2762,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-196"
+          id="switch-id-853"
           label="true"
           outline="true"
           value="true"
@@ -2774,7 +2774,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-197"
+          id="switch-id-854"
           label="true"
           outline="true"
           value="true"
@@ -2786,7 +2786,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-198"
+          id="switch-id-855"
           label="true"
           outline="true"
           value="true"
@@ -2798,7 +2798,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-199"
+          id="switch-id-856"
           label="true"
           outline="true"
           value="true"
@@ -2837,7 +2837,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-200"
+          id="switch-id-857"
           label="true"
           outline="true"
           value="true"
@@ -2850,7 +2850,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-201"
+          id="switch-id-858"
           label="true"
           outline="true"
           value="true"
@@ -2863,7 +2863,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-202"
+          id="switch-id-859"
           label="true"
           outline="true"
           value="true"
@@ -2876,7 +2876,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-203"
+          id="switch-id-860"
           label="true"
           outline="true"
           value="true"
@@ -2889,7 +2889,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-204"
+          id="switch-id-861"
           label="true"
           outline="true"
           value="true"
@@ -2902,7 +2902,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-205"
+          id="switch-id-862"
           label="true"
           outline="true"
           value="true"
@@ -2915,7 +2915,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-206"
+          id="switch-id-863"
           label="true"
           outline="true"
           value="true"
@@ -2928,7 +2928,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-207"
+          id="switch-id-864"
           label="true"
           outline="true"
           value="true"
@@ -2941,7 +2941,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-208"
+          id="switch-id-865"
           label="true"
           outline="true"
           value="true"
@@ -2981,7 +2981,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-209"
+          id="switch-id-866"
           label="true"
           outline="alt"
           value="true"
@@ -2993,7 +2993,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-210"
+          id="switch-id-867"
           label="true"
           outline="alt"
           value="true"
@@ -3005,7 +3005,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-211"
+          id="switch-id-868"
           label="true"
           outline="alt"
           value="true"
@@ -3017,7 +3017,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-212"
+          id="switch-id-869"
           label="true"
           outline="alt"
           value="true"
@@ -3029,7 +3029,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-213"
+          id="switch-id-870"
           label="true"
           outline="alt"
           value="true"
@@ -3041,7 +3041,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-214"
+          id="switch-id-871"
           label="true"
           outline="alt"
           value="true"
@@ -3053,7 +3053,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-215"
+          id="switch-id-872"
           label="true"
           outline="alt"
           value="true"
@@ -3065,7 +3065,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-216"
+          id="switch-id-873"
           label="true"
           outline="alt"
           value="true"
@@ -3077,7 +3077,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-217"
+          id="switch-id-874"
           label="true"
           outline="alt"
           value="true"
@@ -3116,7 +3116,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="primary"
           dataoff="no"
           dataon="yes"
-          id="switch-id-218"
+          id="switch-id-875"
           label="true"
           outline="alt"
           value="true"
@@ -3129,7 +3129,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="secondary"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-219"
+          id="switch-id-876"
           label="true"
           outline="alt"
           value="true"
@@ -3142,7 +3142,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="success"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-220"
+          id="switch-id-877"
           label="true"
           outline="alt"
           value="true"
@@ -3155,7 +3155,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="warning"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-221"
+          id="switch-id-878"
           label="true"
           outline="alt"
           value="true"
@@ -3168,7 +3168,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="info"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-222"
+          id="switch-id-879"
           label="true"
           outline="alt"
           value="true"
@@ -3181,7 +3181,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="danger"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-223"
+          id="switch-id-880"
           label="true"
           outline="alt"
           value="true"
@@ -3194,7 +3194,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="light"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-224"
+          id="switch-id-881"
           label="true"
           outline="alt"
           value="true"
@@ -3207,7 +3207,7 @@ exports[`Switches.vue renders correctly 1`] = `
           color="dark"
           dataoff="✕"
           dataon="✓"
-          id="switch-id-225"
+          id="switch-id-882"
           label="true"
           outline="alt"
           value="true"
@@ -3220,7 +3220,7 @@ exports[`Switches.vue renders correctly 1`] = `
           dataoff="✕"
           dataon="✓"
           disabled="true"
-          id="switch-id-226"
+          id="switch-id-883"
           label="true"
           outline="alt"
           value="true"
diff --git a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
index 97ec4a32..7fd49b2a 100644
--- a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
+++ b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
@@ -440,77 +440,437 @@ exports[`Colors.vue renders correctly 1`] = `
         <div
           class="row"
         >
-          <color-theme
-            color="bg-gray-100"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-100"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 100 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-200"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-200"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 200 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-300"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-300"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 300 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-400"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-400"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 400 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-500"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-500"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 500 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-600"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-600"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 600 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-700"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
-            <h6>
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-700"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
               Brand 700 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-800"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-800"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 800 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-gray-900"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-gray-900"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand 900 Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -540,85 +900,485 @@ exports[`Colors.vue renders correctly 1`] = `
         <div
           class="row"
         >
-          <color-theme
-            color="bg-blue"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-blue"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Blue Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-indigo"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-indigo"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Indigo Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-purple"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-purple"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Purple Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-pink"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
-            <h6>
-              Brand Pink Color
-            </h6>
-          </color-theme>
+            <div
+              class="theme-color w-75 rounded mb-3 bg-pink"
+              style="padding-top: 75%;"
+            />
+             
+            <h6>
+              Brand Pink Color
+            </h6>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-red"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-red"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Red Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-orange"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-orange"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Orange Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-yellow"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-yellow"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Yellow Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-green"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-green"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Green Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-teal"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-teal"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Teal Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
            
-          <color-theme
-            color="bg-cyan"
+          <div
+            class="mb-4 col-sm-6 col-md-4 col-xl-2"
+            xs="12"
           >
+            <div
+              class="theme-color w-75 rounded mb-3 bg-cyan"
+              style="padding-top: 75%;"
+            />
+             
             <h6>
               Brand Cyan Color
             </h6>
-          </color-theme>
+             
+            <table
+              class="w-100"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    HEX:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    #ffffff
+                  </td>
+                </tr>
+                 
+                <tr>
+                  <td
+                    class="text-muted"
+                  >
+                    RGB:
+                  </td>
+                   
+                  <td
+                    class="font-weight-bold"
+                  >
+                    rgb(255, 255, 255)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>