@deframe-sdk/components 0.1.6 → 0.1.8

package/dist/styles.css

@@ -57,8 +57,6 @@
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
     --text-5xl: 3rem;
     --text-5xl--line-height: 1;
     --text-6xl: 3.75rem;
@@ -69,12 +67,14 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-wide: 0.025em;
+    --leading-normal: 1.5;
     --radius-md: 8px;
     --radius-lg: clamp(12px, 2vw, 16px);
     --radius-xl: clamp(16px, 2.5vw, 24px);
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -83,7 +83,6 @@
     --color-brand-primary: var(--deframe-brand-primary, #405EFF);
     --color-brand-primary-dark: #405EFF;
     --color-brand-secondary: var(--deframe-brand-secondary, #A9ABF7);
-    --color-brand-secondary-dark: #A9ABF7;
     --color-brand-primary-cryptocontrol: #1FC16B;
     --color-bg-default: var(--deframe-bg-default, #FFFFFF);
     --color-bg-default-dark: #121212;
@@ -269,6 +268,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .visible {
     visibility: visible;
   }
@@ -281,6 +283,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }
@@ -293,15 +298,15 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
   .top-8 {
     top: calc(var(--spacing) * 8);
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -311,6 +316,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -362,15 +370,15 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
   .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-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -392,6 +400,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
+    margin-bottom: var(--deframe-widget-size-gap-xs);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -440,6 +451,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .list-item {
+    display: list-item;
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -467,9 +481,6 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-16 {
-    height: calc(var(--spacing) * 16);
-  }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
@@ -479,12 +490,21 @@
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
+  .h-\[4px\] {
+    height: 4px;
+  }
+  .h-\[12px\] {
+    height: 12px;
+  }
   .h-\[17px\] {
     height: 17px;
   }
   .h-\[18px\] {
     height: 18px;
   }
+  .h-\[20px\] {
+    height: 20px;
+  }
   .h-\[50vh\] {
     height: 50vh;
   }
@@ -494,6 +514,9 @@
   .h-\[72px\] {
     height: 72px;
   }
+  .h-\[83px\] {
+    height: 83px;
+  }
   .h-\[200px\] {
     height: 200px;
   }
@@ -530,6 +553,9 @@
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-\[16px\] {
+    min-height: 16px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -560,9 +586,6 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
-  .w-16 {
-    width: calc(var(--spacing) * 16);
-  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -593,6 +616,9 @@
   .w-\[18px\] {
     width: 18px;
   }
+  .w-\[83px\] {
+    width: 83px;
+  }
   .w-\[300px\] {
     width: 300px;
   }
@@ -611,6 +637,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .w-screen {
     width: 100vw;
   }
@@ -665,6 +694,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
   .animate-fade-in {
     animation: var(--animate-fade-in);
   }
@@ -683,9 +715,6 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -713,6 +742,15 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .\[gap\:var\(--deframe-widget-size-gap-md\)\] {
+    gap: var(--deframe-widget-size-gap-md);
+  }
+  .\[gap\:var\(--deframe-widget-size-gap-sm\)\] {
+    gap: var(--deframe-widget-size-gap-sm);
+  }
+  .\[gap\:var\(--deframe-widget-size-gap-xs\)\] {
+    gap: var(--deframe-widget-size-gap-xs);
+  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
@@ -737,9 +775,6 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
@@ -814,6 +849,9 @@
       border-color: #2A2A2A;
     }
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .self-stretch {
     align-self: stretch;
   }
@@ -858,6 +896,12 @@
   .rounded-\[var\(--deframe-widget-radius-lg\)\] {
     border-radius: var(--deframe-widget-radius-lg);
   }
+  .rounded-\[var\(--deframe-widget-size-radius-full\)\] {
+    border-radius: var(--deframe-widget-size-radius-full);
+  }
+  .rounded-\[var\(--deframe-widget-size-radius-sm\)\] {
+    border-radius: var(--deframe-widget-size-radius-sm);
+  }
   .rounded-\[var\(--deframe-widget-size-radius-xs\)\] {
     border-radius: var(--deframe-widget-size-radius-xs);
   }
@@ -889,10 +933,6 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
   .border-\[length\:var\(--deframe-widget-size-border-xs\)\] {
     border-style: var(--tw-border-style);
     border-width: var(--deframe-widget-size-border-xs);
@@ -934,6 +974,27 @@
   .border-\[var\(--color-border-default\,\#333\)\] {
     border-color: var(--color-border-default,#333);
   }
+  .border-\[var\(--deframe-widget-color-border-primary\)\] {
+    border-color: var(--deframe-widget-color-border-primary);
+  }
+  .border-\[var\(--deframe-widget-color-border-primary-disabled\)\] {
+    border-color: var(--deframe-widget-color-border-primary-disabled);
+  }
+  .border-\[var\(--deframe-widget-color-state-error\)\] {
+    border-color: var(--deframe-widget-color-state-error);
+  }
+  .border-\[var\(--deframe-widget-color-state-info\)\] {
+    border-color: var(--deframe-widget-color-state-info);
+  }
+  .border-\[var\(--deframe-widget-color-state-success\)\] {
+    border-color: var(--deframe-widget-color-state-success);
+  }
+  .border-\[var\(--deframe-widget-color-state-warning\)\] {
+    border-color: var(--deframe-widget-color-state-warning);
+  }
+  .border-bg-default {
+    border-color: var(--color-bg-default);
+  }
   .border-blue-300 {
     border-color: var(--color-blue-300);
   }
@@ -949,9 +1010,6 @@
   .border-brand-primary {
     border-color: var(--color-brand-primary);
   }
-  .border-gray-500 {
-    border-color: var(--color-gray-500);
-  }
   .border-gray-600 {
     border-color: var(--color-gray-600);
   }
@@ -961,9 +1019,6 @@
   .border-gray-800 {
     border-color: var(--color-gray-800);
   }
-  .border-red-500 {
-    border-color: var(--color-red-500);
-  }
   .bg-\[\#0A0A0A\] {
     background-color: #0A0A0A;
   }
@@ -973,9 +1028,6 @@
   .bg-\[\#1A1A1A\] {
     background-color: #1A1A1A;
   }
-  .bg-\[\#1E1E1E\] {
-    background-color: #1E1E1E;
-  }
   .bg-\[\#1FC16B\] {
     background-color: #1FC16B;
   }
@@ -1000,12 +1052,54 @@
   .bg-\[var\(--color-bg-subtle\,\#1a1a1a\)\] {
     background-color: var(--color-bg-subtle,#1a1a1a);
   }
+  .bg-\[var\(--deframe-widget-color-bg-primary\)\] {
+    background-color: var(--deframe-widget-color-bg-primary);
+  }
+  .bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
+    background-color: var(--deframe-widget-color-bg-secondary);
+  }
   .bg-\[var\(--deframe-widget-color-brand-primary\)\] {
     background-color: var(--deframe-widget-color-brand-primary);
   }
   .bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
     background-color: var(--deframe-widget-color-brand-primary-disabled);
   }
+  .bg-\[var\(--deframe-widget-color-state-error\)\] {
+    background-color: var(--deframe-widget-color-state-error);
+  }
+  .bg-\[var\(--deframe-widget-color-state-error\)\]\/20 {
+    background-color: var(--deframe-widget-color-state-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--deframe-widget-color-state-error) 20%, transparent);
+    }
+  }
+  .bg-\[var\(--deframe-widget-color-state-info\)\] {
+    background-color: var(--deframe-widget-color-state-info);
+  }
+  .bg-\[var\(--deframe-widget-color-state-info\)\]\/20 {
+    background-color: var(--deframe-widget-color-state-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--deframe-widget-color-state-info) 20%, transparent);
+    }
+  }
+  .bg-\[var\(--deframe-widget-color-state-success\)\] {
+    background-color: var(--deframe-widget-color-state-success);
+  }
+  .bg-\[var\(--deframe-widget-color-state-success\)\]\/20 {
+    background-color: var(--deframe-widget-color-state-success);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--deframe-widget-color-state-success) 20%, transparent);
+    }
+  }
+  .bg-\[var\(--deframe-widget-color-state-warning\)\] {
+    background-color: var(--deframe-widget-color-state-warning);
+  }
+  .bg-\[var\(--deframe-widget-color-state-warning\)\]\/20 {
+    background-color: var(--deframe-widget-color-state-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--deframe-widget-color-state-warning) 20%, transparent);
+    }
+  }
   .bg-\[var\(--deframe-widget-color-surface-default\)\] {
     background-color: var(--deframe-widget-color-surface-default);
   }
@@ -1054,18 +1148,15 @@
   .bg-blue-900 {
     background-color: var(--color-blue-900);
   }
-  .bg-blue-900\/20 {
-    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
-    }
-  }
   .bg-border-default {
     background-color: var(--color-border-default);
   }
   .bg-brand-primary {
     background-color: var(--color-brand-primary);
   }
+  .bg-brand-secondary {
+    background-color: var(--color-brand-secondary);
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -1189,6 +1280,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .\!p-\[22px\] {
+    padding: 22px !important;
+  }
   .\!p-\[24px\] {
     padding: 24px !important;
   }
@@ -1207,9 +1301,6 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-5 {
-    padding: calc(var(--spacing) * 5);
-  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -1222,6 +1313,9 @@
   .p-md {
     padding: var(--spacing-md);
   }
+  .p-px {
+    padding: 1px;
+  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -1246,6 +1340,9 @@
   .px-\[var\(--deframe-widget-button-padding-x\)\] {
     padding-inline: var(--deframe-widget-button-padding-x);
   }
+  .px-\[var\(--deframe-widget-size-padding-x-md\)\] {
+    padding-inline: var(--deframe-widget-size-padding-x-md);
+  }
   .px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
     padding-inline: var(--deframe-widget-size-padding-x-xl);
   }
@@ -1279,6 +1376,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -1291,6 +1391,9 @@
   .py-\[var\(--deframe-widget-size-padding-y-md\)\] {
     padding-block: var(--deframe-widget-size-padding-y-md);
   }
+  .py-\[var\(--deframe-widget-size-padding-y-sm\)\] {
+    padding-block: var(--deframe-widget-size-padding-y-sm);
+  }
   .py-lg {
     padding-block: var(--spacing-lg);
   }
@@ -1303,12 +1406,15 @@
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
-  .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
-  }
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
+  .pt-lg {
+    padding-top: var(--spacing-lg);
+  }
+  .pt-md {
+    padding-top: var(--spacing-md);
+  }
   .pt-sm {
     padding-top: var(--spacing-sm);
   }
@@ -1318,9 +1424,15 @@
   .pr-6 {
     padding-right: calc(var(--spacing) * 6);
   }
+  .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
   .pr-md {
     padding-right: var(--spacing-md);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1354,6 +1466,9 @@
   .text-right {
     text-align: right;
   }
+  .\[font-family\:var\(--deframe-widget-font-family-primary\)\] {
+    font-family: var(--deframe-widget-font-family-primary);
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1393,15 +1508,45 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .\[font-size\:var\(--deframe-widget-font-size-h-large\)\] {
+    font-size: var(--deframe-widget-font-size-h-large);
+  }
+  .\[font-size\:var\(--deframe-widget-font-size-h1\)\] {
+    font-size: var(--deframe-widget-font-size-h1);
+  }
+  .\[font-size\:var\(--deframe-widget-font-size-h2\)\] {
+    font-size: var(--deframe-widget-font-size-h2);
+  }
+  .\[font-size\:var\(--deframe-widget-font-size-h3\)\] {
+    font-size: var(--deframe-widget-font-size-h3);
+  }
   .\[font-size\:var\(--deframe-widget-font-size-h4\)\] {
     font-size: var(--deframe-widget-font-size-h4);
   }
+  .\[font-size\:var\(--deframe-widget-font-size-h5\)\] {
+    font-size: var(--deframe-widget-font-size-h5);
+  }
+  .\[font-size\:var\(--deframe-widget-font-size-lg\)\] {
+    font-size: var(--deframe-widget-font-size-lg);
+  }
   .\[font-size\:var\(--deframe-widget-font-size-md\)\] {
     font-size: var(--deframe-widget-font-size-md);
   }
+  .\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
+    font-size: var(--deframe-widget-font-size-sm);
+  }
   .\[font-size\:var\(--deframe-widget-font-size-text-medium\)\] {
     font-size: var(--deframe-widget-font-size-text-medium);
   }
+  .\[font-size\:var\(--deframe-widget-font-size-xl\)\] {
+    font-size: var(--deframe-widget-font-size-xl);
+  }
+  .\[font-size\:var\(--deframe-widget-font-size-xs\)\] {
+    font-size: var(--deframe-widget-font-size-xs);
+  }
+  .\[font-size\:var\(--deframe-widget-font-size-xxl\)\] {
+    font-size: var(--deframe-widget-font-size-xxl);
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -1420,24 +1565,6 @@
   .text-\[15px\] {
     font-size: 15px;
   }
-  .text-\[16px\] {
-    font-size: 16px;
-  }
-  .text-\[18px\] {
-    font-size: 18px;
-  }
-  .text-\[22px\] {
-    font-size: 22px;
-  }
-  .text-\[28px\] {
-    font-size: 28px;
-  }
-  .text-\[40px\] {
-    font-size: 40px;
-  }
-  .text-\[56px\] {
-    font-size: 56px;
-  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -1446,32 +1573,26 @@
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
   }
-  .leading-\[100\%\] {
-    --tw-leading: 100%;
-    line-height: 100%;
-  }
-  .leading-\[110\%\] {
-    --tw-leading: 110%;
-    line-height: 110%;
-  }
-  .leading-\[120\%\] {
-    --tw-leading: 120%;
-    line-height: 120%;
-  }
-  .leading-\[130\%\] {
-    --tw-leading: 130%;
-    line-height: 130%;
-  }
   .leading-\[140\%\] {
     --tw-leading: 140%;
     line-height: 140%;
   }
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
+  .\[line-height\:var\(--deframe-widget-font-leading-lg\)\] {
+    line-height: var(--deframe-widget-font-leading-lg);
+  }
   .\[line-height\:var\(--deframe-widget-font-leading-md\)\] {
     line-height: var(--deframe-widget-font-leading-md);
   }
-  .font-\[var\(--deframe-widget-font-family\)\] {
-    --tw-font-weight: var(--deframe-widget-font-family);
-    font-weight: var(--deframe-widget-font-family);
+  .\[line-height\:var\(--deframe-widget-font-leading-sm\)\] {
+    line-height: var(--deframe-widget-font-leading-sm);
+  }
+  .font-\[var\(--deframe-widget-font-family-primary\)\] {
+    --tw-font-weight: var(--deframe-widget-font-family-primary);
+    font-weight: var(--deframe-widget-font-family-primary);
   }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
@@ -1493,6 +1614,18 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .\[font-weight\:var\(--deframe-widget-font-weight-bold\)\] {
+    font-weight: var(--deframe-widget-font-weight-bold);
+  }
+  .\[font-weight\:var\(--deframe-widget-font-weight-extrabold\)\] {
+    font-weight: var(--deframe-widget-font-weight-extrabold);
+  }
+  .\[font-weight\:var\(--deframe-widget-font-weight-medium\)\] {
+    font-weight: var(--deframe-widget-font-weight-medium);
+  }
+  .\[font-weight\:var\(--deframe-widget-font-weight-regular\)\] {
+    font-weight: var(--deframe-widget-font-weight-regular);
+  }
   .\[font-weight\:var\(--deframe-widget-font-weight-semibold\)\] {
     font-weight: var(--deframe-widget-font-weight-semibold);
   }
@@ -1500,10 +1633,6 @@
     --tw-tracking: 0.07em;
     letter-spacing: 0.07em;
   }
-  .tracking-\[0\] {
-    --tw-tracking: 0;
-    letter-spacing: 0;
-  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -1529,6 +1658,9 @@
   .text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
     color: var(--deframe-widget-color-brand-tertiary);
   }
+  .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
+    color: var(--deframe-widget-color-text-primary);
+  }
   .text-\[color\:var\(--deframe-widget-color-text-secondary-disabled\)\] {
     color: var(--deframe-widget-color-text-secondary-disabled);
   }
@@ -1556,12 +1688,36 @@
   .text-\[var\(--deframe-widget-color-content-secondary\)\] {
     color: var(--deframe-widget-color-content-secondary);
   }
+  .text-\[var\(--deframe-widget-color-link\)\] {
+    color: var(--deframe-widget-color-link);
+  }
+  .text-\[var\(--deframe-widget-color-link-disabled\)\] {
+    color: var(--deframe-widget-color-link-disabled);
+  }
+  .text-\[var\(--deframe-widget-color-state-error\)\] {
+    color: var(--deframe-widget-color-state-error);
+  }
+  .text-\[var\(--deframe-widget-color-state-info\)\] {
+    color: var(--deframe-widget-color-state-info);
+  }
+  .text-\[var\(--deframe-widget-color-state-success\)\] {
+    color: var(--deframe-widget-color-state-success);
+  }
+  .text-\[var\(--deframe-widget-color-state-warning\)\] {
+    color: var(--deframe-widget-color-state-warning);
+  }
   .text-\[var\(--deframe-widget-color-text-primary\)\] {
     color: var(--deframe-widget-color-text-primary);
   }
   .text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
     color: var(--deframe-widget-color-text-primary-disabled);
   }
+  .text-\[var\(--deframe-widget-color-text-secondary\)\] {
+    color: var(--deframe-widget-color-text-secondary);
+  }
+  .text-bg-default {
+    color: var(--color-bg-default);
+  }
   .text-blue-100 {
     color: var(--color-blue-100);
   }
@@ -1574,9 +1730,6 @@
   .text-brand-primary {
     color: var(--color-brand-primary);
   }
-  .text-brand-secondary {
-    color: var(--color-brand-secondary);
-  }
   .text-gray-200 {
     color: var(--color-gray-200);
   }
@@ -1604,6 +1757,9 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
+  .text-inherit {
+    color: inherit;
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -1643,16 +1799,21 @@
   .uppercase {
     text-transform: uppercase;
   }
-  .italic {
-    font-style: italic;
-  }
   .underline {
     text-decoration-line: underline;
   }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .placeholder-\[var\(--deframe-widget-color-placeholder-primary\)\] {
+    &::placeholder {
+      color: var(--deframe-widget-color-placeholder-primary);
+    }
+  }
   .placeholder-gray-400 {
     &::placeholder {
       color: var(--color-gray-400);
@@ -1675,10 +1836,6 @@
   .opacity-95 {
     opacity: 95%;
   }
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1687,6 +1844,10 @@
     --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1790,6 +1951,13 @@
       }
     }
   }
+  .hover\:border-\[var\(--deframe-widget-color-border-secondary\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--deframe-widget-color-border-secondary);
+      }
+    }
+  }
   .hover\:border-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -1818,24 +1986,24 @@
       }
     }
   }
-  .hover\:bg-\[\#2C2C2C\] {
+  .hover\:bg-\[\#252525\] {
     &:hover {
       @media (hover: hover) {
-        background-color: #2C2C2C;
+        background-color: #252525;
       }
     }
   }
-  .hover\:bg-\[\#252525\] {
+  .hover\:bg-\[\#333333\] {
     &:hover {
       @media (hover: hover) {
-        background-color: #252525;
+        background-color: #333333;
       }
     }
   }
-  .hover\:bg-\[\#333333\] {
+  .hover\:bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: #333333;
+        background-color: var(--deframe-widget-color-bg-tertiary);
       }
     }
   }
@@ -1877,24 +2045,24 @@
       }
     }
   }
-  .hover\:text-gray-300 {
+  .hover\:text-text-primary {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-gray-300);
+        color: var(--color-text-primary);
       }
     }
   }
-  .hover\:text-text-primary {
+  .hover\:text-white {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-text-primary);
+        color: var(--color-white);
       }
     }
   }
-  .hover\:text-white {
+  .hover\:no-underline {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-white);
+        text-decoration-line: none;
       }
     }
   }
@@ -1944,11 +2112,6 @@
       }
     }
   }
-  .focus\:ring-blue-500 {
-    &:focus {
-      --tw-ring-color: var(--color-blue-500);
-    }
-  }
   .focus\:ring-brand-primary {
     &:focus {
       --tw-ring-color: var(--color-brand-primary);
@@ -1966,11 +2129,6 @@
       outline-style: none;
     }
   }
-  .active\:scale-\[0\.98\] {
-    &:active {
-      scale: 0.98;
-    }
-  }
   .active\:bg-white\/20 {
     &:active {
       background-color: color-mix(in srgb, #fff 20%, transparent);
@@ -1994,40 +2152,12 @@
       opacity: 50%;
     }
   }
-  .sm\:flex-row {
-    @media (width >= 40rem) {
-      flex-direction: row;
-    }
-  }
-  .sm\:text-3xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-3xl);
-      line-height: var(--tw-leading, var(--text-3xl--line-height));
-    }
-  }
-  .sm\:text-base {
-    @media (width >= 40rem) {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
-    }
-  }
-  .md\:text-4xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-4xl);
-      line-height: var(--tw-leading, var(--text-4xl--line-height));
-    }
-  }
   .md\:text-base {
     @media (width >= 48rem) {
       font-size: var(--text-base);
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
-  .md\:text-\[17px\] {
-    @media (width >= 48rem) {
-      font-size: 17px;
-    }
-  }
   .lg\:\!bg-bg-raised {
     @media (width >= 64rem) {
       background-color: var(--color-bg-raised) !important;
@@ -2038,12 +2168,6 @@
       background-color: var(--color-bg-subtle);
     }
   }
-  .lg\:text-5xl {
-    @media (width >= 64rem) {
-      font-size: var(--text-5xl);
-      line-height: var(--tw-leading, var(--text-5xl--line-height));
-    }
-  }
   .dark\:border-border-default-dark {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-border-default-dark);
@@ -2089,14 +2213,14 @@
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
   }
-  .dark\:text-brand-primary-dark {
+  .dark\:text-bg-default-dark {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-brand-primary-dark);
+      color: var(--color-bg-default-dark);
     }
   }
