@deframe-sdk/components 0.1.28 → 0.1.30

package/dist/styles.css

@@ -51,7 +51,10 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
     --tracking-wide: 0.025em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-normal: 1.5;
     --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
@@ -361,6 +364,9 @@
   .-my-\[var\(--deframe-widget-size-gap-sm\)\] {
     margin-block: calc(var(--deframe-widget-size-gap-sm) * -1);
   }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
   .my-\[var\(--deframe-widget-size-gap-sm\)\] {
     margin-block: var(--deframe-widget-size-gap-sm);
   }
@@ -394,6 +400,9 @@
   .mt-\[-4px\] {
     margin-top: -4px;
   }
+  .mt-\[-8px\] {
+    margin-top: -8px;
+  }
   .mt-\[-16px\] {
     margin-top: -16px;
   }
@@ -409,6 +418,9 @@
   .mt-\[10px\] {
     margin-top: 10px;
   }
+  .mt-\[75px\] {
+    margin-top: 75px;
+  }
   .mt-\[var\(--deframe-widget-size-gap-lg\)\] {
     margin-top: var(--deframe-widget-size-gap-lg);
   }
@@ -475,6 +487,9 @@
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
   .ml-\[var\(--deframe-widget-size-gap-lg\)\] {
     margin-left: var(--deframe-widget-size-gap-lg);
   }
@@ -514,6 +529,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -592,6 +610,9 @@
   .h-\[15px\] {
     height: 15px;
   }
+  .h-\[16px\] {
+    height: 16px;
+  }
   .h-\[17px\] {
     height: 17px;
   }
@@ -601,6 +622,9 @@
   .h-\[20px\] {
     height: 20px;
   }
+  .h-\[32px\] {
+    height: 32px;
+  }
   .h-\[38px\] {
     height: 38px;
   }
@@ -706,6 +730,9 @@
   .min-h-\[136px\] {
     min-height: 136px;
   }
+  .min-h-\[320px\] {
+    min-height: 320px;
+  }
   .min-h-\[600px\] {
     min-height: 600px;
   }
@@ -778,6 +805,9 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[2px\] {
+    width: 2px;
+  }
   .w-\[3px\] {
     width: 3px;
   }
@@ -796,9 +826,15 @@
   .w-\[15px\] {
     width: 15px;
   }
+  .w-\[16px\] {
+    width: 16px;
+  }
   .w-\[18px\] {
     width: 18px;
   }
+  .w-\[32px\] {
+    width: 32px;
+  }
   .w-\[36px\] {
     width: 36px;
   }
