@dinofront/design_system 0.1.4 → 1.1.0

package/dist/styles.css

@@ -52,9 +52,11 @@
     --color-purple-800: #0e2ab2;
     --color-purple-900: #081fa6;
     --color-pink-50: #ffd4e4;
+    --color-pink-200: #fe7daf;
     --color-pink-300: #fd2779;
     --color-pink-500: #ca024f;
     --color-pink-700: #a2023f;
+    --color-pink-800: #79012f;
     --color-pink-900: #4a0a20;
     --color-gray-50: #f5f7fa;
     --color-gray-100: #f2f5f8;
@@ -92,7 +94,9 @@
     --radius-xl: 16px;
     --radius-2xl: 20px;
     --radius-3xl: 24px;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -105,6 +109,7 @@
     --color-brand-300: #8ecc69;
     --color-brand-200: #9cd27c;
     --color-brand-100: #aad98f;
+    --color-brand-40: #cae7b9;
     --color-brand-20: #edf7e8;
     --radius-full: 9999px;
     --shadow-z1: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -176,6 +181,7 @@
     --color-icon-info: var(--color-blue-600);
     --color-icon-danger: var(--color-red-800);
     --color-icon-warning: var(--color-yellow-800);
+    --animate-skeleton-wave: skeleton-wave 1.6s linear infinite;
   }
 }
 @layer base {
@@ -333,6 +339,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -377,6 +386,9 @@
   .top-0\.5 {
     top: calc(var(--spacing) * 0.5);
   }
+  .top-1 {
+    top: var(--spacing);
+  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
@@ -389,6 +401,12 @@
   .right-0 {
     right: 0px;
   }
+  .right-1\.5 {
+    right: calc(var(--spacing) * 1.5);
+  }
+  .right-1\/2 {
+    right: calc(1 / 2 * 100%);
+  }
   .right-full {
     right: 100%;
   }
@@ -398,6 +416,9 @@
   .bottom-0 {
     bottom: 0px;
   }
+  .bottom-1\/2 {
+    bottom: calc(1 / 2 * 100%);
+  }
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
@@ -410,6 +431,9 @@
   .left-0\.5 {
     left: calc(var(--spacing) * 0.5);
   }
+  .left-1 {
+    left: var(--spacing);
+  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
@@ -476,6 +500,12 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-\[70vh\] {
+    margin-top: 70vh;
+  }
   .-mr-0\.5 {
     margin-right: calc(var(--spacing) * -0.5);
   }
@@ -494,6 +524,12 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-\[0\.4em\] {
+    margin-bottom: 0.4em;
+  }
   .-ml-1\.5 {
     margin-left: calc(var(--spacing) * -1.5);
   }
@@ -527,6 +563,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .\[display\:-webkit-box\] {
+    display: -webkit-box;
+  }
   .block {
     display: block;
   }
@@ -554,6 +593,22 @@
   .table {
     display: table;
   }
+  .size-1 {
+    width: var(--spacing);
+    height: var(--spacing);
+  }
+  .size-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+  }
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+  .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -574,9 +629,24 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
   .h-0 {
     height: 0px;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1 {
     height: var(--spacing);
   }
@@ -637,9 +707,18 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-\[1em\] {
+    height: 1em;
+  }
   .h-\[2px\] {
     height: 2px;
   }
@@ -664,12 +743,18 @@
   .h-\[600px\] {
     height: 600px;
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
   .h-px {
     height: 1px;
   }
+  .max-h-54 {
+    max-height: calc(var(--spacing) * 54);
+  }
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
@@ -682,12 +767,18 @@
   .max-h-full {
     max-height: 100%;
   }
+  .min-h-0 {
+    min-height: 0px;
+  }
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
   .w-0 {
     width: 0px;
   }
+  .w-0\.5 {
+    width: calc(var(--spacing) * 0.5);
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -760,6 +851,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-90 {
+    width: calc(var(--spacing) * 90);
+  }
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
@@ -772,15 +866,27 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[480px\] {
+    width: 480px;
+  }
   .w-\[560px\] {
     width: 560px;
   }
+  .w-\[640px\] {
+    width: 640px;
+  }
   .w-\[720px\] {
     width: 720px;
   }
+  .w-\[800px\] {
+    width: 800px;
+  }
   .w-\[min\(400px\,calc\(100vw-2rem\)\)\] {
     width: min(400px, calc(100vw - 2rem));
   }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
@@ -799,6 +905,9 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-60 {
+    max-width: calc(var(--spacing) * 60);
+  }
   .max-w-\[140px\] {
     max-width: 140px;
   }
@@ -817,6 +926,18 @@
   .min-w-0 {
     min-width: 0px;
   }
+  .min-w-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
+  .min-w-5 {
+    min-width: calc(var(--spacing) * 5);
+  }
+  .min-w-6 {
+    min-width: calc(var(--spacing) * 6);
+  }
+  .min-w-7 {
+    min-width: calc(var(--spacing) * 7);
+  }
   .min-w-9 {
     min-width: calc(var(--spacing) * 9);
   }
@@ -859,17 +980,63 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .basis-0 {
+    flex-basis: 0px;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
+  .origin-\[0\%_55\%\] {
+    transform-origin: 0% 55%;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-0 {
+    --tw-translate-x: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    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);
   }
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-0 {
+    --tw-translate-y: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-full {
+    --tw-translate-y: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-y-\[0\.6\] {
+    --tw-scale-y: 0.6;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
+  .rotate-45 {
+    rotate: 45deg;
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -879,6 +1046,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -891,18 +1061,36 @@
   .cursor-text {
     cursor: text;
   }
+  .resize {
+    resize: both;
+  }
   .resize-y {
     resize: vertical;
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .list-disc {
     list-style-type: disc;
   }
+  .\[appearance\:textfield\] {
+    appearance: textfield;
+  }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
   .grid-cols-\[repeat\(auto-fill\,minmax\(110px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
   }
+  .grid-rows-\[0fr\] {
+    grid-template-rows: 0fr;
+  }
+  .grid-rows-\[1fr\] {
+    grid-template-rows: 1fr;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -912,6 +1100,9 @@
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -969,12 +1160,18 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
+  .gap-16 {
+    gap: calc(var(--spacing) * 16);
+  }
   :where(.space-y-3 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
@@ -993,11 +1190,25 @@
   .self-center {
     align-self: center;
   }
+  .self-start {
+    align-self: flex-start;
+  }
+  .self-stretch {
+    align-self: stretch;
+  }
+  .\!truncate {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -1007,6 +1218,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1082,6 +1296,10 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .\!border-border-default {
     border-color: var(--color-border-default) !important;
   }
@@ -1151,6 +1369,9 @@
   .border-red-600 {
     border-color: var(--color-red-600);
   }
+  .border-red-800 {
+    border-color: var(--color-red-800);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1235,6 +1456,9 @@
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -1262,6 +1486,9 @@
   .bg-fg-default {
     background-color: var(--color-fg-default);
   }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
@@ -1307,6 +1534,9 @@
   .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);
   }
@@ -1325,9 +1555,24 @@
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
   .bg-yellow-600 {
     background-color: var(--color-yellow-600);
   }
+  .\[mask-image\:linear-gradient\(to_right\,transparent\,black_16px\,black_calc\(100\%-16px\)\,transparent\)\] {
+    mask-image: linear-gradient(to right,transparent,black 16px,black calc(100% - 16px),transparent);
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke-bg-subtle {
+    stroke: var(--color-bg-subtle);
+  }
+  .stroke-brand-500 {
+    stroke: var(--color-brand-500);
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -1361,6 +1606,12 @@
   .p-12 {
     padding: calc(var(--spacing) * 12);
   }
+  .p-16 {
+    padding: calc(var(--spacing) * 16);
+  }
+  .px-0 {
+    padding-inline: 0px;
+  }
   .px-0\.5 {
     padding-inline: calc(var(--spacing) * 0.5);
   }
@@ -1421,6 +1672,9 @@
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1607,6 +1861,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .tab-1 {
+    tab-size: 1;
+  }
   .text-bg-default {
     color: var(--color-bg-default);
   }
@@ -1664,6 +1921,9 @@
   .text-fg-warning {
     color: var(--color-fg-warning);
   }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
   .text-gray-900 {
     color: var(--color-gray-900);
   }
@@ -1682,6 +1942,9 @@
   .text-pink-700 {
     color: var(--color-pink-700);
   }
+  .text-pink-800 {
+    color: var(--color-pink-800);
+  }
   .text-purple-700 {
     color: var(--color-purple-700);
   }
@@ -1721,6 +1984,9 @@
   .text-yellow-300 {
     color: var(--color-yellow-300);
   }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
@@ -1790,6 +2056,16 @@
     --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);
   }
+  .ring-4 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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-brand-40\/80 {
+    --tw-ring-color: color-mix(in srgb, #cae7b9 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-brand-40) 80%, transparent);
+    }
+  }
   .ring-brand-500 {
     --tw-ring-color: var(--color-brand-500);
   }
@@ -1799,6 +2075,21 @@
       --tw-ring-color: color-mix(in oklab, var(--color-brand-500) 40%, transparent);
     }
   }
+  .ring-gray-100\/80 {
+    --tw-ring-color: color-mix(in srgb, #f2f5f8 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-100) 80%, transparent);
+    }
+  }
+  .ring-red-100 {
+    --tw-ring-color: var(--color-red-100);
+  }
+  .ring-red-100\/80 {
+    --tw-ring-color: color-mix(in srgb, #ffd5d8 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-red-100) 80%, transparent);
+    }
+  }
   .ring-white {
     --tw-ring-color: var(--color-white);
   }
@@ -1814,6 +2105,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --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,);
+  }
   .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,);
   }
@@ -1822,6 +2117,21 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[flex-basis\] {
+    transition-property: flex-basis;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[grid-template-rows\] {
+    transition-property: grid-template-rows;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[stroke-dashoffset\] {
+    transition-property: stroke-dashoffset;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[width\] {
     transition-property: width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1855,6 +2165,25 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .duration-700 {
+    --tw-duration: 700ms;
+    transition-duration: 700ms;
+  }
+  .ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .will-change-transform {
+    will-change: transform;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1863,6 +2192,12 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[-webkit-box-orient\:vertical\] {
+    -webkit-box-orient: vertical;
+  }
+  .\[writing-mode\:vertical-rl\] {
+    writing-mode: vertical-rl;
+  }
   .peer-checked\:translate-x-4:is(:where(.peer):checked ~ *) {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1871,6 +2206,10 @@
     --tw-translate-x: calc(var(--spacing) * 5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .peer-checked\:translate-x-8:is(:where(.peer):checked ~ *) {
+    --tw-translate-x: calc(var(--spacing) * 8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .peer-checked\:border-border-strong:is(:where(.peer):checked ~ *) {
     border-color: var(--color-border-strong);
   }
@@ -1883,6 +2222,9 @@
   .peer-checked\:bg-brand-500:is(:where(.peer):checked ~ *) {
     background-color: var(--color-brand-500);
   }
+  .peer-checked\:bg-gray-700:is(:where(.peer):checked ~ *) {
+    background-color: var(--color-gray-700);
+  }
   @media (hover: hover) {
     .peer-hover\:border-fg-tertiary:is(:where(.peer):hover ~ *) {
       border-color: var(--color-fg-tertiary);
@@ -1943,6 +2285,51 @@
     content: var(--tw-content);
     background-color: var(--color-brand-500);
   }
+  .after\:absolute::after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  .after\:inset-0::after {
+    content: var(--tw-content);
+    inset: 0px;
+  }
+  .after\:-translate-x-full::after {
+    content: var(--tw-content);
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .after\:animate-skeleton-wave::after {
+    content: var(--tw-content);
+    animation: var(--animate-skeleton-wave);
+  }
+  .after\:bg-gradient-to-r::after {
+    content: var(--tw-content);
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .after\:from-transparent::after {
+    content: var(--tw-content);
+    --tw-gradient-from: 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));
+  }
+  .after\:via-white\/60::after {
+    content: var(--tw-content);
+    --tw-gradient-via: color-mix(in srgb, #fefefe 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+    --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);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+  .after\:to-transparent::after {
+    content: var(--tw-content);
+    --tw-gradient-to: 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));
+  }
+  .after\:content-\[\'\'\]::after {
+    --tw-content: '';
+    content: var(--tw-content);
+  }
   .last\:border-r-0:last-child {
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
@@ -2052,12 +2439,18 @@
     .hover\:text-fg-default:hover {
       color: var(--color-fg-default);
     }
+    .hover\:text-fg-secondary:hover {
+      color: var(--color-fg-secondary);
+    }
     .hover\:text-white:hover {
       color: var(--color-white);
     }
     .hover\:no-underline:hover {
       text-decoration-line: none;
     }
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
     .hover\:shadow-z1:hover {
       --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.06));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2066,6 +2459,14 @@
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.08)), 0 1px 2px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.04));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
+    .hover\:brightness-90:hover {
+      --tw-brightness: brightness(90%);
+      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,);
+    }
+    .hover\:brightness-95:hover {
+      --tw-brightness: brightness(95%);
+      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,);
+    }
   }
   .focus\:border-brand-500:focus {
     border-color: var(--color-brand-500);
@@ -2120,6 +2521,9 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .active\:bg-bg-container:active {
+    background-color: var(--color-bg-container);
+  }
   .active\:bg-bg-subtle:active {
     background-color: var(--color-bg-subtle);
   }
@@ -2129,6 +2533,14 @@
   .active\:bg-red-900:active {
     background-color: var(--color-red-900);
   }
+  .active\:brightness-80:active {
+    --tw-brightness: brightness(80%);
+    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,);
+  }
+  .active\:brightness-90:active {
+    --tw-brightness: brightness(90%);
+    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,);
+  }
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -2149,6 +2561,11 @@
       background-color: transparent;
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:transition-none {
+      transition-property: none;
+    }
+  }
   .dark\:bg-brand-500\/10:where(.dark, .dark *) {
     background-color: color-mix(in srgb, #72bf44 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2215,9 +2632,15 @@
   .dark\:text-green-300:where(.dark, .dark *) {
     color: var(--color-green-300);
   }
+  .dark\:text-pink-200:where(.dark, .dark *) {
+    color: var(--color-pink-200);
+  }
   .dark\:text-pink-300:where(.dark, .dark *) {
     color: var(--color-pink-300);
   }
+  .dark\:text-purple-200:where(.dark, .dark *) {
+    color: var(--color-purple-200);
+  }
   .dark\:text-purple-300:where(.dark, .dark *) {
     color: var(--color-purple-300);
   }
@@ -2230,6 +2653,18 @@
   .dark\:peer-checked\:bg-brand-500:where(.dark, .dark *):is(:where(.peer):checked ~ *) {
     background-color: var(--color-brand-500);
   }
+  .dark\:peer-checked\:bg-gray-900:where(.dark, .dark *):is(:where(.peer):checked ~ *) {
+    background-color: var(--color-gray-900);
+  }
+  .dark\:after\:via-white\/10:where(.dark, .dark *)::after {
+    content: var(--tw-content);
+    --tw-gradient-via: color-mix(in srgb, #fefefe 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+    --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);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .\[\&_svg\]\:opacity-0 svg {
     opacity: 0%;
   }
@@ -2256,6 +2691,15 @@
   .\[\&_thead\]\:bg-brand-20 thead {
     background-color: var(--color-brand-20);
   }
+  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
+    appearance: none;
+  }
+  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
+    appearance: none;
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+    display: none;
+  }
   .\[\&\>\*\]\:relative > * {
     position: relative;
   }
@@ -2290,6 +2734,20 @@
   .\[\&\>\*\:not\(\:first-child\)\]\:-ml-px > :not(:first-child) {
     margin-left: -1px;
   }
+  .\[\&\>\*\:not\(\:last-child\)\]\:border-b > :not(:last-child) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .\[\&\>\*\:not\(\:last-child\)\]\:border-border-default > :not(:last-child) {
+    border-color: var(--color-border-default);
+  }
+  .\[\&\>li\:not\(\:last-child\)\]\:border-b > li:not(:last-child) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .\[\&\>li\:not\(\:last-child\)\]\:border-border-default > li:not(:last-child) {
+    border-color: var(--color-border-default);
+  }
   .\[\&\>span\]\:opacity-0 > span {
     opacity: 0%;
   }
@@ -2348,6 +2806,17 @@
     font-family: var(--font-sans);
   }
 }
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  60% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -2363,6 +2832,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -2557,22 +3041,76 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
   inherits: false;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
 @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 {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -2618,7 +3156,17 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
       --tw-content: "";
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
     }
   }
 }