@loword/loword-design-system 0.0.11 → 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,27 +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-\[var\(--control-padding-x-input-2xs\)\] {
-    right: var(--control-padding-x-input-2xs);
-  }
-  .right-\[var\(--control-padding-x-input-lg\)\] {
-    right: var(--control-padding-x-input-lg);
-  }
-  .right-\[var\(--control-padding-x-input-md\)\] {
-    right: var(--control-padding-x-input-md);
-  }
-  .right-\[var\(--control-padding-x-input-sm\)\] {
-    right: var(--control-padding-x-input-sm);
-  }
-  .right-\[var\(--control-padding-x-input-xl\)\] {
-    right: var(--control-padding-x-input-xl);
-  }
-  .right-\[var\(--control-padding-x-input-xs\)\] {
-    right: var(--control-padding-x-input-xs);
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -551,6 +538,9 @@
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -1177,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);
   }
@@ -1195,6 +1188,9 @@
   .mb-md {
     margin-bottom: var(--spacing_20);
   }
+  .mb-sm {
+    margin-bottom: var(--spacing_12);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -1256,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);
@@ -1272,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);
@@ -1314,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);
   }
@@ -1377,17 +1384,14 @@
   .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;
@@ -1398,9 +1402,18 @@
   .h-\[40px\] {
     height: 40px;
   }
+  .h-\[46px\] {
+    height: 46px;
+  }
+  .h-\[52px\] {
+    height: 52px;
+  }
   .h-\[64px\] {
     height: 64px;
   }
+  .h-\[80vh\] {
+    height: 80vh;
+  }
   .h-\[400px\] {
     height: 400px;
   }
@@ -1443,12 +1456,30 @@
   .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-7 {
+    min-height: calc(var(--spacing) * 7);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
@@ -1534,6 +1565,9 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-99 {
     width: calc(var(--spacing) * 99);
   }
@@ -1546,33 +1580,12 @@
   .w-150 {
     width: calc(var(--spacing) * 150);
   }
-  .w-\[2px\] {
-    width: 2px;
-  }
-  .w-\[16px\] {
-    width: 16px;
-  }
-  .w-\[24px\] {
-    width: 24px;
-  }
-  .w-\[32px\] {
-    width: 32px;
-  }
-  .w-\[40px\] {
-    width: 40px;
-  }
   .w-\[60px\] {
     width: 60px;
   }
-  .w-\[64px\] {
-    width: 64px;
-  }
   .w-\[280px\] {
     width: 280px;
   }
-  .w-\[300px\] {
-    width: 300px;
-  }
   .w-\[400px\] {
     width: 400px;
   }
@@ -1630,6 +1643,9 @@
   .min-w-\[200px\] {
     min-width: 200px;
   }
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
   .min-w-\[280px\] {
     min-width: 280px;
   }
@@ -1642,9 +1658,6 @@
   .flex-shrink {
     flex-shrink: 1;
   }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1657,6 +1670,10 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .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);
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
@@ -1666,10 +1683,34 @@
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-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-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;
   }
@@ -1679,6 +1720,9 @@
   .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;
   }
@@ -1691,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);
   }
@@ -1769,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);
   }
@@ -1787,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);
   }
@@ -1808,33 +1864,12 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
-  .gap-16 {
-    gap: calc(var(--spacing) * 16);
-  }
   .gap-\[5px\] {
     gap: 5px;
   }
   .gap-\[15px\] {
     gap: 15px;
   }
-  .gap-\[calc\(var\(--control-padding-x-input-2xs\)\/2\)\] {
-    gap: calc(var(--control-padding-x-input-2xs) / 2);
-  }
-  .gap-\[calc\(var\(--control-padding-x-input-lg\)\/2\)\] {
-    gap: calc(var(--control-padding-x-input-lg) / 2);
-  }
-  .gap-\[calc\(var\(--control-padding-x-input-md\)\/2\)\] {
-    gap: calc(var(--control-padding-x-input-md) / 2);
-  }
-  .gap-\[calc\(var\(--control-padding-x-input-sm\)\/2\)\] {
-    gap: calc(var(--control-padding-x-input-sm) / 2);
-  }
-  .gap-\[calc\(var\(--control-padding-x-input-xl\)\/2\)\] {
-    gap: calc(var(--control-padding-x-input-xl) / 2);
-  }
-  .gap-\[calc\(var\(--control-padding-x-input-xs\)\/2\)\] {
-    gap: calc(var(--control-padding-x-input-xs) / 2);
-  }
   .gap-lg {
     gap: var(--spacing_32);
   }
@@ -1888,6 +1923,12 @@
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
   .rounded-\[5px\] {
     border-radius: 5px;
   }
@@ -1900,6 +1941,9 @@
   .rounded-\[10px\] {
     border-radius: 10px;
   }
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
   .rounded-\[16px\] {
     border-radius: 16px;
   }
@@ -1989,10 +2033,6 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-3 {
-    border-style: var(--tw-border-style);
-    border-width: 3px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -2005,18 +2045,10 @@
     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;
@@ -2024,6 +2056,9 @@
   .border-danger500 {
     border-color: var(--color-danger500);
   }
+  .border-danger600 {
+    border-color: var(--color-danger600);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -2057,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)) {
@@ -2075,6 +2116,9 @@
   .bg-current {
     background-color: currentcolor;
   }
+  .bg-danger400 {
+    background-color: var(--color-danger400);
+  }
   .bg-danger500 {
     background-color: var(--color-danger500);
   }
@@ -2084,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);
   }
@@ -2099,6 +2140,9 @@
   .bg-lb500 {
     background-color: var(--color-lb500);
   }
