@texturehq/edges 1.0.2 → 1.1.1

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root, :host {
   --color-white: #ffffff;
@@ -13,36 +13,55 @@
   --color-gray-700: #374151;
   --color-gray-800: #1f2937;
   --color-gray-900: #111827;
+  --color-gray-950: #030712;
   --color-red-50: oklch(0.971 0.013 17.38);
   --color-red-100: oklch(0.936 0.032 17.717);
   --color-red-200: oklch(0.885 0.062 18.334);
+  --color-red-300: oklch(0.808 0.114 19.571);
+  --color-red-400: oklch(0.704 0.191 22.216);
   --color-red-500: oklch(0.637 0.237 25.331);
   --color-red-600: oklch(0.577 0.245 27.325);
   --color-red-700: oklch(0.505 0.213 27.518);
   --color-red-800: oklch(0.444 0.177 26.899);
+  --color-red-900: oklch(0.396 0.141 25.723);
+  --color-red-950: oklch(0.258 0.092 26.042);
   --color-green-50: oklch(0.982 0.018 131.68);
   --color-green-100: oklch(0.947 0.052 132.272);
   --color-green-200: oklch(0.895 0.111 131.438);
+  --color-green-300: oklch(0.82 0.178 132.63);
+  --color-green-400: oklch(0.718 0.209 130.901);
   --color-green-500: oklch(0.627 0.194 130.331);
   --color-green-600: oklch(0.527 0.19 131.688);
+  --color-green-700: oklch(0.437 0.154 132.474);
   --color-green-800: oklch(0.366 0.121 132.109);
   --color-green-900: oklch(0.314 0.095 133.748);
+  --color-green-950: oklch(0.197 0.06 130.709);
   --color-blue-50: oklch(0.97 0.014 237.69);
   --color-blue-100: oklch(0.932 0.032 241.935);
   --color-blue-200: oklch(0.882 0.059 243.157);
+  --color-blue-300: oklch(0.809 0.105 244.039);
+  --color-blue-400: oklch(0.707 0.165 246.422);
   --color-blue-500: oklch(0.623 0.214 250.546);
   --color-blue-600: oklch(0.546 0.245 253.739);
+  --color-blue-700: oklch(0.488 0.243 255.638);
   --color-blue-800: oklch(0.424 0.199 255.585);
   --color-blue-900: oklch(0.368 0.146 254.128);
+  --color-blue-950: oklch(0.262 0.09 254.128);
   --color-yellow-50: oklch(0.987 0.024 102.851);
   --color-yellow-100: oklch(0.973 0.071 103.193);
   --color-yellow-200: oklch(0.945 0.129 101.54);
+  --color-yellow-300: oklch(0.905 0.182 98.111);
+  --color-yellow-400: oklch(0.852 0.199 91.936);
   --color-yellow-500: oklch(0.795 0.184 86.047);
   --color-yellow-600: oklch(0.681 0.162 75.834);
+  --color-yellow-700: oklch(0.554 0.135 66.191);
   --color-yellow-800: oklch(0.456 0.111 61.896);
+  --color-yellow-900: oklch(0.398 0.092 60.236);
+  --color-yellow-950: oklch(0.265 0.06 56.259);
   --color-brand-primary: #444ae1;
   --color-brand-light: #f7f7ff;
   --color-brand-dark: #363ccb;
+  --color-brand-background: #f6f7ff;
   --color-neutral-white: #ffffff;
   --color-neutral-black: #000000;
   --spacing-0: 0px;
@@ -72,7 +91,6 @@
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
   --radius-full: 9999px;
   --font-weight-light: 300;
   --font-weight-normal: 400;
@@ -84,6 +102,7 @@
   --color-background-muted: #f3f4f6;
   --color-background-hover: #f3f4f6;
   --color-background-selected: #d1d5db;
+  --color-background-modal: rgba(0, 0, 0, 0.15);
   --color-background-input: #ffffff;
   --color-text-body: #333333;
   --color-text-heading: #111827;
@@ -112,8 +131,11 @@
   --color-feedback-info-border: #93c5fd;
   --color-action-primary: #444ae1;
   --color-action-primary-hover: #383ccb;
+  --color-action-primary-text: #ffffff;
   --color-action-primary-light: rgba(68, 74, 225, 0.1);
   --color-action-secondary: #333333;
+  --color-action-secondary-hover: #4b5563;
+  --color-action-secondary-text: #ffffff;
   --control-sm: 0.75rem;
   --control-md: 0.875rem;
   --control-lg: 1rem;
@@ -145,11 +167,16 @@
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
   --color-orange-50: oklch(98% 0.016 73.684);
+  --color-orange-100: oklch(95.4% 0.038 75.164);
   --color-orange-200: oklch(90.1% 0.076 70.697);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
   --color-orange-600: oklch(64.6% 0.222 41.116);
   --color-orange-800: oklch(47% 0.157 37.304);
   --color-purple-50: oklch(97.7% 0.014 308.299);
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
   --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
   --color-slate-300: oklch(86.9% 0.022 252.894);
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
@@ -167,6 +194,7 @@
   --container-md: 28rem;
   --container-lg: 32rem;
   --container-xl: 36rem;
+  --container-2xl: 42rem;
   --container-4xl: 56rem;
   --container-6xl: 72rem;
   --container-7xl: 80rem;
@@ -187,6 +215,7 @@
   --text-4xl: 2.25rem;
   --text-4xl--line-height: calc(2.5 / 2.25);
   --tracking-tight: -0.025em;
+  --tracking-wide: 0.025em;
   --tracking-wider: 0.05em;
   --leading-relaxed: 1.625;
   --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
@@ -195,9 +224,11 @@
   --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;
+  --animate-bounce: bounce 1s infinite;
   --blur-sm: 8px;
   --blur-md: 12px;
   --blur-2xl: 40px;
+  --aspect-video: 16 / 9;
   --default-transition-duration: 150ms;
   --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   --default-font-family: var(--font-sans);
@@ -484,6 +515,12 @@
 .fade-out {
   animation: fade-out 0.15s ease-in;
 }
+.scrollbar-hide {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
 @layer theme, base, components, utilities;
 @layer theme;
 @layer base {
@@ -629,6 +666,9 @@
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -667,7 +707,7 @@
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border-width: 0;
   }
@@ -800,6 +840,45 @@
   .z-\[60\] {
     z-index: 60;
   }
+  .col-auto {
+    grid-column: auto;
+  }
+  .col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
   .col-span-full {
     grid-column: 1 / -1;
   }
@@ -824,24 +903,48 @@
   .-mx-1 {
     margin-inline: calc(var(--spacing-1) * -1);
   }
+  .-mx-3 {
+    margin-inline: calc(var(--spacing-3) * -1);
+  }
   .mx-1 {
     margin-inline: var(--spacing-1);
   }
   .mx-2 {
     margin-inline: var(--spacing-2);
   }
+  .mx-6 {
+    margin-inline: var(--spacing-6);
+  }
   .mx-auto {
     margin-inline: auto;
   }
   .-my-0\.5 {
     margin-block: calc(var(--spacing) * -0.5);
   }
+  .-my-1 {
+    margin-block: calc(var(--spacing-1) * -1);
+  }
+  .-my-2 {
+    margin-block: calc(var(--spacing-2) * -1);
+  }
+  .my-4 {
+    margin-block: var(--spacing-4);
+  }
   .my-6 {
     margin-block: var(--spacing-6);
   }
+  .my-8 {
+    margin-block: var(--spacing-8);
+  }
+  .-mt-1 {
+    margin-top: calc(var(--spacing-1) * -1);
+  }
   .-mt-px {
     margin-top: -1px;
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: var(--spacing-1);
   }
@@ -932,6 +1035,18 @@
   .table {
     display: table;
   }
+  .aspect-\[2\/1\] {
+    aspect-ratio: 2/1;
+  }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
+  .h-1 {
+    height: var(--spacing-1);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -980,21 +1095,24 @@
   .h-20 {
     height: var(--spacing-20);
   }
+  .h-24 {
+    height: var(--spacing-24);
+  }
   .h-28 {
     height: var(--spacing-28);
   }
   .h-32 {
     height: var(--spacing-32);
   }
+  .h-48 {
+    height: var(--spacing-48);
+  }
   .h-64 {
     height: var(--spacing-64);
   }
   .h-96 {
     height: var(--spacing-96);
   }
-  .h-\[28px\] {
-    height: 28px;
-  }
   .h-\[60px\] {
     height: 60px;
   }
@@ -1004,9 +1122,18 @@
   .h-\[400px\] {
     height: 400px;
   }
+  .h-\[500px\] {
+    height: 500px;
+  }
+  .h-\[600px\] {
+    height: 600px;
+  }
   .h-\[calc\(100vh-60px\)\] {
     height: calc(100vh - 60px);
   }
+  .h-\[calc\(100vh-73px\)\] {
+    height: calc(100vh - 73px);
+  }
   .h-\[var\(--control-lg-height\)\] {
     height: var(--control-lg-height);
   }
@@ -1043,9 +1170,6 @@
   .min-h-0 {
     min-height: var(--spacing-0);
   }
-  .min-h-\[28px\] {
-    min-height: 28px;
-  }
   .min-h-\[100px\] {
     min-height: 100px;
   }
@@ -1055,6 +1179,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-1 {
+    width: var(--spacing-1);
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -1155,6 +1282,9 @@
   .w-px {
     width: 1px;
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
@@ -1221,9 +1351,6 @@
   .shrink-0 {
     flex-shrink: 0;
   }
-  .grow {
-    flex-grow: 1;
-  }
   .table-auto {
     table-layout: auto;
   }
@@ -1267,21 +1394,33 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
   .animate-spin {
     animation: var(--animate-spin);
   }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
   .cursor-default {
     cursor: default;
   }
+  .cursor-help {
+    cursor: help;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-row-resize {
+    cursor: row-resize;
+  }
   .cursor-text {
     cursor: text;
   }
@@ -1319,6 +1458,24 @@
        -moz-appearance: none;
             appearance: none;
   }
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+  .grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+  .grid-flow-dense {
+    grid-auto-flow: dense;
+  }
+  .grid-flow-row {
+    grid-auto-flow: row;
+  }
+  .grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+  .auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1337,6 +1494,30 @@
   .grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .grid-cols-\[1fr_auto\] {
+    grid-template-columns: 1fr auto;
+  }
+  .grid-cols-none {
+    grid-template-columns: none;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1346,6 +1527,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -1355,6 +1539,12 @@
   .items-start {
     align-items: flex-start;
   }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1364,6 +1554,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -1470,6 +1663,41 @@
       margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-12 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-12) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-12) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .gap-x-0 {
+    -moz-column-gap: var(--spacing-0);
+         column-gap: var(--spacing-0);
+  }
+  .gap-x-2 {
+    -moz-column-gap: var(--spacing-2);
+         column-gap: var(--spacing-2);
+  }
+  .gap-x-3 {
+    -moz-column-gap: var(--spacing-3);
+         column-gap: var(--spacing-3);
+  }
+  .gap-x-4 {
+    -moz-column-gap: var(--spacing-4);
+         column-gap: var(--spacing-4);
+  }
+  .gap-x-6 {
+    -moz-column-gap: var(--spacing-6);
+         column-gap: var(--spacing-6);
+  }
+  .gap-x-8 {
+    -moz-column-gap: var(--spacing-8);
+         column-gap: var(--spacing-8);
+  }
+  .gap-x-12 {
+    -moz-column-gap: var(--spacing-12);
+         column-gap: var(--spacing-12);
+  }
   .-space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1477,6 +1705,27 @@
       margin-inline-end: calc(calc(var(--spacing-2) * -1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-0 {
+    row-gap: var(--spacing-0);
+  }
+  .gap-y-1 {
+    row-gap: var(--spacing-1);
+  }
+  .gap-y-2 {
+    row-gap: var(--spacing-2);
+  }
+  .gap-y-3 {
+    row-gap: var(--spacing-3);
+  }
+  .gap-y-4 {
+    row-gap: var(--spacing-4);
+  }
+  .gap-y-6 {
+    row-gap: var(--spacing-6);
+  }
+  .gap-y-8 {
+    row-gap: var(--spacing-8);
+  }
   .divide-x {
     :where(& > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
@@ -1561,9 +1810,6 @@
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
-  .rounded-xl {
-    border-radius: var(--radius-xl);
-  }
   .rounded-l-sm {
     border-top-left-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
@@ -1580,6 +1826,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1592,10 +1842,6 @@
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
   }
-  .border-y-0 {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 0px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1728,6 +1974,9 @@
   .border-text-body {
     border-color: var(--color-text-body);
   }
+  .border-text-heading {
+    border-color: var(--color-text-heading);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1827,12 +2076,12 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-border-default {
+    background-color: var(--color-border-default);
+  }
   .bg-border-muted {
     background-color: var(--color-border-muted);
   }
-  .bg-brand-light {
-    background-color: var(--color-brand-light);
-  }
   .bg-brand-primary {
     background-color: var(--color-brand-primary);
   }
@@ -1905,15 +2154,24 @@
   .bg-orange-50 {
     background-color: var(--color-orange-50);
   }
+  .bg-orange-100 {
+    background-color: var(--color-orange-100);
+  }
   .bg-purple-50 {
     background-color: var(--color-purple-50);
   }
+  .bg-purple-100 {
+    background-color: var(--color-purple-100);
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
@@ -1944,6 +2202,13 @@
   .bg-yellow-100 {
     background-color: var(--color-yellow-100);
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
+  .bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1952,6 +2217,18 @@
     --tw-gradient-from: var(--skeleton-base);
     --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-action-primary {
+    --tw-gradient-from: var(--color-action-primary);
+    --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-green-500 {
+    --tw-gradient-from: var(--color-green-500);
+    --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-purple-500 {
+    --tw-gradient-from: var(--color-purple-500);
+    --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));
+  }
   .via-\[var\(--skeleton-highlight\)\] {
     --tw-gradient-via: var(--skeleton-highlight);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -1961,6 +2238,18 @@
     --tw-gradient-to: var(--skeleton-base);
     --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-blue-500 {
+    --tw-gradient-to: var(--color-blue-500);
+    --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-pink-500 {
+    --tw-gradient-to: var(--color-pink-500);
+    --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-purple-600 {
+    --tw-gradient-to: var(--color-purple-600);
+    --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));
+  }
   .bg-clip-padding {
     background-clip: padding-box;
   }
@@ -1982,6 +2271,9 @@
       stroke: color-mix(in oklab, var(--color-black) 10%, transparent);
     }
   }
+  .stroke-border-muted {
+    stroke: var(--color-border-muted);
+  }
   .stroke-gray-800 {
     stroke: var(--color-gray-800);
   }
@@ -2107,6 +2399,12 @@
   .py-12 {
     padding-block: var(--spacing-12);
   }
+  .pt-3 {
+    padding-top: var(--spacing-3);
+  }
+  .pt-4 {
+    padding-top: var(--spacing-4);
+  }
   .pt-\[60px\] {
     padding-top: 60px;
   }
@@ -2134,6 +2432,9 @@
   .pb-2 {
     padding-bottom: var(--spacing-2);
   }
+  .pb-3 {
+    padding-bottom: var(--spacing-3);
+  }
   .pb-4 {
     padding-bottom: var(--spacing-4);
   }
@@ -2143,6 +2444,9 @@
   .pl-3 {
     padding-left: var(--spacing-3);
   }
+  .pl-4 {
+    padding-left: var(--spacing-4);
+  }
   .pl-5 {
     padding-left: var(--spacing-5);
   }
@@ -2226,6 +2530,9 @@
   .text-\[1rem\] {
     font-size: 1rem;
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .text-\[length\:var\(--control-text-lg\)\] {
     font-size: var(--control-text-lg);
   }
@@ -2282,6 +2589,10 @@
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
   }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -2310,6 +2621,9 @@
   .text-action-secondary {
     color: var(--color-action-secondary);
   }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -2322,9 +2636,6 @@
   .text-blue-900 {
     color: var(--color-blue-900);
   }
-  .text-brand-dark {
-    color: var(--color-brand-dark);
-  }
   .text-brand-light {
     color: var(--color-brand-light);
   }
@@ -2346,9 +2657,6 @@
   .text-feedback-warning-text {
     color: var(--color-feedback-warning-text);
   }
-  .text-gray-200 {
-    color: var(--color-gray-200);
-  }
   .text-gray-300 {
     color: var(--color-gray-300);
   }
@@ -2382,6 +2690,9 @@
   .text-neutral-white {
     color: var(--color-neutral-white);
   }
+  .text-orange-500 {
+    color: var(--color-orange-500);
+  }
   .text-orange-600 {
     color: var(--color-orange-600);
   }
@@ -2424,6 +2735,9 @@
   .text-text-onPrimary {
     color: var(--color-text-onPrimary);
   }
+  .text-text-placeholder {
+    color: var(--color-text-placeholder);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -2442,6 +2756,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2468,6 +2785,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-30 {
+    opacity: 30%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -2594,6 +2914,10 @@
     --tw-blur: blur(8px);
     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,);
   }
+  .blur-\[0\.5px\] {
+    --tw-blur: blur(0.5px);
+    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,);
+  }
   .drop-shadow-lg {
     --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
     --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
@@ -2608,16 +2932,14 @@
   }
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
-    -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,);
   }
   .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;
+    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, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -2709,6 +3031,40 @@
       outline-color: var(--color-feedback-error-border);
     }
   }
+  .group-hover\:h-1 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        height: var(--spacing-1);
+      }
+    }
+  }
+  .group-hover\:w-1 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        width: var(--spacing-1);
+      }
+    }
+  }
+  .group-hover\:scale-105 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-scale-x: 105%;
+        --tw-scale-y: 105%;
+        --tw-scale-z: 105%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .group-hover\:bg-action-primary\/50 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #444ae1 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-action-primary) 50%, transparent);
+        }
+      }
+    }
+  }
   .group-hover\:bg-background-hover {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2730,6 +3086,13 @@
       }
     }
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-invalid\:group-hover\:bg-red-200 {
     &:is(:where(.group):invalid *) {
       &:is(:where(.group):hover *) {
@@ -2866,15 +3229,14 @@
       height: 5px;
     }
   }
-  .after\:bg-border-default {
+  .after\:bg-border-muted {
     &::after {
       content: var(--tw-content);
-      background-color: var(--color-border-default);
+      background-color: var(--color-border-muted);
     }
   }
   .after\:content-\[\'\'\] {
     &::after {
-      content: var(--tw-content);
       --tw-content: '';
       content: var(--tw-content);
     }
@@ -2889,6 +3251,12 @@
       margin-left: var(--spacing-0);
     }
   }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
   .visited\:text-action-primary {
     &:visited {
       color: var(--color-action-primary);
@@ -2958,6 +3326,13 @@
       }
     }
   }
