@deframe-sdk/components 0.1.13 → 0.1.15

package/dist/styles.css

@@ -34,16 +34,28 @@
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --container-lg: 32rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
     --tracking-wide: 0.025em;
     --leading-normal: 1.5;
+    --radius-xs: 0.125rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
     --default-transition-duration: 150ms;
@@ -258,6 +270,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-\[-2px\] {
+    right: -2px;
+  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
@@ -273,6 +288,9 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .bottom-\[-2px\] {
+    bottom: -2px;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -333,11 +351,14 @@
   .my-\[var\(--deframe-widget-size-gap-xs\)\] {
     margin-block: var(--deframe-widget-size-gap-xs);
   }
+  .\!mt-0 {
+    margin-top: calc(var(--spacing) * 0) !important;
+  }
   .-mt-\[var\(--deframe-widget-size-gap-sm\)\] {
     margin-top: calc(var(--deframe-widget-size-gap-sm) * -1);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
   }
   .mt-\[-4px\] {
     margin-top: -4px;
@@ -381,9 +402,6 @@
   .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
     margin-bottom: var(--deframe-widget-size-gap-xs);
   }
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
   .mb-\[6px\] {
     margin-bottom: 6px;
   }
@@ -408,6 +426,9 @@
   .ml-\[var\(--deframe-widget-size-gap-lg\)\] {
     margin-left: var(--deframe-widget-size-gap-lg);
   }
+  .ml-\[var\(--deframe-widget-size-gap-sm\)\] {
+    margin-left: var(--deframe-widget-size-gap-sm);
+  }
   .ml-\[var\(--deframe-widget-size-gap-xs\)\] {
     margin-left: var(--deframe-widget-size-gap-xs);
   }
@@ -483,6 +504,12 @@
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
@@ -501,6 +528,9 @@
   .h-\[12px\] {
     height: 12px;
   }
+  .h-\[15px\] {
+    height: 15px;
+  }
   .h-\[17px\] {
     height: 17px;
   }
@@ -525,6 +555,12 @@
   .h-\[84px\] {
     height: 84px;
   }
+  .h-\[90vh\] {
+    height: 90vh;
+  }
+  .h-\[136px\] {
+    height: 136px;
+  }
   .h-\[200px\] {
     height: 200px;
   }
@@ -534,6 +570,9 @@
   .h-\[420px\] {
     height: 420px;
   }
+  .h-\[440px\] {
+    height: 440px;
+  }
   .h-\[700px\] {
     height: 700px;
   }
@@ -567,9 +606,15 @@
   .max-h-\[88vh\] {
     max-height: 88vh;
   }
+  .max-h-\[280px\] {
+    max-height: 280px;
+  }
   .max-h-\[min\(620px\,calc\(100vh-64px\)\)\] {
     max-height: min(620px, calc(100vh - 64px));
   }
+  .\!min-h-\[72px\] {
+    min-height: 72px !important;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -579,6 +624,15 @@
   .min-h-\[16px\] {
     min-height: 16px;
   }
+  .min-h-\[72px\] {
+    min-height: 72px;
+  }
+  .min-h-\[86px\] {
+    min-height: 86px;
+  }
+  .min-h-\[136px\] {
+    min-height: 136px;
+  }
   .min-h-\[600px\] {
     min-height: 600px;
   }
@@ -621,6 +675,9 @@
   .w-14 {
     width: calc(var(--spacing) * 14);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -657,6 +714,9 @@
   .w-\[7px\] {
     width: 7px;
   }
+  .w-\[15px\] {
+    width: 15px;
+  }
   .w-\[18px\] {
     width: 18px;
   }
@@ -666,12 +726,24 @@
   .w-\[84px\] {
     width: 84px;
   }
+  .w-\[200px\] {
+    width: 200px;
+  }
   .w-\[210px\] {
     width: 210px;
   }
   .w-\[300px\] {
     width: 300px;
   }
+  .w-\[320px\] {
+    width: 320px;
+  }
+  .w-\[360px\] {
+    width: 360px;
+  }
+  .w-\[380px\] {
+    width: 380px;
+  }
   .w-\[390px\] {
     width: 390px;
   }
@@ -732,6 +804,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-\[105px\] {
+    min-width: 105px;
+  }
   .min-w-\[120px\] {
     min-width: 120px;
   }
@@ -778,6 +853,9 @@
   .animate-bounce {
     animation: var(--animate-bounce);
   }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -799,6 +877,15 @@
   .list-none {
     list-style-type: none;
   }
+  .\[appearance\:textfield\] {
+    appearance: textfield;
+  }
+  .auto-rows-\[136px\] {
+    grid-auto-rows: 136px;
+  }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -856,6 +943,12 @@
   .\[gap\:var\(--deframe-widget-size-gap-xs\)\] {
     gap: var(--deframe-widget-size-gap-xs);
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .gap-\[2px\] {
     gap: 2px;
   }
@@ -874,6 +967,9 @@
   .gap-\[10px\] {
     gap: 10px;
   }
+  .gap-\[16px\] {
+    gap: 16px;
+  }
   .gap-\[var\(--deframe-widget-size-gap-lg\)\] {
     gap: var(--deframe-widget-size-gap-lg);
   }
@@ -977,6 +1073,12 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .\!rounded-\[var\(--deframe-widget-size-radius-xs\)\] {
+    border-radius: var(--deframe-widget-size-radius-xs) !important;
+  }
+  .\!rounded-xs {
+    border-radius: var(--radius-xs) !important;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1019,6 +1121,15 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .rounded-t-\[var\(--deframe-widget-size-radius-full\)\] {
     border-top-left-radius: var(--deframe-widget-size-radius-full);
     border-top-right-radius: var(--deframe-widget-size-radius-full);
@@ -1035,6 +1146,10 @@
     border-bottom-right-radius: var(--deframe-widget-size-radius-xl);
     border-bottom-left-radius: var(--deframe-widget-size-radius-xl);
   }
+  .\!border-0 {
+    border-style: var(--tw-border-style) !important;
+    border-width: 0px !important;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1138,15 +1253,27 @@
   .border-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
     border-color: var(--deframe-widget-color-brand-primary);
   }
+  .border-\[var\(--deframe-widget-color-bg-secondary\)\] {
+    border-color: var(--deframe-widget-color-bg-secondary);
+  }
   .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-border-secondary\)\] {
+    border-color: var(--deframe-widget-color-border-secondary);
+  }
   .border-\[var\(--deframe-widget-color-state-error\)\] {
     border-color: var(--deframe-widget-color-state-error);
   }
+  .border-\[var\(--deframe-widget-color-state-error\)\]\/20 {
+    border-color: var(--deframe-widget-color-state-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--deframe-widget-color-state-error) 20%, transparent);
+    }
+  }
   .border-\[var\(--deframe-widget-color-state-info\)\] {
     border-color: var(--deframe-widget-color-state-info);
   }
@@ -1156,6 +1283,12 @@
   .border-\[var\(--deframe-widget-color-state-warning\)\] {
     border-color: var(--deframe-widget-color-state-warning);
   }
+  .border-\[var\(--deframe-widget-color-state-warning\)\]\/20 {
+    border-color: var(--deframe-widget-color-state-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--deframe-widget-color-state-warning) 20%, transparent);
+    }
+  }
   .border-blue-300 {
     border-color: var(--color-blue-300);
   }
@@ -1324,6 +1457,12 @@
   .bg-\[var\(--deframe-widget-color-state-error\)\] {
     background-color: var(--deframe-widget-color-state-error);
   }
+  .bg-\[var\(--deframe-widget-color-state-error\)\]\/10 {
+    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) 10%, transparent);
+    }
+  }
   .bg-\[var\(--deframe-widget-color-state-error\)\]\/20 {
     background-color: var(--deframe-widget-color-state-error);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1342,6 +1481,12 @@
   .bg-\[var\(--deframe-widget-color-state-success\)\] {
     background-color: var(--deframe-widget-color-state-success);
   }
+  .bg-\[var\(--deframe-widget-color-state-success\)\]\/10 {
+    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) 10%, transparent);
+    }
+  }
   .bg-\[var\(--deframe-widget-color-state-success\)\]\/20 {
     background-color: var(--deframe-widget-color-state-success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1351,6 +1496,12 @@
   .bg-\[var\(--deframe-widget-color-state-warning\)\] {
     background-color: var(--deframe-widget-color-state-warning);
   }
+  .bg-\[var\(--deframe-widget-color-state-warning\)\]\/10 {
+    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) 10%, transparent);
+    }
+  }
   .bg-\[var\(--deframe-widget-color-state-warning\)\]\/20 {
     background-color: var(--deframe-widget-color-state-warning);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1463,15 +1614,27 @@
   .\!p-\[24px\] {
     padding: 24px !important;
   }
+  .\!p-\[var\(--deframe-widget-size-padding-x-md\)\] {
+    padding: var(--deframe-widget-size-padding-x-md) !important;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-\[3px\] {
     padding: 3px;
   }
   .p-\[var\(--deframe-widget-size-gap-lg\)\] {
     padding: var(--deframe-widget-size-gap-lg);
   }
+  .p-\[var\(--deframe-widget-size-padding-x-lg\)\] {
+    padding: var(--deframe-widget-size-padding-x-lg);
+  }
   .p-\[var\(--deframe-widget-size-padding-x-md\)\] {
     padding: var(--deframe-widget-size-padding-x-md);
   }
@@ -1481,6 +1644,12 @@
   .\!px-\[var\(--deframe-widget-size-padding-x-md\)\] {
     padding-inline: var(--deframe-widget-size-padding-x-md) !important;
   }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .px-\[6px\] {
     padding-inline: 6px;
   }
@@ -1514,6 +1683,18 @@
   .px-\[var\(--deframe-widget-size-padding-x-xs\)\] {
     padding-inline: var(--deframe-widget-size-padding-x-xs);
   }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -1607,12 +1788,18 @@
   .pb-\[14px\] {
     padding-bottom: 14px;
   }
+  .pb-\[var\(--deframe-widget-size-padding-y-lg\)\] {
+    padding-bottom: var(--deframe-widget-size-padding-y-lg);
+  }
   .pb-\[var\(--deframe-widget-size-padding-y-md\)\] {
     padding-bottom: var(--deframe-widget-size-padding-y-md);
   }
   .pb-\[var\(--deframe-widget-size-padding-y-sm\)\] {
     padding-bottom: var(--deframe-widget-size-padding-y-sm);
   }
+  .pb-\[var\(--deframe-widget-size-padding-y-xl\)\] {
+    padding-bottom: var(--deframe-widget-size-padding-y-xl);
+  }
   .pb-\[var\(--deframe-widget-size-padding-y-xs\)\] {
     padding-bottom: var(--deframe-widget-size-padding-y-xs);
   }
@@ -1656,6 +1843,14 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .\!text-\[14px\] {
     font-size: 14px !important;
   }
@@ -1808,6 +2003,18 @@
     --tw-font-weight: var(--deframe-widget-font-family);
     font-weight: var(--deframe-widget-font-family);
   }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --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);
   }
