diff --git a/docs/source/_assets/js/components/ResponsiveCodeSample.vue b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
index 759fa34ab..913178ea0 100644
--- a/docs/source/_assets/js/components/ResponsiveCodeSample.vue
+++ b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class="flex items-end justify-end pb-2">
-      <svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'none' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'none'" width="12" height="20" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M3.625 9a.6.6 0 0 0-.184-.441A.607.607 0 0 0 3 8.375a.596.596 0 0 0-.441.184.604.604 0 0 0-.184.441c0 .17.061.318.184.441s.27.185.441.184a.607.607 0 0 0 .441-.184A.6.6 0 0 0 3.625 9zM5.25 7.75v-5.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 5 2H1a.24.24 0 0 0-.176.074.24.24 0 0 0-.074.176v5.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1 8h4a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm-1.5-6.625c0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25c.083 0 .125-.042.125-.125zM6 1v8a.96.96 0 0 1-.297.703A.96.96 0 0 1 5 10H1a.96.96 0 0 1-.703-.297A.96.96 0 0 1 0 9V1A.96.96 0 0 1 .297.297.96.96 0 0 1 1 0h4a.96.96 0 0 1 .703.297A.96.96 0 0 1 6 1z"/></svg>
-      <svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'sm' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'sm'" width="18" height="22" viewBox="0 0 9 11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M5 10a.483.483 0 0 0-.148-.352A.476.476 0 0 0 4.5 9.5a.486.486 0 0 0-.352.148A.479.479 0 0 0 4 10c0 .137.05.254.148.352a.486.486 0 0 0 .352.148.476.476 0 0 0 .352-.148A.483.483 0 0 0 5 10zm3-1.25v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 7.75 1h-6.5a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1.25 9h6.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 8 8.75zm1-7.5v8.5c0 .344-.122.638-.367.883A1.204 1.204 0 0 1 7.75 11h-6.5c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h6.5c.344 0 .638.122.883.367S9 .906 9 1.25z"/></svg>
-      <svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'md' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'md'" width="28" height="22" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M1 6c.135 0 .253-.05.352-.148A.476.476 0 0 0 1.5 5.5a.486.486 0 0 0-.148-.352A.479.479 0 0 0 1 5a.479.479 0 0 0-.352.148A.486.486 0 0 0 .5 5.5c0 .136.049.253.148.352C.748 5.951.865 6 1 6zm1.25 4h10.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 13 9.75v-8.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 12.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25v8.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074zm10.5 1H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h11.5c.344 0 .638.122.883.367S14 .906 14 1.25v8.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367z"/></svg>
-      <svg class="inline-block cursor-pointer mr-4" :class="activeScreen === 'lg' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'lg'" width="34" height="24" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M2.25 10c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 1 8.75v-7.5c0-.344.122-.638.367-.883S1.906 0 2.25 0h12.5c.344 0 .638.122.883.367S16 .906 16 1.25v7.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H2.25zM2 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 2.25 9h12.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 15 8.75v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 14.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25zm13.75 9.25H17v.75c0 .208-.122.385-.367.531-.245.146-.539.219-.883.219H1.25c-.344 0-.638-.073-.883-.219C.122 11.635 0 11.458 0 11.25v-.75h15.75zm-6.625.75c.083 0 .125-.042.125-.125 0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25z"/></svg>
-      <svg class="inline-block cursor-pointer" :class="activeScreen === 'xl' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'xl'" width="38" height="30" viewBox="0 0 19 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M18 10.75v-9.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 17.75 1H1.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v9.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h16.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm1-9.5v10.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H11.5c0 .193.042.394.125.605.083.21.167.396.25.555.083.16.125.273.125.34 0 .135-.05.253-.148.352A.476.476 0 0 1 11.5 15h-4a.483.483 0 0 1-.352-.148A.476.476 0 0 1 7 14.5c0-.073.042-.187.125-.344.083-.157.167-.339.25-.547.083-.208.125-.411.125-.609H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 11.75V1.25C0 .906.122.612.367.367S.906 0 1.25 0h16.5c.344 0 .638.122.883.367S19 .906 19 1.25z"/></svg>
+      <svg class="h-7 inline-block cursor-pointer mr-4" :class="activeScreen === 'none' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'none'" viewBox="0 0 10 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" fill-rule="evenodd"/></svg>
+      <svg class="h-7 inline-block cursor-pointer mr-4" :class="activeScreen === 'sm' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'sm'" viewBox="0 0 14 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
+      <svg class="h-7 inline-block cursor-pointer mr-4" :class="activeScreen === 'md' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'md'" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
+      <svg class="h-7 inline-block cursor-pointer mr-4" :class="activeScreen === 'lg' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'lg'" viewBox="0 0 38 28" xmlns="http://www.w3.org/2000/svg"><path d="M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z" fill-rule="evenodd"/></svg>
+      <svg class="h-7 inline-block cursor-pointer" :class="activeScreen === 'xl' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'xl'" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg"><path d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"/></svg>
     </div>
     <div class="rounded mask border-2 border-smoke mb-8">
       <div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 71da4cf65..1bbe27933 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="bg-white">
