@yomologic/react-ui 0.2.5 → 0.2.7

package/dist/styles.css

@@ -53,7 +53,6 @@
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-purple-50: oklch(97.7% 0.014 308.299);
-    --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -75,7 +74,8 @@
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-2xl: 42rem;
-    --container-5xl: 64rem;
+    --container-3xl: 48rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -88,12 +88,15 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-wider: 0.05em;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
@@ -292,9 +295,15 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .absolute {
     position: absolute;
   }
@@ -313,6 +322,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-4 {
+    inset: calc(var(--spacing) * 4);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -337,9 +349,30 @@
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-full {
+    left: 100%;
+  }
+  .\[z-index\:var\(--z-index-drawer-button\)\] {
+    z-index: var(--z-index-drawer-button);
+  }
+  .\[z-index\:var\(--z-index-drawer-header\)\] {
+    z-index: var(--z-index-drawer-header);
+  }
+  .\[z-index\:var\(--z-index-nav\)\] {
+    z-index: var(--z-index-nav);
+  }
+  .\[z-index\:var\(--z-index-nav-mobile-menu\)\] {
+    z-index: var(--z-index-nav-mobile-menu);
+  }
+  .\[z-index\:var\(--z-index-nav-mobile-overlay\)\] {
+    z-index: var(--z-index-nav-mobile-overlay);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -370,21 +403,36 @@
       max-width: 96rem;
     }
   }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
   .mx-auto {
     margin-inline: auto;
   }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mt-\[var\(--nav-gap\)\] {
+    margin-top: var(--nav-gap);
   }
   .mt-auto {
     margin-top: auto;
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
   .mr-1\.5 {
     margin-right: calc(var(--spacing) * 1.5);
   }
@@ -403,12 +451,45 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .\[margin-left\:var\(--checkbox-label-spacing-lg\)\] {
+    margin-left: var(--checkbox-label-spacing-lg);
+  }
+  .\[margin-left\:var\(--checkbox-label-spacing-md\)\] {
+    margin-left: var(--checkbox-label-spacing-md);
+  }
+  .\[margin-left\:var\(--checkbox-label-spacing-sm\)\] {
+    margin-left: var(--checkbox-label-spacing-sm);
+  }
+  .\[margin-left\:var\(--checkbox-label-spacing-xl\)\] {
+    margin-left: var(--checkbox-label-spacing-xl);
+  }
+  .\[margin-left\:var\(--checkbox-label-spacing-xs\)\] {
+    margin-left: var(--checkbox-label-spacing-xs);
+  }
+  .\[margin-left\:var\(--radio-label-spacing-lg\)\] {
+    margin-left: var(--radio-label-spacing-lg);
+  }
+  .\[margin-left\:var\(--radio-label-spacing-md\)\] {
+    margin-left: var(--radio-label-spacing-md);
+  }
+  .\[margin-left\:var\(--radio-label-spacing-sm\)\] {
+    margin-left: var(--radio-label-spacing-sm);
+  }
+  .\[margin-left\:var\(--radio-label-spacing-xl\)\] {
+    margin-left: var(--radio-label-spacing-xl);
+  }
+  .\[margin-left\:var\(--radio-label-spacing-xs\)\] {
+    margin-left: var(--radio-label-spacing-xs);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .block {
     display: block;
   }
@@ -418,18 +499,72 @@
   .flex {
     display: flex;
   }
-  .grid {
-    display: grid;
-  }
   .hidden {
     display: none;
   }
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
+  .\[height\:var\(--checkbox-size-lg\)\] {
+    height: var(--checkbox-size-lg);
+  }
+  .\[height\:var\(--checkbox-size-md\)\] {
+    height: var(--checkbox-size-md);
+  }
+  .\[height\:var\(--checkbox-size-sm\)\] {
+    height: var(--checkbox-size-sm);
+  }
+  .\[height\:var\(--checkbox-size-xl\)\] {
+    height: var(--checkbox-size-xl);
+  }
+  .\[height\:var\(--checkbox-size-xs\)\] {
+    height: var(--checkbox-size-xs);
+  }
+  .\[height\:var\(--dropdown-icon-size-lg\)\] {
+    height: var(--dropdown-icon-size-lg);
+  }
+  .\[height\:var\(--dropdown-icon-size-md\)\] {
+    height: var(--dropdown-icon-size-md);
+  }
+  .\[height\:var\(--dropdown-icon-size-sm\)\] {
+    height: var(--dropdown-icon-size-sm);
+  }
+  .\[height\:var\(--dropdown-icon-size-xl\)\] {
+    height: var(--dropdown-icon-size-xl);
+  }
+  .\[height\:var\(--dropdown-icon-size-xs\)\] {
+    height: var(--dropdown-icon-size-xs);
+  }
+  .\[height\:var\(--radio-size-lg\)\] {
+    height: var(--radio-size-lg);
+  }
+  .\[height\:var\(--radio-size-md\)\] {
+    height: var(--radio-size-md);
+  }
+  .\[height\:var\(--radio-size-sm\)\] {
+    height: var(--radio-size-sm);
+  }
+  .\[height\:var\(--radio-size-xl\)\] {
+    height: var(--radio-size-xl);
+  }
+  .\[height\:var\(--radio-size-xs\)\] {
+    height: var(--radio-size-xs);
+  }
+  .h-\(--star-mobile-size\) {
+    height: var(--star-mobile-size);
+  }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -466,12 +601,72 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
+  .max-h-\[400px\] {
+    max-height: 400px;
+  }
+  .max-h-screen {
+    max-height: 100vh;
+  }
+  .\[min-height\:var\(--nav-height\)\] {
+    min-height: var(--nav-height);
+  }
   .min-h-32 {
     min-height: calc(var(--spacing) * 32);
   }
   .min-h-screen {
     min-height: 100vh;
   }
+  .\[width\:var\(--checkbox-size-lg\)\] {
+    width: var(--checkbox-size-lg);
+  }
+  .\[width\:var\(--checkbox-size-md\)\] {
+    width: var(--checkbox-size-md);
+  }
+  .\[width\:var\(--checkbox-size-sm\)\] {
+    width: var(--checkbox-size-sm);
+  }
+  .\[width\:var\(--checkbox-size-xl\)\] {
+    width: var(--checkbox-size-xl);
+  }
+  .\[width\:var\(--checkbox-size-xs\)\] {
+    width: var(--checkbox-size-xs);
+  }
+  .\[width\:var\(--dropdown-icon-size-lg\)\] {
+    width: var(--dropdown-icon-size-lg);
+  }
+  .\[width\:var\(--dropdown-icon-size-md\)\] {
+    width: var(--dropdown-icon-size-md);
+  }
+  .\[width\:var\(--dropdown-icon-size-sm\)\] {
+    width: var(--dropdown-icon-size-sm);
+  }
+  .\[width\:var\(--dropdown-icon-size-xl\)\] {
+    width: var(--dropdown-icon-size-xl);
+  }
+  .\[width\:var\(--dropdown-icon-size-xs\)\] {
+    width: var(--dropdown-icon-size-xs);
+  }
+  .\[width\:var\(--radio-size-lg\)\] {
+    width: var(--radio-size-lg);
+  }
+  .\[width\:var\(--radio-size-md\)\] {
+    width: var(--radio-size-md);
+  }
+  .\[width\:var\(--radio-size-sm\)\] {
+    width: var(--radio-size-sm);
+  }
+  .\[width\:var\(--radio-size-xl\)\] {
+    width: var(--radio-size-xl);
+  }
+  .\[width\:var\(--radio-size-xs\)\] {
+    width: var(--radio-size-xs);
+  }
+  .w-\(--star-mobile-size\) {
+    width: var(--star-mobile-size);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -508,8 +703,11 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
-  .max-w-5xl {
-    max-width: var(--container-5xl);
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
   }
   .max-w-full {
     max-width: 100%;
@@ -535,8 +733,8 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .min-w-0 {
-    min-width: calc(var(--spacing) * 0);
+  .min-w-\[200px\] {
+    min-width: 200px;
   }
   .flex-1 {
     flex: 1;
@@ -559,6 +757,14 @@
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .rotate-45 {
     rotate: 45deg;
   }
@@ -577,12 +783,15 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+  .appearance-none {
+    appearance: none;
   }
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
@@ -601,6 +810,12 @@
   .justify-center {
     justify-content: center;
   }
+  .\[gap\:var\(--nav-gap\)\] {
+    gap: var(--nav-gap);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-1\.5 {
     gap: calc(var(--spacing) * 1.5);
   }
@@ -616,9 +831,6 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -718,6 +930,18 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--checkbox-radius\) {
+    border-radius: var(--checkbox-radius);
+  }
+  .rounded-\(--dropdown-radius\) {
+    border-radius: var(--dropdown-radius);
+  }
+  .rounded-\[var\(--nav-border-radius\)\] {
+    border-radius: var(--nav-border-radius);
+  }
+  .rounded-\[var\(--radius-full\)\] {
+    border-radius: var(--radius-full);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -754,9 +978,15 @@
   .\[border-color\:var\(--color-primary\)\] {
     border-color: var(--color-primary);
   }
+  .border-\[var\(--color-border\)\] {
+    border-color: var(--color-border);
+  }
   .border-blue-200 {
     border-color: var(--color-blue-200);
   }
+  .border-blue-600 {
+    border-color: var(--color-blue-600);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -793,6 +1023,12 @@
   .\[background-color\:var\(--color-secondary\)\] {
     background-color: var(--color-secondary);
   }
+  .bg-\[var\(--color-background\)\] {
+    background-color: var(--color-background);
+  }
+  .bg-\[var\(--color-muted\)\] {
+    background-color: var(--color-muted);
+  }
   .bg-black\/20 {
     background-color: color-mix(in srgb, #000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -829,6 +1065,9 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
   .bg-gray-600 {
     background-color: var(--color-gray-600);
   }
@@ -850,15 +1089,15 @@
   .bg-purple-50 {
     background-color: var(--color-purple-50);
   }
-  .bg-purple-100 {
-    background-color: var(--color-purple-100);
-  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
@@ -889,6 +1128,9 @@
     --tw-gradient-to: var(--color-gray-100);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .fill-\(--color-warning\) {
+    fill: var(--color-warning);
+  }
   .\[padding\:var\(--input-padding\)\] {
     padding: var(--input-padding);
   }
@@ -910,6 +1152,12 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -919,12 +1167,21 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-\[var\(--spacing-lg\)\] {
+    padding-inline: var(--spacing-lg);
+  }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -943,6 +1200,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -955,6 +1215,57 @@
   .\[padding-top\:var\(--button-padding-sm-y\)\] {
     padding-top: var(--button-padding-sm-y);
   }
+  .\[padding-top\:var\(--button-padding-xl-y\)\] {
+    padding-top: var(--button-padding-xl-y);
+  }
+  .\[padding-top\:var\(--button-padding-xs-y\)\] {
+    padding-top: var(--button-padding-xs-y);
+  }
+  .\[padding-top\:var\(--dropdown-option-padding-lg-y\)\] {
+    padding-top: var(--dropdown-option-padding-lg-y);
+  }
+  .\[padding-top\:var\(--dropdown-option-padding-md-y\)\] {
+    padding-top: var(--dropdown-option-padding-md-y);
+  }
+  .\[padding-top\:var\(--dropdown-option-padding-sm-y\)\] {
+    padding-top: var(--dropdown-option-padding-sm-y);
+  }
+  .\[padding-top\:var\(--dropdown-option-padding-xl-y\)\] {
+    padding-top: var(--dropdown-option-padding-xl-y);
+  }
+  .\[padding-top\:var\(--dropdown-option-padding-xs-y\)\] {
+    padding-top: var(--dropdown-option-padding-xs-y);
+  }
+  .\[padding-top\:var\(--dropdown-padding-lg-y\)\] {
+    padding-top: var(--dropdown-padding-lg-y);
+  }
+  .\[padding-top\:var\(--dropdown-padding-md-y\)\] {
+    padding-top: var(--dropdown-padding-md-y);
+  }
+  .\[padding-top\:var\(--dropdown-padding-sm-y\)\] {
+    padding-top: var(--dropdown-padding-sm-y);
+  }
+  .\[padding-top\:var\(--dropdown-padding-xl-y\)\] {
+    padding-top: var(--dropdown-padding-xl-y);
+  }
+  .\[padding-top\:var\(--dropdown-padding-xs-y\)\] {
+    padding-top: var(--dropdown-padding-xs-y);
+  }
+  .\[padding-top\:var\(--nav-item-padding-lg-y\)\] {
+    padding-top: var(--nav-item-padding-lg-y);
+  }
+  .\[padding-top\:var\(--nav-item-padding-md-y\)\] {
+    padding-top: var(--nav-item-padding-md-y);
+  }
+  .\[padding-top\:var\(--nav-item-padding-sm-y\)\] {
+    padding-top: var(--nav-item-padding-sm-y);
+  }
+  .\[padding-top\:var\(--nav-item-padding-xl-y\)\] {
+    padding-top: var(--nav-item-padding-xl-y);
+  }
+  .\[padding-top\:var\(--nav-item-padding-xs-y\)\] {
+    padding-top: var(--nav-item-padding-xs-y);
+  }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -976,6 +1287,57 @@
   .\[padding-right\:var\(--button-padding-sm-x\)\] {
     padding-right: var(--button-padding-sm-x);
   }
+  .\[padding-right\:var\(--button-padding-xl-x\)\] {
+    padding-right: var(--button-padding-xl-x);
+  }
+  .\[padding-right\:var\(--button-padding-xs-x\)\] {
+    padding-right: var(--button-padding-xs-x);
+  }
+  .\[padding-right\:var\(--dropdown-option-padding-lg-x\)\] {
+    padding-right: var(--dropdown-option-padding-lg-x);
+  }
+  .\[padding-right\:var\(--dropdown-option-padding-md-x\)\] {
+    padding-right: var(--dropdown-option-padding-md-x);
+  }
+  .\[padding-right\:var\(--dropdown-option-padding-sm-x\)\] {
+    padding-right: var(--dropdown-option-padding-sm-x);
+  }
+  .\[padding-right\:var\(--dropdown-option-padding-xl-x\)\] {
+    padding-right: var(--dropdown-option-padding-xl-x);
+  }
+  .\[padding-right\:var\(--dropdown-option-padding-xs-x\)\] {
+    padding-right: var(--dropdown-option-padding-xs-x);
+  }
+  .\[padding-right\:var\(--dropdown-padding-lg-x\)\] {
+    padding-right: var(--dropdown-padding-lg-x);
+  }
+  .\[padding-right\:var\(--dropdown-padding-md-x\)\] {
+    padding-right: var(--dropdown-padding-md-x);
+  }
+  .\[padding-right\:var\(--dropdown-padding-sm-x\)\] {
+    padding-right: var(--dropdown-padding-sm-x);
+  }
+  .\[padding-right\:var\(--dropdown-padding-xl-x\)\] {
+    padding-right: var(--dropdown-padding-xl-x);
+  }
+  .\[padding-right\:var\(--dropdown-padding-xs-x\)\] {
+    padding-right: var(--dropdown-padding-xs-x);
+  }
+  .\[padding-right\:var\(--nav-item-padding-lg-x\)\] {
+    padding-right: var(--nav-item-padding-lg-x);
+  }
+  .\[padding-right\:var\(--nav-item-padding-md-x\)\] {
+    padding-right: var(--nav-item-padding-md-x);
+  }
+  .\[padding-right\:var\(--nav-item-padding-sm-x\)\] {
+    padding-right: var(--nav-item-padding-sm-x);
+  }
+  .\[padding-right\:var\(--nav-item-padding-xl-x\)\] {
+    padding-right: var(--nav-item-padding-xl-x);
+  }
+  .\[padding-right\:var\(--nav-item-padding-xs-x\)\] {
+    padding-right: var(--nav-item-padding-xs-x);
+  }
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -991,6 +1353,57 @@
   .\[padding-bottom\:var\(--button-padding-sm-y\)\] {
     padding-bottom: var(--button-padding-sm-y);
   }
+  .\[padding-bottom\:var\(--button-padding-xl-y\)\] {
+    padding-bottom: var(--button-padding-xl-y);
+  }
+  .\[padding-bottom\:var\(--button-padding-xs-y\)\] {
+    padding-bottom: var(--button-padding-xs-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-option-padding-lg-y\)\] {
+    padding-bottom: var(--dropdown-option-padding-lg-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-option-padding-md-y\)\] {
+    padding-bottom: var(--dropdown-option-padding-md-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-option-padding-sm-y\)\] {
+    padding-bottom: var(--dropdown-option-padding-sm-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-option-padding-xl-y\)\] {
+    padding-bottom: var(--dropdown-option-padding-xl-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-option-padding-xs-y\)\] {
+    padding-bottom: var(--dropdown-option-padding-xs-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-padding-lg-y\)\] {
+    padding-bottom: var(--dropdown-padding-lg-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-padding-md-y\)\] {
+    padding-bottom: var(--dropdown-padding-md-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-padding-sm-y\)\] {
+    padding-bottom: var(--dropdown-padding-sm-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-padding-xl-y\)\] {
+    padding-bottom: var(--dropdown-padding-xl-y);
+  }
+  .\[padding-bottom\:var\(--dropdown-padding-xs-y\)\] {
+    padding-bottom: var(--dropdown-padding-xs-y);
+  }
+  .\[padding-bottom\:var\(--nav-item-padding-lg-y\)\] {
+    padding-bottom: var(--nav-item-padding-lg-y);
+  }
+  .\[padding-bottom\:var\(--nav-item-padding-md-y\)\] {
+    padding-bottom: var(--nav-item-padding-md-y);
+  }
+  .\[padding-bottom\:var\(--nav-item-padding-sm-y\)\] {
+    padding-bottom: var(--nav-item-padding-sm-y);
+  }
+  .\[padding-bottom\:var\(--nav-item-padding-xl-y\)\] {
+    padding-bottom: var(--nav-item-padding-xl-y);
+  }
+  .\[padding-bottom\:var\(--nav-item-padding-xs-y\)\] {
+    padding-bottom: var(--nav-item-padding-xs-y);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1003,6 +1416,57 @@
   .\[padding-left\:var\(--button-padding-sm-x\)\] {
     padding-left: var(--button-padding-sm-x);
   }
+  .\[padding-left\:var\(--button-padding-xl-x\)\] {
+    padding-left: var(--button-padding-xl-x);
+  }
+  .\[padding-left\:var\(--button-padding-xs-x\)\] {
+    padding-left: var(--button-padding-xs-x);
+  }
+  .\[padding-left\:var\(--dropdown-option-padding-lg-x\)\] {
+    padding-left: var(--dropdown-option-padding-lg-x);
+  }
+  .\[padding-left\:var\(--dropdown-option-padding-md-x\)\] {
+    padding-left: var(--dropdown-option-padding-md-x);
+  }
+  .\[padding-left\:var\(--dropdown-option-padding-sm-x\)\] {
+    padding-left: var(--dropdown-option-padding-sm-x);
+  }
+  .\[padding-left\:var\(--dropdown-option-padding-xl-x\)\] {
+    padding-left: var(--dropdown-option-padding-xl-x);
+  }
+  .\[padding-left\:var\(--dropdown-option-padding-xs-x\)\] {
+    padding-left: var(--dropdown-option-padding-xs-x);
+  }
+  .\[padding-left\:var\(--dropdown-padding-lg-x\)\] {
+    padding-left: var(--dropdown-padding-lg-x);
+  }
+  .\[padding-left\:var\(--dropdown-padding-md-x\)\] {
+    padding-left: var(--dropdown-padding-md-x);
+  }
+  .\[padding-left\:var\(--dropdown-padding-sm-x\)\] {
+    padding-left: var(--dropdown-padding-sm-x);
+  }
+  .\[padding-left\:var\(--dropdown-padding-xl-x\)\] {
+    padding-left: var(--dropdown-padding-xl-x);
+  }
+  .\[padding-left\:var\(--dropdown-padding-xs-x\)\] {
+    padding-left: var(--dropdown-padding-xs-x);
+  }
+  .\[padding-left\:var\(--nav-item-padding-lg-x\)\] {
+    padding-left: var(--nav-item-padding-lg-x);
+  }
+  .\[padding-left\:var\(--nav-item-padding-md-x\)\] {
+    padding-left: var(--nav-item-padding-md-x);
+  }
+  .\[padding-left\:var\(--nav-item-padding-sm-x\)\] {
+    padding-left: var(--nav-item-padding-sm-x);
+  }
+  .\[padding-left\:var\(--nav-item-padding-xl-x\)\] {
+    padding-left: var(--nav-item-padding-xl-x);
+  }
+  .\[padding-left\:var\(--nav-item-padding-xs-x\)\] {
+    padding-left: var(--nav-item-padding-xs-x);
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -1042,18 +1506,108 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .\[font-size\:var\(--button-text-lg\)\] {
-    font-size: var(--button-text-lg);
+  .\[font-size\:var\(--button-font-size-lg\)\] {
+    font-size: var(--button-font-size-lg);
+  }
+  .\[font-size\:var\(--button-font-size-md\)\] {
+    font-size: var(--button-font-size-md);
+  }
+  .\[font-size\:var\(--button-font-size-sm\)\] {
+    font-size: var(--button-font-size-sm);
+  }
+  .\[font-size\:var\(--button-font-size-xl\)\] {
+    font-size: var(--button-font-size-xl);
+  }
+  .\[font-size\:var\(--button-font-size-xs\)\] {
+    font-size: var(--button-font-size-xs);
+  }
+  .\[font-size\:var\(--checkbox-label-font-size-lg\)\] {
+    font-size: var(--checkbox-label-font-size-lg);
   }
-  .\[font-size\:var\(--button-text-md\)\] {
-    font-size: var(--button-text-md);
+  .\[font-size\:var\(--checkbox-label-font-size-md\)\] {
+    font-size: var(--checkbox-label-font-size-md);
   }
-  .\[font-size\:var\(--button-text-sm\)\] {
-    font-size: var(--button-text-sm);
+  .\[font-size\:var\(--checkbox-label-font-size-sm\)\] {
+    font-size: var(--checkbox-label-font-size-sm);
+  }
+  .\[font-size\:var\(--checkbox-label-font-size-xl\)\] {
+    font-size: var(--checkbox-label-font-size-xl);
+  }
+  .\[font-size\:var\(--checkbox-label-font-size-xs\)\] {
+    font-size: var(--checkbox-label-font-size-xs);
+  }
+  .\[font-size\:var\(--dropdown-font-size-lg\)\] {
+    font-size: var(--dropdown-font-size-lg);
+  }
+  .\[font-size\:var\(--dropdown-font-size-md\)\] {
+    font-size: var(--dropdown-font-size-md);
+  }
+  .\[font-size\:var\(--dropdown-font-size-sm\)\] {
+    font-size: var(--dropdown-font-size-sm);
+  }
+  .\[font-size\:var\(--dropdown-font-size-xl\)\] {
+    font-size: var(--dropdown-font-size-xl);
+  }
+  .\[font-size\:var\(--dropdown-font-size-xs\)\] {
+    font-size: var(--dropdown-font-size-xs);
+  }
+  .\[font-size\:var\(--dropdown-option-font-size-lg\)\] {
+    font-size: var(--dropdown-option-font-size-lg);
+  }
+  .\[font-size\:var\(--dropdown-option-font-size-md\)\] {
+    font-size: var(--dropdown-option-font-size-md);
+  }
+  .\[font-size\:var\(--dropdown-option-font-size-sm\)\] {
+    font-size: var(--dropdown-option-font-size-sm);
+  }
+  .\[font-size\:var\(--dropdown-option-font-size-xl\)\] {
+    font-size: var(--dropdown-option-font-size-xl);
+  }
+  .\[font-size\:var\(--dropdown-option-font-size-xs\)\] {
+    font-size: var(--dropdown-option-font-size-xs);
+  }
+  .\[font-size\:var\(--nav-font-size-lg\)\] {
+    font-size: var(--nav-font-size-lg);
+  }
+  .\[font-size\:var\(--nav-font-size-md\)\] {
+    font-size: var(--nav-font-size-md);
+  }
+  .\[font-size\:var\(--nav-font-size-sm\)\] {
+    font-size: var(--nav-font-size-sm);
+  }
+  .\[font-size\:var\(--nav-font-size-xl\)\] {
+    font-size: var(--nav-font-size-xl);
+  }
+  .\[font-size\:var\(--nav-font-size-xs\)\] {
+    font-size: var(--nav-font-size-xs);
+  }
+  .\[font-size\:var\(--radio-label-font-size-lg\)\] {
+    font-size: var(--radio-label-font-size-lg);
+  }
+  .\[font-size\:var\(--radio-label-font-size-md\)\] {
+    font-size: var(--radio-label-font-size-md);
+  }
+  .\[font-size\:var\(--radio-label-font-size-sm\)\] {
+    font-size: var(--radio-label-font-size-sm);
+  }
+  .\[font-size\:var\(--radio-label-font-size-xl\)\] {
+    font-size: var(--radio-label-font-size-xl);
+  }
+  .\[font-size\:var\(--radio-label-font-size-xs\)\] {
+    font-size: var(--radio-label-font-size-xs);
   }
   .\[font-size\:var\(--text-2xl\)\] {
     font-size: var(--text-2xl);
   }
+  .\[font-size\:var\(--text-sm\)\] {
+    font-size: var(--text-sm);
+  }
+  .\[font-size\:var\(--text-xs\)\] {
+    font-size: var(--text-xs);
+  }
+  .text-\[0\.625rem\] {
+    font-size: 0.625rem;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1076,6 +1630,9 @@
   .\[font-weight\:var\(--font-bold\)\] {
     font-weight: var(--font-bold);
   }
+  .\[font-weight\:var\(--font-semibold\)\] {
+    font-weight: var(--font-semibold);
+  }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -1086,6 +1643,15 @@
   .\[color\:var\(--color-primary\)\] {
     color: var(--color-primary);
   }
+  .text-\(--color-warning\) {
+    color: var(--color-warning);
+  }
+  .text-\[var\(--color-foreground\)\] {
+    color: var(--color-foreground);
+  }
+  .text-black {
+    color: var(--color-black);
+  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -1101,6 +1667,9 @@
   .text-cyan-800 {
     color: var(--color-cyan-800);
   }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -1146,6 +1715,9 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1158,6 +1730,9 @@
       color: var(--color-gray-400);
     }
   }
+  .accent-\(--color-warning\) {
+    accent-color: var(--color-warning);
+  }
   .opacity-25 {
     opacity: 25%;
   }
@@ -1251,6 +1826,26 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .group-hover\:text-\(--color-warning\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-warning);
+      }
+    }
+  }
+  .group-disabled\:group-hover\:text-gray-300 {
+    &:is(:where(.group):disabled *) {
+      &:is(:where(.group):hover *) {
+        @media (hover: hover) {
+          color: var(--color-gray-300);
+        }
+      }
+    }
+  }
   .hover\:border-gray-400 {
     &:hover {
       @media (hover: hover) {
@@ -1279,6 +1874,23 @@
       }
     }
   }
+  .hover\:bg-\[var\(--color-muted\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-muted);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--color-muted\)\]\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-black {
     &:hover {
       @media (hover: hover) {
@@ -1328,6 +1940,13 @@
       }
     }
   }
+  .hover\:text-gray-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-700);
+      }
+    }
+  }
   .hover\:text-gray-900 {
     &:hover {
       @media (hover: hover) {
@@ -1446,9 +2065,44 @@
       opacity: 50%;
     }
   }
-  .sm\:grid-cols-2 {
+  .sm\:right-0 {
+    @media (width >= 40rem) {
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .sm\:left-auto {
+    @media (width >= 40rem) {
+      left: auto;
+    }
+  }
+  .sm\:mx-0 {
+    @media (width >= 40rem) {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .sm\:flex {
     @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      display: flex;
+    }
+  }
+  .sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+  .sm\:h-\(--star-size\) {
+    @media (width >= 40rem) {
+      height: var(--star-size);
+    }
+  }
+  .sm\:w-\(--star-size\) {
+    @media (width >= 40rem) {
+      width: var(--star-size);
+    }
+  }
+  .sm\:max-w-md {
+    @media (width >= 40rem) {
+      max-width: var(--container-md);
     }
   }
   .sm\:flex-row {
@@ -1456,29 +2110,35 @@
       flex-direction: row;
     }
   }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
     }
   }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
     }
   }
-  .md\:grid-cols-3 {
+  .md\:flex {
     @media (width >= 48rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      display: flex;
     }
   }
-  .md\:p-8 {
+  .md\:hidden {
     @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 8);
+      display: none;
     }
   }
-  .lg\:mr-64 {
+  .lg\:top-0 {
     @media (width >= 64rem) {
-      margin-right: calc(var(--spacing) * 64);
+      top: calc(var(--spacing) * 0);
     }
   }
   .lg\:block {
@@ -1486,6 +2146,11 @@
       display: block;
     }
   }
+  .lg\:flex {
+    @media (width >= 64rem) {
+      display: flex;
+    }
+  }
   .lg\:hidden {
     @media (width >= 64rem) {
       display: none;
@@ -1497,16 +2162,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .lg\:grid-cols-2 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);
@@ -1517,6 +2172,11 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
+  .lg\:pr-72 {
+    @media (width >= 64rem) {
+      padding-right: calc(var(--spacing) * 72);
+    }
+  }
 }
 :root {
   --color-primary: #3b82f6;
@@ -1587,6 +2247,39 @@
   --container-max-width-lg: 1024px;
   --container-max-width-xl: 1280px;
   --container-max-width-2xl: 1536px;
+  --z-index-dropdown: 1000;
+  --z-index-popover: 1100;
+  --z-index-tooltip: 1500;
+  --z-index-overlay: 1200;
+  --z-index-nav: 50;
+  --z-index-nav-mobile-overlay: 60;
+  --z-index-nav-mobile-menu: 70;
+  --z-index-drawer-header: 100;
+  --z-index-drawer-button: 101;
+  --z-index-drawer-overlay: 90;
+  --z-index-drawer-panel: 95;
+  --z-index-modal-backdrop: 1300;
+  --z-index-modal: 1400;
+  --z-index-snackbar: 1600;
+  --z-index-toast: 1700;
+  --nav-height: 4rem;
+  --nav-gap: 0.5rem;
+  --nav-border-radius: 0.5rem;
+  --nav-item-padding-xs-x: 0.5rem;
+  --nav-item-padding-xs-y: 0.25rem;
+  --nav-item-padding-sm-x: 0.75rem;
+  --nav-item-padding-sm-y: 0.5rem;
+  --nav-item-padding-md-x: 1rem;
+  --nav-item-padding-md-y: 0.625rem;
+  --nav-item-padding-lg-x: 1.5rem;
+  --nav-item-padding-lg-y: 0.75rem;
+  --nav-item-padding-xl-x: 2rem;
+  --nav-item-padding-xl-y: 1rem;
+  --nav-font-size-xs: 0.75rem;
+  --nav-font-size-sm: 0.875rem;
+  --nav-font-size-md: 1rem;
+  --nav-font-size-lg: 1.125rem;
+  --nav-font-size-xl: 1.25rem;
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }