@deframe-sdk/components 0.1.22 → 0.1.24

package/dist/styles.css

@@ -43,12 +43,16 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-wide: 0.025em;
     --leading-normal: 1.5;
     --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -370,9 +374,24 @@
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
+  .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-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mt-\[-4px\] {
     margin-top: -4px;
   }
+  .mt-\[-16px\] {
+    margin-top: -16px;
+  }
   .mt-\[2px\] {
     margin-top: 2px;
   }
@@ -415,6 +434,18 @@
   .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
     margin-bottom: var(--deframe-widget-size-gap-xs);
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .mb-\[6px\] {
     margin-bottom: 6px;
   }
@@ -436,6 +467,9 @@
   .mb-\[var\(--deframe-widget-size-gap-xs\)\] {
     margin-bottom: var(--deframe-widget-size-gap-xs);
   }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .ml-\[var\(--deframe-widget-size-gap-lg\)\] {
     margin-left: var(--deframe-widget-size-gap-lg);
   }
@@ -445,6 +479,9 @@
   .ml-\[var\(--deframe-widget-size-gap-xs\)\] {
     margin-left: var(--deframe-widget-size-gap-xs);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .box-border {
     box-sizing: border-box;
   }
@@ -508,6 +545,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
@@ -577,6 +617,9 @@
   .h-\[84px\] {
     height: 84px;
   }
+  .h-\[90\%\] {
+    height: 90%;
+  }
   .h-\[90vh\] {
     height: 90vh;
   }
@@ -805,6 +848,9 @@
   .w-\[532px\] {
     width: 532px;
   }
+  .w-\[600px\] {
+    width: 600px;
+  }
   .w-\[clamp\(18rem\,40vw\,30rem\)\] {
     width: clamp(18rem, 40vw, 30rem);
   }
@@ -844,6 +890,9 @@
   .max-w-\[620px\] {
     max-width: 620px;
   }
+  .max-w-\[1400px\] {
+    max-width: 1400px;
+  }
   .max-w-\[calc\(100\%-32px\)\] {
     max-width: calc(100% - 32px);
   }
@@ -883,6 +932,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .basis-0 {
+    flex-basis: calc(var(--spacing) * 0);
+  }
   .origin-left {
     transform-origin: 0;
   }
@@ -962,6 +1014,9 @@
   .grid-cols-\[1fr_auto_auto\] {
     grid-template-columns: 1fr auto auto;
   }
+  .grid-cols-\[40px_1fr_auto\] {
+    grid-template-columns: 40px 1fr auto;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1007,12 +1062,21 @@
   .\[gap\:var\(--deframe-widget-size-gap-xs\)\] {
     gap: var(--deframe-widget-size-gap-xs);
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .gap-\[2px\] {
     gap: 2px;
   }
@@ -1100,6 +1164,9 @@
   .gap-x-\[var\(--deframe-widget-size-gap-md\)\] {
     column-gap: var(--deframe-widget-size-gap-md);
   }
+  .gap-x-\[var\(--deframe-widget-size-gap-sm\)\] {
+    column-gap: var(--deframe-widget-size-gap-sm);
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -1188,6 +1255,9 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -1262,6 +1332,12 @@
       border-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 32%,transparent);
     }
   }
+  .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-secondary\)_32\%\,transparent\)\] {
+    border-color: var(--deframe-widget-color-brand-secondary);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--deframe-widget-color-brand-secondary) 32%,transparent);
+    }
+  }
   .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_32\%\,transparent\)\] {
     border-color: var(--deframe-widget-color-state-error);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1322,6 +1398,9 @@
   .border-\[var\(--deframe-widget-color-bg-secondary\)\] {
     border-color: var(--deframe-widget-color-bg-secondary);
   }
+  .border-\[var\(--deframe-widget-color-border-default\)\] {
+    border-color: var(--deframe-widget-color-border-default);
+  }
   .border-\[var\(--deframe-widget-color-border-primary\)\] {
     border-color: var(--deframe-widget-color-border-primary);
   }
@@ -1382,6 +1461,9 @@
   .bg-\[\#2A2A2A\] {
     background-color: #2A2A2A;
   }
+  .bg-\[\#002608\] {
+    background-color: #002608;
+  }
   .bg-\[\#12151C\] {
     background-color: #12151C;
   }
@@ -1433,6 +1515,12 @@
       background-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 18%,transparent);
     }
   }
+  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-secondary\)_12\%\,transparent\)\] {
+    background-color: var(--deframe-widget-color-brand-secondary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--deframe-widget-color-brand-secondary) 12%,transparent);
+    }
+  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_12\%\,transparent\)\] {
     background-color: var(--deframe-widget-color-state-error);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1505,6 +1593,9 @@
       background-color: color-mix(in srgb,var(--deframe-widget-color-text-secondary) 12%,transparent);
     }
   }
+  .bg-\[var\(--deframe-widget-color-bg-muted\)\] {
+    background-color: var(--deframe-widget-color-bg-muted);
+  }
   .bg-\[var\(--deframe-widget-color-bg-primary\)\] {
     background-color: var(--deframe-widget-color-bg-primary);
   }
@@ -1622,6 +1713,12 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-500\/10 {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+    }
+  }
   .bg-blue-900 {
     background-color: var(--color-blue-900);
   }
@@ -1634,6 +1731,12 @@
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
+  .bg-green-500\/10 {
+    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+    }
+  }
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
@@ -1646,6 +1749,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .bg-yellow-100 {
     background-color: var(--color-yellow-100);
   }
@@ -1728,12 +1834,18 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-\[3px\] {
     padding: 3px;
   }
@@ -1752,9 +1864,18 @@
   .\!px-\[var\(--deframe-widget-size-padding-x-md\)\] {
     padding-inline: var(--deframe-widget-size-padding-x-md) !important;
   }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1794,6 +1915,12 @@
   .px-\[var\(--deframe-widget-size-padding-x-xs\)\] {
     padding-inline: var(--deframe-widget-size-padding-x-xs);
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1806,6 +1933,12 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -1872,6 +2005,9 @@
   .pt-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
     padding-top: var(--deframe-widget-size-padding-y-xxl);
   }
+  .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
   .pr-\[10px\] {
     padding-right: 10px;
   }
@@ -1950,6 +2086,10 @@
   .font-\[inherit\] {
     font-family: inherit;
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2033,10 +2173,26 @@
   .text-\[38px\] {
     font-size: 38px;
   }
+  .text-\[length\:var\(--deframe-widget-font-size-md\)\] {
+    font-size: var(--deframe-widget-font-size-md);
+  }
+  .text-\[length\:var\(--deframe-widget-font-size-sm\)\] {
+    font-size: var(--deframe-widget-font-size-sm);
+  }
+  .text-\[length\:var\(--deframe-widget-font-size-xs\)\] {
+    font-size: var(--deframe-widget-font-size-xs);
+  }
+  .text-\[length\:var\(--deframe-widget-font-size-xxl\)\] {
+    font-size: var(--deframe-widget-font-size-xxl);
+  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-\[1\.1\] {
     --tw-leading: 1.1;
     line-height: 1.1;
@@ -2073,6 +2229,22 @@
     --tw-leading: 140%;
     line-height: 140%;
   }
+  .leading-\[var\(--deframe-widget-font-leading-md\)\] {
+    --tw-leading: var(--deframe-widget-font-leading-md);
+    line-height: var(--deframe-widget-font-leading-md);
+  }
+  .leading-\[var\(--deframe-widget-font-leading-sm\)\] {
+    --tw-leading: var(--deframe-widget-font-leading-sm);
+    line-height: var(--deframe-widget-font-leading-sm);
+  }
+  .leading-\[var\(--deframe-widget-font-leading-xs\)\] {
+    --tw-leading: var(--deframe-widget-font-leading-xs);
+    line-height: var(--deframe-widget-font-leading-xs);
+  }
+  .leading-\[var\(--deframe-widget-font-leading-xxl\)\] {
+    --tw-leading: var(--deframe-widget-font-leading-xxl);
+    line-height: var(--deframe-widget-font-leading-xxl);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2121,6 +2293,10 @@
     --tw-font-weight: var(--deframe-widget-font-family);
     font-weight: var(--deframe-widget-font-family);
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -2246,6 +2422,9 @@
   .text-\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
     color: var(--deframe-widget-font-size-sm);
   }
+  .text-\[var\(--deframe-widget-color-brand-primary\)\] {
+    color: var(--deframe-widget-color-brand-primary);
+  }
   .text-\[var\(--deframe-widget-color-state-error\)\] {
     color: var(--deframe-widget-color-state-error);
   }
@@ -2258,6 +2437,9 @@
   .text-\[var\(--deframe-widget-color-state-warning\)\] {
     color: var(--deframe-widget-color-state-warning);
   }
+  .text-\[var\(--deframe-widget-color-text-inverse\)\] {
+    color: var(--deframe-widget-color-text-inverse);
+  }
   .text-\[var\(--deframe-widget-color-text-primary\)\] {
     color: var(--deframe-widget-color-text-primary);
   }
@@ -2404,6 +2586,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-\[0px_1px_3px_0px_rgba\(0\,0\,0\,0\.1\)\] {
+    --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(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-\[0px_2px_8px_0px_\#0000003D\] {
     --tw-shadow: 0px 2px 8px 0px var(--tw-shadow-color, #0000003D);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2648,6 +2834,16 @@
       }
     }
   }
+  .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_60\%\,transparent\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--deframe-widget-color-bg-tertiary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 60%,transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_72\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2712,6 +2908,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--deframe-widget-color-bg-subtle\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--deframe-widget-color-bg-subtle);
+      }
+    }
+  }
   .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
@@ -2850,6 +3053,36 @@
       opacity: 50%;
     }
   }