+  .hover\:border-border-muted {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-muted);
+      }
+    }
+  }
   .hover\:bg-action-primary-hover {
     &:hover {
       @media (hover: hover) {
@@ -2982,6 +3357,13 @@
       }
     }
   }
+  .hover\:bg-background-muted {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-muted);
+      }
+    }
+  }
   .hover\:bg-black\/10 {
     &:hover {
       @media (hover: hover) {
@@ -3187,7 +3569,7 @@
       padding: 0;
       margin: 0;
       overflow: visible;
-      clip: auto;
+      clip-path: none;
       white-space: normal;
     }
   }
@@ -3206,6 +3588,11 @@
       left: var(--spacing-4);
     }
   }
+  .focus\:border-transparent {
+    &:focus {
+      border-color: transparent;
+    }
+  }
   .focus\:bg-background-hover {
     &:focus {
       background-color: var(--color-background-hover);
@@ -3222,6 +3609,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-action-primary {
+    &:focus {
+      --tw-ring-color: var(--color-action-primary);
+    }
+  }
   .focus\:ring-border-focus {
     &:focus {
       --tw-ring-color: var(--color-border-focus);
@@ -3349,91 +3741,469 @@
       background-color: var(--color-gray-100);
     }
   }
-  .sm\:grid {
+  .sm\:col-auto {
     @media (width >= 40rem) {
-      display: grid;
+      grid-column: auto;
     }
   }
-  .sm\:hidden {
+  .sm\:col-span-1 {
     @media (width >= 40rem) {
-      display: none;
-    }
-  }
-  .md\:relative {
-    @media (width >= 48rem) {
-      position: relative;
+      grid-column: span 1 / span 1;
     }
   }
-  .md\:block {
-    @media (width >= 48rem) {
-      display: block;
+  .sm\:col-span-2 {
+    @media (width >= 40rem) {
+      grid-column: span 2 / span 2;
     }
   }
-  .md\:flex {
-    @media (width >= 48rem) {
-      display: flex;
+  .sm\:col-span-3 {
+    @media (width >= 40rem) {
+      grid-column: span 3 / span 3;
     }
   }
-  .md\:grid {
-    @media (width >= 48rem) {
-      display: grid;
+  .sm\:col-span-4 {
+    @media (width >= 40rem) {
+      grid-column: span 4 / span 4;
     }
   }
-  .md\:hidden {
-    @media (width >= 48rem) {
-      display: none;
+  .sm\:col-span-5 {
+    @media (width >= 40rem) {
+      grid-column: span 5 / span 5;
     }
   }
-  .md\:h-screen {
-    @media (width >= 48rem) {
-      height: 100vh;
+  .sm\:col-span-6 {
+    @media (width >= 40rem) {
+      grid-column: span 6 / span 6;
     }
   }
-  .md\:w-\[50\%\] {
-    @media (width >= 48rem) {
-      width: 50%;
+  .sm\:col-span-7 {
+    @media (width >= 40rem) {
+      grid-column: span 7 / span 7;
     }
   }
-  .md\:w-\[456px\] {
-    @media (width >= 48rem) {
-      width: 456px;
+  .sm\:col-span-8 {
+    @media (width >= 40rem) {
+      grid-column: span 8 / span 8;
     }
   }
-  .md\:translate-x-0 {
-    @media (width >= 48rem) {
-      --tw-translate-x: var(--spacing-0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+  .sm\:col-span-9 {
+    @media (width >= 40rem) {
+      grid-column: span 9 / span 9;
     }
   }
-  .md\:border-x {
-    @media (width >= 48rem) {
-      border-inline-style: var(--tw-border-style);
-      border-inline-width: 1px;
+  .sm\:col-span-10 {
+    @media (width >= 40rem) {
+      grid-column: span 10 / span 10;
     }
   }
-  .md\:border-x-0 {
-    @media (width >= 48rem) {
-      border-inline-style: var(--tw-border-style);
-      border-inline-width: 0px;
+  .sm\:col-span-11 {
+    @media (width >= 40rem) {
+      grid-column: span 11 / span 11;
     }
   }
-  .md\:px-6 {
-    @media (width >= 48rem) {
-      padding-inline: var(--spacing-6);
+  .sm\:col-span-12 {
+    @media (width >= 40rem) {
+      grid-column: span 12 / span 12;
     }
   }
-  .md\:py-6 {
-    @media (width >= 48rem) {
-      padding-block: var(--spacing-6);
+  .sm\:col-span-full {
+    @media (width >= 40rem) {
+      grid-column: 1 / -1;
     }
   }
-  .lg\:grid {
-    @media (width >= 64rem) {
+  .sm\:grid {
+    @media (width >= 40rem) {
       display: grid;
     }
   }
-  .lg\:hidden {
-    @media (width >= 64rem) {
+  .sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+  .sm\:grid-cols-1 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-3 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-4 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-5 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-6 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-7 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-8 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-9 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-10 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-11 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-12 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  .sm\:grid-cols-none {
+    @media (width >= 40rem) {
+      grid-template-columns: none;
+    }
+  }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:items-start {
+    @media (width >= 40rem) {
+      align-items: flex-start;
+    }
+  }
+  .sm\:justify-between {
+    @media (width >= 40rem) {
+      justify-content: space-between;
+    }
+  }
+  .md\:relative {
+    @media (width >= 48rem) {
+      position: relative;
+    }
+  }
+  .md\:col-auto {
+    @media (width >= 48rem) {
+      grid-column: auto;
+    }
+  }
+  .md\:col-span-1 {
+    @media (width >= 48rem) {
+      grid-column: span 1 / span 1;
+    }
+  }
+  .md\:col-span-2 {
+    @media (width >= 48rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
+  .md\:col-span-3 {
+    @media (width >= 48rem) {
+      grid-column: span 3 / span 3;
+    }
+  }
+  .md\:col-span-4 {
+    @media (width >= 48rem) {
+      grid-column: span 4 / span 4;
+    }
+  }
+  .md\:col-span-5 {
+    @media (width >= 48rem) {
+      grid-column: span 5 / span 5;
+    }
+  }
+  .md\:col-span-6 {
+    @media (width >= 48rem) {
+      grid-column: span 6 / span 6;
+    }
+  }
+  .md\:col-span-7 {
+    @media (width >= 48rem) {
+      grid-column: span 7 / span 7;
+    }
+  }
+  .md\:col-span-8 {
+    @media (width >= 48rem) {
+      grid-column: span 8 / span 8;
+    }
+  }
+  .md\:col-span-9 {
+    @media (width >= 48rem) {
+      grid-column: span 9 / span 9;
+    }
+  }
+  .md\:col-span-10 {
+    @media (width >= 48rem) {
+      grid-column: span 10 / span 10;
+    }
+  }
+  .md\:col-span-11 {
+    @media (width >= 48rem) {
+      grid-column: span 11 / span 11;
+    }
+  }
+  .md\:col-span-12 {
+    @media (width >= 48rem) {
+      grid-column: span 12 / span 12;
+    }
+  }
+  .md\:col-span-full {
+    @media (width >= 48rem) {
+      grid-column: 1 / -1;
+    }
+  }
+  .md\:my-8 {
+    @media (width >= 48rem) {
+      margin-block: var(--spacing-8);
+    }
+  }
+  .md\:my-12 {
+    @media (width >= 48rem) {
+      margin-block: var(--spacing-12);
+    }
+  }
+  .md\:mb-4 {
+    @media (width >= 48rem) {
+      margin-bottom: var(--spacing-4);
+    }
+  }
+  .md\:mb-6 {
+    @media (width >= 48rem) {
+      margin-bottom: var(--spacing-6);
+    }
+  }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:grid {
+    @media (width >= 48rem) {
+      display: grid;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:h-screen {
+    @media (width >= 48rem) {
+      height: 100vh;
+    }
+  }
+  .md\:w-\[50\%\] {
+    @media (width >= 48rem) {
+      width: 50%;
+    }
+  }
+  .md\:w-\[456px\] {
+    @media (width >= 48rem) {
+      width: 456px;
+    }
+  }
+  .md\:translate-x-0 {
+    @media (width >= 48rem) {
+      --tw-translate-x: var(--spacing-0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .md\:grid-cols-1 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      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-5 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-6 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-7 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-8 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-9 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-10 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-11 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-12 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-none {
+    @media (width >= 48rem) {
+      grid-template-columns: none;
+    }
+  }
+  .md\:gap-6 {
+    @media (width >= 48rem) {
+      gap: var(--spacing-6);
+    }
+  }
+  .md\:px-6 {
+    @media (width >= 48rem) {
+      padding-inline: var(--spacing-6);
+    }
+  }
+  .md\:py-6 {
+    @media (width >= 48rem) {
+      padding-block: var(--spacing-6);
+    }
+  }
+  .lg\:sticky {
+    @media (width >= 64rem) {
+      position: sticky;
+    }
+  }
+  .lg\:top-20 {
+    @media (width >= 64rem) {
+      top: var(--spacing-20);
+    }
+  }
+  .lg\:col-auto {
+    @media (width >= 64rem) {
+      grid-column: auto;
+    }
+  }
+  .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\:col-span-3 {
+    @media (width >= 64rem) {
+      grid-column: span 3 / span 3;
+    }
+  }
+  .lg\:col-span-4 {
+    @media (width >= 64rem) {
+      grid-column: span 4 / span 4;
+    }
+  }
+  .lg\:col-span-5 {
+    @media (width >= 64rem) {
+      grid-column: span 5 / span 5;
+    }
+  }
+  .lg\:col-span-6 {
+    @media (width >= 64rem) {
+      grid-column: span 6 / span 6;
+    }
+  }
+  .lg\:col-span-7 {
+    @media (width >= 64rem) {
+      grid-column: span 7 / span 7;
+    }
+  }
+  .lg\:col-span-8 {
+    @media (width >= 64rem) {
+      grid-column: span 8 / span 8;
+    }
+  }
+  .lg\:col-span-9 {
+    @media (width >= 64rem) {
+      grid-column: span 9 / span 9;
+    }
+  }
+  .lg\:col-span-10 {
+    @media (width >= 64rem) {
+      grid-column: span 10 / span 10;
+    }
+  }
+  .lg\:col-span-11 {
+    @media (width >= 64rem) {
+      grid-column: span 11 / span 11;
+    }
+  }
+  .lg\:col-span-12 {
+    @media (width >= 64rem) {
+      grid-column: span 12 / span 12;
+    }
+  }
+  .lg\:col-span-full {
+    @media (width >= 64rem) {
+      grid-column: 1 / -1;
+    }
+  }
+  .lg\:grid {
+    @media (width >= 64rem) {
+      display: grid;
+    }
+  }
+  .lg\:hidden {
+    @media (width >= 64rem) {
       display: none;
     }
   }
@@ -3442,6 +4212,141 @@
       width: 75%;
     }
   }
+  .lg\:grid-cols-1 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-5 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-6 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-7 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-8 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-9 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-10 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-11 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-12 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-none {
+    @media (width >= 64rem) {
+      grid-template-columns: none;
+    }
+  }
+  .xl\:col-auto {
+    @media (width >= 80rem) {
+      grid-column: auto;
+    }
+  }
+  .xl\:col-span-1 {
+    @media (width >= 80rem) {
+      grid-column: span 1 / span 1;
+    }
+  }
+  .xl\:col-span-2 {
+    @media (width >= 80rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
+  .xl\:col-span-3 {
+    @media (width >= 80rem) {
+      grid-column: span 3 / span 3;
+    }
+  }
+  .xl\:col-span-4 {
+    @media (width >= 80rem) {
+      grid-column: span 4 / span 4;
+    }
+  }
+  .xl\:col-span-5 {
+    @media (width >= 80rem) {
+      grid-column: span 5 / span 5;
+    }
+  }
+  .xl\:col-span-6 {
+    @media (width >= 80rem) {
+      grid-column: span 6 / span 6;
+    }
+  }
+  .xl\:col-span-7 {
+    @media (width >= 80rem) {
+      grid-column: span 7 / span 7;
+    }
+  }
+  .xl\:col-span-8 {
+    @media (width >= 80rem) {
+      grid-column: span 8 / span 8;
+    }
+  }
+  .xl\:col-span-9 {
+    @media (width >= 80rem) {
+      grid-column: span 9 / span 9;
+    }
+  }
+  .xl\:col-span-10 {
+    @media (width >= 80rem) {
+      grid-column: span 10 / span 10;
+    }
+  }
+  .xl\:col-span-11 {
+    @media (width >= 80rem) {
+      grid-column: span 11 / span 11;
+    }
+  }
+  .xl\:col-span-12 {
+    @media (width >= 80rem) {
+      grid-column: span 12 / span 12;
+    }
+  }
+  .xl\:col-span-full {
+    @media (width >= 80rem) {
+      grid-column: 1 / -1;
+    }
+  }
   .xl\:grid {
     @media (width >= 80rem) {
       display: grid;
@@ -3452,6 +4357,206 @@
       display: none;
     }
   }
+  .xl\:grid-cols-1 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-2 {
+    @media (width >= 80rem) {
+      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));
+    }
+  }
+  .xl\:grid-cols-5 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-6 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-7 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-8 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-9 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-10 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-11 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-12 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-none {
+    @media (width >= 80rem) {
+      grid-template-columns: none;
+    }
+  }
+  .\32 xl\:col-auto {
+    @media (width >= 96rem) {
+      grid-column: auto;
+    }
+  }
+  .\32 xl\:col-span-1 {
+    @media (width >= 96rem) {
+      grid-column: span 1 / span 1;
+    }
+  }
+  .\32 xl\:col-span-2 {
+    @media (width >= 96rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
+  .\32 xl\:col-span-3 {
+    @media (width >= 96rem) {
+      grid-column: span 3 / span 3;
+    }
+  }
+  .\32 xl\:col-span-4 {
+    @media (width >= 96rem) {
+      grid-column: span 4 / span 4;
+    }
+  }
+  .\32 xl\:col-span-5 {
+    @media (width >= 96rem) {
+      grid-column: span 5 / span 5;
+    }
+  }
+  .\32 xl\:col-span-6 {
+    @media (width >= 96rem) {
+      grid-column: span 6 / span 6;
+    }
+  }
+  .\32 xl\:col-span-7 {
+    @media (width >= 96rem) {
+      grid-column: span 7 / span 7;
+    }
+  }
+  .\32 xl\:col-span-8 {
+    @media (width >= 96rem) {
+      grid-column: span 8 / span 8;
+    }
+  }
+  .\32 xl\:col-span-9 {
+    @media (width >= 96rem) {
+      grid-column: span 9 / span 9;
+    }
+  }
+  .\32 xl\:col-span-10 {
+    @media (width >= 96rem) {
+      grid-column: span 10 / span 10;
+    }
+  }
+  .\32 xl\:col-span-11 {
+    @media (width >= 96rem) {
+      grid-column: span 11 / span 11;
+    }
+  }
+  .\32 xl\:col-span-12 {
+    @media (width >= 96rem) {
+      grid-column: span 12 / span 12;
+    }
+  }
+  .\32 xl\:col-span-full {
+    @media (width >= 96rem) {
+      grid-column: 1 / -1;
+    }
+  }
+  .\32 xl\:grid-cols-1 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-2 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-3 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-4 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-5 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-6 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-7 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-8 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-9 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-10 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-11 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-12 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-none {
+    @media (width >= 96rem) {
+      grid-template-columns: none;
+    }
+  }
   .dark\:border-blue-800 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-blue-800);
@@ -3647,14 +4752,12 @@
   .dark\:backdrop-blur-2xl {
     @media (prefers-color-scheme: dark) {
       --tw-backdrop-blur: blur(var(--blur-2xl));
-      -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,);
     }
   }
   .dark\:backdrop-saturate-200 {
     @media (prefers-color-scheme: dark) {
       --tw-backdrop-saturate: saturate(200%);
-      -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,);
     }
   }
@@ -4270,7 +5373,6 @@
   .\[\&\:empty\]\:before\:content-\[attr\(data-placeholder\)\] {
     &:empty {
       &::before {
-        content: var(--tw-content);
         --tw-content: attr(data-placeholder);
         content: var(--tw-content);
       }
@@ -4659,11 +5761,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-content {
-  syntax: "*";
-  initial-value: "";
-  inherits: false;
-}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -4679,6 +5776,11 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -4689,6 +5791,16 @@
     opacity: 0.5;
   }
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -4763,10 +5875,10 @@
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
-      --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-content: "";
     }
   }
 }