@loword/loword-design-system 0.0.7 → 0.0.9

package/dist/index.css

@@ -11,6 +11,7 @@
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-neutral-100: oklch(97% 0 0);
     --color-neutral-200: oklch(92.2% 0 0);
@@ -26,8 +27,6 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-normal: 400;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -177,8 +176,8 @@
     --font-bold: 600;
     --font-extrabold: 700;
     --font-black: 900;
-    --control-height-2xs: 16px;
-    --control-height-xs: 24px;
+    --control-height-2xs: 24px;
+    --control-height-xs: 28px;
     --control-height-sm: 32px;
     --control-height-md: 40px;
     --control-height-lg: 48px;
@@ -233,7 +232,7 @@
     --control-padding-x-badge-xs: var(--spacing_8);
     --control-padding-x-badge-sm: var(--spacing_12);
     --control-padding-x-badge-md: var(--spacing_16);
-    --modal-width-sm: 400px;
+    --modal-width-sm: 420px;
     --modal-width-md: 520px;
     --modal-width-lg: 680px;
     --modal-width-xl: 860px;
@@ -420,6 +419,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }
@@ -453,6 +455,15 @@
   .top-16 {
     top: calc(var(--spacing) * 16);
   }
+  .top-20 {
+    top: calc(var(--spacing) * 20);
+  }
+  .top-\[40\%\] {
+    top: 40%;
+  }
+  .top-\[calc\(50vh-var\(--ld-team-history-navigation-offset\,0px\)\)\] {
+    top: calc(50vh - var(--ld-team-history-navigation-offset,0px));
+  }
   .top-full {
     top: 100%;
   }
@@ -492,30 +503,6 @@
   .left-5 {
     left: calc(var(--spacing) * 5);
   }
-  .toggle-thumb-off-lg {
-    left: var(--toggle-gap);
-  }
-  .toggle-thumb-off-md {
-    left: var(--toggle-gap);
-  }
-  .toggle-thumb-off-sm {
-    left: var(--toggle-gap);
-  }
-  .toggle-thumb-off-xl {
-    left: var(--toggle-gap);
-  }
-  .toggle-thumb-on-lg {
-    left: 22px;
-  }
-  .toggle-thumb-on-md {
-    left: 20px;
-  }
-  .toggle-thumb-on-sm {
-    left: 18px;
-  }
-  .toggle-thumb-on-xl {
-    left: 24px;
-  }
   .z-0 {
     z-index: 0;
   }
@@ -1193,12 +1180,18 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
-  .ml-20 {
-    margin-left: calc(var(--spacing) * 20);
-  }
   .ml-auto {
     margin-left: auto;
   }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .line-clamp-9 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 9;
+  }
   .scrollbar-hide {
     scrollbar-width: none;
     &::-webkit-scrollbar {
@@ -1245,6 +1238,10 @@
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1289,332 +1286,98 @@
     width: 100%;
     height: 100%;
   }
-  .icon-2xs {
-    width: var(--control-icon-2xs);
-    height: var(--control-icon-2xs);
+  .h-\(--cell-size\) {
+    height: var(--cell-size);
   }
-  .icon-lg {
-    width: var(--control-icon-lg);
-    height: var(--control-icon-lg);
+  .h-0 {
+    height: calc(var(--spacing) * 0);
   }
-  .icon-md {
-    width: var(--control-icon-md);
-    height: var(--control-icon-md);
+  .h-1 {
+    height: calc(var(--spacing) * 1);
   }
-  .icon-sm {
-    width: var(--control-icon-sm);
-    height: var(--control-icon-sm);
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
   }
-  .icon-xl {
-    width: var(--control-icon-xl);
-    height: var(--control-icon-xl);
+  .h-2 {
+    height: calc(var(--spacing) * 2);
   }
-  .icon-xs {
-    width: var(--control-icon-xs);
-    height: var(--control-icon-xs);
+  .h-4 {
+    height: calc(var(--spacing) * 4);
   }
-  .spinner-2xs {
-    width: var(--control-size-spinner-2xs);
-    height: var(--control-size-spinner-2xs);
+  .h-5 {
+    height: calc(var(--spacing) * 5);
   }
-  .spinner-lg {
-    width: var(--control-size-spinner-lg);
-    height: var(--control-size-spinner-lg);
+  .h-6 {
+    height: calc(var(--spacing) * 6);
   }
-  .spinner-md {
-    width: var(--control-size-spinner-md);
-    height: var(--control-size-spinner-md);
+  .h-8 {
+    height: calc(var(--spacing) * 8);
   }
-  .spinner-sm {
-    width: var(--control-size-spinner-sm);
-    height: var(--control-size-spinner-sm);
+  .h-9 {
+    height: calc(var(--spacing) * 9);
   }
-  .spinner-xl {
-    width: var(--control-size-spinner-xl);
-    height: var(--control-size-spinner-xl);
+  .h-10 {
+    height: calc(var(--spacing) * 10);
   }
-  .spinner-xs {
-    width: var(--control-size-spinner-xs);
-    height: var(--control-size-spinner-xs);
+  .h-12 {
+    height: calc(var(--spacing) * 12);
   }
-  .toggle-thumb-lg {
-    width: 16px;
-    height: 16px;
+  .h-13 {
+    height: calc(var(--spacing) * 13);
   }
-  .toggle-thumb-md {
-    width: 14px;
-    height: 14px;
+  .h-16 {
+    height: calc(var(--spacing) * 16);
   }
-  .toggle-thumb-sm {
-    width: 12px;
-    height: 12px;
+  .h-20 {
+    height: calc(var(--spacing) * 20);
   }
-  .toggle-thumb-xl {
-    width: 18px;
-    height: 18px;
+  .h-40 {
+    height: calc(var(--spacing) * 40);
   }
-  .toggle-track-lg {
-    width: 40px;
-    height: 20px;
+  .h-45 {
+    height: calc(var(--spacing) * 45);
   }
-  .toggle-track-md {
-    width: 36px;
-    height: 18px;
+  .h-48 {
+    height: calc(var(--spacing) * 48);
   }
-  .toggle-track-sm {
-    width: 32px;
-    height: 16px;
+  .h-64 {
+    height: calc(var(--spacing) * 64);
   }
-  .toggle-track-xl {
-    width: 44px;
-    height: 22px;
+  .h-72 {
+    height: calc(var(--spacing) * 72);
   }
-  .btn-lg {
-    height: var(--control-height-lg);
-    min-width: var(--control-min-width-lg);
-    padding-inline: var(--control-padding-x-button-lg);
-    border-radius: var(--control-radius-lg);
-    gap: var(--control-gap-lg);
-    font-weight: var(--control-font-weight);
-    font-size: var(--text-display18);
-    line-height: var(--leading-display18);
-    letter-spacing: var(--tracking-display18);
+  .h-100 {
+    height: calc(var(--spacing) * 100);
   }
-  .btn-md {
-    height: var(--control-height-md);
-    min-width: var(--control-min-width-md);
-    padding-inline: var(--control-padding-x-button-md);
-    border-radius: var(--control-radius-md);
-    gap: var(--control-gap-md);
-    font-weight: var(--control-font-weight);
-    font-size: var(--text-display16);
-    line-height: var(--leading-display16);
-    letter-spacing: var(--tracking-display16);
+  .h-120 {
+    height: calc(var(--spacing) * 120);
   }
-  .btn-sm {
-    height: var(--control-height-sm);
-    min-width: var(--control-min-width-sm);
-    padding-inline: var(--control-padding-x-button-sm);
-    border-radius: var(--control-radius-sm);
-    gap: var(--control-gap-sm);
-    font-weight: var(--control-font-weight);
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
+  .h-\[2px\] {
+    height: 2px;
   }
-  .btn-xl {
-    height: var(--control-height-xl);
-    min-width: var(--control-min-width-xl);
-    padding-inline: var(--control-padding-x-button-xl);
-    border-radius: var(--control-radius-xl);
-    gap: var(--control-gap-xl);
-    font-weight: var(--control-font-weight);
-    font-size: var(--text-display20);
-    line-height: var(--leading-display20);
-    letter-spacing: var(--tracking-display20);
+  .h-\[16px\] {
+    height: 16px;
   }
-  .btn-2xs {
-    height: var(--control-height-2xs);
-    padding-inline: var(--control-padding-x-button-2xs);
-    border-radius: var(--control-radius-2xs);
-    gap: var(--control-gap-2xs);
-    font-weight: var(--control-font-weight);
-    font-size: var(--text-display10);
-    line-height: var(--leading-display10);
-    letter-spacing: var(--tracking-display10);
+  .h-\[24px\] {
+    height: 24px;
   }
-  .btn-xs {
-    height: var(--control-height-xs);
-    padding-inline: var(--control-padding-x-button-xs);
-    border-radius: var(--control-radius-xs);
-    gap: var(--control-gap-xs);
-    font-weight: var(--control-font-weight);
-    font-size: var(--text-display12);
-    line-height: var(--leading-display12);
-    letter-spacing: var(--tracking-display12);
+  .h-\[32px\] {
+    height: 32px;
   }
-  .badge-lg {
-    height: var(--control-height-md);
-    padding-inline: var(--control-padding-x-badge-md);
-    border-radius: var(--control-radius-md);
-    gap: var(--control-gap-md);
-    font-size: var(--text-display20);
-    line-height: var(--leading-display20);
-    letter-spacing: var(--tracking-display20);
+  .h-\[36rem\] {
+    height: 36rem;
   }
-  .badge-md {
-    height: var(--control-height-sm);
-    padding-inline: var(--control-padding-x-badge-sm);
-    border-radius: var(--control-radius-sm);
-    gap: var(--control-gap-sm);
-    font-size: var(--text-display16);
-    line-height: var(--leading-display16);
-    letter-spacing: var(--tracking-display16);
+  .h-\[38px\] {
+    height: 38px;
   }
-  .badge-sm {
-    height: var(--control-height-xs);
-    padding-inline: var(--control-padding-x-badge-xs);
-    border-radius: var(--control-radius-xs);
-    gap: var(--control-gap-xs);
-    font-size: var(--text-display12);
-    line-height: var(--leading-display12);
-    letter-spacing: var(--tracking-display12);
+  .h-\[40px\] {
+    height: 40px;
   }
-  .badge-xs {
-    height: var(--control-height-2xs);
-    padding-inline: var(--control-padding-x-badge-2xs);
-    border-radius: var(--control-radius-xs);
-    gap: var(--control-gap-2xs);
-    font-size: var(--text-display10);
-    line-height: var(--leading-display10);
-    letter-spacing: var(--tracking-display10);
+  .h-\[56px\] {
+    height: 56px;
   }
-  .input-2xs {
-    height: var(--control-height-2xs);
-    padding-inline: var(--control-padding-x-input-2xs);
-    border-radius: var(--control-radius-2xs);
-    border-width: var(--control-border-2xs);
-    font-size: var(--text-display10);
-    line-height: var(--leading-display10);
-    letter-spacing: var(--tracking-display10);
-  }
-  .input-lg {
-    height: var(--control-height-lg);
-    padding-inline: var(--control-padding-x-input-lg);
-    border-radius: var(--control-radius-lg);
-    border-width: var(--control-border-2xs);
-    font-size: var(--text-display18);
-    line-height: var(--leading-display18);
-    letter-spacing: var(--tracking-display18);
-  }
-  .input-md {
-    height: var(--control-height-md);
-    padding-inline: var(--control-padding-x-input-md);
-    border-radius: var(--control-radius-md);
-    border-width: var(--control-border-2xs);
-    font-size: var(--text-display16);
-    line-height: var(--leading-display16);
-    letter-spacing: var(--tracking-display16);
-  }
-  .input-sm {
-    height: var(--control-height-sm);
-    padding-inline: var(--control-padding-x-input-sm);
-    border-radius: var(--control-radius-sm);
-    border-width: var(--control-border-2xs);
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
-  }
-  .input-xl {
-    height: var(--control-height-xl);
-    padding-inline: var(--control-padding-x-input-xl);
-    border-radius: var(--control-radius-xl);
-    border-width: var(--control-border-xs);
-    font-size: var(--text-display20);
-    line-height: var(--leading-display20);
-    letter-spacing: var(--tracking-display20);
-  }
-  .input-xs {
-    height: var(--control-height-xs);
-    padding-inline: var(--control-padding-x-input-xs);
-    border-radius: var(--control-radius-xs);
-    border-width: var(--control-border-2xs);
-    font-size: var(--text-display12);
-    line-height: var(--leading-display12);
-    letter-spacing: var(--tracking-display12);
-  }
-  .h-\(--cell-size\) {
-    height: var(--cell-size);
-  }
-  .h-0 {
-    height: calc(var(--spacing) * 0);
-  }
-  .h-1 {
-    height: calc(var(--spacing) * 1);
-  }
-  .h-1\.5 {
-    height: calc(var(--spacing) * 1.5);
-  }
-  .h-2 {
-    height: calc(var(--spacing) * 2);
-  }
-  .h-3 {
-    height: calc(var(--spacing) * 3);
-  }
-  .h-4 {
-    height: calc(var(--spacing) * 4);
-  }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
-  .h-8 {
-    height: calc(var(--spacing) * 8);
-  }
-  .h-9 {
-    height: calc(var(--spacing) * 9);
-  }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
-  .h-13 {
-    height: calc(var(--spacing) * 13);
-  }
-  .h-16 {
-    height: calc(var(--spacing) * 16);
-  }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
-  }
-  .h-40 {
-    height: calc(var(--spacing) * 40);
-  }
-  .h-45 {
-    height: calc(var(--spacing) * 45);
-  }
-  .h-48 {
-    height: calc(var(--spacing) * 48);
-  }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
-  .h-72 {
-    height: calc(var(--spacing) * 72);
-  }
-  .h-80 {
-    height: calc(var(--spacing) * 80);
-  }
-  .h-\[2px\] {
-    height: 2px;
-  }
-  .h-\[16px\] {
-    height: 16px;
-  }
-  .h-\[24px\] {
-    height: 24px;
-  }
-  .h-\[32px\] {
-    height: 32px;
-  }
-  .h-\[38px\] {
-    height: 38px;
-  }
-  .h-\[40px\] {
-    height: 40px;
-  }
-  .h-\[56px\] {
-    height: 56px;
-  }
-  .h-\[62px\] {
-    height: 62px;
+  .h-\[62px\] {
+    height: 62px;
   }
   .h-\[64px\] {
     height: 64px;
@@ -1622,8 +1385,11 @@
   .h-\[400px\] {
     height: 400px;
   }
-  .h-\[480px\] {
-    height: 480px;
+  .h-\[420px\] {
+    height: 420px;
+  }
+  .h-\[520px\] {
+    height: 520px;
   }
   .h-\[818px\] {
     height: 818px;
@@ -1631,8 +1397,11 @@
   .h-\[calc\(100vh-64px\)\] {
     height: calc(100vh - 64px);
   }
-  .h-auto\! {
-    height: auto !important;
+  .h-auto {
+    height: auto;
+  }
+  .h-fit {
+    height: fit-content;
   }
   .h-full {
     height: 100%;
@@ -1655,12 +1424,6 @@
   .max-h-\[240px\] {
     max-height: 240px;
   }
-  .autocomplete-item {
-    min-height: var(--autocomplete-item-min-height);
-    padding-inline: var(--autocomplete-item-padding-x);
-    padding-block: var(--autocomplete-item-padding-y);
-    font-weight: var(--font-regular);
-  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1710,33 +1473,21 @@
       animation: scrollbar-fade-out 0.3s ease forwards;
     }
   }
-  .modal-lg {
-    width: var(--modal-width-lg);
-  }
-  .modal-md {
-    width: var(--modal-width-md);
-  }
-  .modal-sm {
-    width: var(--modal-width-sm);
-  }
-  .modal-xl {
-    width: var(--modal-width-xl);
-  }
   .w-\(--cell-size\) {
     width: var(--cell-size);
   }
   .w-0\.5 {
     width: calc(var(--spacing) * 0.5);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
-  .w-3 {
-    width: calc(var(--spacing) * 3);
-  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -1749,9 +1500,6 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
-  .w-9 {
-    width: calc(var(--spacing) * 9);
-  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -1767,12 +1515,18 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-100 {
+    width: calc(var(--spacing) * 100);
+  }
   .w-\[2px\] {
     width: 2px;
   }
@@ -1821,6 +1575,15 @@
   .w-px {
     width: 1px;
   }
+  .max-w-100 {
+    max-width: calc(var(--spacing) * 100);
+  }
+  .max-w-160 {
+    max-width: calc(var(--spacing) * 160);
+  }
+  .max-w-200 {
+    max-width: calc(var(--spacing) * 200);
+  }
   .max-w-none {
     max-width: none;
   }
@@ -1830,6 +1593,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-6 {
+    min-width: calc(var(--spacing) * 6);
+  }
   .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
@@ -1854,6 +1620,9 @@
   .min-w-\[280px\] {
     min-width: 280px;
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1875,6 +1644,11 @@
   .origin-top {
     transform-origin: top;
   }
+  .-translate-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1900,12 +1674,21 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-fade-in {
+    animation: fade-in 300ms ease-out forwards;
+  }
+  .animate-fade-out {
+    animation: fade-out 300ms ease-out forwards;
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
   .animate-spin {
     animation: var(--animate-spin);
   }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
   .cursor-default {
     cursor: default;
   }
@@ -1921,15 +1704,27 @@
   .cursor-wait {
     cursor: wait;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-rows-\[0fr\] {
+    grid-template-rows: 0fr;
+  }
+  .grid-rows-\[1fr\] {
+    grid-template-rows: 1fr;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1969,6 +1764,9 @@
   .gap-1\.5 {
     gap: calc(var(--spacing) * 1.5);
   }
+  .gap-1\.25 {
+    gap: calc(var(--spacing) * 1.25);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -2034,6 +1832,9 @@
   .overflow-auto {
     overflow: auto;
   }
+  .overflow-clip {
+    overflow: clip;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -2061,8 +1862,8 @@
   .rounded-\[5px\] {
     border-radius: 5px;
   }
-  .rounded-\[5px\]\! {
-    border-radius: 5px !important;
+  .rounded-\[6px\] {
+    border-radius: 6px;
   }
   .rounded-\[8px\] {
     border-radius: 8px;
@@ -2070,6 +1871,9 @@
   .rounded-\[10px\] {
     border-radius: 10px;
   }
+  .rounded-\[16px\] {
+    border-radius: 16px;
+  }
   .rounded-\[21px\] {
     border-radius: 21px;
   }
@@ -2132,6 +1936,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;
@@ -2164,12 +1972,22 @@
     --tw-border-style: dotted;
     border-style: dotted;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-danger100 {
     border-color: var(--color-danger100);
   }
   .border-danger500 {
     border-color: var(--color-danger500);
   }
+  .border-danger600 {
+    border-color: var(--color-danger600);
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
   .border-lb500 {
     border-color: var(--color-lb500);
   }
@@ -2224,6 +2042,9 @@
   .bg-danger600 {
     background-color: var(--color-danger600);
   }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
@@ -2263,21 +2084,12 @@
   .bg-neutral50 {
     background-color: var(--color-neutral50);
   }
-  .bg-neutral50\! {
-    background-color: var(--color-neutral50) !important;
-  }
   .bg-neutral100 {
     background-color: var(--color-neutral100);
   }
-  .bg-neutral100\! {
-    background-color: var(--color-neutral100) !important;
-  }
   .bg-neutral200 {
     background-color: var(--color-neutral200);
   }
-  .bg-neutral300 {
-    background-color: var(--color-neutral300);
-  }
   .bg-neutral800 {
     background-color: var(--color-neutral800);
   }
@@ -2323,9 +2135,6 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
-  .p-0\! {
-    padding: calc(var(--spacing) * 0) !important;
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -2335,6 +2144,9 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -2371,21 +2183,36 @@
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
-  .px-0\! {
-    padding-inline: calc(var(--spacing) * 0) !important;
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
   }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .px-\[10px\] {
+    padding-inline: 10px;
+  }
   .px-\[15px\] {
     padding-inline: 15px;
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -2395,6 +2222,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -2404,12 +2234,12 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
-  .py-24 {
-    padding-block: calc(var(--spacing) * 24);
-  }
   .py-\[10px\] {
     padding-block: 10px;
   }
@@ -2424,6 +2254,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-10 {
+    padding-top: calc(var(--spacing) * 10);
+  }
   .pt-lg {
     padding-top: var(--spacing_32);
   }
@@ -2456,6 +2289,12 @@
   .pr-sm {
     padding-right: var(--spacing_12);
   }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
+  .pl-1 {
+    padding-left: calc(var(--spacing) * 1);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -2486,131 +2325,30 @@
   .font-semibold {
     font-family: var(--font-semibold);
   }
-  .autocomplete-2xs {
-    --autocomplete-item-min-height: var(--spacing_32);
-    --autocomplete-item-padding-x: var(--spacing_4);
-    --autocomplete-item-padding-y: var(--spacing_4);
-    --autocomplete-secondary-font-size: var(--text-display10);
-    --autocomplete-secondary-line-height: var(--leading-display10);
-    --autocomplete-secondary-letter-spacing: var(--tracking-display10);
+  .display10 {
     font-size: var(--text-display10);
     line-height: var(--leading-display10);
     letter-spacing: var(--tracking-display10);
   }
-  .autocomplete-lg {
-    --autocomplete-item-min-height: var(--spacing_60);
-    --autocomplete-item-padding-x: var(--spacing_16);
-    --autocomplete-item-padding-y: var(--spacing_12);
-    --autocomplete-secondary-font-size: var(--text-display12);
-    --autocomplete-secondary-line-height: var(--leading-display12);
-    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
+  .display12 {
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
   }
-  .autocomplete-md {
-    --autocomplete-item-min-height: var(--spacing_60);
-    --autocomplete-item-padding-x: var(--spacing_16);
-    --autocomplete-item-padding-y: var(--spacing_12);
-    --autocomplete-secondary-font-size: var(--text-display12);
-    --autocomplete-secondary-line-height: var(--leading-display12);
-    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+  .display14 {
     font-size: var(--text-display14);
     line-height: var(--leading-display14);
     letter-spacing: var(--tracking-display14);
   }
-  .autocomplete-sm {
-    --autocomplete-item-min-height: var(--spacing_60);
-    --autocomplete-item-padding-x: var(--spacing_16);
-    --autocomplete-item-padding-y: var(--spacing_12);
-    --autocomplete-secondary-font-size: var(--text-display12);
-    --autocomplete-secondary-line-height: var(--leading-display12);
-    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
+  .display16 {
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
   }
-  .autocomplete-xl {
-    --autocomplete-item-min-height: var(--spacing_60);
-    --autocomplete-item-padding-x: var(--spacing_16);
-    --autocomplete-item-padding-y: var(--spacing_12);
-    --autocomplete-secondary-font-size: var(--text-display12);
-    --autocomplete-secondary-line-height: var(--leading-display12);
-    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
-  }
-  .autocomplete-xs {
-    --autocomplete-item-min-height: var(--spacing_40);
-    --autocomplete-item-padding-x: var(--spacing_8);
-    --autocomplete-item-padding-y: var(--spacing_4);
-    --autocomplete-secondary-font-size: var(--text-display10);
-    --autocomplete-secondary-line-height: var(--leading-display10);
-    --autocomplete-secondary-letter-spacing: var(--tracking-display10);
-    font-size: var(--text-display12);
-    line-height: var(--leading-display12);
-    letter-spacing: var(--tracking-display12);
-  }
-  .autocomplete-secondary {
-    font-size: var(--autocomplete-secondary-font-size);
-    line-height: var(--autocomplete-secondary-line-height);
-    letter-spacing: var(--autocomplete-secondary-letter-spacing);
-  }
-  .bread-crumb-2xs {
-    font-size: var(--text-display10);
-    line-height: var(--leading-display10);
-    letter-spacing: var(--tracking-display10);
-  }
-  .bread-crumb-lg {
-    font-size: var(--text-display18);
-    line-height: var(--leading-display18);
-    letter-spacing: var(--tracking-display18);
-  }
-  .bread-crumb-md {
-    font-size: var(--text-display16);
-    line-height: var(--leading-display16);
-    letter-spacing: var(--tracking-display16);
-  }
-  .bread-crumb-sm {
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
-  }
-  .bread-crumb-xl {
-    font-size: var(--text-display20);
-    line-height: var(--leading-display20);
-    letter-spacing: var(--tracking-display20);
-  }
-  .bread-crumb-xs {
-    font-size: var(--text-display12);
-    line-height: var(--leading-display12);
-    letter-spacing: var(--tracking-display12);
-  }
-  .display10 {
-    font-size: var(--text-display10);
-    line-height: var(--leading-display10);
-    letter-spacing: var(--tracking-display10);
-  }
-  .display12 {
-    font-size: var(--text-display12);
-    line-height: var(--leading-display12);
-    letter-spacing: var(--tracking-display12);
-  }
-  .display14 {
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
-  }
-  .display16 {
-    font-size: var(--text-display16);
-    line-height: var(--leading-display16);
-    letter-spacing: var(--tracking-display16);
-  }
-  .display18 {
-    font-size: var(--text-display18);
-    line-height: var(--leading-display18);
-    letter-spacing: var(--tracking-display18);
+  .display18 {
+    font-size: var(--text-display18);
+    line-height: var(--leading-display18);
+    letter-spacing: var(--tracking-display18);
   }
   .display20 {
     font-size: var(--text-display20);
@@ -2637,30 +2375,6 @@
     line-height: var(--leading-display40);
     letter-spacing: var(--tracking-display40);
   }
-  .toggle-lg {
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
-  }
-  .toggle-md {
-    font-size: var(--text-display14);
-    line-height: var(--leading-display14);
-    letter-spacing: var(--tracking-display14);
-  }
-  .toggle-sm {
-    font-size: var(--text-display12);
-    line-height: var(--leading-display12);
-    letter-spacing: var(--tracking-display12);
-  }
-  .toggle-xl {
-    font-size: var(--text-display16);
-    line-height: var(--leading-display16);
-    letter-spacing: var(--tracking-display16);
-  }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2676,6 +2390,12 @@
   .text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
+  .text-\[24px\] {
+    font-size: 24px;
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -2703,12 +2423,12 @@
   .regular {
     font-weight: var(--font-regular);
   }
-  .regular\! {
-    font-weight: var(--font-regular) !important;
-  }
   .semibold {
     font-weight: var(--font-semibold);
   }
+  .\[letter-spacing\:0\.02em\] {
+    letter-spacing: 0.02em;
+  }
   .text-nowrap {
     text-wrap: nowrap;
   }
@@ -2766,18 +2486,12 @@
   .text-mono500 {
     color: var(--color-mono500);
   }
-  .text-mono600 {
-    color: var(--color-mono600);
-  }
   .text-mono700 {
     color: var(--color-mono700);
   }
   .text-mono800 {
     color: var(--color-mono800);
   }
-  .text-mono900 {
-    color: var(--color-mono900);
-  }
   .text-neutral-500 {
     color: var(--color-neutral-500);
   }
@@ -2787,18 +2501,12 @@
   .text-neutral200 {
     color: var(--color-neutral200);
   }
-  .text-neutral200\! {
-    color: var(--color-neutral200) !important;
-  }
   .text-neutral300 {
     color: var(--color-neutral300);
   }
   .text-neutral400 {
     color: var(--color-neutral400);
   }
-  .text-neutral400\! {
-    color: var(--color-neutral400) !important;
-  }
   .text-neutral500 {
     color: var(--color-neutral500);
   }
@@ -2817,8 +2525,8 @@
   .text-red200 {
     color: var(--color-red200);
   }
-  .text-red500 {
-    color: var(--color-red500);
+  .text-transparent {
+    color: transparent;
   }
   .text-white {
     color: var(--color-white);
@@ -2917,18 +2625,15 @@
   .outline-danger500 {
     outline-color: var(--color-danger500);
   }
+  .outline-danger600 {
+    outline-color: var(--color-danger600);
+  }
   .outline-lb500 {
     outline-color: var(--color-lb500);
   }
   .outline-neutral100 {
     outline-color: var(--color-neutral100);
   }
-  .outline-neutral200 {
-    outline-color: var(--color-neutral200);
-  }
-  .outline-neutral300 {
-    outline-color: var(--color-neutral300);
-  }
   .outline-red500 {
     outline-color: var(--color-red500);
   }
@@ -2940,6 +2645,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[border-color\] {
+    transition-property: border-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2990,6 +2700,9 @@
   .\[-ms-overflow-style\:none\] {
     -ms-overflow-style: none;
   }
+  .\[outline-style\:solid\] {
+    outline-style: solid;
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -3006,6 +2719,28 @@
       display: none;
     }
   }
+  .group-hover\:cursor-col-resize {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        cursor: col-resize;
+      }
+    }
+  }
+  .group-hover\:border-2 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-style: var(--tw-border-style);
+        border-width: 2px;
+      }
+    }
+  }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-data-\[focused\=true\]\/day\:relative {
     &:is(:where(.group\/day)[data-focused="true"] *) {
       position: relative;
@@ -3047,6 +2782,11 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .placeholder\:text-mono400 {
+    &::placeholder {
+      color: var(--color-mono400);
+    }
+  }
   .first\:rounded-t-lg {
     &:first-child {
       border-top-left-radius: var(--radius-lg);
@@ -3059,11 +2799,31 @@
       border-bottom-left-radius: var(--radius-lg);
     }
   }
+  .read-only\:cursor-default {
+    &:read-only {
+      cursor: default;
+    }
+  }
   .read-only\:cursor-not-allowed {
     &:read-only {
       cursor: not-allowed;
     }
   }
+  .focus-within\:bg-neutral50 {
+    &:focus-within {
+      background-color: var(--color-neutral50);
+    }
+  }
+  .focus-within\:bg-tintBlue {
+    &:focus-within {
+      background-color: var(--color-tintBlue);
+    }
+  }
+  .focus-within\:bg-tintRed {
+    &:focus-within {
+      background-color: var(--color-tintRed);
+    }
+  }
   .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
@@ -3085,16 +2845,6 @@
       }
     }
   }
-  .hover\:bg-black\/3 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #000000 3%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 3%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -3179,10 +2929,17 @@
       }
     }
   }
-  .hover\:bg-neutral200\! {
+  .hover\:bg-neutral100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-neutral100);
+      }
+    }
+  }
+  .hover\:bg-neutral200 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-neutral200) !important;
+        background-color: var(--color-neutral200);
       }
     }
   }
@@ -3284,13 +3041,6 @@
       }
     }
   }
-  .hover\:outline-lb500 {
-    &:hover {
-      @media (hover: hover) {
-        outline-color: var(--color-lb500);
-      }
-    }
-  }
   .focus\:border-blue-500 {
     &:focus {
       border-color: var(--color-blue-500);
@@ -3301,19 +3051,14 @@
       border-color: var(--color-lb500);
     }
   }
-  .focus\:border-red500 {
-    &:focus {
-      border-color: var(--color-red500);
-    }
-  }
   .focus\:bg-lb50 {
     &:focus {
       background-color: var(--color-lb50);
     }
   }
-  .focus\:bg-mono100 {
+  .focus\:bg-neutral50 {
     &:focus {
-      background-color: var(--color-mono100);
+      background-color: var(--color-neutral50);
     }
   }
   .focus\:bg-tintBlue {
@@ -3342,14 +3087,14 @@
       --tw-ring-color: var(--color-lb500);
     }
   }
-  .focus\:outline-lb500 {
+  .focus\:outline-danger600 {
     &:focus {
-      outline-color: var(--color-lb500);
+      outline-color: var(--color-danger600);
     }
   }
-  .focus\:outline-red500 {
+  .focus\:outline-lb500 {
     &:focus {
-      outline-color: var(--color-red500);
+      outline-color: var(--color-lb500);
     }
   }
   .focus\:outline-none {
@@ -3373,6 +3118,11 @@
       border-color: var(--color-neutral-950);
     }
   }
+  .focus-visible\:bg-tintBlue {
+    &:focus-visible {
+      background-color: var(--color-tintBlue);
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3422,6 +3172,11 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:outline-lb500 {
+    &:focus-visible {
+      outline-color: var(--color-lb500);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -3488,6 +3243,11 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:text-mono400 {
+    &:disabled {
+      color: var(--color-mono400);
+    }
+  }
   .disabled\:opacity-30 {
     &:disabled {
       opacity: 30%;
@@ -3851,42 +3611,6 @@
       height: calc(var(--spacing) * 3.5);
     }
   }
-  .\[\&\>svg\]\:icon-2xs {
-    &>svg {
-      width: var(--control-icon-2xs);
-      height: var(--control-icon-2xs);
-    }
-  }
-  .\[\&\>svg\]\:icon-lg {
-    &>svg {
-      width: var(--control-icon-lg);
-      height: var(--control-icon-lg);
-    }
-  }
-  .\[\&\>svg\]\:icon-md {
-    &>svg {
-      width: var(--control-icon-md);
-      height: var(--control-icon-md);
-    }
-  }
-  .\[\&\>svg\]\:icon-sm {
-    &>svg {
-      width: var(--control-icon-sm);
-      height: var(--control-icon-sm);
-    }
-  }
-  .\[\&\>svg\]\:icon-xl {
-    &>svg {
-      width: var(--control-icon-xl);
-      height: var(--control-icon-xl);
-    }
-  }
-  .\[\&\>svg\]\:icon-xs {
-    &>svg {
-      width: var(--control-icon-xs);
-      height: var(--control-icon-xs);
-    }
-  }
   .\[\&\>svg\]\:shrink-0 {
     &>svg {
       flex-shrink: 0;
@@ -4065,37 +3789,360 @@
     opacity: 0;
   }
 }
-@layer utilities {
-  prose p {
-    margin-top: 0 !important;
-    margin-bottom: 0.5rem !important;
-    padding: 0 !important;
+@layer components {
+  .icon-2xs {
+    width: var(--control-icon-2xs);
+    height: var(--control-icon-2xs);
   }
-  prose h1, prose h2, prose h3 {
-    margin-top: 0 !important;
-    margin-bottom: 0.5rem !important;
-    padding: 0 !important;
+  .icon-xs {
+    width: var(--control-icon-xs);
+    height: var(--control-icon-xs);
   }
-  prose ul, prose ol {
-    margin-top: 0 !important;
-    margin-bottom: 0.5rem !important;
-    padding: 0 20px !important;
+  .icon-sm {
+    width: var(--control-icon-sm);
+    height: var(--control-icon-sm);
   }
-  prose ul li::marker, prose ol li::marker {
-    color: #000 !important;
+  .icon-md {
+    width: var(--control-icon-md);
+    height: var(--control-icon-md);
+  }
+  .icon-lg {
+    width: var(--control-icon-lg);
+    height: var(--control-icon-lg);
+  }
+  .icon-xl {
+    width: var(--control-icon-xl);
+    height: var(--control-icon-xl);
   }
 }
-.ProseMirror img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 1rem auto;
-}
-.ProseMirror img[style*='text-align: left'] {
-  margin-left: 0;
-  margin-right: auto;
+@layer components {
+  .spinner-2xs {
+    width: var(--control-size-spinner-2xs);
+    height: var(--control-size-spinner-2xs);
+  }
+  .spinner-xs {
+    width: var(--control-size-spinner-xs);
+    height: var(--control-size-spinner-xs);
+  }
+  .spinner-sm {
+    width: var(--control-size-spinner-sm);
+    height: var(--control-size-spinner-sm);
+  }
+  .spinner-md {
+    width: var(--control-size-spinner-md);
+    height: var(--control-size-spinner-md);
+  }
+  .spinner-lg {
+    width: var(--control-size-spinner-lg);
+    height: var(--control-size-spinner-lg);
+  }
+  .spinner-xl {
+    width: var(--control-size-spinner-xl);
+    height: var(--control-size-spinner-xl);
+  }
 }
-.ProseMirror img[style*='text-align: center'] {
+@layer components {
+  .btn-2xs {
+    height: var(--control-height-2xs);
+    min-width: var(--control-min-width-2xs);
+    padding-inline: var(--control-padding-x-button-2xs);
+    border-radius: var(--control-radius-2xs);
+    gap: var(--control-gap-2xs);
+    font-weight: var(--control-font-weight);
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .btn-xs {
+    height: var(--control-height-xs);
+    min-width: var(--control-min-width-xs);
+    padding-inline: var(--control-padding-x-button-xs);
+    border-radius: var(--control-radius-xs);
+    gap: var(--control-gap-xs);
+    font-weight: var(--control-font-weight);
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .btn-sm {
+    height: var(--control-height-sm);
+    min-width: var(--control-min-width-sm);
+    padding-inline: var(--control-padding-x-button-sm);
+    border-radius: var(--control-radius-sm);
+    gap: var(--control-gap-sm);
+    font-weight: var(--control-font-weight);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .btn-md {
+    height: var(--control-height-md);
+    min-width: var(--control-min-width-md);
+    padding-inline: var(--control-padding-x-button-md);
+    border-radius: var(--control-radius-md);
+    gap: var(--control-gap-md);
+    font-weight: var(--control-font-weight);
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+  .btn-lg {
+    height: var(--control-height-lg);
+    min-width: var(--control-min-width-lg);
+    padding-inline: var(--control-padding-x-button-lg);
+    border-radius: var(--control-radius-lg);
+    gap: var(--control-gap-lg);
+    font-weight: var(--control-font-weight);
+    font-size: var(--text-display18);
+    line-height: var(--leading-display18);
+    letter-spacing: var(--tracking-display18);
+  }
+  .btn-xl {
+    height: var(--control-height-xl);
+    min-width: var(--control-min-width-xl);
+    padding-inline: var(--control-padding-x-button-xl);
+    border-radius: var(--control-radius-xl);
+    gap: var(--control-gap-xl);
+    font-weight: var(--control-font-weight);
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
+  }
+  .toggle-track-xs {
+    width: 28px;
+    height: 14px;
+  }
+  .toggle-track-sm {
+    width: 32px;
+    height: 16px;
+  }
+  .toggle-track-md {
+    width: 36px;
+    height: 18px;
+  }
+  .toggle-track-lg {
+    width: 40px;
+    height: 20px;
+  }
+  .toggle-track-xl {
+    width: 44px;
+    height: 22px;
+  }
+  .toggle-thumb-xs {
+    width: 10px;
+    height: 10px;
+  }
+  .toggle-thumb-sm {
+    width: 12px;
+    height: 12px;
+  }
+  .toggle-thumb-md {
+    width: 14px;
+    height: 14px;
+  }
+  .toggle-thumb-lg {
+    width: 16px;
+    height: 16px;
+  }
+  .toggle-thumb-xl {
+    width: 18px;
+    height: 18px;
+  }
+  .toggle-thumb-off-xs {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-off-sm {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-off-md {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-off-lg {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-off-xl {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-on-xs {
+    left: 16px;
+  }
+  .toggle-thumb-on-sm {
+    left: 18px;
+  }
+  .toggle-thumb-on-md {
+    left: 20px;
+  }
+  .toggle-thumb-on-lg {
+    left: 22px;
+  }
+  .toggle-thumb-on-xl {
+    left: 24px;
+  }
+  .toggle-xs {
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .toggle-sm {
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .toggle-md {
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .toggle-lg {
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .toggle-xl {
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+}
+@layer components {
+  .input-2xs {
+    height: var(--control-height-2xs);
+    padding-inline: var(--control-padding-x-input-2xs);
+    border-radius: var(--control-radius-2xs);
+    border-width: var(--control-border-2xs);
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .input-xs {
+    height: var(--control-height-xs);
+    padding-inline: var(--control-padding-x-input-xs);
+    border-radius: var(--control-radius-xs);
+    border-width: var(--control-border-2xs);
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .input-sm {
+    height: var(--control-height-sm);
+    padding-inline: var(--control-padding-x-input-sm);
+    border-radius: var(--control-radius-sm);
+    border-width: var(--control-border-2xs);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .input-md {
+    height: var(--control-height-md);
+    padding-inline: var(--control-padding-x-input-md);
+    border-radius: var(--control-radius-sm);
+    border-width: var(--control-border-2xs);
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+  .input-lg {
+    height: var(--control-height-lg);
+    padding-inline: var(--control-padding-x-input-lg);
+    border-radius: var(--control-radius-sm);
+    border-width: var(--control-border-2xs);
+    font-size: var(--text-display18);
+    line-height: var(--leading-display18);
+    letter-spacing: var(--tracking-display18);
+  }
+  .input-xl {
+    height: var(--control-height-xl);
+    padding-inline: var(--control-padding-x-input-xl);
+    border-radius: var(--control-radius-sm);
+    border-width: var(--control-border-xs);
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
+  }
+}
+@layer components {
+  .badge-xs {
+    height: var(--control-height-2xs);
+    padding-inline: var(--control-padding-x-badge-2xs);
+    border-radius: var(--control-radius-xs);
+    gap: var(--control-gap-2xs);
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .badge-sm {
+    height: var(--control-height-xs);
+    padding-inline: var(--control-padding-x-badge-xs);
+    border-radius: var(--control-radius-xs);
+    gap: var(--control-gap-xs);
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .badge-md {
+    height: var(--control-height-sm);
+    padding-inline: var(--control-padding-x-badge-sm);
+    border-radius: var(--control-radius-sm);
+    gap: var(--control-gap-sm);
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+  .badge-lg {
+    height: var(--control-height-md);
+    padding-inline: var(--control-padding-x-badge-md);
+    border-radius: var(--control-radius-md);
+    gap: var(--control-gap-md);
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
+  }
+}
+@layer components {
+  .modal-sm {
+    width: var(--modal-width-sm);
+  }
+  .modal-md {
+    width: var(--modal-width-md);
+  }
+  .modal-lg {
+    width: var(--modal-width-lg);
+  }
+  .modal-xl {
+    width: var(--modal-width-xl);
+  }
+}
+@layer utilities {
+  prose p {
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+    padding: 0 !important;
+  }
+  prose h1, prose h2, prose h3 {
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+    padding: 0 !important;
+  }
+  prose ul, prose ol {
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+    padding: 0 20px !important;
+  }
+  prose ul li::marker, prose ol li::marker {
+    color: #000 !important;
+  }
+}
+.ProseMirror img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1rem auto;
+}
+.ProseMirror img[style*='text-align: left'] {
+  margin-left: 0;
+  margin-right: auto;
+}
+.ProseMirror img[style*='text-align: center'] {
   margin-left: auto;
   margin-right: auto;
 }
@@ -4174,66 +4221,249 @@
 .ProseMirror [data-resize-wrapper] img {
   margin: 0 !important;
 }
-.ld-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-  pointer-events: none;
-}
-.ld-slider-thumb::-webkit-slider-runnable-track {
-  background: transparent;
-}
-.ld-slider-thumb::-moz-range-track {
-  background: transparent;
-}
-.ld-slider-thumb::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background-color: var(--color-lb500);
-  border: 2px solid white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
-  pointer-events: auto;
-}
-.ld-slider-thumb::-webkit-slider-thumb:hover {
-  transform: scale(1.15);
-  box-shadow: 0 2px 8px rgba(104, 145, 248, 0.4);
-}
-.ld-slider-thumb::-webkit-slider-thumb:active {
-  transform: scale(1.25);
-}
-.ld-slider-thumb::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background-color: var(--color-lb500);
-  border: 2px solid white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  pointer-events: auto;
-}
-.ld-slider-thumb:disabled::-webkit-slider-thumb {
-  background-color: var(--color-mono300);
-  cursor: not-allowed;
-}
-.ld-slider-thumb:disabled::-moz-range-thumb {
-  background-color: var(--color-mono300);
-  cursor: not-allowed;
+@layer components {
+  .bread-crumb-2xs {
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .bread-crumb-xs {
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .bread-crumb-sm {
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .bread-crumb-md {
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+  .bread-crumb-lg {
+    font-size: var(--text-display18);
+    line-height: var(--leading-display18);
+    letter-spacing: var(--tracking-display18);
+  }
+  .bread-crumb-xl {
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
+  }
+  .bread-crumb-sep-2xs > svg {
+    width: var(--control-icon-2xs);
+    height: var(--control-icon-2xs);
+  }
+  .bread-crumb-sep-xs > svg {
+    width: var(--control-icon-xs);
+    height: var(--control-icon-xs);
+  }
+  .bread-crumb-sep-sm > svg {
+    width: var(--control-icon-sm);
+    height: var(--control-icon-sm);
+  }
+  .bread-crumb-sep-md > svg {
+    width: var(--control-icon-md);
+    height: var(--control-icon-md);
+  }
+  .bread-crumb-sep-lg > svg {
+    width: var(--control-icon-lg);
+    height: var(--control-icon-lg);
+  }
+  .bread-crumb-sep-xl > svg {
+    width: var(--control-icon-xl);
+    height: var(--control-icon-xl);
+  }
 }
-.ld-slider-thumb-active::-webkit-slider-thumb {
-  pointer-events: auto;
+@layer components {
+  .autocomplete-2xs {
+    --autocomplete-item-min-height: var(--spacing_32);
+    --autocomplete-item-padding-x: var(--spacing_4);
+    --autocomplete-item-padding-y: var(--spacing_4);
+    --autocomplete-secondary-font-size: var(--text-display10);
+    --autocomplete-secondary-line-height: var(--leading-display10);
+    --autocomplete-secondary-letter-spacing: var(--tracking-display10);
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .autocomplete-xs {
+    --autocomplete-item-min-height: var(--spacing_40);
+    --autocomplete-item-padding-x: var(--spacing_8);
+    --autocomplete-item-padding-y: var(--spacing_4);
+    --autocomplete-secondary-font-size: var(--text-display10);
+    --autocomplete-secondary-line-height: var(--leading-display10);
+    --autocomplete-secondary-letter-spacing: var(--tracking-display10);
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .autocomplete-sm {
+    --autocomplete-item-min-height: var(--spacing_60);
+    --autocomplete-item-padding-x: var(--spacing_16);
+    --autocomplete-item-padding-y: var(--spacing_12);
+    --autocomplete-secondary-font-size: var(--text-display12);
+    --autocomplete-secondary-line-height: var(--leading-display12);
+    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .autocomplete-md {
+    --autocomplete-item-min-height: var(--spacing_60);
+    --autocomplete-item-padding-x: var(--spacing_16);
+    --autocomplete-item-padding-y: var(--spacing_12);
+    --autocomplete-secondary-font-size: var(--text-display12);
+    --autocomplete-secondary-line-height: var(--leading-display12);
+    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .autocomplete-lg {
+    --autocomplete-item-min-height: var(--spacing_60);
+    --autocomplete-item-padding-x: var(--spacing_16);
+    --autocomplete-item-padding-y: var(--spacing_12);
+    --autocomplete-secondary-font-size: var(--text-display12);
+    --autocomplete-secondary-line-height: var(--leading-display12);
+    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .autocomplete-xl {
+    --autocomplete-item-min-height: var(--spacing_60);
+    --autocomplete-item-padding-x: var(--spacing_16);
+    --autocomplete-item-padding-y: var(--spacing_12);
+    --autocomplete-secondary-font-size: var(--text-display12);
+    --autocomplete-secondary-line-height: var(--leading-display12);
+    --autocomplete-secondary-letter-spacing: var(--tracking-display12);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .autocomplete-item {
+    min-height: var(--autocomplete-item-min-height);
+    padding-inline: var(--autocomplete-item-padding-x);
+    padding-block: var(--autocomplete-item-padding-y);
+    font-weight: var(--font-regular);
+  }
+  .autocomplete-secondary {
+    font-size: var(--autocomplete-secondary-font-size);
+    line-height: var(--autocomplete-secondary-line-height);
+    letter-spacing: var(--autocomplete-secondary-letter-spacing);
+  }
 }
-.ld-slider-thumb-inactive::-webkit-slider-thumb {
-  pointer-events: none;
+@layer components {
+  .team-history-line {
+    background-image: linear-gradient( to bottom, var(--color-lb500) var(--ld-line-fill, 0%), var(--color-lb100) var(--ld-line-fill, 0%) );
+  }
 }
-.ld-carousel__viewport {
-  overflow: hidden;
+@layer components {
+  .ld-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    pointer-events: none;
+  }
+  .ld-slider-thumb::-webkit-slider-runnable-track {
+    background: transparent;
+  }
+  .ld-slider-thumb::-moz-range-track {
+    background: transparent;
+  }
+  .ld-slider-thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--color-lb500);
+    border: 2px solid white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
+    pointer-events: auto;
+  }
+  .ld-slider-thumb::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 2px 8px rgba(104, 145, 248, 0.4);
+  }
+  .ld-slider-thumb::-webkit-slider-thumb:active {
+    transform: scale(1.25);
+  }
+  .ld-slider-thumb::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--color-lb500);
+    border: 2px solid white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    pointer-events: auto;
+  }
+  .ld-slider-thumb:disabled::-webkit-slider-thumb {
+    background-color: var(--color-mono300);
+    cursor: not-allowed;
+  }
+  .ld-slider-thumb:disabled::-moz-range-thumb {
+    background-color: var(--color-mono300);
+    cursor: not-allowed;
+  }
+  .ld-slider-thumb-active::-webkit-slider-thumb {
+    pointer-events: auto;
+  }
+  .ld-slider-thumb-inactive::-webkit-slider-thumb {
+    pointer-events: none;
+  }
 }
-.ld-carousel__viewport > * {
-  height: 100%;
+@layer components {
+  .ld-carousel__viewport {
+    overflow: hidden;
+  }
+  .ld-carousel__viewport > * {
+    height: 100%;
+  }
+  .ld-carousel__nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    color: var(--color-lb500);
+    z-index: 10;
+    cursor: pointer;
+    transition: color 300ms ease-out;
+  }
+  .ld-carousel__nav:hover {
+    color: var(--color-lb700);
+  }
+  .ld-carousel__nav:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .ld-carousel__nav:first-child {
+    left: 0;
+  }
+  .ld-carousel__nav:last-child {
+    right: 0;
+  }
+  .ld-carousel__nav--vertical {
+    top: auto;
+    bottom: auto;
+    left: 0;
+    right: 0;
+  }
+  .ld-carousel__nav--vertical:first-child {
+    top: 0;
+  }
+  .ld-carousel__nav--vertical:last-child {
+    bottom: 0;
+  }
 }
 @property --tw-translate-x {
   syntax: "*";