@@ -1876,9 +2083,6 @@
   .text-\[color\:var\(--deframe-widget-color-brand-secondary\)\] {
     color: var(--deframe-widget-color-brand-secondary);
   }
-  .text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
-    color: var(--deframe-widget-color-brand-tertiary);
-  }
   .text-\[color\:var\(--deframe-widget-color-placeholder-primary\)\] {
     color: var(--deframe-widget-color-placeholder-primary);
   }
@@ -1894,6 +2098,18 @@
   .text-\[color\:var\(--deframe-widget-color-state-warning\)\] {
     color: var(--deframe-widget-color-state-warning);
   }
+  .text-\[color\:var\(--deframe-widget-color-text-highlight\)\] {
+    color: var(--deframe-widget-color-text-highlight);
+  }
+  .text-\[color\:var\(--deframe-widget-color-text-highlight-disabled\)\] {
+    color: var(--deframe-widget-color-text-highlight-disabled);
+  }
+  .text-\[color\:var\(--deframe-widget-color-text-inverse\)\] {
+    color: var(--deframe-widget-color-text-inverse);
+  }
+  .text-\[color\:var\(--deframe-widget-color-text-inverse-disabled\)\] {
+    color: var(--deframe-widget-color-text-inverse-disabled);
+  }
   .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
     color: var(--deframe-widget-color-text-primary);
   }