+<html lang="en" class="bg-white antialiased">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/docs/source/js/app.js b/docs/source/js/app.js
index 1565bf72e..1d28b997d 100644
--- a/docs/source/js/app.js
+++ b/docs/source/js/app.js
@@ -11435,18 +11435,12 @@ var render = function() {
       _c(
         "svg",
         {
-          staticClass: "inline-block cursor-pointer mr-4",
+          staticClass: "h-7 inline-block cursor-pointer mr-4",
           class:
             _vm.activeScreen === "none"
               ? "text-slate-dark"
               : "text-slate-light",
-          attrs: {
-            width: "12",
-            height: "20",
-            viewBox: "0 0 6 10",
-            xmlns: "http://www.w3.org/2000/svg",
-            "xmlns:xlink": "http://www.w3.org/1999/xlink"
-          },
+          attrs: { viewBox: "0 0 10 28", xmlns: "http://www.w3.org/2000/svg" },
           on: {
             click: function($event) {
               _vm.activeScreen = "none"
@@ -11456,9 +11450,9 @@ var render = function() {
         [
           _c("path", {
             attrs: {
-              id: "a",
               d:
-                "M3.625 9a.6.6 0 0 0-.184-.441A.607.607 0 0 0 3 8.375a.596.596 0 0 0-.441.184.604.604 0 0 0-.184.441c0 .17.061.318.184.441s.27.185.441.184a.607.607 0 0 0 .441-.184A.6.6 0 0 0 3.625 9zM5.25 7.75v-5.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 5 2H1a.24.24 0 0 0-.176.074.24.24 0 0 0-.074.176v5.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1 8h4a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm-1.5-6.625c0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25c.083 0 .125-.042.125-.125zM6 1v8a.96.96 0 0 1-.297.703A.96.96 0 0 1 5 10H1a.96.96 0 0 1-.703-.297A.96.96 0 0 1 0 9V1A.96.96 0 0 1 .297.297.96.96 0 0 1 1 0h4a.96.96 0 0 1 .703.297A.96.96 0 0 1 6 1z"
+                "M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z",
+              "fill-rule": "evenodd"
             }
           })
         ]
@@ -11467,16 +11461,10 @@ var render = function() {
       _c(
         "svg",
         {
-          staticClass: "inline-block cursor-pointer mr-4",
+          staticClass: "h-7 inline-block cursor-pointer mr-4",
           class:
             _vm.activeScreen === "sm" ? "text-slate-dark" : "text-slate-light",
-          attrs: {
-            width: "18",
-            height: "22",
-            viewBox: "0 0 9 11",
-            xmlns: "http://www.w3.org/2000/svg",
-            "xmlns:xlink": "http://www.w3.org/1999/xlink"
-          },
+          attrs: { viewBox: "0 0 14 28", xmlns: "http://www.w3.org/2000/svg" },
           on: {
             click: function($event) {
               _vm.activeScreen = "sm"
@@ -11486,9 +11474,9 @@ var render = function() {
         [
           _c("path", {
             attrs: {
-              id: "a",
               d:
-                "M5 10a.483.483 0 0 0-.148-.352A.476.476 0 0 0 4.5 9.5a.486.486 0 0 0-.352.148A.479.479 0 0 0 4 10c0 .137.05.254.148.352a.486.486 0 0 0 .352.148.476.476 0 0 0 .352-.148A.483.483 0 0 0 5 10zm3-1.25v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 7.75 1h-6.5a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1.25 9h6.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 8 8.75zm1-7.5v8.5c0 .344-.122.638-.367.883A1.204 1.204 0 0 1 7.75 11h-6.5c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h6.5c.344 0 .638.122.883.367S9 .906 9 1.25z"
+                "M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z",
+              "fill-rule": "evenodd"
             }
           })
         ]
@@ -11497,16 +11485,10 @@ var render = function() {
       _c(
         "svg",
         {
-          staticClass: "inline-block cursor-pointer mr-4",
+          staticClass: "h-7 inline-block cursor-pointer mr-4",
           class:
             _vm.activeScreen === "md" ? "text-slate-dark" : "text-slate-light",
-          attrs: {
-            width: "28",
-            height: "22",
-            viewBox: "0 0 14 11",
-            xmlns: "http://www.w3.org/2000/svg",
-            "xmlns:xlink": "http://www.w3.org/1999/xlink"
-          },
+          attrs: { viewBox: "0 0 26 28", xmlns: "http://www.w3.org/2000/svg" },
           on: {
             click: function($event) {
               _vm.activeScreen = "md"
@@ -11516,9 +11498,9 @@ var render = function() {
         [
           _c("path", {
             attrs: {
-              id: "a",
               d:
-                "M1 6c.135 0 .253-.05.352-.148A.476.476 0 0 0 1.5 5.5a.486.486 0 0 0-.148-.352A.479.479 0 0 0 1 5a.479.479 0 0 0-.352.148A.486.486 0 0 0 .5 5.5c0 .136.049.253.148.352C.748 5.951.865 6 1 6zm1.25 4h10.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 13 9.75v-8.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 12.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25v8.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074zm10.5 1H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h11.5c.344 0 .638.122.883.367S14 .906 14 1.25v8.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367z"
+                "M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z",
+              "fill-rule": "evenodd"
             }
           })
         ]
@@ -11527,16 +11509,10 @@ var render = function() {
       _c(
         "svg",
         {
-          staticClass: "inline-block cursor-pointer mr-4",
+          staticClass: "h-7 inline-block cursor-pointer mr-4",
           class:
             _vm.activeScreen === "lg" ? "text-slate-dark" : "text-slate-light",
-          attrs: {
-            width: "34",
-            height: "24",
-            viewBox: "0 0 17 12",
-            xmlns: "http://www.w3.org/2000/svg",
-            "xmlns:xlink": "http://www.w3.org/1999/xlink"
-          },
+          attrs: { viewBox: "0 0 38 28", xmlns: "http://www.w3.org/2000/svg" },
           on: {
             click: function($event) {
               _vm.activeScreen = "lg"
@@ -11546,9 +11522,9 @@ var render = function() {
         [
           _c("path", {
             attrs: {
-              id: "a",
               d:
-                "M2.25 10c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 1 8.75v-7.5c0-.344.122-.638.367-.883S1.906 0 2.25 0h12.5c.344 0 .638.122.883.367S16 .906 16 1.25v7.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H2.25zM2 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 2.25 9h12.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 15 8.75v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 14.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25zm13.75 9.25H17v.75c0 .208-.122.385-.367.531-.245.146-.539.219-.883.219H1.25c-.344 0-.638-.073-.883-.219C.122 11.635 0 11.458 0 11.25v-.75h15.75zm-6.625.75c.083 0 .125-.042.125-.125 0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25z"
+                "M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z",
+              "fill-rule": "evenodd"
             }
           })
         ]
@@ -11557,16 +11533,10 @@ var render = function() {
       _c(
         "svg",
         {
-          staticClass: "inline-block cursor-pointer",
+          staticClass: "h-7 inline-block cursor-pointer",
           class:
             _vm.activeScreen === "xl" ? "text-slate-dark" : "text-slate-light",
-          attrs: {
-            width: "38",
-            height: "30",
-            viewBox: "0 0 19 15",
-            xmlns: "http://www.w3.org/2000/svg",
-            "xmlns:xlink": "http://www.w3.org/1999/xlink"
-          },
+          attrs: { viewBox: "0 0 36 28", xmlns: "http://www.w3.org/2000/svg" },
           on: {
             click: function($event) {
               _vm.activeScreen = "xl"
@@ -11576,9 +11546,8 @@ var render = function() {
         [
           _c("path", {
             attrs: {
-              id: "a",
               d:
-                "M18 10.75v-9.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 17.75 1H1.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v9.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h16.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm1-9.5v10.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H11.5c0 .193.042.394.125.605.083.21.167.396.25.555.083.16.125.273.125.34 0 .135-.05.253-.148.352A.476.476 0 0 1 11.5 15h-4a.483.483 0 0 1-.352-.148A.476.476 0 0 1 7 14.5c0-.073.042-.187.125-.344.083-.157.167-.339.25-.547.083-.208.125-.411.125-.609H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 11.75V1.25C0 .906.122.612.367.367S.906 0 1.25 0h16.5c.344 0 .638.122.883.367S19 .906 19 1.25z"
+                "M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"
             }
           })
         ]
diff --git a/docs/source/svg/desktop.svg b/docs/source/svg/desktop.svg
deleted file mode 100755
index 5d819ccaa..000000000
--- a/docs/source/svg/desktop.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="42" height="32" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="a" d="M20 11.75V1.25a.24.24 0 0 0-.074-.176A.24.24 0 0 0 19.75 1H1.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v10.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h18.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm1-10.5v11.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H12.5c0 .193.042.394.125.605.083.21.167.396.25.555.083.16.125.273.125.34 0 .135-.05.253-.148.352A.476.476 0 0 1 12.5 16h-4a.483.483 0 0 1-.352-.148A.476.476 0 0 1 8 15.5c0-.073.042-.187.125-.344.083-.157.167-.339.25-.547.083-.208.125-.411.125-.609H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 12.75V1.25C0 .906.122.612.367.367S.906 0 1.25 0h18.5c.344 0 .638.122.883.367S21 .906 21 1.25z"/></svg>
diff --git a/docs/source/svg/icon-device-lg.svg b/docs/source/svg/icon-device-lg.svg
new file mode 100644
index 000000000..af9007657
--- /dev/null
+++ b/docs/source/svg/icon-device-lg.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 38 28" xmlns="http://www.w3.org/2000/svg"><path d="M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/docs/source/svg/icon-device-md.svg b/docs/source/svg/icon-device-md.svg
new file mode 100644
index 000000000..10ab4c6e0
--- /dev/null
+++ b/docs/source/svg/icon-device-md.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/docs/source/svg/icon-device-sm.svg b/docs/source/svg/icon-device-sm.svg
new file mode 100644
index 000000000..c0c938cbf
--- /dev/null
+++ b/docs/source/svg/icon-device-sm.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 14 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/docs/source/svg/icon-device-xl.svg b/docs/source/svg/icon-device-xl.svg
new file mode 100644
index 000000000..621836fc0
--- /dev/null
+++ b/docs/source/svg/icon-device-xl.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg"><path d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"/></svg>
\ No newline at end of file
diff --git a/docs/source/svg/icon-device-xs.svg b/docs/source/svg/icon-device-xs.svg
new file mode 100644
index 000000000..7db82ef72
--- /dev/null
+++ b/docs/source/svg/icon-device-xs.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 10 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/docs/source/svg/landscape-tablet.svg b/docs/source/svg/landscape-tablet.svg
deleted file mode 100755
index 56b547041..000000000
--- a/docs/source/svg/landscape-tablet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(0 4)"/><defs><path id="a" d="M1 6c.135 0 .253-.05.352-.148A.476.476 0 0 0 1.5 5.5a.486.486 0 0 0-.148-.352A.479.479 0 0 0 1 5a.479.479 0 0 0-.352.148A.486.486 0 0 0 .5 5.5a.48.48 0 0 0 .148.352C.748 5.951.865 6 1 6zm1.25 4h10.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 13 9.75v-8.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 12.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25v8.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074zm10.5 1H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h11.5c.344 0 .638.122.883.367S14 .906 14 1.25v8.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367z"/></defs></svg>
\ No newline at end of file
diff --git a/docs/source/svg/laptop.svg b/docs/source/svg/laptop.svg
deleted file mode 100755
index 38ce4ca8d..000000000
--- a/docs/source/svg/laptop.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a"/><defs><path id="a" d="M2.25 12c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 1 10.75v-9.5c0-.344.122-.638.367-.883S1.906 0 2.25 0h14.5c.344 0 .638.122.883.367S18 .906 18 1.25v9.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H2.25zM2 1.25v9.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h14.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176v-9.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 16.75 1H2.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 2 1.25zM17.75 12.5H19v.75c0 .208-.122.385-.367.531-.245.146-.539.219-.883.219H1.25c-.344 0-.638-.073-.883-.219C.122 13.635 0 13.458 0 13.25v-.75h17.75zm-7.625.75c.083 0 .125-.042.125-.125 0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25z"/></defs></svg>
\ No newline at end of file
diff --git a/docs/source/svg/mobile.svg b/docs/source/svg/mobile.svg
deleted file mode 100755
index 4e422b944..000000000
--- a/docs/source/svg/mobile.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 6 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(0 5)"/><defs><path id="a" d="M3.625 9a.6.6 0 0 0-.184-.441A.607.607 0 0 0 3 8.375a.596.596 0 0 0-.441.184.604.604 0 0 0-.184.441c0 .17.061.318.184.441s.27.185.441.184a.607.607 0 0 0 .441-.184A.6.6 0 0 0 3.625 9zM5.25 7.75v-5.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 5 2H1a.24.24 0 0 0-.176.074.24.24 0 0 0-.074.176v5.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1 8h4a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm-1.5-6.625c0-.083-.042-.125-.125-.125h-1.25c-.083 0-.125.042-.125.125 0 .083.042.125.125.125h1.25c.083 0 .125-.042.125-.125zM6 1v8a.96.96 0 0 1-.297.703A.96.96 0 0 1 5 10H1a.96.96 0 0 1-.703-.297A.96.96 0 0 1 0 9V1A.96.96 0 0 1 .297.297.96.96 0 0 1 1 0h4a.96.96 0 0 1 .703.297A.96.96 0 0 1 6 1z"/></defs></svg>
\ No newline at end of file
diff --git a/docs/source/svg/tablet.svg b/docs/source/svg/tablet.svg
deleted file mode 100755
index 035147c14..000000000
--- a/docs/source/svg/tablet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 9 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(0 4)"/><defs><path id="a" d="M5 10a.483.483 0 0 0-.148-.352A.476.476 0 0 0 4.5 9.5a.486.486 0 0 0-.352.148A.479.479 0 0 0 4 10c0 .137.05.254.148.352a.486.486 0 0 0 .352.148.476.476 0 0 0 .352-.148A.483.483 0 0 0 5 10zm3-1.25v-7.5a.24.24 0 0 0-.074-.176A.24.24 0 0 0 7.75 1h-6.5a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v7.5a.24.24 0 0 0 .074.176A.24.24 0 0 0 1.25 9h6.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 8 8.75zm1-7.5v8.5c0 .344-.122.638-.367.883A1.204 1.204 0 0 1 7.75 11h-6.5c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 9.75v-8.5C0 .906.122.612.367.367S.906 0 1.25 0h6.5c.344 0 .638.122.883.367S9 .906 9 1.25z"/></defs></svg>
\ No newline at end of file
diff --git a/docs/source/svg/widescreen.svg b/docs/source/svg/widescreen.svg
deleted file mode 100755
index d23556392..000000000
--- a/docs/source/svg/widescreen.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 21 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><use xlink:href="#a"/><defs><path id="a" d="M20 11.75V1.25a.24.24 0 0 0-.074-.176A.24.24 0 0 0 19.75 1H1.25a.24.24 0 0 0-.176.074A.24.24 0 0 0 1 1.25v10.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h18.5a.24.24 0 0 0 .176-.074.24.24 0 0 0 .074-.176zm1-10.5v10.5c0 .344-.122.638-.367.883a1.204 1.204 0 0 1-.883.367H12.5c0 .193.042.394.125.605.083.21.167.396.25.555.083.16.125.273.125.34 0 .135-.05.253-.148.352A.476.476 0 0 1 12.5 15h-4a.483.483 0 0 1-.352-.148A.476.476 0 0 1 8 14.5c0-.073.042-.187.125-.344.083-.157.167-.339.25-.547.083-.208.125-.411.125-.609H1.25c-.344 0-.638-.122-.883-.367A1.204 1.204 0 0 1 0 11.75V1.25C0 .906.122.612.367.367S.906 0 1.25 0h18.5c.344 0 .638.122.883.367S21 .906 21 1.25z"/></defs></svg>
\ No newline at end of file
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 4a2681f78..f29a795ff 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -178,7 +178,9 @@ module.exports = {
       '2': '0.5rem',
       '3': '0.75rem',
       '4': '1rem',
+      '5': '1.25rem',
       '6': '1.5rem',
+      '7': '1.75rem',
       '8': '2rem',
       '10': '2.5rem',
       '12': '3rem',