@deframe-sdk/components 0.1.18 → 0.1.20

package/dist/styles.css

@@ -379,6 +379,9 @@
   .mt-\[3px\] {
     margin-top: 3px;
   }
+  .mt-\[6px\] {
+    margin-top: 6px;
+  }
   .mt-\[10px\] {
     margin-top: 10px;
   }
@@ -730,6 +733,12 @@
   .w-\[7px\] {
     width: 7px;
   }
+  .w-\[12px\] {
+    width: 12px;
+  }
+  .w-\[14px\] {
+    width: 14px;
+  }
   .w-\[15px\] {
     width: 15px;
   }
@@ -835,6 +844,9 @@
   .max-w-\[calc\(100\%-32px\)\] {
     max-width: calc(100% - 32px);
   }
+  .max-w-fit {
+    max-width: fit-content;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -868,6 +880,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .origin-left {
+    transform-origin: 0;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -884,6 +899,12 @@
     --tw-translate-y: calc(var(--spacing) * -2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-90 {
+    --tw-scale-x: 90%;
+    --tw-scale-y: 90%;
+    --tw-scale-z: 90%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -1244,6 +1265,12 @@
       border-color: color-mix(in srgb,var(--deframe-widget-color-state-error) 32%,transparent);
     }
   }
+  .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-info\)_28\%\,transparent\)\] {
+    border-color: var(--deframe-widget-color-state-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--deframe-widget-color-state-info) 28%,transparent);
+    }
+  }
   .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-info\)_32\%\,transparent\)\] {
     border-color: var(--deframe-widget-color-state-info);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1403,6 +1430,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-state-error\)_12\%\,transparent\)\] {
+    background-color: var(--deframe-widget-color-state-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--deframe-widget-color-state-error) 12%,transparent);
+    }
+  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_16\%\,transparent\)\] {
     background-color: var(--deframe-widget-color-state-error);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1421,6 +1454,12 @@
       background-color: color-mix(in srgb,var(--deframe-widget-color-state-info) 16%,transparent);
     }
   }
+  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-info\)_18\%\,transparent\)\] {
+    background-color: var(--deframe-widget-color-state-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--deframe-widget-color-state-info) 18%,transparent);
+    }
+  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-success\)_12\%\,transparent\)\] {
     background-color: var(--deframe-widget-color-state-success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1439,6 +1478,12 @@
       background-color: color-mix(in srgb,var(--deframe-widget-color-state-success) 20%,transparent);
     }
   }
+  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_12\%\,transparent\)\] {
+    background-color: var(--deframe-widget-color-state-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 12%,transparent);
+    }
+  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_16\%\,transparent\)\] {
     background-color: var(--deframe-widget-color-state-warning);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1451,6 +1496,12 @@
       background-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 20%,transparent);
     }
   }
+  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-text-secondary\)_12\%\,transparent\)\] {
+    background-color: var(--deframe-widget-color-text-secondary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--deframe-widget-color-text-secondary) 12%,transparent);
+    }
+  }
   .bg-\[var\(--deframe-widget-color-bg-primary\)\] {
     background-color: var(--deframe-widget-color-bg-primary);
   }
@@ -1559,6 +1610,9 @@
       background-color: color-mix(in oklab, var(--deframe-widget-color-state-warning) 20%, transparent);
     }
   }
+  .bg-\[var\(--deframe-widget-color-text-secondary\)\] {
+    background-color: var(--deframe-widget-color-text-secondary);
+  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -1716,6 +1770,9 @@
   .px-\[28px\] {
     padding-inline: 28px;
   }
+  .px-\[calc\(var\(--deframe-widget-size-padding-x-xs\)\+2px\)\] {
+    padding-inline: calc(var(--deframe-widget-size-padding-x-xs) + 2px);
+  }
   .px-\[var\(--deframe-widget-size-padding-x-lg\)\] {
     padding-inline: var(--deframe-widget-size-padding-x-lg);
   }
@@ -2001,6 +2058,14 @@
     --tw-leading: 1.25;
     line-height: 1.25;
   }
+  .leading-\[14px\] {
+    --tw-leading: 14px;
+    line-height: 14px;
+  }
+  .leading-\[16px\] {
+    --tw-leading: 16px;
+    line-height: 16px;
+  }
   .leading-\[140\%\] {
     --tw-leading: 140%;
     line-height: 140%;
@@ -2284,6 +2349,9 @@
   .opacity-75 {
     opacity: 75%;
   }
+  .opacity-80 {
+    opacity: 80%;
+  }
   .opacity-95 {
     opacity: 95%;
   }
@@ -2786,6 +2854,26 @@
       opacity: 50%;
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:items-end {
+    @media (width >= 48rem) {
+      align-items: flex-end;
+    }
+  }
+  .md\:gap-\[var\(--deframe-widget-size-gap-md\)\] {
+    @media (width >= 48rem) {
+      gap: var(--deframe-widget-size-gap-md);
+    }
+  }
+  .md\:pl-\[var\(--deframe-widget-size-padding-x-md\)\] {
+    @media (width >= 48rem) {
+      padding-left: var(--deframe-widget-size-padding-x-md);
+    }
+  }
   .md\:\[font-size\:var\(--deframe-widget-font-size-md\)\] {
     @media (width >= 48rem) {
       font-size: var(--deframe-widget-font-size-md);
@@ -3329,6 +3417,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -3611,6 +3714,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;

package/package.json

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