@@ -874,6 +910,9 @@
   .w-auto {
     width: auto;
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -889,6 +928,12 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-\[84px\] {
+    max-width: 84px;
+  }
+  .max-w-\[150px\] {
+    max-width: 150px;
+  }
   .max-w-\[200px\] {
     max-width: 200px;
   }
@@ -972,6 +1017,10 @@
     --tw-translate-y: calc(var(--spacing) * -2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-6 {
+    --tw-translate-y: calc(var(--spacing) * -6);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-90 {
     --tw-scale-x: 90%;
     --tw-scale-y: 90%;
@@ -1309,6 +1358,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-12 {
+    border-style: var(--tw-border-style);
+    border-width: 12px;
+  }
   .border-\[length\:var\(--deframe-widget-size-border-sm\)\] {
     border-style: var(--tw-border-style);
     border-width: var(--deframe-widget-size-border-sm);
@@ -1344,6 +1397,9 @@
   .border-\[\#2A2A2A\] {
     border-color: #2A2A2A;
   }
+  .border-\[\#2C2C2C\] {
+    border-color: #2C2C2C;
+  }
   .border-\[\#3A3A3A\] {
     border-color: #3A3A3A;
   }
@@ -1422,6 +1478,9 @@
   .border-\[var\(--deframe-widget-color-bg-secondary\)\] {
     border-color: var(--deframe-widget-color-bg-secondary);
   }
+  .border-\[var\(--deframe-widget-color-bg-tertiary\)\] {
+    border-color: var(--deframe-widget-color-bg-tertiary);
+  }
   .border-\[var\(--deframe-widget-color-border-default\)\] {
     border-color: var(--deframe-widget-color-border-default);
   }
@@ -1434,6 +1493,12 @@
   .border-\[var\(--deframe-widget-color-border-secondary\)\] {
     border-color: var(--deframe-widget-color-border-secondary);
   }
+  .border-\[var\(--deframe-widget-color-border-tertiary\)\] {
+    border-color: var(--deframe-widget-color-border-tertiary);
+  }
+  .border-\[var\(--deframe-widget-color-brand-primary\)\] {
+    border-color: var(--deframe-widget-color-brand-primary);
+  }
   .border-\[var\(--deframe-widget-color-state-error\)\] {
     border-color: var(--deframe-widget-color-state-error);
   }
@@ -1879,9 +1944,18 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .p-12 {
+    padding: calc(var(--spacing) * 12);
+  }
   .p-\[3px\] {
     padding: 3px;
   }
@@ -1894,6 +1968,9 @@
   .p-\[var\(--deframe-widget-size-padding-x-md\)\] {
     padding: var(--deframe-widget-size-padding-x-md);
   }
+  .p-\[var\(--deframe-widget-size-padding-y-md\)\] {
+    padding: var(--deframe-widget-size-padding-y-md);
+  }
   .p-\[var\(--deframe-widget-size-padding-y-sm\)\] {
     padding: var(--deframe-widget-size-padding-y-sm);
   }
@@ -2026,6 +2103,9 @@
   .py-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
     padding-block: var(--deframe-widget-size-padding-y-xxl);
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .pt-\[var\(--deframe-widget-size-padding-y-lg\)\] {
     padding-top: var(--deframe-widget-size-padding-y-lg);
   }
@@ -2065,9 +2145,18 @@
   .pr-\[var\(--deframe-widget-size-padding-x-xxl\)\] {
     padding-right: var(--deframe-widget-size-padding-x-xxl);
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
   .pb-\[10px\] {
     padding-bottom: 10px;
   }
@@ -2306,6 +2395,14 @@
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
   .\[line-height\:1\.1\] {
     line-height: 1.1;
   }
@@ -2353,6 +2450,10 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -2593,6 +2694,9 @@
   .opacity-25 {
     opacity: 25%;
   }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -2852,6 +2956,9 @@
   .\[-webkit-backdrop-filter\:blur\(12px\)\] {
     -webkit-backdrop-filter: blur(12px);
   }
+  .\[font-feature-settings\:\"tnum\"\] {
+    font-feature-settings: "tnum";
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -2875,6 +2982,11 @@
       }
     }
   }
+  .placeholder\:text-\[color\:var\(--deframe-widget-color-placeholder-primary\)\] {
+    &::placeholder {
+      color: var(--deframe-widget-color-placeholder-primary);
+    }
+  }
   .placeholder\:text-\[color\:var\(--deframe-widget-color-text-primary-disabled\)\] {
     &::placeholder {
       color: var(--deframe-widget-color-text-primary-disabled);
@@ -2911,6 +3023,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) {
@@ -3206,6 +3325,11 @@
       pointer-events: none;
     }
   }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -3276,6 +3400,11 @@
       grid-column: span 2 / span 2;
     }
   }
+  .lg\:my-\[75px\] {
+    @media (width >= 64rem) {
+      margin-block: 75px;
+    }
+  }
   .lg\:block {
     @media (width >= 64rem) {
       display: block;
@@ -3306,6 +3435,11 @@
       background-color: var(--deframe-widget-color-bg-secondary) !important;
     }
   }
+  .lg\:\!bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
+    @media (width >= 64rem) {
+      background-color: var(--deframe-widget-color-bg-tertiary) !important;
+    }
+  }
   .lg\:bg-\[var\(--deframe-widget-color-bg-raised\)\] {
     @media (width >= 64rem) {
       background-color: var(--deframe-widget-color-bg-raised);
@@ -3316,6 +3450,11 @@
       background-color: var(--deframe-widget-color-bg-secondary);
     }
   }
+  .lg\:\!p-12 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 12) !important;
+    }
+  }
   .lg\:p-12 {
     @media (width >= 64rem) {
       padding: calc(var(--spacing) * 12);

package/package.json

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