@@ -1918,9 +2134,6 @@
   .text-\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
     color: var(--deframe-widget-font-size-sm);
   }
-  .text-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
-    color: var(--deframe-widget-color-brand-primary-disabled);
-  }
   .text-\[var\(--deframe-widget-color-state-error\)\] {
     color: var(--deframe-widget-color-state-error);
   }
@@ -1936,12 +2149,12 @@
   .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-\[var\(--deframe-widget-color-text-tertiary\)\] {
+    color: var(--deframe-widget-color-text-tertiary);
+  }
   .text-blue-100 {
     color: var(--color-blue-100);
   }
@@ -1978,6 +2191,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
@@ -2012,12 +2228,18 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-25 {
+    opacity: 25%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-75 {
+    opacity: 75%;
+  }
   .opacity-95 {
     opacity: 95%;
   }
@@ -2226,6 +2448,11 @@
       color: var(--deframe-widget-color-text-tertiary);
     }
   }
+  .focus-within\:bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
+    &:focus-within {
+      background-color: var(--deframe-widget-color-bg-tertiary);
+    }
+  }
   .hover\:border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2240,6 +2467,13 @@
       }
     }
   }
+  .hover\:border-\[var\(--deframe-widget-color-border-primary\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--deframe-widget-color-border-primary);
+      }
+    }
+  }
   .hover\:border-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -2325,6 +2559,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--deframe-widget-color-bg-tertiary);
+      }
+    }
+  }
   .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
@@ -2360,6 +2601,13 @@
       }
     }
   }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
   .hover\:opacity-70 {
     &:hover {
       @media (hover: hover) {
@@ -2446,6 +2694,21 @@
       font-size: var(--deframe-widget-font-size-md);
     }
   }
+  .lg\:h-\[440px\] {
+    @media (width >= 64rem) {
+      height: 440px;
+    }
+  }
+  .lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .lg\:\!bg-\[var\(--deframe-widget-color-bg-primary\)\] {
+    @media (width >= 64rem) {
+      background-color: var(--deframe-widget-color-bg-primary) !important;
+    }
+  }
   .lg\:\!bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
     @media (width >= 64rem) {
       background-color: var(--deframe-widget-color-bg-secondary) !important;
@@ -2456,9 +2719,23 @@
       background-color: var(--deframe-widget-color-bg-secondary);
     }
   }
+  .xl\:grid-cols-3 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none {
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+  }
+  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none {
+    &::-webkit-outer-spin-button {
+      appearance: none;
+    }
+  }
 }
