@loword/loword-design-system 0.0.10 → 0.0.13

package/dist/index.css

@@ -12,7 +12,6 @@
     --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);
     --color-neutral-500: oklch(55.6% 0 0);
@@ -37,6 +36,7 @@
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -86,7 +86,6 @@
     --color-lb500: #6891f8;
     --color-lb600: #5883ee;
     --color-lb700: #4a75df;
-    --color-lb900: #143ca3;
     --color-tintRed: #fdf4f4;
     --color-tintOrange: #fffaf2;
     --color-tintYellow: #ffefd2;
@@ -188,12 +187,12 @@
     --control-radius-md: var(--radius_8);
     --control-radius-lg: var(--radius_10);
     --control-radius-xl: var(--radius_16);
-    --control-icon-2xs: 8px;
-    --control-icon-xs: 12px;
-    --control-icon-sm: 16px;
-    --control-icon-md: 20px;
-    --control-icon-lg: 24px;
-    --control-icon-xl: 28px;
+    --control-icon-2xs: 6px;
+    --control-icon-xs: 8px;
+    --control-icon-sm: 12px;
+    --control-icon-md: 16px;
+    --control-icon-lg: 20px;
+    --control-icon-xl: 24px;
     --control-gap-2xs: var(--spacing_2);
     --control-gap-xs: var(--spacing_4);
     --control-gap-sm: var(--spacing_6);
@@ -431,6 +430,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .inset-y-1\/4 {
     inset-block: calc(1 / 4 * 100%);
   }
@@ -479,12 +481,12 @@
   .right-2\.5 {
     right: calc(var(--spacing) * 2.5);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
-  .right-8 {
-    right: calc(var(--spacing) * 8);
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -536,6 +538,9 @@
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -1162,6 +1167,9 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-md {
+    margin-top: var(--spacing_20);
+  }
   .mt-xs {
     margin-top: var(--spacing_8);
   }
@@ -1171,12 +1179,18 @@
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
   .mb-md {
     margin-bottom: var(--spacing_20);
   }
+  .mb-sm {
+    margin-bottom: var(--spacing_12);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -1238,6 +1252,10 @@
     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);
@@ -1254,6 +1272,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -1274,6 +1296,10 @@
     width: calc(var(--spacing) * 21);
     height: calc(var(--spacing) * 21);
   }
+  .size-40 {
+    width: calc(var(--spacing) * 40);
+    height: calc(var(--spacing) * 40);
+  }
   .size-\[30px\] {
     width: 30px;
     height: 30px;
@@ -1292,6 +1318,9 @@
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -1346,23 +1375,23 @@
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
   .h-100 {
     height: calc(var(--spacing) * 100);
   }
   .h-120 {
     height: calc(var(--spacing) * 120);
   }
-  .h-\[2px\] {
-    height: 2px;
-  }
-  .h-\[16px\] {
-    height: 16px;
-  }
   .h-\[24px\] {
     height: 24px;
   }
-  .h-\[32px\] {
-    height: 32px;
+  .h-\[28px\] {
+    height: 28px;
+  }
+  .h-\[34px\] {
+    height: 34px;
   }
   .h-\[36rem\] {
     height: 36rem;
@@ -1373,15 +1402,18 @@
   .h-\[40px\] {
     height: 40px;
   }
-  .h-\[56px\] {
-    height: 56px;
+  .h-\[46px\] {
+    height: 46px;
   }
-  .h-\[62px\] {
-    height: 62px;
+  .h-\[52px\] {
+    height: 52px;
   }
   .h-\[64px\] {
     height: 64px;
   }
+  .h-\[80vh\] {
+    height: 80vh;
+  }
   .h-\[400px\] {
     height: 400px;
   }
@@ -1409,8 +1441,11 @@
   .h-px {
     height: 1px;
   }
-  .max-h-0 {
-    max-height: calc(var(--spacing) * 0);
+  .max-h-57\.5 {
+    max-height: calc(var(--spacing) * 57.5);
+  }
+  .max-h-90 {
+    max-height: calc(var(--spacing) * 90);
   }
   .max-h-\[90dvh\] {
     max-height: 90dvh;
@@ -1418,29 +1453,35 @@
   .max-h-\[95dvh\] {
     max-height: 95dvh;
   }
-  .max-h-\[230px\] {
-    max-height: 230px;
-  }
   .max-h-\[240px\] {
     max-height: 240px;
   }
+  .max-h-\[600px\] {
+    max-height: 600px;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-4 {
+    min-height: calc(var(--spacing) * 4);
+  }
+  .min-h-5 {
+    min-height: calc(var(--spacing) * 5);
+  }
   .min-h-6 {
     min-height: calc(var(--spacing) * 6);
   }
-  .min-h-10 {
-    min-height: calc(var(--spacing) * 10);
+  .min-h-7 {
+    min-height: calc(var(--spacing) * 7);
   }
-  .min-h-\[38px\] {
-    min-height: 38px;
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
   }
-  .min-h-\[56px\] {
-    min-height: 56px;
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
   }
-  .min-h-\[62px\] {
-    min-height: 62px;
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
   }
   .min-h-\[64px\] {
     min-height: 64px;
@@ -1524,42 +1565,30 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
-  .w-100 {
-    width: calc(var(--spacing) * 100);
+  .w-80 {
+    width: calc(var(--spacing) * 80);
   }
-  .w-\[2px\] {
-    width: 2px;
-  }
-  .w-\[16px\] {
-    width: 16px;
+  .w-99 {
+    width: calc(var(--spacing) * 99);
   }
-  .w-\[24px\] {
-    width: 24px;
+  .w-100 {
+    width: calc(var(--spacing) * 100);
   }
-  .w-\[32px\] {
-    width: 32px;
+  .w-120 {
+    width: calc(var(--spacing) * 120);
   }
-  .w-\[40px\] {
-    width: 40px;
+  .w-150 {
+    width: calc(var(--spacing) * 150);
   }
   .w-\[60px\] {
     width: 60px;
   }
-  .w-\[64px\] {
-    width: 64px;
-  }
   .w-\[280px\] {
     width: 280px;
   }
-  .w-\[300px\] {
-    width: 300px;
-  }
   .w-\[400px\] {
     width: 400px;
   }
-  .w-\[var\(--radix-popover-trigger-width\)\] {
-    width: var(--radix-popover-trigger-width);
-  }
   .w-auto {
     width: auto;
   }
@@ -1575,9 +1604,6 @@
   .w-px {
     width: 1px;
   }
-  .max-w-100 {
-    max-width: calc(var(--spacing) * 100);
-  }
   .max-w-160 {
     max-width: calc(var(--spacing) * 160);
   }
@@ -1599,6 +1625,9 @@
   .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
   .min-w-\[100px\] {
     min-width: 100px;
   }
@@ -1608,15 +1637,15 @@
   .min-w-\[140px\] {
     min-width: 140px;
   }
-  .min-w-\[160px\] {
-    min-width: 160px;
-  }
   .min-w-\[180px\] {
     min-width: 180px;
   }
   .min-w-\[200px\] {
     min-width: 200px;
   }
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
   .min-w-\[280px\] {
     min-width: 280px;
   }
@@ -1629,20 +1658,21 @@
   .flex-shrink {
     flex-shrink: 1;
   }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
   .grow-0 {
     flex-grow: 0;
   }
+  .table-fixed {
+    table-layout: fixed;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
-  .origin-top {
-    transform-origin: top;
+  .animate-bell {
+    animation: bell-ring 600ms ease-in-out;
+    transform-origin: top center;
   }
   .-translate-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
@@ -1653,18 +1683,34 @@
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
+  .-translate-x-px {
+    --tw-translate-x: -1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * 1);
     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-0 {
-    --tw-translate-y: calc(var(--spacing) * 0);
+  .translate-y-px {
+    --tw-translate-y: 1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-0 {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .rotate-0 {
     rotate: 0deg;
   }
@@ -1674,6 +1720,12 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
+  .animate-day-picker-color-in {
+    animation: day-picker-color-in 300ms ease-out;
+  }
   .animate-fade-in {
     animation: fade-in 300ms ease-out forwards;
   }
@@ -1683,6 +1735,9 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-shake {
+    animation: shake 0.1s ease-in-out 2;
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -1719,6 +1774,9 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-\[64px_repeat\(3\,180px\)\] {
+    grid-template-columns: 64px repeat(3,180px);
+  }
   .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
@@ -1743,6 +1801,9 @@
   .items-start {
     align-items: flex-start;
   }
+  .items-stretch {
+    align-items: stretch;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1755,6 +1816,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -1773,6 +1837,12 @@
   .gap-2\.5 {
     gap: calc(var(--spacing) * 2.5);
   }
+  .gap-2xl {
+    gap: var(--spacing_64);
+  }
+  .gap-2xs {
+    gap: var(--spacing_4);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1794,15 +1864,9 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
-  .gap-\[2px\] {
-    gap: 2px;
-  }
   .gap-\[5px\] {
     gap: 5px;
   }
-  .gap-\[6px\] {
-    gap: 6px;
-  }
   .gap-\[15px\] {
     gap: 15px;
   }
@@ -1824,6 +1888,9 @@
   .self-start {
     align-self: flex-start;
   }
+  .self-stretch {
+    align-self: stretch;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1856,6 +1923,9 @@
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1871,6 +1941,9 @@
   .rounded-\[10px\] {
     border-radius: 10px;
   }
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
   .rounded-\[16px\] {
     border-radius: 16px;
   }
@@ -1910,18 +1983,34 @@
     border-top-left-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
   }
+  .rounded-l-lg {
+    border-top-left-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+  }
   .rounded-l-md {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
   }
+  .rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .rounded-r-2xl {
     border-top-right-radius: var(--radius-2xl);
     border-bottom-right-radius: var(--radius-2xl);
   }
+  .rounded-r-lg {
+    border-top-right-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
+  }
   .rounded-r-md {
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
   }
+  .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
   .rounded-b-2xl {
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
@@ -1944,13 +2033,9 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-3 {
-    border-style: var(--tw-border-style);
-    border-width: 3px;
-  }
-  .border-\[0\.5px\] {
-    border-style: var(--tw-border-style);
-    border-width: 0.5px;
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
   }
   .border-r {
     border-right-style: var(--tw-border-style);
@@ -1960,25 +2045,14 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .border-dotted {
-    --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);
   }
@@ -2018,6 +2092,12 @@
   .bg-accept600 {
     background-color: var(--color-accept600);
   }
+  .bg-black\/25 {
+    background-color: color-mix(in srgb, #000000 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
+    }
+  }
   .bg-black\/30 {
     background-color: color-mix(in srgb, #000000 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2036,6 +2116,9 @@
   .bg-current {
     background-color: currentcolor;
   }
+  .bg-danger400 {
+    background-color: var(--color-danger400);
+  }
   .bg-danger500 {
     background-color: var(--color-danger500);
   }
@@ -2045,9 +2128,6 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
-  .bg-gray-900 {
-    background-color: var(--color-gray-900);
-  }
   .bg-hyper-blue {
     background-color: var(--color-hyper-blue);
   }
@@ -2090,9 +2170,15 @@
   .bg-neutral200 {
     background-color: var(--color-neutral200);
   }
+  .bg-neutral300 {
+    background-color: var(--color-neutral300);
+  }
   .bg-neutral800 {
     background-color: var(--color-neutral800);
   }
+  .bg-neutral900 {
+    background-color: var(--color-neutral900);
+  }
   .bg-orange400 {
     background-color: var(--color-orange400);
   }
@@ -2126,8 +2212,20 @@
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
-  .fill-gray-900 {
-    fill: var(--color-gray-900);
+  .fill-mono50 {
+    fill: var(--color-mono50);
+  }
+  .fill-mono100 {
+    fill: var(--color-mono100);
+  }
+  .fill-neutral900 {
+    fill: var(--color-neutral900);
+  }
+  .stroke-mono300 {
+    stroke: var(--color-mono300);
+  }
+  .object-contain {
+    object-fit: contain;
   }
   .object-cover {
     object-fit: cover;
@@ -2135,6 +2233,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-0\.75 {
+    padding: calc(var(--spacing) * 0.75);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -2144,15 +2245,15 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
-  .p-3\.5 {
-    padding: calc(var(--spacing) * 3.5);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -2162,9 +2263,6 @@
   .p-20 {
     padding: calc(var(--spacing) * 20);
   }
-  .p-\[3px\] {
-    padding: 3px;
-  }
   .p-lg {
     padding: var(--spacing_32);
   }
@@ -2204,6 +2302,9 @@
   .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .px-\[10px\] {
     padding-inline: 10px;
   }
@@ -2228,6 +2329,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -2243,6 +2347,13 @@
   .py-\[10px\] {
     padding-block: 10px;
   }
+  .py-\[18px\] {
+    padding-block: 18px;
+  }
+  .py-3xs {
+    padding-top: var(--spacing_2);
+    padding-bottom: var(--spacing_2);
+  }
   .py-sm {
     padding-top: var(--spacing_12);
     padding-bottom: var(--spacing_12);
@@ -2251,9 +2362,18 @@
     padding-top: var(--spacing_8);
     padding-bottom: var(--spacing_8);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pt-10 {
     padding-top: calc(var(--spacing) * 10);
   }
@@ -2263,6 +2383,14 @@
   .pt-xl {
     padding-top: var(--spacing_40);
   }
+  .px-2xs {
+    padding-left: var(--spacing_4);
+    padding-right: var(--spacing_4);
+  }
+  .px-3xs {
+    padding-left: var(--spacing_2);
+    padding-right: var(--spacing_2);
+  }
   .px-md {
     padding-left: var(--spacing_20);
     padding-right: var(--spacing_20);
@@ -2274,21 +2402,15 @@
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-  .pr-10 {
-    padding-right: calc(var(--spacing) * 10);
-  }
-  .pr-11 {
-    padding-right: calc(var(--spacing) * 11);
-  }
-  .pr-12 {
-    padding-right: calc(var(--spacing) * 12);
+  .pr-1\.5 {
+    padding-right: calc(var(--spacing) * 1.5);
   }
   .pr-sm {
     padding-right: var(--spacing_12);
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
@@ -2298,9 +2420,36 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .pl-5 {
     padding-left: calc(var(--spacing) * 5);
   }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+  .pl-7 {
+    padding-left: calc(var(--spacing) * 7);
+  }
+  .pl-\[14px\] {
+    padding-left: 14px;
+  }
+  .pl-\[18px\] {
+    padding-left: 18px;
+  }
+  .pl-\[20px\] {
+    padding-left: 20px;
+  }
+  .pl-\[22px\] {
+    padding-left: 22px;
+  }
+  .pl-\[24px\] {
+    padding-left: 24px;
+  }
+  .pl-\[28px\] {
+    padding-left: 28px;
+  }
   .pl-sm {
     padding-left: var(--spacing_12);
   }
@@ -2396,10 +2545,30 @@
   .text-\[24px\] {
     font-size: 24px;
   }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
+  .leading-7 {
+    --tw-leading: calc(var(--spacing) * 7);
+    line-height: calc(var(--spacing) * 7);
+  }
+  .leading-8 {
+    --tw-leading: calc(var(--spacing) * 8);
+    line-height: calc(var(--spacing) * 8);
+  }
+  .leading-9 {
+    --tw-leading: calc(var(--spacing) * 9);
+    line-height: calc(var(--spacing) * 9);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2438,6 +2607,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre {
+    white-space: pre;
+  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
@@ -2477,9 +2649,6 @@
   .text-lb500\! {
     color: var(--color-lb500) !important;
   }
-  .text-lb900 {
-    color: var(--color-lb900);
-  }
   .text-mono300 {
     color: var(--color-mono300);
   }
@@ -2498,9 +2667,6 @@
   .text-neutral-500 {
     color: var(--color-neutral-500);
   }
-  .text-neutral100 {
-    color: var(--color-neutral100);
-  }
   .text-neutral200 {
     color: var(--color-neutral200);
   }
@@ -2552,9 +2718,9 @@
   .underline-offset-\[4px\] {
     text-underline-offset: 4px;
   }
-  .placeholder-mono400 {
+  .placeholder-neutral300 {
     &::placeholder {
-      color: var(--color-mono400);
+      color: var(--color-neutral300);
     }
   }
   .opacity-0 {
@@ -2580,14 +2746,18 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-sm {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-xs {
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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-1 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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-2 {
     --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);
@@ -2595,11 +2765,8 @@
   .ring-blue-400 {
     --tw-ring-color: var(--color-blue-400);
   }
-  .ring-lb500\/20 {
-    --tw-ring-color: color-mix(in srgb, #6891f8 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-lb500) 20%, transparent);
-    }
+  .ring-lb500 {
+    --tw-ring-color: var(--color-lb500);
   }
   .outline-hidden {
     --tw-outline-style: none;
@@ -2617,6 +2784,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 0px;
   }
+  .outline-1 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .outline-2 {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -2625,6 +2796,18 @@
     outline-style: var(--tw-outline-style);
     outline-width: 3px;
   }
+  .-outline-offset-1 {
+    outline-offset: calc(1px * -1);
+  }
+  .-outline-offset-2 {
+    outline-offset: calc(2px * -1);
+  }
+  .-outline-offset-3 {
+    outline-offset: calc(3px * -1);
+  }
+  .\[outline-offset\:-2px\] {
+    outline-offset: -2px;
+  }
   .outline-danger500 {
     outline-color: var(--color-danger500);
   }
@@ -2634,22 +2817,40 @@
   .outline-lb500 {
     outline-color: var(--color-lb500);
   }
+  .outline-mono100 {
+    outline-color: var(--color-mono100);
+  }
+  .outline-mono200 {
+    outline-color: var(--color-mono200);
+  }
+  .outline-mono300 {
+    outline-color: var(--color-mono300);
+  }
   .outline-neutral100 {
     outline-color: var(--color-neutral100);
   }
+  .outline-neutral200 {
+    outline-color: var(--color-neutral200);
+  }
+  .outline-neutral500 {
+    outline-color: var(--color-neutral500);
+  }
   .outline-red500 {
     outline-color: var(--color-red500);
   }
   .outline-transparent {
     outline-color: transparent;
   }
+  .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,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[border-color\] {
-    transition-property: border-color;
+  .transition-\[outline-color\] {
+    transition-property: outline-color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -2673,10 +2874,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -2689,10 +2886,18 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .outline-dotted {
+    --tw-outline-style: dotted;
+    outline-style: dotted;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
   }
+  .outline-solid {
+    --tw-outline-style: solid;
+    outline-style: solid;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -2712,14 +2917,22 @@
   .ld-transition {
     transition: all 300ms ease-out;
   }
-  .group-focus-within\:block {
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
+  .group-focus-within\:pointer-events-auto {
     &:is(:where(.group):focus-within *) {
-      display: block;
+      pointer-events: auto;
     }
   }
-  .group-focus-within\:hidden {
+  .group-focus-within\:opacity-0 {
     &:is(:where(.group):focus-within *) {
-      display: none;
+      opacity: 0%;
+    }
+  }
+  .group-focus-within\:opacity-100 {
+    &:is(:where(.group):focus-within *) {
+      opacity: 100%;
     }
   }
   .group-hover\:cursor-col-resize {
@@ -2729,11 +2942,10 @@
       }
     }
   }
-  .group-hover\:border-2 {
+  .group-hover\:bg-lb500 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        border-style: var(--tw-border-style);
-        border-width: 2px;
+        background-color: var(--color-lb500);
       }
     }
   }
@@ -2744,6 +2956,14 @@
       }
     }
   }
+  .group-hover\:outline-2 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+      }
+    }
+  }
   .group-data-\[focused\=true\]\/day\:relative {
     &:is(:where(.group\/day)[data-focused="true"] *) {
       position: relative;
@@ -2754,18 +2974,39 @@
       z-index: 10;
     }
   }
-  .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
-    &:is(:where(.group\/day)[data-focused="true"] *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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);
+  .group-data-\[state\=closed\]\:animate-fade-in {
+    &:is(:where(.group)[data-state="closed"] *) {
+      animation: fade-in 300ms ease-out forwards;
     }
   }
-  .group-data-\[focused\=true\]\/day\:ring-lb600\/50 {
-    &:is(:where(.group\/day)[data-focused="true"] *) {
-      --tw-ring-color: color-mix(in srgb, #5883ee 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-lb600) 50%, transparent);
-      }
+  .group-data-\[state\=closed\]\:animate-fade-out {
+    &:is(:where(.group)[data-state="closed"] *) {
+      animation: fade-out 300ms ease-out forwards;
+    }
+  }
+  .group-data-\[state\=open\]\:rotate-180 {
+    &:is(:where(.group)[data-state="open"] *) {
+      rotate: 180deg;
+    }
+  }
+  .group-data-\[state\=open\]\:animate-fade-in {
+    &:is(:where(.group)[data-state="open"] *) {
+      animation: fade-in 300ms ease-out forwards;
+    }
+  }
+  .group-data-\[state\=open\]\:animate-fade-out {
+    &:is(:where(.group)[data-state="open"] *) {
+      animation: fade-out 300ms ease-out forwards;
+    }
+  }
+  .group-data-\[state\=open\]\:opacity-0 {
+    &:is(:where(.group)[data-state="open"] *) {
+      opacity: 0%;
+    }
+  }
+  .group-data-\[state\=open\]\:opacity-100 {
+    &:is(:where(.group)[data-state="open"] *) {
+      opacity: 100%;
     }
   }
   .peer-focus-visible\:ring-2 {
@@ -2827,17 +3068,15 @@
       background-color: var(--color-tintRed);
     }
   }
-  .hover\:cursor-pointer {
-    &:hover {
-      @media (hover: hover) {
-        cursor: pointer;
-      }
+  .focus-within\:outline-lb500 {
+    &:focus-within {
+      outline-color: var(--color-lb500);
     }
   }
-  .hover\:border-neutral200 {
+  .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-neutral200);
+        cursor: pointer;
       }
     }
   }
@@ -2869,13 +3108,6 @@
       }
     }
   }
-  .hover\:bg-lb50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-lb50);
-      }
-    }
-  }
   .hover\:bg-lb700 {
     &:hover {
       @media (hover: hover) {
@@ -3002,13 +3234,6 @@
       }
     }
   }
-  .hover\:text-lb900 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-lb900);
-      }
-    }
-  }
   .hover\:text-mono900 {
     &:hover {
       @media (hover: hover) {
@@ -3030,48 +3255,56 @@
       }
     }
   }
-  .hover\:text-neutral700 {
+  .hover\:text-neutral800 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-neutral700);
+        color: var(--color-neutral800);
       }
     }
   }
-  .hover\:text-neutral800 {
+  .hover\:text-neutral900 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-neutral800);
+        color: var(--color-neutral900);
       }
     }
   }
-  .focus\:border-blue-500 {
-    &:focus {
-      border-color: var(--color-blue-500);
+  .hover\:ring-0 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+      }
     }
   }
-  .focus\:border-lb500 {
-    &:focus {
-      border-color: var(--color-lb500);
+  .hover\:outline-neutral200 {
+    &:hover {
+      @media (hover: hover) {
+        outline-color: var(--color-neutral200);
+      }
     }
   }
-  .focus\:bg-lb50 {
-    &:focus {
-      background-color: var(--color-lb50);
+  .hover\:brightness-75 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-brightness: brightness(75%);
+        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\:bg-neutral50 {
+  .focus\:border-blue-500 {
     &:focus {
-      background-color: var(--color-neutral50);
+      border-color: var(--color-blue-500);
     }
   }
-  .focus\:bg-tintBlue {
+  .focus\:border-lb500 {
     &:focus {
-      background-color: var(--color-tintBlue);
+      border-color: var(--color-lb500);
     }
   }
-  .focus\:bg-tintRed {
+  .focus\:bg-tintBlue {
     &:focus {
-      background-color: var(--color-tintRed);
+      background-color: var(--color-tintBlue);
     }
   }
   .focus\:text-lb500 {
@@ -3079,22 +3312,6 @@
       color: var(--color-lb500);
     }
   }
-  .focus\:ring-1 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
-    }
-  }
-  .focus\:ring-lb500 {
-    &:focus {
-      --tw-ring-color: var(--color-lb500);
-    }
-  }
-  .focus\:outline-danger600 {
-    &:focus {
-      outline-color: var(--color-danger600);
-    }
-  }
   .focus\:outline-lb500 {
     &:focus {
       outline-color: var(--color-lb500);
@@ -3106,26 +3323,11 @@
       outline-style: none;
     }
   }
-  .focus\:ring-inset {
-    &:focus {
-      --tw-ring-inset: inset;
-    }
-  }
-  .focus-visible\:border-lb600 {
-    &:focus-visible {
-      border-color: var(--color-lb600);
-    }
-  }
   .focus-visible\:border-neutral-950 {
     &:focus-visible {
       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);
@@ -3148,17 +3350,9 @@
       --tw-ring-color: var(--color-lb500);
     }
   }
-  .focus-visible\:ring-lb600\/50 {
+  .focus-visible\:ring-neutral-950\/50 {
     &:focus-visible {
-      --tw-ring-color: color-mix(in srgb, #5883ee 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-lb600) 50%, transparent);
-      }
-    }
-  }
-  .focus-visible\:ring-neutral-950\/50 {
-    &:focus-visible {
-      --tw-ring-color: color-mix(in srgb, oklch(14.5% 0 0) 50%, transparent);
+      --tw-ring-color: color-mix(in srgb, oklch(14.5% 0 0) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-ring-color: color-mix(in oklab, var(--color-neutral-950) 50%, transparent);
       }
@@ -3175,11 +3369,6 @@
       --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;
@@ -3236,9 +3425,9 @@
       color: var(--color-lb700);
     }
   }
-  .active\:text-neutral700 {
+  .active\:text-neutral900 {
     &:active {
-      color: var(--color-neutral700);
+      color: var(--color-neutral900);
     }
   }
   .disabled\:cursor-not-allowed {
@@ -3312,6 +3501,25 @@
       }
     }
   }
+  .data-selectable\:cursor-pointer {
+    &[data-selectable] {
+      cursor: pointer;
+    }
+  }
+  .data-selectable\:rounded-\[5px\] {
+    &[data-selectable] {
+      border-radius: 5px;
+    }
+  }
+  .data-selectable\:hover\:bg-mono100 {
+    &[data-selectable] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-mono100);
+        }
+      }
+    }
+  }
   .data-\[active\=true\]\:bg-lb500 {
     &[data-active="true"] {
       background-color: var(--color-lb500);
@@ -3333,6 +3541,11 @@
       outline-width: 3px;
     }
   }
+  .data-\[open\=false\]\:opacity-0 {
+    &[data-open="false"] {
+      opacity: 0%;
+    }
+  }
   .data-\[outside\]\:font-normal {
     &[data-outside] {
       --tw-font-weight: var(--font-weight-normal);
@@ -3344,96 +3557,128 @@
       color: var(--color-mono400);
     }
   }
-  .data-\[range-end\=true\]\:rounded-md {
+  .data-\[range-end\=true\]\:animate-day-picker-color-in {
     &[data-range-end="true"] {
-      border-radius: var(--radius-md);
+      animation: day-picker-color-in 300ms ease-out;
     }
   }
-  .data-\[range-end\=true\]\:rounded-r-md {
+  .data-\[range-end\=true\]\:rounded-l-none {
     &[data-range-end="true"] {
-      border-top-right-radius: var(--radius-md);
-      border-bottom-right-radius: var(--radius-md);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .data-\[range-end\=true\]\:rounded-r-lg {
+    &[data-range-end="true"] {
+      border-top-right-radius: var(--radius-lg);
+      border-bottom-right-radius: var(--radius-lg);
     }
   }
-  .data-\[range-end\=true\]\:bg-lb600 {
+  .data-\[range-end\=true\]\:bg-tintBlue {
     &[data-range-end="true"] {
-      background-color: var(--color-lb600);
+      background-color: var(--color-tintBlue);
     }
   }
-  .data-\[range-end\=true\]\:text-white {
+  .data-\[range-end\=true\]\:text-lb500 {
     &[data-range-end="true"] {
-      color: var(--color-white);
+      color: var(--color-lb500);
     }
   }
-  .data-\[range-middle\=true\]\:rounded-none {
+  .data-\[range-middle\=true\]\:animate-day-range-picker-color-in {
     &[data-range-middle="true"] {
-      border-radius: 0;
+      animation: day-picker-range-color-in 300ms ease-out;
     }
   }
-  .data-\[range-middle\=true\]\:bg-lb50 {
+  .data-\[range-middle\=true\]\:bg-mono50 {
     &[data-range-middle="true"] {
-      background-color: var(--color-lb50);
+      background-color: var(--color-mono50);
     }
   }
-  .data-\[range-middle\=true\]\:text-lb900 {
+  .data-\[range-middle\=true\]\:text-neutral500 {
     &[data-range-middle="true"] {
-      color: var(--color-lb900);
+      color: var(--color-neutral500);
     }
   }
-  .data-\[range-start\=true\]\:rounded-md {
+  .data-\[range-start\=true\]\:animate-day-picker-color-in {
     &[data-range-start="true"] {
-      border-radius: var(--radius-md);
+      animation: day-picker-color-in 300ms ease-out;
     }
   }
-  .data-\[range-start\=true\]\:rounded-l-md {
+  .data-\[range-start\=true\]\:rounded-l-lg {
     &[data-range-start="true"] {
-      border-top-left-radius: var(--radius-md);
-      border-bottom-left-radius: var(--radius-md);
+      border-top-left-radius: var(--radius-lg);
+      border-bottom-left-radius: var(--radius-lg);
     }
   }
-  .data-\[range-start\=true\]\:bg-lb600 {
+  .data-\[range-start\=true\]\:rounded-r-none {
     &[data-range-start="true"] {
-      background-color: var(--color-lb600);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .data-\[range-start\=true\]\:bg-tintBlue {
+    &[data-range-start="true"] {
+      background-color: var(--color-tintBlue);
     }
   }
-  .data-\[range-start\=true\]\:text-white {
+  .data-\[range-start\=true\]\:text-lb500 {
     &[data-range-start="true"] {
-      color: var(--color-white);
+      color: var(--color-lb500);
     }
   }
-  .data-\[selected-single\=true\]\:bg-lb600 {
+  .data-\[selected-single\=true\]\:animate-day-picker-color-in {
     &[data-selected-single="true"] {
-      background-color: var(--color-lb600);
+      animation: day-picker-color-in 300ms ease-out;
+    }
+  }
+  .data-\[selected-single\=true\]\:bg-tintBlue {
+    &[data-selected-single="true"] {
+      background-color: var(--color-tintBlue);
     }
   }
-  .data-\[selected-single\=true\]\:text-white {
+  .data-\[selected-single\=true\]\:text-lb500 {
     &[data-selected-single="true"] {
-      color: var(--color-white);
+      color: var(--color-lb500);
     }
   }
-  .data-\[selected\=true\]\:rounded-none {
+  .data-\[selected\=true\]\:bg-tintBlue {
     &[data-selected="true"] {
-      border-radius: 0;
+      background-color: var(--color-tintBlue);
     }
   }
-  .data-\[state\=closed\]\:animate-fade-out {
+  .data-\[selected\=true\]\:ring-0 {
+    &[data-selected="true"] {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+    }
+  }
+  .data-\[selected\=true\]\:hover\:bg-tintBlue {
+    &[data-selected="true"] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-tintBlue);
+        }
+      }
+    }
+  }
+  .data-\[state\=closed\]\:accordion-up {
     &[data-state="closed"] {
-      animation: fade-out 300ms ease-out forwards;
+      animation: accordion-up 300ms ease-in-out;
     }
   }
-  .data-\[state\=open\]\:animate-fade-in {
-    &[data-state="open"] {
-      animation: fade-in 300ms ease-out forwards;
+  .data-\[state\=closed\]\:animate-fade-out {
+    &[data-state="closed"] {
+      animation: fade-out 300ms ease-out forwards;
     }
   }
-  .data-\[state\=open\]\:border-lb500 {
+  .data-\[state\=open\]\:accordion-down {
     &[data-state="open"] {
-      border-color: var(--color-lb500);
+      animation: accordion-down 300ms ease-in-out;
     }
   }
-  .data-\[state\=open\]\:border-red500 {
+  .data-\[state\=open\]\:animate-fade-in {
     &[data-state="open"] {
-      border-color: var(--color-red500);
+      animation: fade-in 300ms ease-out forwards;
     }
   }
   .data-\[weekend\]\:text-danger600 {
@@ -3473,6 +3718,26 @@
       left: calc(1 / 2 * 100%);
     }
   }
+  .mobile\:block {
+    @media (max-width: calc(768px - 1px)) {
+      display: block;
+    }
+  }
+  .mobile\:flex {
+    @media (max-width: calc(768px - 1px)) {
+      display: flex;
+    }
+  }
+  .mobile\:hidden {
+    @media (max-width: calc(768px - 1px)) {
+      display: none;
+    }
+  }
+  .mobile\:inline-block {
+    @media (max-width: calc(768px - 1px)) {
+      display: inline-block;
+    }
+  }
   .mobile\:h-\[320px\] {
     @media (max-width: calc(768px - 1px)) {
       height: 320px;
@@ -3488,6 +3753,11 @@
       height: auto;
     }
   }
+  .mobile\:min-h-13 {
+    @media (max-width: calc(768px - 1px)) {
+      min-height: calc(var(--spacing) * 13);
+    }
+  }
   .mobile\:w-full {
     @media (max-width: calc(768px - 1px)) {
       width: 100%;
@@ -3525,6 +3795,11 @@
       align-items: center;
     }
   }
+  .mobile\:gap-1 {
+    @media (max-width: calc(768px - 1px)) {
+      gap: calc(var(--spacing) * 1);
+    }
+  }
   .mobile\:overflow-hidden {
     @media (max-width: calc(768px - 1px)) {
       overflow: hidden;
@@ -3550,6 +3825,18 @@
       padding-block: calc(var(--spacing) * 0);
     }
   }
+  .mobile\:py-1 {
+    @media (max-width: calc(768px - 1px)) {
+      padding-block: calc(var(--spacing) * 1);
+    }
+  }
+  .mobile\:display12 {
+    @media (max-width: calc(768px - 1px)) {
+      font-size: var(--text-display12);
+      line-height: var(--leading-display12);
+      letter-spacing: var(--tracking-display12);
+    }
+  }
   .mobile\:display14 {
     @media (max-width: calc(768px - 1px)) {
       font-size: var(--text-display14);
@@ -3557,11 +3844,78 @@
       letter-spacing: var(--tracking-display14);
     }
   }
+  .mobile\:display20 {
+    @media (max-width: calc(768px - 1px)) {
+      font-size: var(--text-display20);
+      line-height: var(--leading-display20);
+      letter-spacing: var(--tracking-display20);
+    }
+  }
   .mobile\:medium {
     @media (max-width: calc(768px - 1px)) {
       font-weight: var(--font-medium);
     }
   }
+  .\[\&_svg\]\:h-\[var\(--control-icon-2xs\)\] {
+    & svg {
+      height: var(--control-icon-2xs);
+    }
+  }
+  .\[\&_svg\]\:h-\[var\(--control-icon-lg\)\] {
+    & svg {
+      height: var(--control-icon-lg);
+    }
+  }
+  .\[\&_svg\]\:h-\[var\(--control-icon-md\)\] {
+    & svg {
+      height: var(--control-icon-md);
+    }
+  }
+  .\[\&_svg\]\:h-\[var\(--control-icon-sm\)\] {
+    & svg {
+      height: var(--control-icon-sm);
+    }
+  }
+  .\[\&_svg\]\:h-\[var\(--control-icon-xl\)\] {
+    & svg {
+      height: var(--control-icon-xl);
+    }
+  }
+  .\[\&_svg\]\:h-\[var\(--control-icon-xs\)\] {
+    & svg {
+      height: var(--control-icon-xs);
+    }
+  }
+  .\[\&_svg\]\:w-\[var\(--control-icon-2xs\)\] {
+    & svg {
+      width: var(--control-icon-2xs);
+    }
+  }
+  .\[\&_svg\]\:w-\[var\(--control-icon-lg\)\] {
+    & svg {
+      width: var(--control-icon-lg);
+    }
+  }
+  .\[\&_svg\]\:w-\[var\(--control-icon-md\)\] {
+    & svg {
+      width: var(--control-icon-md);
+    }
+  }
+  .\[\&_svg\]\:w-\[var\(--control-icon-sm\)\] {
+    & svg {
+      width: var(--control-icon-sm);
+    }
+  }
+  .\[\&_svg\]\:w-\[var\(--control-icon-xl\)\] {
+    & svg {
+      width: var(--control-icon-xl);
+    }
+  }
+  .\[\&_svg\]\:w-\[var\(--control-icon-xs\)\] {
+    & svg {
+      width: var(--control-icon-xs);
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;
@@ -3699,6 +4053,48 @@
     opacity: 0;
   }
 }
+@keyframes bell-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(20deg);
+  }
+  25% {
+    transform: rotate(-18deg);
+  }
+  40% {
+    transform: rotate(14deg);
+  }
+  55% {
+    transform: rotate(-10deg);
+  }
+  70% {
+    transform: rotate(6deg);
+  }
+  85% {
+    transform: rotate(-3deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
 @keyframes plan-enter {
   from {
     opacity: 0;
@@ -3792,6 +4188,39 @@
     opacity: 0;
   }
 }
+@keyframes fade-in-50 {
+  from {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-in-75 {
+  from {
+    opacity: 0.75;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes day-picker-color-in {
+  from {
+    background-color: var(--color-lb50);
+  }
+  to {
+    background-color: var(--color-tintBlue);
+  }
+}
+@keyframes day-picker-range-color-in {
+  from {
+    background-color: var(--color-white);
+    color: var(--color-neutral900);
+  }
+  to {
+    background-color: var(--color-mono50);
+  }
+}
 @layer components {
   .icon-2xs {
     width: var(--control-icon-2xs);
@@ -3896,9 +4325,9 @@
     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);
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
   }
   .btn-xl {
     height: var(--control-height-xl);
@@ -3907,9 +4336,9 @@
     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);
+    font-size: var(--text-display28);
+    line-height: var(--leading-display28);
+    letter-spacing: var(--tracking-display28);
   }
   .toggle-track-xs {
     width: 28px;
@@ -4011,7 +4440,7 @@
   .input-2xs {
     height: var(--control-height-2xs);
     padding-inline: var(--control-padding-x-input-2xs);
-    border-radius: var(--control-radius-2xs);
+    border-radius: var(--control-radius-sm);
     border-width: var(--control-border-2xs);
     font-size: var(--text-display10);
     line-height: var(--leading-display10);
@@ -4020,7 +4449,7 @@
   .input-xs {
     height: var(--control-height-xs);
     padding-inline: var(--control-padding-x-input-xs);
-    border-radius: var(--control-radius-xs);
+    border-radius: var(--control-radius-sm);
     border-width: var(--control-border-2xs);
     font-size: var(--text-display12);
     line-height: var(--leading-display12);
@@ -4062,6 +4491,10 @@
     line-height: var(--leading-display20);
     letter-spacing: var(--tracking-display20);
   }
+  .ld-input-field:autofill, .ld-input-field:-webkit-autofill, .ld-input-field:-webkit-autofill:hover, .ld-input-field:-webkit-autofill:focus {
+    transition: background-color 600000s 0s;
+    -webkit-text-fill-color: inherit;
+  }
 }
 @layer components {
   .badge-xs {
@@ -4134,6 +4567,9 @@
   prose ul li::marker, prose ol li::marker {
     color: #000 !important;
   }
+  .prose :is(strong, b) {
+    color: inherit !important;
+  }
 }
 .ProseMirror img {
   max-width: 100%;
@@ -4224,6 +4660,80 @@
 .ProseMirror [data-resize-wrapper] img {
   margin: 0 !important;
 }
+@layer components {
+  .select-2xs {
+    height: var(--control-height-2xs);
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .select-xs {
+    height: var(--control-height-xs);
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .select-sm {
+    height: var(--control-height-sm);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .select-md {
+    height: var(--control-height-md);
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+  .select-lg {
+    height: var(--control-height-lg);
+    font-size: var(--text-display18);
+    line-height: var(--leading-display18);
+    letter-spacing: var(--tracking-display18);
+  }
+  .select-xl {
+    height: var(--control-height-xl);
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
+  }
+  .select-item-2xs {
+    min-height: var(--control-height-2xs);
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .select-item-xs {
+    min-height: var(--control-height-xs);
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
+  .select-item-sm {
+    min-height: var(--control-height-sm);
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .select-item-md {
+    min-height: var(--control-height-md);
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+  .select-item-lg {
+    min-height: var(--control-height-lg);
+    font-size: var(--text-display18);
+    line-height: var(--leading-display18);
+    letter-spacing: var(--tracking-display18);
+  }
+  .select-item-xl {
+    min-height: var(--control-height-xl);
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
+  }
+}
 @layer components {
   .bread-crumb-2xs {
     font-size: var(--text-display10);
@@ -4437,35 +4947,37 @@
     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);
+    transition: all 300ms ease-out;
+    border-radius: 9999px;
+    width: 32px;
+    height: 32px;
   }
   .ld-carousel__nav:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
   .ld-carousel__nav:first-child {
-    left: 0;
+    left: -1%;
   }
   .ld-carousel__nav:last-child {
-    right: 0;
+    right: -1%;
   }
   .ld-carousel__nav--vertical {
-    top: auto;
-    bottom: auto;
-    left: 0;
-    right: 0;
+    transform: translateX(-50%);
   }
   .ld-carousel__nav--vertical:first-child {
-    top: 0;
+    top: -1%;
+    bottom: auto;
+    left: 50%;
+    right: auto;
   }
   .ld-carousel__nav--vertical:last-child {
-    bottom: 0;
+    top: auto;
+    bottom: -1%;
+    left: 50%;
+    right: auto;
   }
 }
 @property --tw-translate-x {
@@ -4483,6 +4995,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;
@@ -4586,6 +5113,59 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -4604,12 +5184,25 @@
     opacity: 0.5;
   }
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --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;
@@ -4633,6 +5226,19 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
       --tw-ease: initial;
     }