@rolatech/angular-rating 20.3.2-beta.3 → 20.3.3-beta.0

package/fesm2022/rolatech-angular-rating.mjs

@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 class AngularRatingComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AngularRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: AngularRatingComponent, isStandalone: true, selector: "rolatech-angular-rating", ngImport: i0, template: "<p class=\"bg-red bg-light-200\">angular-rating works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AngularRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: AngularRatingComponent, isStandalone: true, selector: "rolatech-angular-rating", ngImport: i0, template: "<p class=\"bg-red bg-light-200\">angular-rating works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AngularRatingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AngularRatingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-angular-rating', imports: [CommonModule], template: "<p class=\"bg-red bg-light-200\">angular-rating works!</p>\n" }]
         }] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolatech/angular-rating",
-  "version": "20.3.2-beta.3",
+  "version": "20.3.3-beta.0",
   "private": false,
   "peerDependencies": {
     "@angular/common": "^20.0.0",

package/themes/_default.scss

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -22,12 +22,11 @@
     --color-amber-200: oklch(92.4% 0.12 95.746);
     --color-amber-300: oklch(87.9% 0.169 91.605);
     --color-amber-500: oklch(76.9% 0.188 70.08);
-    --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-amber-700: oklch(55.5% 0.163 48.998);
     --color-amber-800: oklch(47.3% 0.137 46.201);
-    --color-yellow-50: oklch(98.7% 0.026 102.212);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
+    --color-amber-950: oklch(27.9% 0.077 45.635);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
-    --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
@@ -44,7 +43,10 @@
     --color-sky-50: oklch(97.7% 0.013 236.62);
     --color-sky-200: oklch(90.1% 0.058 230.902);
     --color-sky-700: oklch(50% 0.134 242.749);
+    --color-sky-900: oklch(39.1% 0.09 240.876);
+    --color-sky-950: oklch(29.3% 0.066 243.157);
     --color-blue-100: oklch(93.2% 0.032 255.585);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-rose-50: oklch(96.9% 0.015 12.422);
@@ -61,6 +63,7 @@
     --color-slate-500: oklch(55.4% 0.046 257.417);
     --color-slate-600: oklch(44.6% 0.043 257.281);
     --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-950: oklch(12.9% 0.042 264.695);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -73,12 +76,12 @@
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
     --container-6xl: 72rem;
-    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -111,7 +114,7 @@
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --blur-2xl: 40px;
+    --blur-sm: 8px;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -304,9 +307,6 @@
   .end {
     inset-inline-end: var(--spacing);
   }
-  .-top-10 {
-    top: calc(var(--spacing) * -10);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -325,18 +325,12 @@
   .-right-0 {
     right: calc(var(--spacing) * -0);
   }
-  .-right-10 {
-    right: calc(var(--spacing) * -10);
-  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
   .-bottom-0 {
     bottom: calc(var(--spacing) * -0);
   }
-  .-bottom-16 {
-    bottom: calc(var(--spacing) * -16);
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -349,9 +343,6 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-12 {
-    left: calc(var(--spacing) * 12);
-  }
   .left-\[30px\] {
     left: 30px;
   }
@@ -370,6 +361,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-9200 {
+    z-index: 9200;
+  }
   .z-\[1000\] {
     z-index: 1000;
   }
@@ -379,6 +373,12 @@
   .z-\[9999\] {
     z-index: 9999;
   }
+  .order-1 {
+    order: 1;
+  }
+  .order-2 {
+    order: 2;
+  }
   .col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -436,6 +436,9 @@
   .m-3 {
     margin: calc(var(--spacing) * 3);
   }
+  .m-4 {
+    margin: calc(var(--spacing) * 4);
+  }
   .m-auto {
     margin: auto;
   }
@@ -466,6 +469,9 @@
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -598,6 +604,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -692,9 +701,6 @@
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
-  .h-44 {
-    height: calc(var(--spacing) * 44);
-  }
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
@@ -764,6 +770,9 @@
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
+  .max-h-\[92vh\] {
+    max-height: 92vh;
+  }
   .max-h-\[320px\] {
     max-height: 320px;
   }
@@ -782,6 +791,9 @@
   .min-h-14 {
     min-height: calc(var(--spacing) * 14);
   }
+  .min-h-24 {
+    min-height: calc(var(--spacing) * 24);
+  }
   .min-h-28 {
     min-height: calc(var(--spacing) * 28);
   }
@@ -800,12 +812,18 @@
   .min-h-\[214px\] {
     min-height: 214px;
   }
+  .min-h-\[280px\] {
+    min-height: 280px;
+  }
   .min-h-\[320px\] {
     min-height: 320px;
   }
   .min-h-\[420px\] {
     min-height: 420px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -890,6 +908,9 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
@@ -905,6 +926,9 @@
   .w-44 {
     width: calc(var(--spacing) * 44);
   }
+  .w-45 {
+    width: calc(var(--spacing) * 45);
+  }
   .w-52 {
     width: calc(var(--spacing) * 52);
   }
@@ -914,6 +938,9 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -929,9 +956,6 @@
   .w-\[80px\] {
     width: 80px;
   }
-  .w-\[100px\] {
-    width: 100px;
-  }
   .w-\[120px\] {
     width: 120px;
   }
@@ -941,9 +965,6 @@
   .w-\[160px\] {
     width: 160px;
   }
-  .w-\[180px\] {
-    width: 180px;
-  }
   .w-\[190px\] {
     width: 190px;
   }
@@ -971,15 +992,15 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
-  .max-w-7xl {
-    max-width: var(--container-7xl);
-  }
   .max-w-8 {
     max-width: calc(var(--spacing) * 8);
   }
   .max-w-24 {
     max-width: calc(var(--spacing) * 24);
   }
+  .max-w-45 {
+    max-width: calc(var(--spacing) * 45);
+  }
   .max-w-\[65\%\] {
     max-width: 65%;
   }
@@ -989,12 +1010,6 @@
   .max-w-\[128px\] {
     max-width: 128px;
   }
-  .max-w-\[180px\] {
-    max-width: 180px;
-  }
-  .max-w-\[420px\] {
-    max-width: 420px;
-  }
   .max-w-\[500px\] {
     max-width: 500px;
   }
@@ -1010,9 +1025,6 @@
   .max-w-\[1300px\] {
     max-width: 1300px;
   }
-  .max-w-\[1396px\] {
-    max-width: 1396px;
-  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1025,6 +1037,9 @@
   .max-w-none {
     max-width: none;
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .\!min-w-0 {
     min-width: calc(var(--spacing) * 0) !important;
   }
@@ -1061,9 +1076,6 @@
   .min-w-\[80\%\] {
     min-width: 80%;
   }
-  .min-w-\[80px\] {
-    min-width: 80px;
-  }
   .min-w-\[120px\] {
     min-width: 120px;
   }
@@ -1148,9 +1160,6 @@
     --tw-scale-z: 90%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  .rotate-180 {
-    rotate: 180deg;
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -1345,19 +1354,19 @@
       border-style: dashed;
     }
   }
-  .divide-\[--rt-10-percent-layer\] {
+  .divide-\(--rt-10-percent-layer\) {
     :where(& > :not(:last-child)) {
-      border-color: --rt-10-percent-layer;
+      border-color: var(--rt-10-percent-layer);
     }
   }
-  .divide-\[--rt-border-color\] {
+  .divide-\(--rt-border-color\) {
     :where(& > :not(:last-child)) {
-      border-color: --rt-border-color;
+      border-color: var(--rt-border-color);
     }
   }
-  .divide-\[--rt-raised-background\] {
+  .divide-\(--rt-raised-background\) {
     :where(& > :not(:last-child)) {
-      border-color: --rt-raised-background;
+      border-color: var(--rt-raised-background);
     }
   }
   .divide-\[color\:var\(--rt-outline\,rgba\(0\,0\,0\,0\.08\)\)\] {
@@ -1409,6 +1418,12 @@
   .rounded-3xl {
     border-radius: var(--radius-3xl);
   }
+  .rounded-\[1\.75rem\] {
+    border-radius: 1.75rem;
+  }
+  .rounded-\[28px\] {
+    border-radius: 28px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1433,10 +1448,6 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-y {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 1px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1453,17 +1464,14 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-\[--rt-border-color\] {
-    border-color: --rt-border-color;
-  }
-  .border-\[--rt-brand-color\] {
-    border-color: --rt-brand-color;
+  .border-\(--rt-border-color\) {
+    border-color: var(--rt-border-color);
   }
-  .border-\[--rt-outline\] {
-    border-color: --rt-outline;
+  .border-\(--rt-brand-color\) {
+    border-color: var(--rt-brand-color);
   }
-  .border-\[--rt-raised-background\] {
-    border-color: --rt-raised-background;
+  .border-\(--rt-raised-background\) {
+    border-color: var(--rt-raised-background);
   }
   .border-amber-200 {
     border-color: var(--color-amber-200);
@@ -1471,6 +1479,12 @@
   .border-amber-300 {
     border-color: var(--color-amber-300);
   }
+  .border-amber-300\/40 {
+    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
+    }
+  }
   .border-amber-500\/20 {
     border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1543,53 +1557,47 @@
       border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
     }
   }
-  .border-yellow-200 {
-    border-color: var(--color-yellow-200);
-  }
   .border-t-transparent {
     border-top-color: transparent;
   }
-  .\!bg-\[--rt-brand-color\] {
-    background-color: --rt-brand-color !important;
-  }
-  .bg-\[--rolatech-raised-background\] {
-    background-color: --rolatech-raised-background;
+  .bg-\(--rt-10-percent-layer\) {
+    background-color: var(--rt-10-percent-layer);
   }
-  .bg-\[--rt-10-percent-layer\] {
-    background-color: --rt-10-percent-layer;
+  .bg-\(--rt-20-percent-layer\) {
+    background-color: var(--rt-20-percent-layer);
   }
-  .bg-\[--rt-20-percent-layer\] {
-    background-color: --rt-20-percent-layer;
+  .bg-\(--rt-accent\) {
+    background-color: var(--rt-accent);
   }
-  .bg-\[--rt-background\] {
-    background-color: --rt-background;
+  .bg-\(--rt-background\) {
+    background-color: var(--rt-background);
   }
-  .bg-\[--rt-badge-chip-background\] {
-    background-color: --rt-badge-chip-background;
+  .bg-\(--rt-badge-chip-background\) {
+    background-color: var(--rt-badge-chip-background);
   }
-  .bg-\[--rt-base-background\] {
-    background-color: --rt-base-background;
+  .bg-\(--rt-base-background\) {
+    background-color: var(--rt-base-background);
   }
-  .bg-\[--rt-brand-color\] {
-    background-color: --rt-brand-color;
+  .bg-\(--rt-brand-color\) {
+    background-color: var(--rt-brand-color);
   }
-  .bg-\[--rt-raised-background\] {
-    background-color: --rt-raised-background;
+  .bg-\(--rt-brand-color\)\! {
+    background-color: var(--rt-brand-color) !important;
   }
-  .bg-\[--rt-rasised-background\] {
-    background-color: --rt-rasised-background;
+  .bg-\(--rt-raised-background\) {
+    background-color: var(--rt-raised-background);
   }
-  .bg-\[--rt-signin-inner-background\] {
-    background-color: --rt-signin-inner-background;
+  .bg-\(--rt-rasised-background\) {
+    background-color: var(--rt-rasised-background);
   }
-  .bg-\[--rt-surface-2\] {
-    background-color: --rt-surface-2;
+  .bg-\(--rt-signin-inner-background\) {
+    background-color: var(--rt-signin-inner-background);
   }
-  .bg-\[--rt-text-primary\] {
-    background-color: --rt-text-primary;
+  .bg-\(--rt-surface-2\) {
+    background-color: var(--rt-surface-2);
   }
-  .bg-\[var\(--rt-brand-color\)\] {
-    background-color: var(--rt-brand-color);
+  .bg-\(--rt-text-primary\) {
+    background-color: var(--rt-text-primary);
   }
   .bg-amber-50 {
     background-color: var(--color-amber-50);
@@ -1633,6 +1641,9 @@
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
   .bg-emerald-50 {
     background-color: var(--color-emerald-50);
   }
@@ -1702,8 +1713,11 @@
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
-  .bg-slate-200 {
-    background-color: var(--color-slate-200);
+  .bg-slate-950\/70 {
+    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
+    }
   }
   .bg-transparent {
     background-color: transparent;
@@ -1711,9 +1725,6 @@
   .bg-white {
     background-color: var(--color-white);
   }
-  .bg-yellow-50 {
-    background-color: var(--color-yellow-50);
-  }
   .bg-yellow-100 {
     background-color: var(--color-yellow-100);
   }
@@ -1834,9 +1845,6 @@
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
-  .pt-0 {
-    padding-top: calc(var(--spacing) * 0);
-  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -1967,6 +1975,9 @@
   .text-\[0\.85rem\] {
     font-size: 0.85rem;
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -2006,9 +2017,9 @@
     --tw-tracking: 0.16em;
     letter-spacing: 0.16em;
   }
-  .tracking-\[0\.18em\] {
-    --tw-tracking: 0.18em;
-    letter-spacing: 0.18em;
+  .tracking-\[0\.24em\] {
+    --tw-tracking: 0.24em;
+    letter-spacing: 0.24em;
   }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
@@ -2018,47 +2029,41 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .break-words {
-    overflow-wrap: break-word;
-  }
   .break-all {
     word-break: break-all;
   }
   .whitespace-normal {
     white-space: normal;
   }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
   .whitespace-pre {
     white-space: pre;
   }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .\!text-\[--rt-text-primary-inverse\] {
-    color: --rt-text-primary-inverse !important;
+  .text-\(--rt-accent-foreground\) {
+    color: var(--rt-accent-foreground);
   }
-  .text-\[\#4A4A4A\] {
-    color: #4A4A4A;
+  .text-\(--rt-brand-color\) {
+    color: var(--rt-brand-color);
   }
-  .text-\[\#8C8C8C\] {
-    color: #8C8C8C;
+  .text-\(--rt-text-primary\) {
+    color: var(--rt-text-primary);
   }
-  .text-\[--rt-brand-color\] {
-    color: --rt-brand-color;
+  .text-\(--rt-text-primary-inverse\) {
+    color: var(--rt-text-primary-inverse);
   }
-  .text-\[--rt-text-primary-inverse\] {
-    color: --rt-text-primary-inverse;
+  .text-\(--rt-text-primary-inverse\)\! {
+    color: var(--rt-text-primary-inverse) !important;
   }
-  .text-\[--rt-text-primary\] {
-    color: --rt-text-primary;
+  .text-\(--rt-text-secondary\) {
+    color: var(--rt-text-secondary);
   }
-  .text-\[--rt-text-secondary\] {
-    color: --rt-text-secondary;
+  .text-\[\#4A4A4A\] {
+    color: #4A4A4A;
   }
-  .text-amber-600 {
-    color: var(--color-amber-600);
+  .text-\[\#8C8C8C\] {
+    color: #8C8C8C;
   }
   .text-amber-700 {
     color: var(--color-amber-700);
@@ -2066,6 +2071,15 @@
   .text-amber-800 {
     color: var(--color-amber-800);
   }
+  .text-amber-900 {
+    color: var(--color-amber-900);
+  }
+  .text-amber-950 {
+    color: var(--color-amber-950);
+  }
+  .text-black {
+    color: var(--color-black);
+  }
   .text-blue-700 {
     color: var(--color-blue-700);
   }
@@ -2111,6 +2125,9 @@
   .text-red-800 {
     color: var(--color-red-800);
   }
+  .text-rose-200 {
+    color: var(--color-rose-200);
+  }
   .text-rose-600 {
     color: var(--color-rose-600);
   }
@@ -2123,6 +2140,12 @@
   .text-sky-700 {
     color: var(--color-sky-700);
   }
+  .text-sky-900 {
+    color: var(--color-sky-900);
+  }
+  .text-sky-950 {
+    color: var(--color-sky-950);
+  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
@@ -2195,6 +2218,9 @@
   .opacity-80 {
     opacity: 80%;
   }
+  .opacity-85 {
+    opacity: 85%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2245,16 +2271,14 @@
   .outline-transparent {
     outline-color: transparent;
   }
-  .blur-2xl {
-    --tw-blur: blur(var(--blur-2xl));
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .\!filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
-  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2280,6 +2304,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -2350,6 +2378,12 @@
       border-width: 1px;
     }
   }
+  .after\:border-\(--rt-border-color\) {
+    &::after {
+      content: var(--tw-content);
+      border-color: var(--rt-border-color);
+    }
+  }
   .after\:px-3\.5 {
     &::after {
       content: var(--tw-content);
@@ -2412,52 +2446,52 @@
       }
     }
   }
-  .hover\:border-\[--rt-border-color\] {
+  .hover\:border-\(--rt-border-color\) {
     &:hover {
       @media (hover: hover) {
-        border-color: --rt-border-color;
+        border-color: var(--rt-border-color);
       }
     }
   }
-  .hover\:bg-\[--rt-10-percent-layer\] {
+  .hover\:bg-\(--rt-10-percent-layer\) {
     &:hover {
       @media (hover: hover) {
-        background-color: --rt-10-percent-layer;
+        background-color: var(--rt-10-percent-layer);
       }
     }
   }
-  .hover\:bg-\[--rt-20-percent-layer\] {
+  .hover\:bg-\(--rt-20-percent-layer\) {
     &:hover {
       @media (hover: hover) {
-        background-color: --rt-20-percent-layer;
+        background-color: var(--rt-20-percent-layer);
       }
     }
   }
-  .hover\:bg-\[--rt-base-background\] {
+  .hover\:bg-\(--rt-base-background\) {
     &:hover {
       @media (hover: hover) {
-        background-color: --rt-base-background;
+        background-color: var(--rt-base-background);
       }
     }
   }
-  .hover\:bg-\[--rt-brand-color\] {
+  .hover\:bg-\(--rt-brand-color\) {
     &:hover {
       @media (hover: hover) {
-        background-color: --rt-brand-color;
+        background-color: var(--rt-brand-color);
       }
     }
   }
-  .hover\:bg-\[--rt-outline\] {
+  .hover\:bg-\(--rt-outline\) {
     &:hover {
       @media (hover: hover) {
-        background-color: --rt-outline;
+        background-color: var(--rt-outline);
       }
     }
   }
-  .hover\:bg-\[--rt-raised-background\] {
+  .hover\:bg-\(--rt-raised-background\) {
     &:hover {
       @media (hover: hover) {
-        background-color: --rt-raised-background;
+        background-color: var(--rt-raised-background);
       }
     }
   }
@@ -2502,17 +2536,17 @@
       }
     }
   }
-  .hover\:text-\[--rt-brand-color\] {
+  .hover\:text-\(--rt-brand-color\) {
     &:hover {
       @media (hover: hover) {
-        color: --rt-brand-color;
+        color: var(--rt-brand-color);
       }
     }
   }
-  .hover\:text-\[--rt-text-primary-inverse\] {
+  .hover\:text-\(--rt-text-primary-inverse\) {
     &:hover {
       @media (hover: hover) {
-        color: --rt-text-primary-inverse;
+        color: var(--rt-text-primary-inverse);
       }
     }
   }
@@ -2552,10 +2586,10 @@
       }
     }
   }
-  .hover\:outline-\[--rt-raised-background\] {
+  .hover\:outline-\(--rt-raised-background\) {
     &:hover {
       @media (hover: hover) {
-        outline-color: --rt-raised-background;
+        outline-color: var(--rt-raised-background);
       }
     }
   }
@@ -2577,6 +2611,11 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:bg-\(--rt-raised-background\) {
+    &:disabled {
+      background-color: var(--rt-raised-background);
+    }
+  }
   .disabled\:opacity-60 {
     &:disabled {
       opacity: 60%;
@@ -2926,11 +2965,6 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .md\:grid-cols-4 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
   .md\:grid-cols-6 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -2981,11 +3015,6 @@
       justify-content: flex-end;
     }
   }
-  .md\:gap-3 {
-    @media (width >= 48rem) {
-      gap: calc(var(--spacing) * 3);
-    }
-  }
   .md\:gap-4 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 4);
@@ -3001,9 +3030,9 @@
       border-radius: var(--radius-xl);
     }
   }
-  .md\:bg-\[--rt-base-background\] {
+  .md\:bg-\(--rt-base-background\) {
     @media (width >= 48rem) {
-      background-color: --rt-base-background;
+      background-color: var(--rt-base-background);
     }
   }
   .md\:p-3 {
@@ -3145,11 +3174,6 @@
       width: calc(1 / 6 * 100%);
     }
   }
-  .lg\:w-72 {
-    @media (width >= 64rem) {
-      width: calc(var(--spacing) * 72);
-    }
-  }
   .lg\:w-\[30\%\] {
     @media (width >= 64rem) {
       width: 30%;
@@ -3185,11 +3209,6 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .lg\:grid-cols-6 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
   .lg\:grid-cols-12 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -3310,6 +3329,11 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .xl\:grid-cols-3 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .xl\:grid-cols-4 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -3330,6 +3354,21 @@
       grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
     }
   }
+  .xl\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(320px\,0\.8fr\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: minmax(0,1.2fr) minmax(320px,0.8fr);
+    }
+  }
+  .xl\:grid-cols-\[minmax\(0\,1\.3fr\)_minmax\(320px\,0\.7fr\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: minmax(0,1.3fr) minmax(320px,0.7fr);
+    }
+  }
+  .xl\:grid-cols-\[minmax\(0\,1fr\)_360px\] {
+    @media (width >= 80rem) {
+      grid-template-columns: minmax(0,1fr) 360px;
+    }
+  }
   .xl\:flex-row {
     @media (width >= 80rem) {
       flex-direction: row;
@@ -3340,11 +3379,6 @@
       align-items: center;
     }
   }
-  .xl\:items-end {
-    @media (width >= 80rem) {
-      align-items: flex-end;
-    }
-  }
   .xl\:items-start {
     @media (width >= 80rem) {
       align-items: flex-start;
@@ -3370,9 +3404,9 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .dark\:bg-\[--rt-raised-background\] {
+  .dark\:bg-\(--rt-raised-background\) {
     @media (prefers-color-scheme: dark) {
-      background-color: --rt-raised-background;
+      background-color: var(--rt-raised-background);
     }
   }
   .\[\&\>textarea\]\:resize-none {
@@ -3395,9 +3429,9 @@
       grid-area: 1/1/2/2;
     }
   }
-  .\[\&\>tr\:nth-child\(even\)\]\:bg-\[--rt-raised-background\] {
+  .\[\&\>tr\:nth-child\(even\)\]\:bg-\(--rt-raised-background\) {
     &>tr:nth-child(even) {
-      background-color: --rt-raised-background;
+      background-color: var(--rt-raised-background);
     }
   }
 }
@@ -3606,6 +3640,42 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -3678,6 +3748,15 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";