@dinofront/design_system 1.0.0 → 1.2.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,6 +94,7 @@
     --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;
@@ -106,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);
@@ -382,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%);
   }
@@ -394,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%;
   }
@@ -403,6 +416,9 @@
   .bottom-0 {
     bottom: 0px;
   }
+  .bottom-1\/2 {
+    bottom: calc(1 / 2 * 100%);
+  }
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
@@ -415,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%);
   }
@@ -481,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);
   }
@@ -499,6 +524,9 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .mb-\[0\.4em\] {
     margin-bottom: 0.4em;
   }
@@ -535,6 +563,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .\[display\:-webkit-box\] {
+    display: -webkit-box;
+  }
   .block {
     display: block;
   }
@@ -562,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);
@@ -582,6 +629,10 @@
     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);
@@ -593,6 +644,9 @@
   .h-0 {
     height: 0px;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1 {
     height: var(--spacing);
   }
@@ -653,6 +707,12 @@
   .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);
   }
@@ -692,6 +752,9 @@
   .h-px {
     height: 1px;
   }
+  .max-h-54 {
+    max-height: calc(var(--spacing) * 54);
+  }
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
@@ -704,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);
   }
@@ -797,12 +866,21 @@
   .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));
   }
@@ -827,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;
   }
@@ -845,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);
   }
@@ -887,6 +980,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .basis-0 {
+    flex-basis: 0px;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -897,10 +993,34 @@
     --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%;
@@ -914,6 +1034,9 @@
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
+  .rotate-45 {
+    rotate: 45deg;
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -938,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;
   }
@@ -959,6 +1100,9 @@
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1016,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));
@@ -1040,14 +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;
   }
@@ -1057,6 +1218,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1205,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;
   }
@@ -1289,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);
   }
@@ -1316,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);
   }
@@ -1361,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);
   }
@@ -1379,9 +1555,15 @@
   .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;
   }
@@ -1424,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);
   }
@@ -1484,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);
   }
@@ -1670,6 +1861,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .tab-1 {
+    tab-size: 1;
+  }
   .text-bg-default {
     color: var(--color-bg-default);
   }
@@ -1727,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);
   }
@@ -1745,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);
   }
@@ -1784,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);
   }
@@ -1853,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);
   }
@@ -1862,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);
   }
@@ -1877,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,);
   }
@@ -1885,6 +2117,16 @@
     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));
@@ -1927,10 +2169,21 @@
     --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;
@@ -1939,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);
@@ -1947,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);
   }
@@ -1959,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);
@@ -2173,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);
@@ -2187,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);
@@ -2241,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);
   }
@@ -2250,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;
   }
@@ -2270,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)) {
@@ -2336,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);
   }
@@ -2351,6 +2653,9 @@
   .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);
@@ -2386,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;
   }
@@ -2420,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%;
   }