+  .sm\:block {
+    @media (width >= 40rem) {
+      display: block;
+    }
+  }
+  .sm\:flex {
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
+  .sm\:grid-cols-\[1fr_160px_130px\] {
+    @media (width >= 40rem) {
+      grid-template-columns: 1fr 160px 130px;
+    }
+  }
+  .sm\:gap-4 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:gap-x-\[var\(--deframe-widget-size-gap-md\)\] {
+    @media (width >= 40rem) {
+      column-gap: var(--deframe-widget-size-gap-md);
+    }
+  }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
@@ -2875,6 +3108,26 @@
       font-size: var(--deframe-widget-font-size-md);
     }
   }
+  .lg\:col-span-1 {
+    @media (width >= 64rem) {
+      grid-column: span 1 / span 1;
+    }
+  }
+  .lg\:col-span-2 {
+    @media (width >= 64rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
+  .lg\:block {
+    @media (width >= 64rem) {
+      display: block;
+    }
+  }
+  .lg\:hidden {
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
   .lg\:h-\[440px\] {
     @media (width >= 64rem) {
       height: 440px;
@@ -2905,6 +3158,11 @@
       background-color: var(--deframe-widget-color-bg-secondary);
     }
   }
+  .lg\:p-12 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 12);
+    }
+  }
   .xl\:grid-cols-3 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -3169,30 +3427,45 @@
   --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: #11141b;
-  --deframe-widget-color-bg-primary-dark: #11141b;
-  --deframe-widget-color-bg-primary-disabled: #181b25;
+  --deframe-widget-color-bg-default: #121212;
+  --deframe-widget-color-bg-default-dark: #121212;
+  --deframe-widget-color-bg-default-disabled: #121212;
+  --deframe-widget-color-bg-primary: #121212;
+  --deframe-widget-color-bg-primary-dark: #121212;
+  --deframe-widget-color-bg-primary-disabled: #121212;
   --deframe-widget-color-bg-secondary: #181b25;
-  --deframe-widget-color-bg-secondary-dark: #181b25;
-  --deframe-widget-color-bg-secondary-disabled: #222530;
+  --deframe-widget-color-bg-secondary-dark: #232323;
+  --deframe-widget-color-bg-secondary-disabled: #232323;
   --deframe-widget-color-bg-tertiary: #222530;
   --deframe-widget-color-bg-tertiary-dark: #222530;
   --deframe-widget-color-bg-tertiary-disabled: #181b25;
-  --deframe-widget-color-bg-raised: #FFFFFF;
-  --deframe-widget-color-bg-raised-dark: #FFFFFF;
-  --deframe-widget-color-bg-raised-disabled: #FFFFFF;
+  --deframe-widget-color-bg-muted: #2c2c2c;
+  --deframe-widget-color-bg-muted-dark: #2C2C2C;
+  --deframe-widget-color-bg-muted-disabled: #2C2C2C;
+  --deframe-widget-color-bg-subtle: #1E1E1E;
+  --deframe-widget-color-bg-subtle-dark: #1E1E1E;
+  --deframe-widget-color-bg-subtle-disabled: #1E1E1E;
+  --deframe-widget-color-bg-raised: #232323;
+  --deframe-widget-color-bg-raised-dark: #232323;
+  --deframe-widget-color-bg-raised-disabled: #232323;
   --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: #1FC16B66;
+  --deframe-widget-color-border-default: #2C2C2C;
+  --deframe-widget-color-border-default-dark: #2C2C2C;
+  --deframe-widget-color-border-default-disabled: #2C2C2C;
+  --deframe-widget-color-border-primary: #232323;
   --deframe-widget-color-border-primary-dark: #1FC16B66;
   --deframe-widget-color-border-primary-disabled: #1FC16B2E;
-  --deframe-widget-color-border-secondary: #FFFFFF12;
-  --deframe-widget-color-border-secondary-dark: #FFFFFF12;
-  --deframe-widget-color-border-secondary-disabled: #FFFFFF0D;
+  --deframe-widget-color-border-secondary: #232323;
+  --deframe-widget-color-border-secondary-dark: #232323;
+  --deframe-widget-color-border-secondary-disabled: #232323;
   --deframe-widget-color-border-tertiary: #FFFFFF0D;
   --deframe-widget-color-border-tertiary-dark: #FFFFFF0D;
   --deframe-widget-color-border-tertiary-disabled: #FFFFFF08;
+  --deframe-widget-color-border-subtle: #1E1E1E;
+  --deframe-widget-color-border-subtle-dark: #1E1E1E;
+  --deframe-widget-color-border-subtle-disabled: #1E1E1E;
   --deframe-widget-color-state-success: #1fc16b;
   --deframe-widget-color-state-warning: #f6a700;
   --deframe-widget-color-state-error: #ff4d4f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deframe-sdk/components",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "packageManager": "pnpm@9.0.0",
   "description": "Deframe SDK React component library",
   "engines": {