@lindle/linoardo 1.0.17 → 1.0.19

package/dist/styles.css

@@ -62,6 +62,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
+    --container-lg: 32rem;
     --container-2xl: 42rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -255,6 +256,17 @@
   .visible {
     visibility: visible;
   }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
   .absolute {
     position: absolute;
   }
@@ -270,6 +282,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-0\.5 {
+    top: calc(var(--spacing) * 0.5);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -309,6 +324,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-0\.5 {
+    left: calc(var(--spacing) * 0.5);
+  }
   .left-1 {
     left: calc(var(--spacing) * 1);
   }
@@ -345,12 +363,33 @@
   .col-span-6 {
     grid-column: span 6 / span 6;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .mx-auto {
     margin-inline: auto;
   }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -384,6 +423,12 @@
   .inline-flex {
     display: inline-flex;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -396,12 +441,27 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-52 {
+    height: calc(var(--spacing) * 52);
+  }
+  .h-\[0\.65rem\] {
+    height: 0.65rem;
+  }
   .h-full {
     height: 100%;
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
   .max-h-\[60vh\] {
     max-height: 60vh;
   }
@@ -462,9 +522,18 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
   .w-full {
     width: 100%;
   }
@@ -474,6 +543,9 @@
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-none {
     max-width: none;
   }
@@ -541,6 +613,18 @@
     --tw-translate-x: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-4 {
+    --tw-translate-x: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-5 {
+    --tw-translate-x: calc(var(--spacing) * 5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-6 {
+    --tw-translate-x: calc(var(--spacing) * 6);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -608,6 +692,9 @@
   .items-stretch {
     align-items: stretch;
   }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -814,6 +901,9 @@
   .border-gray-500 {
     border-color: var(--color-gray-500);
   }
+  .border-gray-600 {
+    border-color: var(--color-gray-600);
+  }
   .border-gray-900 {
     border-color: var(--color-gray-900);
   }
@@ -874,6 +964,9 @@
   .border-yellow-400 {
     border-color: var(--color-yellow-400);
   }
+  .border-b-gray-200 {
+    border-bottom-color: var(--color-gray-200);
+  }
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
@@ -904,6 +997,9 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -1008,10 +1104,24 @@
     }
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-linear-to-r {
+    --tw-gradient-position: to right;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to right in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .from-gray-50 {
     --tw-gradient-from: var(--color-gray-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-primary\/5 {
+    --tw-gradient-from: color-mix(in srgb, oklch(0.62 0.13 250) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 5%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-slate-50 {
     --tw-gradient-from: var(--color-slate-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1020,6 +1130,13 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-primary\/10 {
+    --tw-gradient-to: color-mix(in srgb, oklch(0.62 0.13 250) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-slate-50 {
     --tw-gradient-to: var(--color-slate-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1028,6 +1145,9 @@
     --tw-gradient-to: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1037,6 +1157,15 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1097,6 +1226,9 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -1106,6 +1238,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pb-5 {
     padding-bottom: calc(var(--spacing) * 5);
   }
@@ -1273,6 +1408,10 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1294,6 +1433,9 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1305,6 +1447,38 @@
     --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);
   }
+  .shadow-\[0_4px_12px_rgba\(0\,0\,0\,0\.32\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(0,0,0,0.32));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_4px_12px_rgba\(2\,132\,199\,0\.32\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(2,132,199,0.32));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_4px_12px_rgba\(15\,23\,42\,0\.32\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(15,23,42,0.32));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_4px_12px_rgba\(16\,185\,129\,0\.32\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(16,185,129,0.32));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_4px_12px_rgba\(75\,85\,99\,0\.35\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(75,85,99,0.35));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_4px_12px_rgba\(99\,102\,241\,0\.35\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(99,102,241,0.35));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_4px_12px_rgba\(239\,68\,68\,0\.32\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(239,68,68,0.32));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_4px_12px_rgba\(245\,158\,11\,0\.32\)\] {
+    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(245,158,11,0.32));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-inner {
     --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1313,6 +1487,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1321,6 +1499,10 @@
     --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);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1341,6 +1523,12 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .shadow-gray-200\/55 {
+    --tw-shadow-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 55%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 55%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .shadow-gray-900\/5 {
     --tw-shadow-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1461,24 +1649,6 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .group-focus-within\/menu\:pointer-events-auto {
-    &:is(:where(.group\/menu):focus-within *) {
-      pointer-events: auto;
-    }
-  }
-  .group-focus-within\/menu\:scale-100 {
-    &:is(:where(.group\/menu):focus-within *) {
-      --tw-scale-x: 100%;
-      --tw-scale-y: 100%;
-      --tw-scale-z: 100%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
-  .group-focus-within\/menu\:opacity-100 {
-    &:is(:where(.group\/menu):focus-within *) {
-      opacity: 100%;
-    }
-  }
   .group-focus-within\/tooltip\:pointer-events-auto {
     &:is(:where(.group\/tooltip):focus-within *) {
       pointer-events: auto;
@@ -1497,15 +1667,15 @@
       opacity: 100%;
     }
   }
-  .group-hover\/menu\:pointer-events-auto {
-    &:is(:where(.group\/menu):hover *) {
+  .group-hover\/tooltip\:pointer-events-auto {
+    &:is(:where(.group\/tooltip):hover *) {
       @media (hover: hover) {
         pointer-events: auto;
       }
     }
   }
-  .group-hover\/menu\:scale-100 {
-    &:is(:where(.group\/menu):hover *) {
+  .group-hover\/tooltip\:scale-100 {
+    &:is(:where(.group\/tooltip):hover *) {
       @media (hover: hover) {
         --tw-scale-x: 100%;
         --tw-scale-y: 100%;
@@ -1514,34 +1684,79 @@
       }
     }
   }
-  .group-hover\/menu\:opacity-100 {
-    &:is(:where(.group\/menu):hover *) {
+  .group-hover\/tooltip\:opacity-100 {
+    &:is(:where(.group\/tooltip):hover *) {
       @media (hover: hover) {
         opacity: 100%;
       }
     }
   }
-  .group-hover\/tooltip\:pointer-events-auto {
-    &:is(:where(.group\/tooltip):hover *) {
-      @media (hover: hover) {
-        pointer-events: auto;
+  .peer-focus-visible\:ring-2 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .peer-focus-visible\:ring-amber-400 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: var(--color-amber-400);
+    }
+  }
+  .peer-focus-visible\:ring-black\/50 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: color-mix(in srgb, #000 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-black) 50%, transparent);
       }
     }
   }
-  .group-hover\/tooltip\:scale-100 {
-    &:is(:where(.group\/tooltip):hover *) {
-      @media (hover: hover) {
-        --tw-scale-x: 100%;
-        --tw-scale-y: 100%;
-        --tw-scale-z: 100%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
+  .peer-focus-visible\:ring-emerald-400 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: var(--color-emerald-400);
+    }
+  }
+  .peer-focus-visible\:ring-gray-400 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: var(--color-gray-400);
+    }
+  }
+  .peer-focus-visible\:ring-gray-800\/70 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
       }
     }
   }
-  .group-hover\/tooltip\:opacity-100 {
-    &:is(:where(.group\/tooltip):hover *) {
+  .peer-focus-visible\:ring-primary\/40 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: color-mix(in srgb, oklch(0.62 0.13 250) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+    }
+  }
+  .peer-focus-visible\:ring-red-400 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: var(--color-red-400);
+    }
+  }
+  .peer-focus-visible\:ring-sky-400 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-color: var(--color-sky-400);
+    }
+  }
+  .peer-focus-visible\:ring-offset-2 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .hover\:-translate-y-0\.5 {
+    &:hover {
       @media (hover: hover) {
-        opacity: 100%;
+        --tw-translate-y: calc(var(--spacing) * -0.5);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
       }
     }
   }
@@ -1867,6 +2082,14 @@
       }
     }
   }
+  .hover\:shadow-xl {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
+      }
+    }
+  }
   .focus\:border-amber-500 {
     &:focus {
       border-color: var(--color-amber-500);
@@ -24622,6 +24845,69 @@
     font-weight: var(--font-weight-medium);
   }
 }
+@layer components {
+  .slider-control {
+    width: 100%;
+    appearance: none;
+    height: var(--slider-track-height, 0.5rem);
+    background: linear-gradient(
+      to right,
+      var(--slider-color, #6366f1) 0%,
+      var(--slider-color, #6366f1) var(--slider-percentage, 0%),
+      var(--slider-track-color, #e5e7eb) var(--slider-percentage, 0%),
+      var(--slider-track-color, #e5e7eb) 100%
+    );
+  }
+  .slider-control:disabled {
+    background: linear-gradient(
+      to right,
+      var(--slider-disabled-fill, #d1d5db) 0%,
+      var(--slider-disabled-fill, #d1d5db) var(--slider-percentage, 0%),
+      var(--slider-track-color-disabled, #e5e7eb) var(--slider-percentage, 0%),
+      var(--slider-track-color-disabled, #e5e7eb) 100%
+    );
+  }
+  .slider-control::-webkit-slider-runnable-track {
+    height: var(--slider-track-height, 0.5rem);
+    background: transparent;
+  }
+  .slider-control::-moz-range-track {
+    height: var(--slider-track-height, 0.5rem);
+    background: transparent;
+  }
+  .slider-control::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--slider-thumb-size, 1.25rem);
+    height: var(--slider-thumb-size, 1.25rem);
+    border-radius: 9999px;
+    background: var(--slider-thumb-color, #fff);
+    border: 2px solid var(--slider-thumb-border, #6366f1);
+    box-shadow: var(--slider-thumb-shadow, 0 4px 10px rgba(0, 0, 0, 0.12));
+    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
+  }
+  .slider-control:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 8px var(--slider-ring-color, rgba(99, 102, 241, 0.3));
+  }
+  .slider-control:active::-webkit-slider-thumb {
+    transform: scale(1.02);
+  }
+  .slider-control::-moz-range-thumb {
+    width: var(--slider-thumb-size, 1.25rem);
+    height: var(--slider-thumb-size, 1.25rem);
+    border-radius: 9999px;
+    background: var(--slider-thumb-color, #fff);
+    border: 2px solid var(--slider-thumb-border, #6366f1);
+    box-shadow: var(--slider-thumb-shadow, 0 4px 10px rgba(0, 0, 0, 0.12));
+    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
+  }
+  .slider-control:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 8px var(--slider-ring-color, rgba(99, 102, 241, 0.3));
+  }
+  .slider-control:active::-moz-range-thumb {
+    transform: scale(1.02);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -24741,6 +25027,26 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -24937,6 +25243,11 @@
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;