@yomologic/react-ui 0.2.5 → 0.2.6

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,6 +74,7 @@
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-2xl: 42rem;
+    --container-3xl: 48rem;
     --container-5xl: 64rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -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,6 +295,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -313,6 +319,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-4 {
+    inset: calc(var(--spacing) * 4);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -328,6 +337,9 @@
   .top-12 {
     top: calc(var(--spacing) * 12);
   }
+  .top-\[var\(--nav-height\)\] {
+    top: var(--nav-height);
+  }
   .top-full {
     top: 100%;
   }
@@ -340,6 +352,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-full {
+    left: 100%;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -370,9 +385,18 @@
       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);
   }
@@ -382,9 +406,18 @@
   .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 +436,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;
   }
@@ -427,9 +493,66 @@
   .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 +589,72 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
+  .max-h-\[400px\] {
+    max-height: 400px;
+  }
+  .max-h-\[calc\(100vh-var\(--nav-height\)\)\] {
+    max-height: calc(100vh - var(--nav-height));
+  }
+  .\[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,6 +691,9 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
@@ -538,6 +724,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -577,12 +766,18 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .appearance-none {
+    appearance: none;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
@@ -601,6 +796,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);
   }
@@ -718,6 +919,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 +967,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 +1012,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 +1054,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 +1078,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 +1117,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 +1141,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 +1156,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);
   }
@@ -955,6 +1201,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 +1273,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 +1339,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 +1402,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 +1492,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\(--checkbox-label-font-size-md\)\] {
+    font-size: var(--checkbox-label-font-size-md);
+  }
+  .\[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\(--button-text-md\)\] {
-    font-size: var(--button-text-md);
+  .\[font-size\:var\(--dropdown-font-size-md\)\] {
+    font-size: var(--dropdown-font-size-md);
   }
-  .\[font-size\:var\(--button-text-sm\)\] {
-    font-size: var(--button-text-sm);
+  .\[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 +1616,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 +1629,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 +1653,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 +1701,9 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1158,6 +1716,9 @@
       color: var(--color-gray-400);
     }
   }
+  .accent-\(--color-warning\) {
+    accent-color: var(--color-warning);
+  }
   .opacity-25 {
     opacity: 25%;
   }
@@ -1251,6 +1812,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 +1860,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 +1926,13 @@
       }
     }
   }
+  .hover\:text-gray-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-700);
+      }
+    }
+  }
   .hover\:text-gray-900 {
     &:hover {
       @media (hover: hover) {
@@ -1446,6 +2051,46 @@
       opacity: 50%;
     }
   }
+  .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) {
+      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\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1456,19 +2101,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 {
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .md\:flex {
     @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      display: flex;
     }
   }
-  .md\:grid-cols-3 {
+  .md\:hidden {
     @media (width >= 48rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      display: none;
+    }
+  }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
   .md\:p-8 {
@@ -1486,6 +2147,11 @@
       display: block;
     }
   }
+  .lg\:flex {
+    @media (width >= 64rem) {
+      display: flex;
+    }
+  }
   .lg\:hidden {
     @media (width >= 64rem) {
       display: none;