-  .dark\:text-brand-secondary-dark {
+  .dark\:text-brand-primary-dark {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-brand-secondary-dark);
+      color: var(--color-brand-primary-dark);
     }
   }
   .dark\:text-state-error {
@@ -2158,6 +2282,20 @@
       }
     }
   }
+  .dark\:lg\:\!bg-bg-raised-dark {
+    @media (prefers-color-scheme: dark) {
+      @media (width >= 64rem) {
+        background-color: var(--color-bg-raised-dark) !important;
+      }
+    }
+  }
+  .lg\:dark\:\!bg-bg-raised-dark {
+    @media (width >= 64rem) {
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-bg-raised-dark) !important;
+      }
+    }
+  }
   .lg\:dark\:bg-bg-subtle-dark {
     @media (width >= 64rem) {
       @media (prefers-color-scheme: dark) {
@@ -2205,13 +2343,21 @@ body {
 }
 :root,
 .deframe-widget {
-  --deframe-widget-font-family: 'Satoshi', sans-serif;
+  --deframe-widget-font-family-primary: 'Satoshi', sans-serif;
+  --deframe-widget-font-family-secondary: 'Inter', sans-serif;
+  --deframe-widget-font-family-tertiary: 'Roboto Mono', monospace;
   --deframe-widget-font-size-xs: 0.6875rem;
   --deframe-widget-font-size-sm: clamp(0.6875rem, 1.8vw, 0.8125rem);
   --deframe-widget-font-size-md: clamp(0.8125rem, 2vw, 0.9375rem);
   --deframe-widget-font-size-lg: clamp(0.9375rem, 2.5vw, 1.125rem);
   --deframe-widget-font-size-xl: clamp(1.0625rem, 2.8vw, 1.25rem);
   --deframe-widget-font-size-xxl: clamp(1.25rem, 3.2vw, 1.5rem);
+  --deframe-widget-font-heading-h-large: clamp(4rem, 5vw, 5rem);
+  --deframe-widget-font-heading-h1: clamp(3rem, 4.5vw, 4rem);
+  --deframe-widget-font-heading-h2: clamp(2.5rem, 4vw, 3rem);
+  --deframe-widget-font-heading-h3: clamp(2rem, 3.5vw, 2.5rem);
+  --deframe-widget-font-heading-h4: clamp(1.5rem, 3vw, 2rem);
+  --deframe-widget-font-heading-h5: clamp(1.25rem, 2.5vw, 1.5rem);
   --deframe-widget-font-leading-xs: clamp(0.75em, 2vw, 0.875em);
   --deframe-widget-font-leading-sm: clamp(0.875em, 2.2vw, 1em);
   --deframe-widget-font-leading-md: clamp(1.0625em, 2.5vw, 1.25em);
@@ -2234,6 +2380,9 @@ body {
   --deframe-widget-color-text-tertiary: #898d95;
   --deframe-widget-color-text-tertiary-dark: #898d95;
   --deframe-widget-color-text-tertiary-disabled: #5c5f66;
+  --deframe-widget-color-link: #405eff;
+  --deframe-widget-color-link-dark: #405eff;
+  --deframe-widget-color-link-disabled: #6f6e6e;
   --deframe-widget-color-placeholder-primary: #c6c8cc;
   --deframe-widget-color-placeholder-primary-dark: #c6c8cc;
   --deframe-widget-color-placeholder-primary-disabled: #898d95;
@@ -2598,6 +2747,16 @@ body {
   syntax: "*";
   inherits: false;
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {