strivui 1.2.7 → 1.2.9

package/dist/striveui.css

@@ -1,3 +1,494 @@
+@charset "UTF-8";
+/* 📦 Default block */
+/* 📦 Button */
+.default_button {
+  padding: 0.5rem 1rem;
+  background-color: #2563eb;
+  color: white;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  border: none;
+}
+
+.default_button:hover {
+  background-color: #1d4ed8;
+}
+
+/* 📥 Input, Select, TextArea */
+.default_input,
+.default_select,
+.default_textarea {
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  outline: none;
+}
+
+.default_input:focus,
+.default_select:focus,
+.default_textarea:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* 🔗 Link */
+.default_link {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.default_link:hover {
+  text-decoration: underline;
+}
+
+/* 🧾 Label */
+.default_label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+/* 📄 View */
+.default_view {
+  padding: 0.5rem;
+}
+
+/* 🧾 Text */
+.default_text {
+  color: #1f2937;
+}
+
+/* 🧾 Span */
+.default_span {
+  color: #374151;
+}
+
+/* 🏷 Headings */
+.default_h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+}
+
+.default_h2 {
+  font-size: 1.875rem;
+  font-weight: 600;
+}
+
+.default_h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.default_h4 {
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.default_h5 {
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.default_h6 {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+/* 📋 Table */
+.default_table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  text-align: left;
+}
+
+/* 🧠 Table Head */
+.default_table_head {
+  background-color: #f3f4f6;
+  color: #4b5563;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+/* 📥 Table Body */
+.default_table_body {
+  border-top: 1px solid #e5e7eb;
+}
+
+/* 🔁 Table Row */
+.default_table_row {
+  transition: background-color 0.2s ease;
+}
+
+.default_table_row:hover {
+  background-color: #f9fafb;
+}
+
+/* 🧩 Table Header Cell */
+.default_th {
+  padding: 0.75rem 1.5rem;
+  font-weight: 600;
+  white-space: nowrap;
+  letter-spacing: 0.05em;
+}
+
+/* 📦 Table Data Cell */
+.default_td {
+  padding: 1rem 1.5rem;
+  color: #1f2937;
+  white-space: nowrap;
+}
+
+/* 🧷 Header */
+.default_header {
+  background-color: #f3f4f6;
+  padding: 1rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+/* 🧭 Navigation */
+.default_nav {
+  background-color: #e5e7eb;
+  padding: 1rem;
+  border-bottom: 1px solid #d1d5db;
+  font-size: 0.875rem;
+}
+
+/* 🧱 Section */
+.default_section {
+  padding: 1.5rem 1rem;
+  background-color: white;
+  border-radius: 0.375rem;
+  margin: 1rem 0;
+}
+
+/* 📄 Main */
+.default_main {
+  padding: 1.5rem;
+  background-color: #f9fafb;
+  flex: 1;
+}
+
+/* 🦶 Footer */
+.default_footer {
+  background-color: #f9fafb;
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: #6b7280;
+  border-top: 1px solid #e5e7eb;
+}
+
+/* 🧊 Container */
+.default_container {
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* 💳 Card */
+.default_card {
+  background-color: #ffffff;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+}
+
+/* 🔘 Pressable */
+.default_pressable {
+  cursor: pointer;
+}
+
+/* 🎠 ScrollView */
+.default_scrollview {
+  overflow: auto;
+}
+
+/* 🖼️ Image */
+.default_image {
+  object-fit: contain;
+}
+
+/* ⏳ Activity Indicator */
+.default_activity_indicator {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 4px solid #d1d5db;
+  border-top-color: #000;
+  border-radius: 9999px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* ✋ TouchableOpacity */
+.default_touchable_opacity {
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.default_touchable_opacity_active {
+  opacity: 0.5;
+}
+
+/* 📋 FlatList */
+.default_flatlist {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* 💬 Modal */
+.default_modal_overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.default_modal_content {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  max-width: 24rem;
+  width: 100%;
+}
+
+/* 💬 Dialog Buttons */
+.default_dialog_button {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+}
+
+.default_dialog_cancel {
+  color: #4b5563;
+}
+
+.default_dialog_cancel:hover {
+  background-color: #f3f4f6;
+}
+
+.default_dialog_confirm {
+  background-color: #2563eb;
+  color: white;
+}
+
+.default_dialog_confirm:hover {
+  background-color: #1d4ed8;
+}
+
+/* 🍞 Toast */
+.default_toast {
+  position: fixed;
+  bottom: 1.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #1f2937;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+/* 📑 SectionList */
+.default_section_list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.default_section_list_title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.default_section_list_items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* 🧊 Overlay */
+.default_overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.bg-gray-50 {
+  background-color: #f9fafb;
+}
+
+.text-gray-50 {
+  color: #f9fafb;
+}
+
+.border-gray-50 {
+  border-color: #f9fafb;
+}
+
+.shadow-gray-50 {
+  box-shadow: 0 1px 3px 0 #f9fafb;
+}
+
+.bg-gray-100 {
+  background-color: #f3f4f6;
+}
+
+.text-gray-100 {
+  color: #f3f4f6;
+}
+
+.border-gray-100 {
+  border-color: #f3f4f6;
+}
+
+.shadow-gray-100 {
+  box-shadow: 0 1px 3px 0 #f3f4f6;
+}
+
+.bg-gray-200 {
+  background-color: #e5e7eb;
+}
+
+.text-gray-200 {
+  color: #e5e7eb;
+}
+
+.border-gray-200 {
+  border-color: #e5e7eb;
+}
+
+.shadow-gray-200 {
+  box-shadow: 0 1px 3px 0 #e5e7eb;
+}
+
+.bg-gray-300 {
+  background-color: #d1d5db;
+}
+
+.text-gray-300 {
+  color: #d1d5db;
+}
+
+.border-gray-300 {
+  border-color: #d1d5db;
+}
+
+.shadow-gray-300 {
+  box-shadow: 0 1px 3px 0 #d1d5db;
+}
+
+.bg-gray-400 {
+  background-color: #9ca3af;
+}
+
+.text-gray-400 {
+  color: #9ca3af;
+}
+
+.border-gray-400 {
+  border-color: #9ca3af;
+}
+
+.shadow-gray-400 {
+  box-shadow: 0 1px 3px 0 #9ca3af;
+}
+
+.bg-gray-500 {
+  background-color: #6b7280;
+}
+
+.text-gray-500 {
+  color: #6b7280;
+}
+
+.border-gray-500 {
+  border-color: #6b7280;
+}
+
+.shadow-gray-500 {
+  box-shadow: 0 1px 3px 0 #6b7280;
+}
+
+.bg-gray-600 {
+  background-color: #4b5563;
+}
+
+.text-gray-600 {
+  color: #4b5563;
+}
+
+.border-gray-600 {
+  border-color: #4b5563;
+}
+
+.shadow-gray-600 {
+  box-shadow: 0 1px 3px 0 #4b5563;
+}
+
+.bg-gray-700 {
+  background-color: #374151;
+}
+
+.text-gray-700 {
+  color: #374151;
+}
+
+.border-gray-700 {
+  border-color: #374151;
+}
+
+.shadow-gray-700 {
+  box-shadow: 0 1px 3px 0 #374151;
+}
+
+.bg-gray-800 {
+  background-color: #1f2937;
+}
+
+.text-gray-800 {
+  color: #1f2937;
+}
+
+.border-gray-800 {
+  border-color: #1f2937;
+}
+
+.shadow-gray-800 {
+  box-shadow: 0 1px 3px 0 #1f2937;
+}
+
+.bg-gray-900 {
+  background-color: #111827;
+}
+
+.text-gray-900 {
+  color: #111827;
+}
+
+.border-gray-900 {
+  border-color: #111827;
+}
+
+.shadow-gray-900 {
+  box-shadow: 0 1px 3px 0 #111827;
+}
+
 .bg-blue-50 {
   background-color: #eff6ff;
 }
@@ -1454,308 +1945,148 @@
   box-shadow: 0 1px 3px 0 #f0fdfa;
 }
 
-.bg-teal-100 {
-  background-color: #ccfbf1;
-}
-
-.text-teal-100 {
-  color: #ccfbf1;
-}
-
-.border-teal-100 {
-  border-color: #ccfbf1;
-}
-
-.shadow-teal-100 {
-  box-shadow: 0 1px 3px 0 #ccfbf1;
-}
-
-.bg-teal-200 {
-  background-color: #99f6e4;
-}
-
-.text-teal-200 {
-  color: #99f6e4;
-}
-
-.border-teal-200 {
-  border-color: #99f6e4;
-}
-
-.shadow-teal-200 {
-  box-shadow: 0 1px 3px 0 #99f6e4;
-}
-
-.bg-teal-300 {
-  background-color: #5eead4;
-}
-
-.text-teal-300 {
-  color: #5eead4;
-}
-
-.border-teal-300 {
-  border-color: #5eead4;
-}
-
-.shadow-teal-300 {
-  box-shadow: 0 1px 3px 0 #5eead4;
-}
-
-.bg-teal-400 {
-  background-color: #2dd4bf;
-}
-
-.text-teal-400 {
-  color: #2dd4bf;
-}
-
-.border-teal-400 {
-  border-color: #2dd4bf;
-}
-
-.shadow-teal-400 {
-  box-shadow: 0 1px 3px 0 #2dd4bf;
-}
-
-.bg-teal-500 {
-  background-color: #14b8a6;
-}
-
-.text-teal-500 {
-  color: #14b8a6;
-}
-
-.border-teal-500 {
-  border-color: #14b8a6;
-}
-
-.shadow-teal-500 {
-  box-shadow: 0 1px 3px 0 #14b8a6;
-}
-
-.bg-teal-600 {
-  background-color: #0d9488;
-}
-
-.text-teal-600 {
-  color: #0d9488;
-}
-
-.border-teal-600 {
-  border-color: #0d9488;
-}
-
-.shadow-teal-600 {
-  box-shadow: 0 1px 3px 0 #0d9488;
-}
-
-.bg-teal-700 {
-  background-color: #0f766e;
-}
-
-.text-teal-700 {
-  color: #0f766e;
-}
-
-.border-teal-700 {
-  border-color: #0f766e;
-}
-
-.shadow-teal-700 {
-  box-shadow: 0 1px 3px 0 #0f766e;
-}
-
-.bg-teal-800 {
-  background-color: #115e59;
-}
-
-.text-teal-800 {
-  color: #115e59;
-}
-
-.border-teal-800 {
-  border-color: #115e59;
-}
-
-.shadow-teal-800 {
-  box-shadow: 0 1px 3px 0 #115e59;
-}
-
-.bg-teal-900 {
-  background-color: #134e4a;
-}
-
-.text-teal-900 {
-  color: #134e4a;
-}
-
-.border-teal-900 {
-  border-color: #134e4a;
-}
-
-.shadow-teal-900 {
-  box-shadow: 0 1px 3px 0 #134e4a;
-}
-
-.bg-gray-50 {
-  background-color: #f9fafb;
-}
-
-.text-gray-50 {
-  color: #f9fafb;
-}
-
-.border-gray-50 {
-  border-color: #f9fafb;
-}
-
-.shadow-gray-50 {
-  box-shadow: 0 1px 3px 0 #f9fafb;
-}
-
-.bg-gray-100 {
-  background-color: #f3f4f6;
+.bg-teal-100 {
+  background-color: #ccfbf1;
 }
 
-.text-gray-100 {
-  color: #f3f4f6;
+.text-teal-100 {
+  color: #ccfbf1;
 }
 
-.border-gray-100 {
-  border-color: #f3f4f6;
+.border-teal-100 {
+  border-color: #ccfbf1;
 }
 
-.shadow-gray-100 {
-  box-shadow: 0 1px 3px 0 #f3f4f6;
+.shadow-teal-100 {
+  box-shadow: 0 1px 3px 0 #ccfbf1;
 }
 
-.bg-gray-200 {
-  background-color: #e5e7eb;
+.bg-teal-200 {
+  background-color: #99f6e4;
 }
 
-.text-gray-200 {
-  color: #e5e7eb;
+.text-teal-200 {
+  color: #99f6e4;
 }
 
-.border-gray-200 {
-  border-color: #e5e7eb;
+.border-teal-200 {
+  border-color: #99f6e4;
 }
 
-.shadow-gray-200 {
-  box-shadow: 0 1px 3px 0 #e5e7eb;
+.shadow-teal-200 {
+  box-shadow: 0 1px 3px 0 #99f6e4;
 }
 
-.bg-gray-300 {
-  background-color: #d1d5db;
+.bg-teal-300 {
+  background-color: #5eead4;
 }
 
-.text-gray-300 {
-  color: #d1d5db;
+.text-teal-300 {
+  color: #5eead4;
 }
 
-.border-gray-300 {
-  border-color: #d1d5db;
+.border-teal-300 {
+  border-color: #5eead4;
 }
 
-.shadow-gray-300 {
-  box-shadow: 0 1px 3px 0 #d1d5db;
+.shadow-teal-300 {
+  box-shadow: 0 1px 3px 0 #5eead4;
 }
 
-.bg-gray-400 {
-  background-color: #9ca3af;
+.bg-teal-400 {
+  background-color: #2dd4bf;
 }
 
-.text-gray-400 {
-  color: #9ca3af;
+.text-teal-400 {
+  color: #2dd4bf;
 }
 
-.border-gray-400 {
-  border-color: #9ca3af;
+.border-teal-400 {
+  border-color: #2dd4bf;
 }
 
-.shadow-gray-400 {
-  box-shadow: 0 1px 3px 0 #9ca3af;
+.shadow-teal-400 {
+  box-shadow: 0 1px 3px 0 #2dd4bf;
 }
 
-.bg-gray-500 {
-  background-color: #6b7280;
+.bg-teal-500 {
+  background-color: #14b8a6;
 }
 
-.text-gray-500 {
-  color: #6b7280;
+.text-teal-500 {
+  color: #14b8a6;
 }
 
-.border-gray-500 {
-  border-color: #6b7280;
+.border-teal-500 {
+  border-color: #14b8a6;
 }
 
-.shadow-gray-500 {
-  box-shadow: 0 1px 3px 0 #6b7280;
+.shadow-teal-500 {
+  box-shadow: 0 1px 3px 0 #14b8a6;
 }
 
-.bg-gray-600 {
-  background-color: #4b5563;
+.bg-teal-600 {
+  background-color: #0d9488;
 }
 
-.text-gray-600 {
-  color: #4b5563;
+.text-teal-600 {
+  color: #0d9488;
 }
 
-.border-gray-600 {
-  border-color: #4b5563;
+.border-teal-600 {
+  border-color: #0d9488;
 }
 
-.shadow-gray-600 {
-  box-shadow: 0 1px 3px 0 #4b5563;
+.shadow-teal-600 {
+  box-shadow: 0 1px 3px 0 #0d9488;
 }
 
-.bg-gray-700 {
-  background-color: #374151;
+.bg-teal-700 {
+  background-color: #0f766e;
 }
 
-.text-gray-700 {
-  color: #374151;
+.text-teal-700 {
+  color: #0f766e;
 }
 
-.border-gray-700 {
-  border-color: #374151;
+.border-teal-700 {
+  border-color: #0f766e;
 }
 
-.shadow-gray-700 {
-  box-shadow: 0 1px 3px 0 #374151;
+.shadow-teal-700 {
+  box-shadow: 0 1px 3px 0 #0f766e;
 }
 
-.bg-gray-800 {
-  background-color: #1f2937;
+.bg-teal-800 {
+  background-color: #115e59;
 }
 
-.text-gray-800 {
-  color: #1f2937;
+.text-teal-800 {
+  color: #115e59;
 }
 
-.border-gray-800 {
-  border-color: #1f2937;
+.border-teal-800 {
+  border-color: #115e59;
 }
 
-.shadow-gray-800 {
-  box-shadow: 0 1px 3px 0 #1f2937;
+.shadow-teal-800 {
+  box-shadow: 0 1px 3px 0 #115e59;
 }
 
-.bg-gray-900 {
-  background-color: #111827;
+.bg-teal-900 {
+  background-color: #134e4a;
 }
 
-.text-gray-900 {
-  color: #111827;
+.text-teal-900 {
+  color: #134e4a;
 }
 
-.border-gray-900 {
-  border-color: #111827;
+.border-teal-900 {
+  border-color: #134e4a;
 }
 
-.shadow-gray-900 {
-  box-shadow: 0 1px 3px 0 #111827;
+.shadow-teal-900 {
+  box-shadow: 0 1px 3px 0 #134e4a;
 }
 
 .bg-amber-50 {
@@ -2238,6 +2569,54 @@
   box-shadow: 0 1px 3px 0 #701a75;
 }
 
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-60 {
+  z-index: 60;
+}
+
+.z-70 {
+  z-index: 70;
+}
+
+.z-80 {
+  z-index: 80;
+}
+
+.z-90 {
+  z-index: 90;
+}
+
+.z-100 {
+  z-index: 100;
+}
+
+.z-auto {
+  z-index: auto;
+}
+
 .p-0 {
   padding: 0rem;
 }
@@ -2298,10 +2677,6 @@
   margin-bottom: 0rem;
 }
 
-.-m-0 {
-  margin: 0rem;
-}
-
 .-mt-0 {
   margin-top: 0rem;
 }
@@ -2318,68 +2693,77 @@
   margin-left: 0rem;
 }
 
-.-mx-0 {
-  margin-left: 0rem;
-  margin-right: 0rem;
+.h-0 {
+  height: 0rem;
 }
 
-.-my-0 {
-  margin-top: 0rem;
-  margin-bottom: 0rem;
+.min-h-0 {
+  min-height: 0rem;
 }
 
-.-p-0 {
-  padding: 0rem;
+.max-h-0 {
+  max-height: 0rem;
 }
 
-.-pt-0 {
-  padding-top: 0rem;
+.w-0 {
+  width: 0rem;
 }
 
-.-pr-0 {
-  padding-right: 0rem;
+.min-w-0 {
+  min-width: 0rem;
 }
 
-.-pb-0 {
-  padding-bottom: 0rem;
+.max-w-0 {
+  max-width: 0rem;
 }
 
-.-pl-0 {
-  padding-left: 0rem;
+.top-0 {
+  top: 0rem;
 }
 
-.-px-0 {
-  padding-left: 0rem;
-  padding-right: 0rem;
+.right-0 {
+  right: 0rem;
 }
 
-.-py-0 {
-  padding-top: 0rem;
-  padding-bottom: 0rem;
+.bottom-0 {
+  bottom: 0rem;
 }
 
-.h-0 {
-  height: 0rem;
+.left-0 {
+  left: 0rem;
 }
 
-.min-h-0 {
-  min-height: 0rem;
+.-top-0 {
+  top: 0rem;
 }
 
-.max-h-0 {
-  max-height: 0rem;
+.-right-0 {
+  right: 0rem;
 }
 
-.w-0 {
-  height: 0rem;
+.-bottom-0 {
+  bottom: 0rem;
 }
 
-.min-w-0 {
-  min-height: 0rem;
+.-left-0 {
+  left: 0rem;
 }
 
-.max-w-0 {
-  max-height: 0rem;
+.inset-0 {
+  top: 0rem;
+  right: 0rem;
+  bottom: 0rem;
+  left: 0rem;
+}
+
+.inset-x-0 {
+  left: 0rem;
+  right: 0rem;
+}
+
+.inset-y-0 {
+  top: 0rem;
+  bottom: 0rem;
 }
 
 .p-1 {
@@ -2442,10 +2826,6 @@
   margin-bottom: 0.25rem;
 }
 
-.-m-1 {
-  margin: -0.25rem;
-}
-
 .-mt-1 {
   margin-top: -0.25rem;
 }
@@ -2462,68 +2842,77 @@
   margin-left: -0.25rem;
 }
 
-.-mx-1 {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
+.h-1 {
+  height: 0.25rem;
 }
 
-.-my-1 {
-  margin-top: -0.25rem;
-  margin-bottom: -0.25rem;
+.min-h-1 {
+  min-height: 0.25rem;
 }
 
-.-p-1 {
-  padding: -0.25rem;
+.max-h-1 {
+  max-height: 0.25rem;
 }
 
-.-pt-1 {
-  padding-top: -0.25rem;
+.w-1 {
+  width: 0.25rem;
 }
 
-.-pr-1 {
-  padding-right: -0.25rem;
+.min-w-1 {
+  min-width: 0.25rem;
 }
 
-.-pb-1 {
-  padding-bottom: -0.25rem;
+.max-w-1 {
+  max-width: 0.25rem;
 }
 
-.-pl-1 {
-  padding-left: -0.25rem;
+.top-1 {
+  top: 0.25rem;
 }
 
-.-px-1 {
-  padding-left: -0.25rem;
-  padding-right: -0.25rem;
+.right-1 {
+  right: 0.25rem;
 }
 
-.-py-1 {
-  padding-top: -0.25rem;
-  padding-bottom: -0.25rem;
+.bottom-1 {
+  bottom: 0.25rem;
 }
 
-.h-1 {
-  height: 0.25rem;
+.left-1 {
+  left: 0.25rem;
 }
 
-.min-h-1 {
-  min-height: 0.25rem;
+.-top-1 {
+  top: -0.25rem;
 }
 
-.max-h-1 {
-  max-height: 0.25rem;
+.-right-1 {
+  right: -0.25rem;
 }
 
-.w-1 {
-  height: 0.25rem;
+.-bottom-1 {
+  bottom: -0.25rem;
 }
 
-.min-w-1 {
-  min-height: 0.25rem;
+.-left-1 {
+  left: -0.25rem;
 }
 
-.max-w-1 {
-  max-height: 0.25rem;
+.inset-1 {
+  top: 0.25rem;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  left: 0.25rem;
+}
+
+.inset-x-1 {
+  left: 0.25rem;
+  right: 0.25rem;
+}
+
+.inset-y-1 {
+  top: 0.25rem;
+  bottom: 0.25rem;
 }
 
 .p-2 {
@@ -2586,10 +2975,6 @@
   margin-bottom: 0.5rem;
 }
 
-.-m-2 {
-  margin: -0.5rem;
-}
-
 .-mt-2 {
   margin-top: -0.5rem;
 }
@@ -2606,68 +2991,77 @@
   margin-left: -0.5rem;
 }
 
-.-mx-2 {
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
+.h-2 {
+  height: 0.5rem;
 }
 
-.-my-2 {
-  margin-top: -0.5rem;
-  margin-bottom: -0.5rem;
+.min-h-2 {
+  min-height: 0.5rem;
 }
 
-.-p-2 {
-  padding: -0.5rem;
+.max-h-2 {
+  max-height: 0.5rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.min-w-2 {
+  min-width: 0.5rem;
 }
 
-.-pt-2 {
-  padding-top: -0.5rem;
+.max-w-2 {
+  max-width: 0.5rem;
 }
 
-.-pr-2 {
-  padding-right: -0.5rem;
+.top-2 {
+  top: 0.5rem;
 }
 
-.-pb-2 {
-  padding-bottom: -0.5rem;
+.right-2 {
+  right: 0.5rem;
 }
 
-.-pl-2 {
-  padding-left: -0.5rem;
+.bottom-2 {
+  bottom: 0.5rem;
 }
 
-.-px-2 {
-  padding-left: -0.5rem;
-  padding-right: -0.5rem;
+.left-2 {
+  left: 0.5rem;
 }
 
-.-py-2 {
-  padding-top: -0.5rem;
-  padding-bottom: -0.5rem;
+.-top-2 {
+  top: -0.5rem;
 }
 
-.h-2 {
-  height: 0.5rem;
+.-right-2 {
+  right: -0.5rem;
 }
 
-.min-h-2 {
-  min-height: 0.5rem;
+.-bottom-2 {
+  bottom: -0.5rem;
 }
 
-.max-h-2 {
-  max-height: 0.5rem;
+.-left-2 {
+  left: -0.5rem;
 }
 
-.w-2 {
-  height: 0.5rem;
+.inset-2 {
+  top: 0.5rem;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  left: 0.5rem;
 }
 
-.min-w-2 {
-  min-height: 0.5rem;
+.inset-x-2 {
+  left: 0.5rem;
+  right: 0.5rem;
 }
 
-.max-w-2 {
-  max-height: 0.5rem;
+.inset-y-2 {
+  top: 0.5rem;
+  bottom: 0.5rem;
 }
 
 .p-3 {
@@ -2730,10 +3124,6 @@
   margin-bottom: 0.75rem;
 }
 
-.-m-3 {
-  margin: -0.75rem;
-}
-
 .-mt-3 {
   margin-top: -0.75rem;
 }
@@ -2750,68 +3140,77 @@
   margin-left: -0.75rem;
 }
 
-.-mx-3 {
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
+.h-3 {
+  height: 0.75rem;
 }
 
-.-my-3 {
-  margin-top: -0.75rem;
-  margin-bottom: -0.75rem;
+.min-h-3 {
+  min-height: 0.75rem;
 }
 
-.-p-3 {
-  padding: -0.75rem;
+.max-h-3 {
+  max-height: 0.75rem;
 }
 
-.-pt-3 {
-  padding-top: -0.75rem;
+.w-3 {
+  width: 0.75rem;
 }
 
-.-pr-3 {
-  padding-right: -0.75rem;
+.min-w-3 {
+  min-width: 0.75rem;
 }
 
-.-pb-3 {
-  padding-bottom: -0.75rem;
+.max-w-3 {
+  max-width: 0.75rem;
 }
 
-.-pl-3 {
-  padding-left: -0.75rem;
+.top-3 {
+  top: 0.75rem;
 }
 
-.-px-3 {
-  padding-left: -0.75rem;
-  padding-right: -0.75rem;
+.right-3 {
+  right: 0.75rem;
 }
 
-.-py-3 {
-  padding-top: -0.75rem;
-  padding-bottom: -0.75rem;
+.bottom-3 {
+  bottom: 0.75rem;
 }
 
-.h-3 {
-  height: 0.75rem;
+.left-3 {
+  left: 0.75rem;
 }
 
-.min-h-3 {
-  min-height: 0.75rem;
+.-top-3 {
+  top: -0.75rem;
 }
 
-.max-h-3 {
-  max-height: 0.75rem;
+.-right-3 {
+  right: -0.75rem;
 }
 
-.w-3 {
-  height: 0.75rem;
+.-bottom-3 {
+  bottom: -0.75rem;
 }
 
-.min-w-3 {
-  min-height: 0.75rem;
+.-left-3 {
+  left: -0.75rem;
 }
 
-.max-w-3 {
-  max-height: 0.75rem;
+.inset-3 {
+  top: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  left: 0.75rem;
+}
+
+.inset-x-3 {
+  left: 0.75rem;
+  right: 0.75rem;
+}
+
+.inset-y-3 {
+  top: 0.75rem;
+  bottom: 0.75rem;
 }
 
 .p-4 {
@@ -2874,10 +3273,6 @@
   margin-bottom: 1rem;
 }
 
-.-m-4 {
-  margin: -1rem;
-}
-
 .-mt-4 {
   margin-top: -1rem;
 }
@@ -2894,68 +3289,77 @@
   margin-left: -1rem;
 }
 
-.-mx-4 {
-  margin-left: -1rem;
-  margin-right: -1rem;
+.h-4 {
+  height: 1rem;
 }
 
-.-my-4 {
-  margin-top: -1rem;
-  margin-bottom: -1rem;
+.min-h-4 {
+  min-height: 1rem;
 }
 
-.-p-4 {
-  padding: -1rem;
+.max-h-4 {
+  max-height: 1rem;
 }
 
-.-pt-4 {
-  padding-top: -1rem;
+.w-4 {
+  width: 1rem;
 }
 
-.-pr-4 {
-  padding-right: -1rem;
+.min-w-4 {
+  min-width: 1rem;
 }
 
-.-pb-4 {
-  padding-bottom: -1rem;
+.max-w-4 {
+  max-width: 1rem;
 }
 
-.-pl-4 {
-  padding-left: -1rem;
+.top-4 {
+  top: 1rem;
 }
 
-.-px-4 {
-  padding-left: -1rem;
-  padding-right: -1rem;
+.right-4 {
+  right: 1rem;
 }
 
-.-py-4 {
-  padding-top: -1rem;
-  padding-bottom: -1rem;
+.bottom-4 {
+  bottom: 1rem;
 }
 
-.h-4 {
-  height: 1rem;
+.left-4 {
+  left: 1rem;
 }
 
-.min-h-4 {
-  min-height: 1rem;
+.-top-4 {
+  top: -1rem;
 }
 
-.max-h-4 {
-  max-height: 1rem;
+.-right-4 {
+  right: -1rem;
 }
 
-.w-4 {
-  height: 1rem;
+.-bottom-4 {
+  bottom: -1rem;
 }
 
-.min-w-4 {
-  min-height: 1rem;
+.-left-4 {
+  left: -1rem;
 }
 
-.max-w-4 {
-  max-height: 1rem;
+.inset-4 {
+  top: 1rem;
+  right: 1rem;
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.inset-x-4 {
+  left: 1rem;
+  right: 1rem;
+}
+
+.inset-y-4 {
+  top: 1rem;
+  bottom: 1rem;
 }
 
 .p-5 {
@@ -3018,10 +3422,6 @@
   margin-bottom: 1.25rem;
 }
 
-.-m-5 {
-  margin: -1.25rem;
-}
-
 .-mt-5 {
   margin-top: -1.25rem;
 }
@@ -3038,68 +3438,77 @@
   margin-left: -1.25rem;
 }
 
-.-mx-5 {
-  margin-left: -1.25rem;
-  margin-right: -1.25rem;
+.h-5 {
+  height: 1.25rem;
 }
 
-.-my-5 {
-  margin-top: -1.25rem;
-  margin-bottom: -1.25rem;
+.min-h-5 {
+  min-height: 1.25rem;
 }
 
-.-p-5 {
-  padding: -1.25rem;
+.max-h-5 {
+  max-height: 1.25rem;
 }
 
-.-pt-5 {
-  padding-top: -1.25rem;
+.w-5 {
+  width: 1.25rem;
 }
 
-.-pr-5 {
-  padding-right: -1.25rem;
+.min-w-5 {
+  min-width: 1.25rem;
 }
 
-.-pb-5 {
-  padding-bottom: -1.25rem;
+.max-w-5 {
+  max-width: 1.25rem;
 }
 
-.-pl-5 {
-  padding-left: -1.25rem;
+.top-5 {
+  top: 1.25rem;
 }
 
-.-px-5 {
-  padding-left: -1.25rem;
-  padding-right: -1.25rem;
+.right-5 {
+  right: 1.25rem;
 }
 
-.-py-5 {
-  padding-top: -1.25rem;
-  padding-bottom: -1.25rem;
+.bottom-5 {
+  bottom: 1.25rem;
 }
 
-.h-5 {
-  height: 1.25rem;
+.left-5 {
+  left: 1.25rem;
 }
 
-.min-h-5 {
-  min-height: 1.25rem;
+.-top-5 {
+  top: -1.25rem;
 }
 
-.max-h-5 {
-  max-height: 1.25rem;
+.-right-5 {
+  right: -1.25rem;
 }
 
-.w-5 {
-  height: 1.25rem;
+.-bottom-5 {
+  bottom: -1.25rem;
 }
 
-.min-w-5 {
-  min-height: 1.25rem;
+.-left-5 {
+  left: -1.25rem;
 }
 
-.max-w-5 {
-  max-height: 1.25rem;
+.inset-5 {
+  top: 1.25rem;
+  right: 1.25rem;
+  bottom: 1.25rem;
+  left: 1.25rem;
+}
+
+.inset-x-5 {
+  left: 1.25rem;
+  right: 1.25rem;
+}
+
+.inset-y-5 {
+  top: 1.25rem;
+  bottom: 1.25rem;
 }
 
 .p-6 {
@@ -3162,10 +3571,6 @@
   margin-bottom: 1.5rem;
 }
 
-.-m-6 {
-  margin: -1.5rem;
-}
-
 .-mt-6 {
   margin-top: -1.5rem;
 }
@@ -3182,68 +3587,77 @@
   margin-left: -1.5rem;
 }
 
-.-mx-6 {
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
+.h-6 {
+  height: 1.5rem;
 }
 
-.-my-6 {
-  margin-top: -1.5rem;
-  margin-bottom: -1.5rem;
+.min-h-6 {
+  min-height: 1.5rem;
 }
 
-.-p-6 {
-  padding: -1.5rem;
+.max-h-6 {
+  max-height: 1.5rem;
 }
 
-.-pt-6 {
-  padding-top: -1.5rem;
+.w-6 {
+  width: 1.5rem;
 }
 
-.-pr-6 {
-  padding-right: -1.5rem;
+.min-w-6 {
+  min-width: 1.5rem;
 }
 
-.-pb-6 {
-  padding-bottom: -1.5rem;
+.max-w-6 {
+  max-width: 1.5rem;
 }
 
-.-pl-6 {
-  padding-left: -1.5rem;
+.top-6 {
+  top: 1.5rem;
 }
 
-.-px-6 {
-  padding-left: -1.5rem;
-  padding-right: -1.5rem;
+.right-6 {
+  right: 1.5rem;
 }
 
-.-py-6 {
-  padding-top: -1.5rem;
-  padding-bottom: -1.5rem;
+.bottom-6 {
+  bottom: 1.5rem;
 }
 
-.h-6 {
-  height: 1.5rem;
+.left-6 {
+  left: 1.5rem;
 }
 
-.min-h-6 {
-  min-height: 1.5rem;
+.-top-6 {
+  top: -1.5rem;
 }
 
-.max-h-6 {
-  max-height: 1.5rem;
+.-right-6 {
+  right: -1.5rem;
 }
 
-.w-6 {
-  height: 1.5rem;
+.-bottom-6 {
+  bottom: -1.5rem;
 }
 
-.min-w-6 {
-  min-height: 1.5rem;
+.-left-6 {
+  left: -1.5rem;
 }
 
-.max-w-6 {
-  max-height: 1.5rem;
+.inset-6 {
+  top: 1.5rem;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  left: 1.5rem;
+}
+
+.inset-x-6 {
+  left: 1.5rem;
+  right: 1.5rem;
+}
+
+.inset-y-6 {
+  top: 1.5rem;
+  bottom: 1.5rem;
 }
 
 .p-8 {
@@ -3306,10 +3720,6 @@
   margin-bottom: 2rem;
 }
 
-.-m-8 {
-  margin: -2rem;
-}
-
 .-mt-8 {
   margin-top: -2rem;
 }
@@ -3326,68 +3736,77 @@
   margin-left: -2rem;
 }
 
-.-mx-8 {
-  margin-left: -2rem;
-  margin-right: -2rem;
+.h-8 {
+  height: 2rem;
 }
 
-.-my-8 {
-  margin-top: -2rem;
-  margin-bottom: -2rem;
+.min-h-8 {
+  min-height: 2rem;
 }
 
-.-p-8 {
-  padding: -2rem;
+.max-h-8 {
+  max-height: 2rem;
 }
 
-.-pt-8 {
-  padding-top: -2rem;
+.w-8 {
+  width: 2rem;
 }
 
-.-pr-8 {
-  padding-right: -2rem;
+.min-w-8 {
+  min-width: 2rem;
 }
 
-.-pb-8 {
-  padding-bottom: -2rem;
+.max-w-8 {
+  max-width: 2rem;
 }
 
-.-pl-8 {
-  padding-left: -2rem;
+.top-8 {
+  top: 2rem;
 }
 
-.-px-8 {
-  padding-left: -2rem;
-  padding-right: -2rem;
+.right-8 {
+  right: 2rem;
 }
 
-.-py-8 {
-  padding-top: -2rem;
-  padding-bottom: -2rem;
+.bottom-8 {
+  bottom: 2rem;
 }
 
-.h-8 {
-  height: 2rem;
+.left-8 {
+  left: 2rem;
 }
 
-.min-h-8 {
-  min-height: 2rem;
+.-top-8 {
+  top: -2rem;
 }
 
-.max-h-8 {
-  max-height: 2rem;
+.-right-8 {
+  right: -2rem;
 }
 
-.w-8 {
-  height: 2rem;
+.-bottom-8 {
+  bottom: -2rem;
 }
 
-.min-w-8 {
-  min-height: 2rem;
+.-left-8 {
+  left: -2rem;
 }
 
-.max-w-8 {
-  max-height: 2rem;
+.inset-8 {
+  top: 2rem;
+  right: 2rem;
+  bottom: 2rem;
+  left: 2rem;
+}
+
+.inset-x-8 {
+  left: 2rem;
+  right: 2rem;
+}
+
+.inset-y-8 {
+  top: 2rem;
+  bottom: 2rem;
 }
 
 .p-10 {
@@ -3450,10 +3869,6 @@
   margin-bottom: 2.5rem;
 }
 
-.-m-10 {
-  margin: -2.5rem;
-}
-
 .-mt-10 {
   margin-top: -2.5rem;
 }
@@ -3470,68 +3885,77 @@
   margin-left: -2.5rem;
 }
 
-.-mx-10 {
-  margin-left: -2.5rem;
-  margin-right: -2.5rem;
+.h-10 {
+  height: 2.5rem;
 }
 
-.-my-10 {
-  margin-top: -2.5rem;
-  margin-bottom: -2.5rem;
+.min-h-10 {
+  min-height: 2.5rem;
 }
 
-.-p-10 {
-  padding: -2.5rem;
+.max-h-10 {
+  max-height: 2.5rem;
 }
 
-.-pt-10 {
-  padding-top: -2.5rem;
+.w-10 {
+  width: 2.5rem;
 }
 
-.-pr-10 {
-  padding-right: -2.5rem;
+.min-w-10 {
+  min-width: 2.5rem;
 }
 
-.-pb-10 {
-  padding-bottom: -2.5rem;
+.max-w-10 {
+  max-width: 2.5rem;
 }
 
-.-pl-10 {
-  padding-left: -2.5rem;
+.top-10 {
+  top: 2.5rem;
 }
 
-.-px-10 {
-  padding-left: -2.5rem;
-  padding-right: -2.5rem;
+.right-10 {
+  right: 2.5rem;
 }
 
-.-py-10 {
-  padding-top: -2.5rem;
-  padding-bottom: -2.5rem;
+.bottom-10 {
+  bottom: 2.5rem;
 }
 
-.h-10 {
-  height: 2.5rem;
+.left-10 {
+  left: 2.5rem;
 }
 
-.min-h-10 {
-  min-height: 2.5rem;
+.-top-10 {
+  top: -2.5rem;
 }
 
-.max-h-10 {
-  max-height: 2.5rem;
+.-right-10 {
+  right: -2.5rem;
 }
 
-.w-10 {
-  height: 2.5rem;
+.-bottom-10 {
+  bottom: -2.5rem;
 }
 
-.min-w-10 {
-  min-height: 2.5rem;
+.-left-10 {
+  left: -2.5rem;
 }
 
-.max-w-10 {
-  max-height: 2.5rem;
+.inset-10 {
+  top: 2.5rem;
+  right: 2.5rem;
+  bottom: 2.5rem;
+  left: 2.5rem;
+}
+
+.inset-x-10 {
+  left: 2.5rem;
+  right: 2.5rem;
+}
+
+.inset-y-10 {
+  top: 2.5rem;
+  bottom: 2.5rem;
 }
 
 .p-12 {
@@ -3594,10 +4018,6 @@
   margin-bottom: 3rem;
 }
 
-.-m-12 {
-  margin: -3rem;
-}
-
 .-mt-12 {
   margin-top: -3rem;
 }
@@ -3614,68 +4034,77 @@
   margin-left: -3rem;
 }
 
-.-mx-12 {
-  margin-left: -3rem;
-  margin-right: -3rem;
+.h-12 {
+  height: 3rem;
 }
 
-.-my-12 {
-  margin-top: -3rem;
-  margin-bottom: -3rem;
+.min-h-12 {
+  min-height: 3rem;
 }
 
-.-p-12 {
-  padding: -3rem;
+.max-h-12 {
+  max-height: 3rem;
 }
 
-.-pt-12 {
-  padding-top: -3rem;
+.w-12 {
+  width: 3rem;
 }
 
-.-pr-12 {
-  padding-right: -3rem;
+.min-w-12 {
+  min-width: 3rem;
 }
 
-.-pb-12 {
-  padding-bottom: -3rem;
+.max-w-12 {
+  max-width: 3rem;
 }
 
-.-pl-12 {
-  padding-left: -3rem;
+.top-12 {
+  top: 3rem;
 }
 
-.-px-12 {
-  padding-left: -3rem;
-  padding-right: -3rem;
+.right-12 {
+  right: 3rem;
 }
 
-.-py-12 {
-  padding-top: -3rem;
-  padding-bottom: -3rem;
+.bottom-12 {
+  bottom: 3rem;
 }
 
-.h-12 {
-  height: 3rem;
+.left-12 {
+  left: 3rem;
 }
 
-.min-h-12 {
-  min-height: 3rem;
+.-top-12 {
+  top: -3rem;
 }
 
-.max-h-12 {
-  max-height: 3rem;
+.-right-12 {
+  right: -3rem;
 }
 
-.w-12 {
-  height: 3rem;
+.-bottom-12 {
+  bottom: -3rem;
 }
 
-.min-w-12 {
-  min-height: 3rem;
+.-left-12 {
+  left: -3rem;
 }
 
-.max-w-12 {
-  max-height: 3rem;
+.inset-12 {
+  top: 3rem;
+  right: 3rem;
+  bottom: 3rem;
+  left: 3rem;
+}
+
+.inset-x-12 {
+  left: 3rem;
+  right: 3rem;
+}
+
+.inset-y-12 {
+  top: 3rem;
+  bottom: 3rem;
 }
 
 .p-16 {
@@ -3738,10 +4167,6 @@
   margin-bottom: 4rem;
 }
 
-.-m-16 {
-  margin: -4rem;
-}
-
 .-mt-16 {
   margin-top: -4rem;
 }
@@ -3758,68 +4183,77 @@
   margin-left: -4rem;
 }
 
-.-mx-16 {
-  margin-left: -4rem;
-  margin-right: -4rem;
+.h-16 {
+  height: 4rem;
 }
 
-.-my-16 {
-  margin-top: -4rem;
-  margin-bottom: -4rem;
+.min-h-16 {
+  min-height: 4rem;
 }
 
-.-p-16 {
-  padding: -4rem;
+.max-h-16 {
+  max-height: 4rem;
 }
 
-.-pt-16 {
-  padding-top: -4rem;
+.w-16 {
+  width: 4rem;
 }
 
-.-pr-16 {
-  padding-right: -4rem;
+.min-w-16 {
+  min-width: 4rem;
 }
 
-.-pb-16 {
-  padding-bottom: -4rem;
+.max-w-16 {
+  max-width: 4rem;
 }
 
-.-pl-16 {
-  padding-left: -4rem;
+.top-16 {
+  top: 4rem;
 }
 
-.-px-16 {
-  padding-left: -4rem;
-  padding-right: -4rem;
+.right-16 {
+  right: 4rem;
 }
 
-.-py-16 {
-  padding-top: -4rem;
-  padding-bottom: -4rem;
+.bottom-16 {
+  bottom: 4rem;
 }
 
-.h-16 {
-  height: 4rem;
+.left-16 {
+  left: 4rem;
 }
 
-.min-h-16 {
-  min-height: 4rem;
+.-top-16 {
+  top: -4rem;
 }
 
-.max-h-16 {
-  max-height: 4rem;
+.-right-16 {
+  right: -4rem;
 }
 
-.w-16 {
-  height: 4rem;
+.-bottom-16 {
+  bottom: -4rem;
+}
+
+.-left-16 {
+  left: -4rem;
+}
+
+.inset-16 {
+  top: 4rem;
+  right: 4rem;
+  bottom: 4rem;
+  left: 4rem;
 }
 
-.min-w-16 {
-  min-height: 4rem;
+.inset-x-16 {
+  left: 4rem;
+  right: 4rem;
 }
 
-.max-w-16 {
-  max-height: 4rem;
+.inset-y-16 {
+  top: 4rem;
+  bottom: 4rem;
 }
 
 .p-20 {
@@ -3882,10 +4316,6 @@
   margin-bottom: 5rem;
 }
 
-.-m-20 {
-  margin: -5rem;
-}
-
 .-mt-20 {
   margin-top: -5rem;
 }
@@ -3902,68 +4332,77 @@
   margin-left: -5rem;
 }
 
-.-mx-20 {
-  margin-left: -5rem;
-  margin-right: -5rem;
+.h-20 {
+  height: 5rem;
 }
 
-.-my-20 {
-  margin-top: -5rem;
-  margin-bottom: -5rem;
+.min-h-20 {
+  min-height: 5rem;
 }
 
-.-p-20 {
-  padding: -5rem;
+.max-h-20 {
+  max-height: 5rem;
 }
 
-.-pt-20 {
-  padding-top: -5rem;
+.w-20 {
+  width: 5rem;
 }
 
-.-pr-20 {
-  padding-right: -5rem;
+.min-w-20 {
+  min-width: 5rem;
 }
 
-.-pb-20 {
-  padding-bottom: -5rem;
+.max-w-20 {
+  max-width: 5rem;
 }
 
-.-pl-20 {
-  padding-left: -5rem;
+.top-20 {
+  top: 5rem;
 }
 
-.-px-20 {
-  padding-left: -5rem;
-  padding-right: -5rem;
+.right-20 {
+  right: 5rem;
 }
 
-.-py-20 {
-  padding-top: -5rem;
-  padding-bottom: -5rem;
+.bottom-20 {
+  bottom: 5rem;
 }
 
-.h-20 {
-  height: 5rem;
+.left-20 {
+  left: 5rem;
 }
 
-.min-h-20 {
-  min-height: 5rem;
+.-top-20 {
+  top: -5rem;
 }
 
-.max-h-20 {
-  max-height: 5rem;
+.-right-20 {
+  right: -5rem;
 }
 
-.w-20 {
-  height: 5rem;
+.-bottom-20 {
+  bottom: -5rem;
 }
 
-.min-w-20 {
-  min-height: 5rem;
+.-left-20 {
+  left: -5rem;
 }
 
-.max-w-20 {
-  max-height: 5rem;
+.inset-20 {
+  top: 5rem;
+  right: 5rem;
+  bottom: 5rem;
+  left: 5rem;
+}
+
+.inset-x-20 {
+  left: 5rem;
+  right: 5rem;
+}
+
+.inset-y-20 {
+  top: 5rem;
+  bottom: 5rem;
 }
 
 .p-24 {
@@ -4026,10 +4465,6 @@
   margin-bottom: 6rem;
 }
 
-.-m-24 {
-  margin: -6rem;
-}
-
 .-mt-24 {
   margin-top: -6rem;
 }
@@ -4046,68 +4481,77 @@
   margin-left: -6rem;
 }
 
-.-mx-24 {
-  margin-left: -6rem;
-  margin-right: -6rem;
+.h-24 {
+  height: 6rem;
 }
 
-.-my-24 {
-  margin-top: -6rem;
-  margin-bottom: -6rem;
+.min-h-24 {
+  min-height: 6rem;
 }
 
-.-p-24 {
-  padding: -6rem;
+.max-h-24 {
+  max-height: 6rem;
 }
 
-.-pt-24 {
-  padding-top: -6rem;
+.w-24 {
+  width: 6rem;
 }
 
-.-pr-24 {
-  padding-right: -6rem;
+.min-w-24 {
+  min-width: 6rem;
 }
 
-.-pb-24 {
-  padding-bottom: -6rem;
+.max-w-24 {
+  max-width: 6rem;
 }
 
-.-pl-24 {
-  padding-left: -6rem;
+.top-24 {
+  top: 6rem;
 }
 
-.-px-24 {
-  padding-left: -6rem;
-  padding-right: -6rem;
+.right-24 {
+  right: 6rem;
 }
 
-.-py-24 {
-  padding-top: -6rem;
-  padding-bottom: -6rem;
+.bottom-24 {
+  bottom: 6rem;
 }
 
-.h-24 {
-  height: 6rem;
+.left-24 {
+  left: 6rem;
 }
 
-.min-h-24 {
-  min-height: 6rem;
+.-top-24 {
+  top: -6rem;
 }
 
-.max-h-24 {
-  max-height: 6rem;
+.-right-24 {
+  right: -6rem;
 }
 
-.w-24 {
-  height: 6rem;
+.-bottom-24 {
+  bottom: -6rem;
 }
 
-.min-w-24 {
-  min-height: 6rem;
+.-left-24 {
+  left: -6rem;
 }
 
-.max-w-24 {
-  max-height: 6rem;
+.inset-24 {
+  top: 6rem;
+  right: 6rem;
+  bottom: 6rem;
+  left: 6rem;
+}
+
+.inset-x-24 {
+  left: 6rem;
+  right: 6rem;
+}
+
+.inset-y-24 {
+  top: 6rem;
+  bottom: 6rem;
 }
 
 .p-28 {
@@ -4170,10 +4614,6 @@
   margin-bottom: 7rem;
 }
 
-.-m-28 {
-  margin: -7rem;
-}
-
 .-mt-28 {
   margin-top: -7rem;
 }
@@ -4190,68 +4630,77 @@
   margin-left: -7rem;
 }
 
-.-mx-28 {
-  margin-left: -7rem;
-  margin-right: -7rem;
+.h-28 {
+  height: 7rem;
 }
 
-.-my-28 {
-  margin-top: -7rem;
-  margin-bottom: -7rem;
+.min-h-28 {
+  min-height: 7rem;
+}
+
+.max-h-28 {
+  max-height: 7rem;
 }
 
-.-p-28 {
-  padding: -7rem;
+.w-28 {
+  width: 7rem;
 }
 
-.-pt-28 {
-  padding-top: -7rem;
+.min-w-28 {
+  min-width: 7rem;
 }
 
-.-pr-28 {
-  padding-right: -7rem;
+.max-w-28 {
+  max-width: 7rem;
 }
 
-.-pb-28 {
-  padding-bottom: -7rem;
+.top-28 {
+  top: 7rem;
 }
 
-.-pl-28 {
-  padding-left: -7rem;
+.right-28 {
+  right: 7rem;
 }
 
-.-px-28 {
-  padding-left: -7rem;
-  padding-right: -7rem;
+.bottom-28 {
+  bottom: 7rem;
 }
 
-.-py-28 {
-  padding-top: -7rem;
-  padding-bottom: -7rem;
+.left-28 {
+  left: 7rem;
 }
 
-.h-28 {
-  height: 7rem;
+.-top-28 {
+  top: -7rem;
 }
 
-.min-h-28 {
-  min-height: 7rem;
+.-right-28 {
+  right: -7rem;
 }
 
-.max-h-28 {
-  max-height: 7rem;
+.-bottom-28 {
+  bottom: -7rem;
 }
 
-.w-28 {
-  height: 7rem;
+.-left-28 {
+  left: -7rem;
 }
 
-.min-w-28 {
-  min-height: 7rem;
+.inset-28 {
+  top: 7rem;
+  right: 7rem;
+  bottom: 7rem;
+  left: 7rem;
 }
 
-.max-w-28 {
-  max-height: 7rem;
+.inset-x-28 {
+  left: 7rem;
+  right: 7rem;
+}
+
+.inset-y-28 {
+  top: 7rem;
+  bottom: 7rem;
 }
 
 .p-32 {
@@ -4314,10 +4763,6 @@
   margin-bottom: 8rem;
 }
 
-.-m-32 {
-  margin: -8rem;
-}
-
 .-mt-32 {
   margin-top: -8rem;
 }
@@ -4334,68 +4779,77 @@
   margin-left: -8rem;
 }
 
-.-mx-32 {
-  margin-left: -8rem;
-  margin-right: -8rem;
+.h-32 {
+  height: 8rem;
 }
 
-.-my-32 {
-  margin-top: -8rem;
-  margin-bottom: -8rem;
+.min-h-32 {
+  min-height: 8rem;
+}
+
+.max-h-32 {
+  max-height: 8rem;
 }
 
-.-p-32 {
-  padding: -8rem;
+.w-32 {
+  width: 8rem;
 }
 
-.-pt-32 {
-  padding-top: -8rem;
+.min-w-32 {
+  min-width: 8rem;
 }
 
-.-pr-32 {
-  padding-right: -8rem;
+.max-w-32 {
+  max-width: 8rem;
 }
 
-.-pb-32 {
-  padding-bottom: -8rem;
+.top-32 {
+  top: 8rem;
 }
 
-.-pl-32 {
-  padding-left: -8rem;
+.right-32 {
+  right: 8rem;
 }
 
-.-px-32 {
-  padding-left: -8rem;
-  padding-right: -8rem;
+.bottom-32 {
+  bottom: 8rem;
 }
 
-.-py-32 {
-  padding-top: -8rem;
-  padding-bottom: -8rem;
+.left-32 {
+  left: 8rem;
 }
 
-.h-32 {
-  height: 8rem;
+.-top-32 {
+  top: -8rem;
 }
 
-.min-h-32 {
-  min-height: 8rem;
+.-right-32 {
+  right: -8rem;
 }
 
-.max-h-32 {
-  max-height: 8rem;
+.-bottom-32 {
+  bottom: -8rem;
 }
 
-.w-32 {
-  height: 8rem;
+.-left-32 {
+  left: -8rem;
 }
 
-.min-w-32 {
-  min-height: 8rem;
+.inset-32 {
+  top: 8rem;
+  right: 8rem;
+  bottom: 8rem;
+  left: 8rem;
 }
 
-.max-w-32 {
-  max-height: 8rem;
+.inset-x-32 {
+  left: 8rem;
+  right: 8rem;
+}
+
+.inset-y-32 {
+  top: 8rem;
+  bottom: 8rem;
 }
 
 .p-36 {
@@ -4458,10 +4912,6 @@
   margin-bottom: 9rem;
 }
 
-.-m-36 {
-  margin: -9rem;
-}
-
 .-mt-36 {
   margin-top: -9rem;
 }
@@ -4478,68 +4928,77 @@
   margin-left: -9rem;
 }
 
-.-mx-36 {
-  margin-left: -9rem;
-  margin-right: -9rem;
+.h-36 {
+  height: 9rem;
 }
 
-.-my-36 {
-  margin-top: -9rem;
-  margin-bottom: -9rem;
+.min-h-36 {
+  min-height: 9rem;
+}
+
+.max-h-36 {
+  max-height: 9rem;
+}
+
+.w-36 {
+  width: 9rem;
 }
 
-.-p-36 {
-  padding: -9rem;
+.min-w-36 {
+  min-width: 9rem;
 }
 
-.-pt-36 {
-  padding-top: -9rem;
+.max-w-36 {
+  max-width: 9rem;
 }
 
-.-pr-36 {
-  padding-right: -9rem;
+.top-36 {
+  top: 9rem;
 }
 
-.-pb-36 {
-  padding-bottom: -9rem;
+.right-36 {
+  right: 9rem;
 }
 
-.-pl-36 {
-  padding-left: -9rem;
+.bottom-36 {
+  bottom: 9rem;
 }
 
-.-px-36 {
-  padding-left: -9rem;
-  padding-right: -9rem;
+.left-36 {
+  left: 9rem;
 }
 
-.-py-36 {
-  padding-top: -9rem;
-  padding-bottom: -9rem;
+.-top-36 {
+  top: -9rem;
 }
 
-.h-36 {
-  height: 9rem;
+.-right-36 {
+  right: -9rem;
 }
 
-.min-h-36 {
-  min-height: 9rem;
+.-bottom-36 {
+  bottom: -9rem;
 }
 
-.max-h-36 {
-  max-height: 9rem;
+.-left-36 {
+  left: -9rem;
 }
 
-.w-36 {
-  height: 9rem;
+.inset-36 {
+  top: 9rem;
+  right: 9rem;
+  bottom: 9rem;
+  left: 9rem;
 }
 
-.min-w-36 {
-  min-height: 9rem;
+.inset-x-36 {
+  left: 9rem;
+  right: 9rem;
 }
 
-.max-w-36 {
-  max-height: 9rem;
+.inset-y-36 {
+  top: 9rem;
+  bottom: 9rem;
 }
 
 .p-40 {
@@ -4602,10 +5061,6 @@
   margin-bottom: 10rem;
 }
 
-.-m-40 {
-  margin: -10rem;
-}
-
 .-mt-40 {
   margin-top: -10rem;
 }
@@ -4622,68 +5077,77 @@
   margin-left: -10rem;
 }
 
-.-mx-40 {
-  margin-left: -10rem;
-  margin-right: -10rem;
+.h-40 {
+  height: 10rem;
 }
 
-.-my-40 {
-  margin-top: -10rem;
-  margin-bottom: -10rem;
+.min-h-40 {
+  min-height: 10rem;
 }
 
-.-p-40 {
-  padding: -10rem;
+.max-h-40 {
+  max-height: 10rem;
 }
 
-.-pt-40 {
-  padding-top: -10rem;
+.w-40 {
+  width: 10rem;
 }
 
-.-pr-40 {
-  padding-right: -10rem;
+.min-w-40 {
+  min-width: 10rem;
 }
 
-.-pb-40 {
-  padding-bottom: -10rem;
+.max-w-40 {
+  max-width: 10rem;
 }
 
-.-pl-40 {
-  padding-left: -10rem;
+.top-40 {
+  top: 10rem;
 }
 
-.-px-40 {
-  padding-left: -10rem;
-  padding-right: -10rem;
+.right-40 {
+  right: 10rem;
 }
 
-.-py-40 {
-  padding-top: -10rem;
-  padding-bottom: -10rem;
+.bottom-40 {
+  bottom: 10rem;
 }
 
-.h-40 {
-  height: 10rem;
+.left-40 {
+  left: 10rem;
 }
 
-.min-h-40 {
-  min-height: 10rem;
+.-top-40 {
+  top: -10rem;
 }
 
-.max-h-40 {
-  max-height: 10rem;
+.-right-40 {
+  right: -10rem;
 }
 
-.w-40 {
-  height: 10rem;
+.-bottom-40 {
+  bottom: -10rem;
 }
 
-.min-w-40 {
-  min-height: 10rem;
+.-left-40 {
+  left: -10rem;
 }
 
-.max-w-40 {
-  max-height: 10rem;
+.inset-40 {
+  top: 10rem;
+  right: 10rem;
+  bottom: 10rem;
+  left: 10rem;
+}
+
+.inset-x-40 {
+  left: 10rem;
+  right: 10rem;
+}
+
+.inset-y-40 {
+  top: 10rem;
+  bottom: 10rem;
 }
 
 .p-44 {
@@ -4746,10 +5210,6 @@
   margin-bottom: 11rem;
 }
 
-.-m-44 {
-  margin: -11rem;
-}
-
 .-mt-44 {
   margin-top: -11rem;
 }
@@ -4766,68 +5226,77 @@
   margin-left: -11rem;
 }
 
-.-mx-44 {
-  margin-left: -11rem;
-  margin-right: -11rem;
+.h-44 {
+  height: 11rem;
 }
 
-.-my-44 {
-  margin-top: -11rem;
-  margin-bottom: -11rem;
+.min-h-44 {
+  min-height: 11rem;
 }
 
-.-p-44 {
-  padding: -11rem;
+.max-h-44 {
+  max-height: 11rem;
 }
 
-.-pt-44 {
-  padding-top: -11rem;
+.w-44 {
+  width: 11rem;
 }
 
-.-pr-44 {
-  padding-right: -11rem;
+.min-w-44 {
+  min-width: 11rem;
 }
 
-.-pb-44 {
-  padding-bottom: -11rem;
+.max-w-44 {
+  max-width: 11rem;
 }
 
-.-pl-44 {
-  padding-left: -11rem;
+.top-44 {
+  top: 11rem;
 }
 
-.-px-44 {
-  padding-left: -11rem;
-  padding-right: -11rem;
+.right-44 {
+  right: 11rem;
 }
 
-.-py-44 {
-  padding-top: -11rem;
-  padding-bottom: -11rem;
+.bottom-44 {
+  bottom: 11rem;
 }
 
-.h-44 {
-  height: 11rem;
+.left-44 {
+  left: 11rem;
 }
 
-.min-h-44 {
-  min-height: 11rem;
+.-top-44 {
+  top: -11rem;
 }
 
-.max-h-44 {
-  max-height: 11rem;
+.-right-44 {
+  right: -11rem;
 }
 
-.w-44 {
-  height: 11rem;
+.-bottom-44 {
+  bottom: -11rem;
 }
 
-.min-w-44 {
-  min-height: 11rem;
+.-left-44 {
+  left: -11rem;
 }
 
-.max-w-44 {
-  max-height: 11rem;
+.inset-44 {
+  top: 11rem;
+  right: 11rem;
+  bottom: 11rem;
+  left: 11rem;
+}
+
+.inset-x-44 {
+  left: 11rem;
+  right: 11rem;
+}
+
+.inset-y-44 {
+  top: 11rem;
+  bottom: 11rem;
 }
 
 .p-48 {
@@ -4890,10 +5359,6 @@
   margin-bottom: 12rem;
 }
 
-.-m-48 {
-  margin: -12rem;
-}
-
 .-mt-48 {
   margin-top: -12rem;
 }
@@ -4910,68 +5375,77 @@
   margin-left: -12rem;
 }
 
-.-mx-48 {
-  margin-left: -12rem;
-  margin-right: -12rem;
+.h-48 {
+  height: 12rem;
 }
 
-.-my-48 {
-  margin-top: -12rem;
-  margin-bottom: -12rem;
+.min-h-48 {
+  min-height: 12rem;
 }
 
-.-p-48 {
-  padding: -12rem;
+.max-h-48 {
+  max-height: 12rem;
 }
 
-.-pt-48 {
-  padding-top: -12rem;
+.w-48 {
+  width: 12rem;
 }
 
-.-pr-48 {
-  padding-right: -12rem;
+.min-w-48 {
+  min-width: 12rem;
 }
 
-.-pb-48 {
-  padding-bottom: -12rem;
+.max-w-48 {
+  max-width: 12rem;
 }
 
-.-pl-48 {
-  padding-left: -12rem;
+.top-48 {
+  top: 12rem;
 }
 
-.-px-48 {
-  padding-left: -12rem;
-  padding-right: -12rem;
+.right-48 {
+  right: 12rem;
 }
 
-.-py-48 {
-  padding-top: -12rem;
-  padding-bottom: -12rem;
+.bottom-48 {
+  bottom: 12rem;
 }
 
-.h-48 {
-  height: 12rem;
+.left-48 {
+  left: 12rem;
 }
 
-.min-h-48 {
-  min-height: 12rem;
+.-top-48 {
+  top: -12rem;
 }
 
-.max-h-48 {
-  max-height: 12rem;
+.-right-48 {
+  right: -12rem;
 }
 
-.w-48 {
-  height: 12rem;
+.-bottom-48 {
+  bottom: -12rem;
 }
 
-.min-w-48 {
-  min-height: 12rem;
+.-left-48 {
+  left: -12rem;
 }
 
-.max-w-48 {
-  max-height: 12rem;
+.inset-48 {
+  top: 12rem;
+  right: 12rem;
+  bottom: 12rem;
+  left: 12rem;
+}
+
+.inset-x-48 {
+  left: 12rem;
+  right: 12rem;
+}
+
+.inset-y-48 {
+  top: 12rem;
+  bottom: 12rem;
 }
 
 .p-52 {
@@ -5031,11 +5505,7 @@
 
 .my-52 {
   margin-top: 13rem;
-  margin-bottom: 13rem;
-}
-
-.-m-52 {
-  margin: -13rem;
+  margin-bottom: 13rem;
 }
 
 .-mt-52 {
@@ -5054,68 +5524,77 @@
   margin-left: -13rem;
 }
 
-.-mx-52 {
-  margin-left: -13rem;
-  margin-right: -13rem;
+.h-52 {
+  height: 13rem;
 }
 
-.-my-52 {
-  margin-top: -13rem;
-  margin-bottom: -13rem;
+.min-h-52 {
+  min-height: 13rem;
 }
 
-.-p-52 {
-  padding: -13rem;
+.max-h-52 {
+  max-height: 13rem;
 }
 
-.-pt-52 {
-  padding-top: -13rem;
+.w-52 {
+  width: 13rem;
 }
 
-.-pr-52 {
-  padding-right: -13rem;
+.min-w-52 {
+  min-width: 13rem;
 }
 
-.-pb-52 {
-  padding-bottom: -13rem;
+.max-w-52 {
+  max-width: 13rem;
 }
 
-.-pl-52 {
-  padding-left: -13rem;
+.top-52 {
+  top: 13rem;
 }
 
-.-px-52 {
-  padding-left: -13rem;
-  padding-right: -13rem;
+.right-52 {
+  right: 13rem;
 }
 
-.-py-52 {
-  padding-top: -13rem;
-  padding-bottom: -13rem;
+.bottom-52 {
+  bottom: 13rem;
 }
 
-.h-52 {
-  height: 13rem;
+.left-52 {
+  left: 13rem;
 }
 
-.min-h-52 {
-  min-height: 13rem;
+.-top-52 {
+  top: -13rem;
 }
 
-.max-h-52 {
-  max-height: 13rem;
+.-right-52 {
+  right: -13rem;
 }
 
-.w-52 {
-  height: 13rem;
+.-bottom-52 {
+  bottom: -13rem;
 }
 
-.min-w-52 {
-  min-height: 13rem;
+.-left-52 {
+  left: -13rem;
 }
 
-.max-w-52 {
-  max-height: 13rem;
+.inset-52 {
+  top: 13rem;
+  right: 13rem;
+  bottom: 13rem;
+  left: 13rem;
+}
+
+.inset-x-52 {
+  left: 13rem;
+  right: 13rem;
+}
+
+.inset-y-52 {
+  top: 13rem;
+  bottom: 13rem;
 }
 
 .p-56 {
@@ -5178,10 +5657,6 @@
   margin-bottom: 14rem;
 }
 
-.-m-56 {
-  margin: -14rem;
-}
-
 .-mt-56 {
   margin-top: -14rem;
 }
@@ -5198,68 +5673,77 @@
   margin-left: -14rem;
 }
 
-.-mx-56 {
-  margin-left: -14rem;
-  margin-right: -14rem;
+.h-56 {
+  height: 14rem;
 }
 
-.-my-56 {
-  margin-top: -14rem;
-  margin-bottom: -14rem;
+.min-h-56 {
+  min-height: 14rem;
 }
 
-.-p-56 {
-  padding: -14rem;
+.max-h-56 {
+  max-height: 14rem;
 }
 
-.-pt-56 {
-  padding-top: -14rem;
+.w-56 {
+  width: 14rem;
 }
 
-.-pr-56 {
-  padding-right: -14rem;
+.min-w-56 {
+  min-width: 14rem;
 }
 
-.-pb-56 {
-  padding-bottom: -14rem;
+.max-w-56 {
+  max-width: 14rem;
 }
 
-.-pl-56 {
-  padding-left: -14rem;
+.top-56 {
+  top: 14rem;
 }
 
-.-px-56 {
-  padding-left: -14rem;
-  padding-right: -14rem;
+.right-56 {
+  right: 14rem;
 }
 
-.-py-56 {
-  padding-top: -14rem;
-  padding-bottom: -14rem;
+.bottom-56 {
+  bottom: 14rem;
 }
 
-.h-56 {
-  height: 14rem;
+.left-56 {
+  left: 14rem;
 }
 
-.min-h-56 {
-  min-height: 14rem;
+.-top-56 {
+  top: -14rem;
 }
 
-.max-h-56 {
-  max-height: 14rem;
+.-right-56 {
+  right: -14rem;
 }
 
-.w-56 {
-  height: 14rem;
+.-bottom-56 {
+  bottom: -14rem;
 }
 
-.min-w-56 {
-  min-height: 14rem;
+.-left-56 {
+  left: -14rem;
 }
 
-.max-w-56 {
-  max-height: 14rem;
+.inset-56 {
+  top: 14rem;
+  right: 14rem;
+  bottom: 14rem;
+  left: 14rem;
+}
+
+.inset-x-56 {
+  left: 14rem;
+  right: 14rem;
+}
+
+.inset-y-56 {
+  top: 14rem;
+  bottom: 14rem;
 }
 
 .p-60 {
@@ -5322,10 +5806,6 @@
   margin-bottom: 15rem;
 }
 
-.-m-60 {
-  margin: -15rem;
-}
-
 .-mt-60 {
   margin-top: -15rem;
 }
@@ -5342,68 +5822,77 @@
   margin-left: -15rem;
 }
 
-.-mx-60 {
-  margin-left: -15rem;
-  margin-right: -15rem;
+.h-60 {
+  height: 15rem;
 }
 
-.-my-60 {
-  margin-top: -15rem;
-  margin-bottom: -15rem;
+.min-h-60 {
+  min-height: 15rem;
 }
 
-.-p-60 {
-  padding: -15rem;
+.max-h-60 {
+  max-height: 15rem;
 }
 
-.-pt-60 {
-  padding-top: -15rem;
+.w-60 {
+  width: 15rem;
 }
 
-.-pr-60 {
-  padding-right: -15rem;
+.min-w-60 {
+  min-width: 15rem;
 }
 
-.-pb-60 {
-  padding-bottom: -15rem;
+.max-w-60 {
+  max-width: 15rem;
 }
 
-.-pl-60 {
-  padding-left: -15rem;
+.top-60 {
+  top: 15rem;
 }
 
-.-px-60 {
-  padding-left: -15rem;
-  padding-right: -15rem;
+.right-60 {
+  right: 15rem;
 }
 
-.-py-60 {
-  padding-top: -15rem;
-  padding-bottom: -15rem;
+.bottom-60 {
+  bottom: 15rem;
 }
 
-.h-60 {
-  height: 15rem;
+.left-60 {
+  left: 15rem;
 }
 
-.min-h-60 {
-  min-height: 15rem;
+.-top-60 {
+  top: -15rem;
 }
 
-.max-h-60 {
-  max-height: 15rem;
+.-right-60 {
+  right: -15rem;
 }
 
-.w-60 {
-  height: 15rem;
+.-bottom-60 {
+  bottom: -15rem;
 }
 
-.min-w-60 {
-  min-height: 15rem;
+.-left-60 {
+  left: -15rem;
 }
 
-.max-w-60 {
-  max-height: 15rem;
+.inset-60 {
+  top: 15rem;
+  right: 15rem;
+  bottom: 15rem;
+  left: 15rem;
+}
+
+.inset-x-60 {
+  left: 15rem;
+  right: 15rem;
+}
+
+.inset-y-60 {
+  top: 15rem;
+  bottom: 15rem;
 }
 
 .p-64 {
@@ -5466,10 +5955,6 @@
   margin-bottom: 16rem;
 }
 
-.-m-64 {
-  margin: -16rem;
-}
-
 .-mt-64 {
   margin-top: -16rem;
 }
@@ -5486,68 +5971,77 @@
   margin-left: -16rem;
 }
 
-.-mx-64 {
-  margin-left: -16rem;
-  margin-right: -16rem;
+.h-64 {
+  height: 16rem;
 }
 
-.-my-64 {
-  margin-top: -16rem;
-  margin-bottom: -16rem;
+.min-h-64 {
+  min-height: 16rem;
 }
 
-.-p-64 {
-  padding: -16rem;
+.max-h-64 {
+  max-height: 16rem;
 }
 
-.-pt-64 {
-  padding-top: -16rem;
+.w-64 {
+  width: 16rem;
 }
 
-.-pr-64 {
-  padding-right: -16rem;
+.min-w-64 {
+  min-width: 16rem;
 }
 
-.-pb-64 {
-  padding-bottom: -16rem;
+.max-w-64 {
+  max-width: 16rem;
 }
 
-.-pl-64 {
-  padding-left: -16rem;
+.top-64 {
+  top: 16rem;
 }
 
-.-px-64 {
-  padding-left: -16rem;
-  padding-right: -16rem;
+.right-64 {
+  right: 16rem;
 }
 
-.-py-64 {
-  padding-top: -16rem;
-  padding-bottom: -16rem;
+.bottom-64 {
+  bottom: 16rem;
 }
 
-.h-64 {
-  height: 16rem;
+.left-64 {
+  left: 16rem;
 }
 
-.min-h-64 {
-  min-height: 16rem;
+.-top-64 {
+  top: -16rem;
 }
 
-.max-h-64 {
-  max-height: 16rem;
+.-right-64 {
+  right: -16rem;
 }
 
-.w-64 {
-  height: 16rem;
+.-bottom-64 {
+  bottom: -16rem;
 }
 
-.min-w-64 {
-  min-height: 16rem;
+.-left-64 {
+  left: -16rem;
 }
 
-.max-w-64 {
-  max-height: 16rem;
+.inset-64 {
+  top: 16rem;
+  right: 16rem;
+  bottom: 16rem;
+  left: 16rem;
+}
+
+.inset-x-64 {
+  left: 16rem;
+  right: 16rem;
+}
+
+.inset-y-64 {
+  top: 16rem;
+  bottom: 16rem;
 }
 
 .p-72 {
@@ -5610,10 +6104,6 @@
   margin-bottom: 18rem;
 }
 
-.-m-72 {
-  margin: -18rem;
-}
-
 .-mt-72 {
   margin-top: -18rem;
 }
@@ -5630,68 +6120,77 @@
   margin-left: -18rem;
 }
 
-.-mx-72 {
-  margin-left: -18rem;
-  margin-right: -18rem;
+.h-72 {
+  height: 18rem;
 }
 
-.-my-72 {
-  margin-top: -18rem;
-  margin-bottom: -18rem;
+.min-h-72 {
+  min-height: 18rem;
 }
 
-.-p-72 {
-  padding: -18rem;
+.max-h-72 {
+  max-height: 18rem;
 }
 
-.-pt-72 {
-  padding-top: -18rem;
+.w-72 {
+  width: 18rem;
 }
 
-.-pr-72 {
-  padding-right: -18rem;
+.min-w-72 {
+  min-width: 18rem;
 }
 
-.-pb-72 {
-  padding-bottom: -18rem;
+.max-w-72 {
+  max-width: 18rem;
 }
 
-.-pl-72 {
-  padding-left: -18rem;
+.top-72 {
+  top: 18rem;
 }
 
-.-px-72 {
-  padding-left: -18rem;
-  padding-right: -18rem;
+.right-72 {
+  right: 18rem;
 }
 
-.-py-72 {
-  padding-top: -18rem;
-  padding-bottom: -18rem;
+.bottom-72 {
+  bottom: 18rem;
 }
 
-.h-72 {
-  height: 18rem;
+.left-72 {
+  left: 18rem;
 }
 
-.min-h-72 {
-  min-height: 18rem;
+.-top-72 {
+  top: -18rem;
 }
 
-.max-h-72 {
-  max-height: 18rem;
+.-right-72 {
+  right: -18rem;
 }
 
-.w-72 {
-  height: 18rem;
+.-bottom-72 {
+  bottom: -18rem;
 }
 
-.min-w-72 {
-  min-height: 18rem;
+.-left-72 {
+  left: -18rem;
 }
 
-.max-w-72 {
-  max-height: 18rem;
+.inset-72 {
+  top: 18rem;
+  right: 18rem;
+  bottom: 18rem;
+  left: 18rem;
+}
+
+.inset-x-72 {
+  left: 18rem;
+  right: 18rem;
+}
+
+.inset-y-72 {
+  top: 18rem;
+  bottom: 18rem;
 }
 
 .p-80 {
@@ -5754,10 +6253,6 @@
   margin-bottom: 20rem;
 }
 
-.-m-80 {
-  margin: -20rem;
-}
-
 .-mt-80 {
   margin-top: -20rem;
 }
@@ -5774,68 +6269,77 @@
   margin-left: -20rem;
 }
 
-.-mx-80 {
-  margin-left: -20rem;
-  margin-right: -20rem;
+.h-80 {
+  height: 20rem;
 }
 
-.-my-80 {
-  margin-top: -20rem;
-  margin-bottom: -20rem;
+.min-h-80 {
+  min-height: 20rem;
 }
 
-.-p-80 {
-  padding: -20rem;
+.max-h-80 {
+  max-height: 20rem;
 }
 
-.-pt-80 {
-  padding-top: -20rem;
+.w-80 {
+  width: 20rem;
 }
 
-.-pr-80 {
-  padding-right: -20rem;
+.min-w-80 {
+  min-width: 20rem;
 }
 
-.-pb-80 {
-  padding-bottom: -20rem;
+.max-w-80 {
+  max-width: 20rem;
 }
 
-.-pl-80 {
-  padding-left: -20rem;
+.top-80 {
+  top: 20rem;
 }
 
-.-px-80 {
-  padding-left: -20rem;
-  padding-right: -20rem;
+.right-80 {
+  right: 20rem;
 }
 
-.-py-80 {
-  padding-top: -20rem;
-  padding-bottom: -20rem;
+.bottom-80 {
+  bottom: 20rem;
 }
 
-.h-80 {
-  height: 20rem;
+.left-80 {
+  left: 20rem;
 }
 
-.min-h-80 {
-  min-height: 20rem;
+.-top-80 {
+  top: -20rem;
 }
 
-.max-h-80 {
-  max-height: 20rem;
+.-right-80 {
+  right: -20rem;
 }
 
-.w-80 {
-  height: 20rem;
+.-bottom-80 {
+  bottom: -20rem;
 }
 
-.min-w-80 {
-  min-height: 20rem;
+.-left-80 {
+  left: -20rem;
 }
 
-.max-w-80 {
-  max-height: 20rem;
+.inset-80 {
+  top: 20rem;
+  right: 20rem;
+  bottom: 20rem;
+  left: 20rem;
+}
+
+.inset-x-80 {
+  left: 20rem;
+  right: 20rem;
+}
+
+.inset-y-80 {
+  top: 20rem;
+  bottom: 20rem;
 }
 
 .p-96 {
@@ -5898,10 +6402,6 @@
   margin-bottom: 24rem;
 }
 
-.-m-96 {
-  margin: -24rem;
-}
-
 .-mt-96 {
   margin-top: -24rem;
 }
@@ -5918,68 +6418,77 @@
   margin-left: -24rem;
 }
 
-.-mx-96 {
-  margin-left: -24rem;
-  margin-right: -24rem;
+.h-96 {
+  height: 24rem;
 }
 
-.-my-96 {
-  margin-top: -24rem;
-  margin-bottom: -24rem;
+.min-h-96 {
+  min-height: 24rem;
 }
 
-.-p-96 {
-  padding: -24rem;
+.max-h-96 {
+  max-height: 24rem;
 }
 
-.-pt-96 {
-  padding-top: -24rem;
+.w-96 {
+  width: 24rem;
 }
 
-.-pr-96 {
-  padding-right: -24rem;
+.min-w-96 {
+  min-width: 24rem;
 }
 
-.-pb-96 {
-  padding-bottom: -24rem;
+.max-w-96 {
+  max-width: 24rem;
 }
 
-.-pl-96 {
-  padding-left: -24rem;
+.top-96 {
+  top: 24rem;
 }
 
-.-px-96 {
-  padding-left: -24rem;
-  padding-right: -24rem;
+.right-96 {
+  right: 24rem;
 }
 
-.-py-96 {
-  padding-top: -24rem;
-  padding-bottom: -24rem;
+.bottom-96 {
+  bottom: 24rem;
 }
 
-.h-96 {
-  height: 24rem;
+.left-96 {
+  left: 24rem;
 }
 
-.min-h-96 {
-  min-height: 24rem;
+.-top-96 {
+  top: -24rem;
 }
 
-.max-h-96 {
-  max-height: 24rem;
+.-right-96 {
+  right: -24rem;
 }
 
-.w-96 {
-  height: 24rem;
+.-bottom-96 {
+  bottom: -24rem;
 }
 
-.min-w-96 {
-  min-height: 24rem;
+.-left-96 {
+  left: -24rem;
 }
 
-.max-w-96 {
-  max-height: 24rem;
+.inset-96 {
+  top: 24rem;
+  right: 24rem;
+  bottom: 24rem;
+  left: 24rem;
+}
+
+.inset-x-96 {
+  left: 24rem;
+  right: 24rem;
+}
+
+.inset-y-96 {
+  top: 24rem;
+  bottom: 24rem;
 }
 
 .h-auto {
@@ -6010,6 +6519,54 @@
   max-height: 100vh;
 }
 
+.w-auto {
+  width: auto;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.min-w-full {
+  min-width: 100%;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.min-w-screen {
+  min-width: 100vw;
+}
+
+.bg-none {
+  background: none;
+}
+
+.static {
+  position: static;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.sticky {
+  position: sticky;
+}
+
 .display-none {
   display: none;
 }
@@ -6034,10 +6591,6 @@
   border: none;
 }
 
-.background-none {
-  background: none;
-}
-
 .shadow-sm {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
@@ -6071,31 +6624,55 @@
 }
 
 .text-xs {
-  font-size: 9rem;
+  font-size: 0.75rem;
 }
 
 .text-sm {
-  font-size: 10.5rem;
+  font-size: 0.875rem;
 }
 
 .text-base {
-  font-size: 12rem;
+  font-size: 1rem;
 }
 
 .text-lg {
-  font-size: 13.5rem;
+  font-size: 1.125rem;
 }
 
 .text-xl {
-  font-size: 15rem;
+  font-size: 1.25rem;
 }
 
 .text-2xl {
-  font-size: 18rem;
+  font-size: 1.5rem;
 }
 
 .text-3xl {
-  font-size: 22.5rem;
+  font-size: 1.875rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+}
+
+.text-6xl {
+  font-size: 3.75rem;
+}
+
+.text-7xl {
+  font-size: 4.5rem;
+}
+
+.text-8xl {
+  font-size: 6rem;
+}
+
+.text-9xl {
+  font-size: 8rem;
 }
 
 .rounded-none {