+  .bg-lb600 {
+    background-color: var(--color-lb600);
+  }
   .bg-mono50 {
     background-color: var(--color-mono50);
   }
@@ -2132,6 +2176,9 @@
   .bg-neutral800 {
     background-color: var(--color-neutral800);
   }
+  .bg-neutral900 {
+    background-color: var(--color-neutral900);
+  }
   .bg-orange400 {
     background-color: var(--color-orange400);
   }
@@ -2165,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;
@@ -2243,6 +2302,9 @@
   .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .px-\[10px\] {
     padding-inline: 10px;
   }
@@ -2267,15 +2329,15 @@
   .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);
   }
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
-  .py-8 {
-    padding-block: calc(var(--spacing) * 8);
-  }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
@@ -2285,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);
@@ -2299,6 +2368,12 @@
   .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);
   }
@@ -2308,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);
@@ -2337,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);
   }
@@ -2435,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;
@@ -2477,6 +2607,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre {
+    white-space: pre;
+  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
@@ -2516,9 +2649,6 @@
   .text-lb500\! {
     color: var(--color-lb500) !important;
   }
-  .text-lb900 {
-    color: var(--color-lb900);
-  }
   .text-mono300 {
     color: var(--color-mono300);
   }
@@ -2620,6 +2750,10 @@
     --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);
@@ -2668,6 +2802,9 @@
   .-outline-offset-2 {
     outline-offset: calc(2px * -1);
   }
+  .-outline-offset-3 {
+    outline-offset: calc(3px * -1);
+  }
   .\[outline-offset\:-2px\] {
     outline-offset: -2px;
   }
@@ -2695,12 +2832,18 @@
   .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));
@@ -2731,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;
@@ -2747,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;
@@ -2795,6 +2942,13 @@
       }
     }
   }
+  .group-hover\:bg-lb500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-lb500);
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2820,6 +2974,41 @@
       z-index: 10;
     }
   }
+  .group-data-\[state\=closed\]\:animate-fade-in {
+    &:is(:where(.group)[data-state="closed"] *) {
+      animation: fade-in 300ms ease-out forwards;
+    }
+  }
+  .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 {
     &:is(:where(.peer):focus-visible ~ *) {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2879,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;
       }
     }
   }
@@ -2921,13 +3108,6 @@
       }
     }
   }
-  .hover\:bg-lb50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-lb50);
-      }
-    }
-  }
   .hover\:bg-lb700 {
     &:hover {
       @media (hover: hover) {
@@ -3097,24 +3277,29 @@
       }
     }
   }
-  .focus\:border-blue-500 {
-    &:focus {
-      border-color: var(--color-blue-500);
+  .hover\:outline-neutral200 {
+    &:hover {
+      @media (hover: hover) {
+        outline-color: var(--color-neutral200);
+      }
     }
   }
-  .focus\:border-lb500 {
-    &:focus {
-      border-color: var(--color-lb500);
+  .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-lb50 {
+  .focus\:border-blue-500 {
     &:focus {
-      background-color: var(--color-lb50);
+      border-color: var(--color-blue-500);
     }
   }
-  .focus\:bg-neutral50 {
+  .focus\:border-lb500 {
     &:focus {
-      background-color: var(--color-neutral50);
+      border-color: var(--color-lb500);
     }
   }
   .focus\:bg-tintBlue {
@@ -3122,27 +3307,11 @@
       background-color: var(--color-tintBlue);
     }
   }
-  .focus\:bg-tintRed {
-    &:focus {
-      background-color: var(--color-tintRed);
-    }
-  }
   .focus\:text-lb500 {
     &:focus {
       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-lb500 {
     &:focus {
       outline-color: var(--color-lb500);
@@ -3154,11 +3323,6 @@
       outline-style: none;
     }
   }
-  .focus\:ring-inset {
-    &:focus {
-      --tw-ring-inset: inset;
-    }
-  }
   .focus-visible\:border-neutral-950 {
     &:focus-visible {
       border-color: var(--color-neutral-950);
@@ -3337,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);
@@ -3358,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);
@@ -3396,9 +3584,9 @@
       color: var(--color-lb500);
     }
   }
-  .data-\[range-middle\=true\]\:animate-day-picker-color-in {
+  .data-\[range-middle\=true\]\:animate-day-range-picker-color-in {
     &[data-range-middle="true"] {
-      animation: day-picker-color-in 300ms ease-out;
+      animation: day-picker-range-color-in 300ms ease-out;
     }
   }
   .data-\[range-middle\=true\]\:bg-mono50 {
@@ -3453,17 +3641,41 @@
       color: var(--color-lb500);
     }
   }
+  .data-\[selected\=true\]\:bg-tintBlue {
+    &[data-selected="true"] {
+      background-color: var(--color-tintBlue);
+    }
+  }
   .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: accordion-up 300ms ease-in-out;
+    }
+  }
   .data-\[state\=closed\]\:animate-fade-out {
     &[data-state="closed"] {
       animation: fade-out 300ms ease-out forwards;
     }
   }
+  .data-\[state\=open\]\:accordion-down {
+    &[data-state="open"] {
+      animation: accordion-down 300ms ease-in-out;
+    }
+  }
   .data-\[state\=open\]\:animate-fade-in {
     &[data-state="open"] {
       animation: fade-in 300ms ease-out forwards;
@@ -3506,6 +3718,16 @@
       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;
@@ -3531,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%;
@@ -3568,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;
@@ -3593,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);
@@ -3600,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;
@@ -3742,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;
@@ -3852,10 +4205,21 @@
   }
 }
 @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 {
@@ -4127,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 {
@@ -4199,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%;
@@ -4576,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 {
@@ -4622,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;
@@ -4725,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;
@@ -4743,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;
@@ -4772,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;
     }