-:root,
-.deframe-widget {
+:root {
   --deframe-widget-font-family: 'Satoshi', Inter, sans-serif;
   --deframe-widget-font-size-xs: 11px;
   --deframe-widget-font-size-sm: 13px;
@@ -2488,6 +2765,12 @@
   --deframe-widget-color-text-tertiary: #898d95;
   --deframe-widget-color-text-tertiary-dark: #c6c8cc;
   --deframe-widget-color-text-tertiary-disabled: #5c5f66;
+  --deframe-widget-color-text-inverse: #252050;
+  --deframe-widget-color-text-inverse-dark: #FFFFFF;
+  --deframe-widget-color-text-inverse-disabled: #FFFFFF;
+  --deframe-widget-color-text-highlight: #2BA176;
+  --deframe-widget-color-text-highlight-dark: #2BA176;
+  --deframe-widget-color-text-highlight-disabled: #2BA176;
   --deframe-widget-color-placeholder-primary: #898d95;
   --deframe-widget-color-placeholder-primary-dark: #e3e4e8;
   --deframe-widget-color-placeholder-primary-disabled: #898d95;
@@ -2506,6 +2789,9 @@
   --deframe-widget-color-brand-tertiary: #405eff;
   --deframe-widget-color-brand-tertiary-dark: #a9abf7;
   --deframe-widget-color-brand-tertiary-disabled: #d7deea;
+  --deframe-widget-color-brand-tint: #EEF0FF;
+  --deframe-widget-color-brand-tint-dark: #EEF0FF;
+  --deframe-widget-color-brand-tint-disabled: #525866;
   --deframe-widget-color-bg-primary: #ffffff;
   --deframe-widget-color-bg-primary-dark: #0e0e0e;
   --deframe-widget-color-bg-primary-disabled: #eaecf0;
@@ -2513,17 +2799,23 @@
   --deframe-widget-color-bg-secondary-dark: #1a1a1a;
   --deframe-widget-color-bg-secondary-disabled: #eaecf0;
   --deframe-widget-color-bg-tertiary: #eaecf0;
-  --deframe-widget-color-bg-tertiary-dark: rgba(64, 94, 255, 0.15);
-  --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
-  --deframe-widget-color-border-primary: rgba(64, 94, 255, 0.25);
-  --deframe-widget-color-border-primary-dark: rgba(64, 94, 255, 0.3);
-  --deframe-widget-color-border-primary-disabled: rgba(64, 94, 255, 0.12);
+  --deframe-widget-color-bg-tertiary-dark: #405EFF26;
+  --deframe-widget-color-bg-tertiary-disabled: #405EFF14;
+  --deframe-widget-color-bg-raised: #FFFFFF;
+  --deframe-widget-color-bg-raised-dark: #FFFFFF;
+  --deframe-widget-color-bg-raised-disabled: #FFFFFF;
+  --deframe-widget-color-bg-inverse: #252050;
+  --deframe-widget-color-bg-inverse-dark: #252050;
+  --deframe-widget-color-bg-inverse-disabled: #252050;
+  --deframe-widget-color-border-primary: #405EFF40;
+  --deframe-widget-color-border-primary-dark: #405EFF4D;
+  --deframe-widget-color-border-primary-disabled: #405EFF1F;
   --deframe-widget-color-border-secondary: #e3e4e8;
   --deframe-widget-color-border-secondary-dark: #2c2c2c;
   --deframe-widget-color-border-secondary-disabled: #eaecf0;
-  --deframe-widget-color-border-tertiary: rgba(64, 94, 255, 0.08);
-  --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
-  --deframe-widget-color-border-tertiary-disabled: rgba(64, 94, 255, 0.04);
+  --deframe-widget-color-border-tertiary: #405EFF14;
+  --deframe-widget-color-border-tertiary-dark: #FFFFFF0D;
+  --deframe-widget-color-border-tertiary-disabled: #405EFF0A;
   --deframe-widget-color-state-info: #58b4ff;
   --deframe-widget-color-state-warning: #f6a700;
   --deframe-widget-color-state-error: #ff4d4f;
@@ -2565,101 +2857,39 @@
   --deframe-widget-size-radius-xxl: 32px;
   --deframe-widget-size-radius-full: 9999px;
 }
-:root:is(.dark, .cryptocontrol, .cryptocontrol-v2),
-.deframe-widget:is(.dark, .cryptocontrol, .cryptocontrol-v2) {
-  --deframe-widget-color-text-primary: var(--deframe-widget-color-text-primary-dark);
+:root.dark {
+  --deframe-widget-color-text-primary: #ffffff;
+  --deframe-widget-color-text-primary-dark: #ffffff;
   --deframe-widget-color-text-primary-disabled: #898d95;
-  --deframe-widget-color-text-secondary: var(--deframe-widget-color-text-secondary-dark);
+  --deframe-widget-color-text-secondary: #5c5f66;
   --deframe-widget-color-text-secondary-disabled: #898d95;
-  --deframe-widget-color-text-tertiary: var(--deframe-widget-color-text-tertiary-dark);
+  --deframe-widget-color-text-tertiary: #898d95;
   --deframe-widget-color-text-tertiary-disabled: #525866;
-  --deframe-widget-color-placeholder-primary: var(--deframe-widget-color-placeholder-primary-dark);
+  --deframe-widget-color-placeholder-primary: #898d95;
   --deframe-widget-color-placeholder-primary-disabled: #898d95;
-  --deframe-widget-color-placeholder-secondary: var(--deframe-widget-color-placeholder-secondary-dark);
+  --deframe-widget-color-placeholder-secondary: #c6c8cc;
   --deframe-widget-color-placeholder-secondary-disabled: #525866;
-  --deframe-widget-color-placeholder-tertiary: var(--deframe-widget-color-placeholder-tertiary-dark);
+  --deframe-widget-color-placeholder-tertiary: #5c5f66;
   --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
-  --deframe-widget-color-brand-primary: var(--deframe-widget-color-brand-primary-dark);
+  --deframe-widget-color-brand-primary: #405eff;
   --deframe-widget-color-brand-primary-disabled: #525866;
-  --deframe-widget-color-brand-secondary: var(--deframe-widget-color-brand-secondary-dark);
+  --deframe-widget-color-brand-secondary: #a9abf7;
   --deframe-widget-color-brand-secondary-disabled: #525866;
-  --deframe-widget-color-brand-tertiary: var(--deframe-widget-color-brand-tertiary-dark);
+  --deframe-widget-color-brand-tertiary: #405eff;
   --deframe-widget-color-brand-tertiary-disabled: #525866;
-  --deframe-widget-color-bg-primary: var(--deframe-widget-color-bg-primary-dark);
+  --deframe-widget-color-bg-primary: #ffffff;
   --deframe-widget-color-bg-primary-disabled: #232323;
-  --deframe-widget-color-bg-secondary: var(--deframe-widget-color-bg-secondary-dark);
+  --deframe-widget-color-bg-secondary: #f8f9fa;
   --deframe-widget-color-bg-secondary-disabled: #141414;
-  --deframe-widget-color-bg-tertiary: var(--deframe-widget-color-bg-tertiary-dark);
-  --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
-  --deframe-widget-color-border-primary: var(--deframe-widget-color-border-primary-dark);
-  --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.08);
-  --deframe-widget-color-border-secondary: var(--deframe-widget-color-border-secondary-dark);
-  --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.06);
-  --deframe-widget-color-border-tertiary: var(--deframe-widget-color-border-tertiary-dark);
-  --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
-}
-:root.cryptocontrol,
-.deframe-widget.cryptocontrol {
-  --deframe-widget-color-brand-primary: #1fc16b;
-  --deframe-widget-color-brand-primary-dark: #1fc16b;
-  --deframe-widget-color-brand-tertiary: #1fc16b;
-  --deframe-widget-color-brand-tertiary-dark: #1fc16b;
-  --deframe-widget-color-bg-tertiary: rgba(31, 193, 107, 0.18);
-  --deframe-widget-color-bg-tertiary-dark: rgba(31, 193, 107, 0.18);
-  --deframe-widget-color-bg-tertiary-disabled: rgba(31, 193, 107, 0.1);
-  --deframe-widget-color-border-primary: rgba(31, 193, 107, 0.4);
-  --deframe-widget-color-border-primary-dark: rgba(31, 193, 107, 0.4);
-  --deframe-widget-color-border-primary-disabled: rgba(31, 193, 107, 0.18);
-  --deframe-widget-color-state-success: #1fc16b;
-}
-:root.cryptocontrol-v2,
-.deframe-widget.cryptocontrol-v2 {
-  --deframe-widget-color-text-primary: #ffffff;
-  --deframe-widget-color-text-primary-dark: #ffffff;
-  --deframe-widget-color-text-primary-disabled: #525866;
-  --deframe-widget-color-text-secondary: #99a0ae;
-  --deframe-widget-color-text-secondary-dark: #99a0ae;
-  --deframe-widget-color-text-secondary-disabled: #525866;
-  --deframe-widget-color-text-tertiary: #525866;
-  --deframe-widget-color-text-tertiary-dark: #525866;
-  --deframe-widget-color-text-tertiary-disabled: #525866;
-  --deframe-widget-color-placeholder-primary: #99a0ae;
-  --deframe-widget-color-placeholder-primary-dark: #99a0ae;
-  --deframe-widget-color-placeholder-primary-disabled: #525866;
-  --deframe-widget-color-placeholder-secondary: #525866;
-  --deframe-widget-color-placeholder-secondary-dark: #525866;
-  --deframe-widget-color-placeholder-secondary-disabled: #525866;
-  --deframe-widget-color-placeholder-tertiary: #525866;
-  --deframe-widget-color-placeholder-tertiary-dark: #525866;
-  --deframe-widget-color-placeholder-tertiary-disabled: #525866;
-  --deframe-widget-color-brand-primary: #1fc16b;
-  --deframe-widget-color-brand-primary-dark: #1fc16b;
-  --deframe-widget-color-brand-primary-disabled: #525866;
-  --deframe-widget-color-brand-secondary: #a9abf7;
-  --deframe-widget-color-brand-secondary-dark: #a9abf7;
-  --deframe-widget-color-brand-secondary-disabled: #525866;
-  --deframe-widget-color-brand-tertiary: #1fc16b;
-  --deframe-widget-color-brand-tertiary-dark: #1fc16b;
-  --deframe-widget-color-brand-tertiary-disabled: #525866;
-  --deframe-widget-color-bg-primary: #11141b;
-  --deframe-widget-color-bg-primary-dark: #11141b;
-  --deframe-widget-color-bg-primary-disabled: #181b25;
-  --deframe-widget-color-bg-secondary: #181b25;
-  --deframe-widget-color-bg-secondary-dark: #181b25;
-  --deframe-widget-color-bg-secondary-disabled: #222530;
-  --deframe-widget-color-bg-tertiary: #222530;
-  --deframe-widget-color-bg-tertiary-dark: #222530;
-  --deframe-widget-color-bg-tertiary-disabled: #181b25;
-  --deframe-widget-color-border-primary: rgba(255, 255, 255, 0.12);
-  --deframe-widget-color-border-primary-dark: rgba(255, 255, 255, 0.12);
-  --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.05);
-  --deframe-widget-color-border-secondary: rgba(255, 255, 255, 0.07);
-  --deframe-widget-color-border-secondary-dark: rgba(255, 255, 255, 0.07);
-  --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.05);
-  --deframe-widget-color-border-tertiary: rgba(255, 255, 255, 0.05);
-  --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
-  --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
-  --deframe-widget-color-state-success: #1fc16b;
+  --deframe-widget-color-bg-tertiary: #eaecf0;
+  --deframe-widget-color-bg-tertiary-disabled: #405EFF14;
+  --deframe-widget-color-bg-raised: #ffffff;
+  --deframe-widget-color-border-primary: #405EFF40;
+  --deframe-widget-color-border-primary-disabled: #FFFFFF14;
+  --deframe-widget-color-border-secondary: #e3e4e8;
+  --deframe-widget-color-border-secondary-disabled: #FFFFFF0F;
+  --deframe-widget-color-border-tertiary: #405EFF14;
+  --deframe-widget-color-border-tertiary-disabled: #FFFFFF08;
 }
 .deframe-widget {
   background: var(--deframe-widget-color-bg-primary);
@@ -2672,11 +2902,6 @@
 .deframe-widget select {
   font-family: inherit;
 }
-body {
-  background: var(--deframe-widget-color-bg-primary);
-  color: var(--deframe-widget-color-text-primary);
-  font-family: var(--deframe-widget-font-family);
-}
 @keyframes deframe-widget-slide-up {
   0% {
     transform: translateY(100%);
@@ -2985,6 +3210,11 @@ body {
     transform: rotate(360deg);
   }
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
 @keyframes bounce {
   0%, 100% {
     transform: translateY(-25%);