@parto-system-design/ui 1.1.0 → 1.1.2

package/dist/index.css

@@ -4,9 +4,6 @@
   container-type: inline-size;
   container-name: field-group;
 }
-.\@container {
-  container-type: inline-size;
-}
 .pointer-events-auto {
   pointer-events: auto;
 }
@@ -16,6 +13,9 @@
 .invisible {
   visibility: hidden;
 }
+.visible {
+  visibility: visible;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -148,6 +148,9 @@
 .hidden {
   display: none;
 }
+.inline {
+  display: inline;
+}
 .inline-block {
   display: inline-block;
 }
@@ -248,8 +251,8 @@
 .max-h-\[300px\] {
   max-height: 300px;
 }
-.min-h-\[38px\] {
-  min-height: 38px;
+.min-h-\[34px\] {
+  min-height: 34px;
 }
 .min-h-\[200px\] {
   min-height: 200px;
@@ -263,9 +266,21 @@
 .w-\(--sidebar-width\) {
   width: var(--sidebar-width);
 }
+.w-1\/2 {
+  width: calc(1/2 * 100%);
+}
+.w-1\/3 {
+  width: calc(1/3 * 100%);
+}
+.w-1\/4 {
+  width: calc(1/4 * 100%);
+}
 .w-3\/4 {
   width: calc(3/4 * 100%);
 }
+.w-\[--radix-popover-trigger-width\] {
+  width: --radix-popover-trigger-width;
+}
 .w-\[1px\] {
   width: 1px;
 }
@@ -317,14 +332,17 @@
 .max-w-max {
   max-width: max-content;
 }
+.min-w-\[1\.25rem\] {
+  min-width: 1.25rem;
+}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
-.min-w-\[120px\] {
-  min-width: 120px;
+.min-w-\[80px\] {
+  min-width: 80px;
 }
 .min-w-\[140px\] {
   min-width: 140px;
@@ -449,6 +467,9 @@
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .flex-col {
   flex-direction: column;
 }
@@ -494,9 +515,25 @@
 .justify-center {
   justify-content: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-start {
   justify-content: flex-start;
 }
+.divide-x {
+  :where(& > :not(:last-child)) {
+    --tw-divide-x-reverse: 0;
+    border-inline-style: var(--tw-border-style);
+    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+  }
+}
+.divide-border {
+  :where(& > :not(:last-child)) {
+    border-color: hsl(var(--border-default));
+  }
+}
 .self-stretch {
   align-self: stretch;
 }
@@ -576,6 +613,10 @@
   border-style: var(--tw-border-style);
   border-width: 0px;
 }
+.border-2 {
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+}
 .border-y {
   border-block-style: var(--tw-border-style);
   border-block-width: 1px;
@@ -643,6 +684,15 @@
 .border {
   border-color: hsl(var(--border-default));
 }
+.border-\[hsl\(var\(--sentiment-negative\)\/0\.3\)\] {
+  border-color: hsl(var(--sentiment-negative)/0.3);
+}
+.border-\[hsl\(var\(--sentiment-neutral\)\/0\.3\)\] {
+  border-color: hsl(var(--sentiment-neutral)/0.3);
+}
+.border-\[hsl\(var\(--sentiment-positive\)\/0\.3\)\] {
+  border-color: hsl(var(--sentiment-positive)/0.3);
+}
 .border-border {
   border-color: hsl(var(--border-default));
 }
@@ -751,6 +801,33 @@
 .bg {
   background-color: hsl(var(--background-default));
 }
+.bg-\[hsl\(var\(--sentiment-negative\)\)\] {
+  background-color: hsl(var(--sentiment-negative));
+}
+.bg-\[hsl\(var\(--sentiment-negative\)\/0\.1\)\] {
+  background-color: hsl(var(--sentiment-negative)/0.1);
+}
+.bg-\[hsl\(var\(--sentiment-negative\)\/0\.12\)\] {
+  background-color: hsl(var(--sentiment-negative)/0.12);
+}
+.bg-\[hsl\(var\(--sentiment-neutral\)\)\] {
+  background-color: hsl(var(--sentiment-neutral));
+}
+.bg-\[hsl\(var\(--sentiment-neutral\)\/0\.1\)\] {
+  background-color: hsl(var(--sentiment-neutral)/0.1);
+}
+.bg-\[hsl\(var\(--sentiment-neutral\)\/0\.12\)\] {
+  background-color: hsl(var(--sentiment-neutral)/0.12);
+}
+.bg-\[hsl\(var\(--sentiment-positive\)\)\] {
+  background-color: hsl(var(--sentiment-positive));
+}
+.bg-\[hsl\(var\(--sentiment-positive\)\/0\.1\)\] {
+  background-color: hsl(var(--sentiment-positive)/0.1);
+}
+.bg-\[hsl\(var\(--sentiment-positive\)\/0\.12\)\] {
+  background-color: hsl(var(--sentiment-positive)/0.12);
+}
 .bg-accent {
   background-color: hsl(var(--background-surface-200));
 }
@@ -796,6 +873,9 @@
 .bg-brand-600 {
   background-color: hsl(var(--brand-600));
 }
+.bg-card {
+  background-color: hsl(var(--background-surface-100));
+}
 .bg-destructive {
   background-color: hsl(var(--destructive-default));
 }
@@ -823,6 +903,9 @@
     background-color: color-mix(in oklab, hsl(var(--foreground-default)) 2.6%, transparent);
   }
 }
+.bg-green-500 {
+  background-color: #22c55e;
+}
 .bg-input {
   background-color: hsl(var(--background-control));
 }
@@ -886,6 +969,9 @@
 .bg-warning-300 {
   background-color: hsl(var(--warning-300));
 }
+.bg-warning-500 {
+  background-color: hsl(var(--warning-500));
+}
 .bg-warning-600 {
   background-color: hsl(var(--warning-600));
 }
@@ -893,12 +979,28 @@
   --tw-gradient-position: to bottom right in oklab;
   background-image: linear-gradient(var(--tw-gradient-stops));
 }
+.from-brand-400 {
+  --tw-gradient-from: hsl(var(--brand-400));
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
+.via-brand {
+  --tw-gradient-via: hsl(var(--brand-default));
+  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-via-stops);
+}
+.to-brand-400 {
+  --tw-gradient-to: hsl(var(--brand-400));
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
 .fill-brand {
   fill: hsl(var(--brand-default));
 }
 .fill-current {
   fill: currentcolor;
 }
+.object-contain {
+  object-fit: contain;
+}
 .object-cover {
   object-fit: cover;
 }
@@ -911,6 +1013,9 @@
 .text-center {
   text-align: center;
 }
+.text-end {
+  text-align: end;
+}
 .text-left {
   text-align: left;
 }
@@ -923,20 +1028,69 @@
 .align-middle {
   vertical-align: middle;
 }
-.text-\[0\.8rem\] {
-  font-size: 0.8rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: var(--tw-leading, 2rem);
+}
+.text-2xs {
+  font-size: 0.625rem;
+  line-height: var(--tw-leading, 1rem);
 }
-.text-\[10px\] {
-  font-size: 10px;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: var(--tw-leading, 2.375rem);
+}
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: var(--tw-leading, 2.75rem);
+}
+.text-base {
+  font-size: 1rem;
+  line-height: var(--tw-leading, 1.625rem);
+}
+.text-lg {
+  font-size: 1.125rem;
+  line-height: var(--tw-leading, 1.75rem);
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: var(--tw-leading, 1.375rem);
+}
+.text-xl {
+  font-size: 1.25rem;
+  line-height: var(--tw-leading, 1.875rem);
+}
+.text-xs {
+  font-size: 0.75rem;
+  line-height: var(--tw-leading, 1.125rem);
+}
+.text-\[0\.6em\] {
+  font-size: 0.6em;
 }
 .leading-none {
   --tw-leading: 1;
   line-height: 1;
 }
+.font-black {
+  --tw-font-weight: 900;
+  font-weight: 900;
+}
+.font-bold {
+  --tw-font-weight: 700;
+  font-weight: 700;
+}
+.font-medium {
+  --tw-font-weight: 500;
+  font-weight: 500;
+}
 .font-regular {
   --tw-font-weight: 400;
   font-weight: 400;
 }
+.font-semibold {
+  --tw-font-weight: 600;
+  font-weight: 600;
+}
 .font-regular {
   font-weight: 400;
 }
@@ -970,9 +1124,21 @@
 .text {
   color: hsl(var(--foreground-default));
 }
+.text-\[hsl\(var\(--sentiment-negative\)\)\] {
+  color: hsl(var(--sentiment-negative));
+}
+.text-\[hsl\(var\(--sentiment-neutral\)\)\] {
+  color: hsl(var(--sentiment-neutral));
+}
+.text-\[hsl\(var\(--sentiment-positive\)\)\] {
+  color: hsl(var(--sentiment-positive));
+}
 .text-accent-foreground {
   color: hsl(var(--foreground-default));
 }
+.text-alternative {
+  color: hsl(var(--background-alternative-default));
+}
 .text-background {
   color: hsl(var(--background-default));
 }
@@ -985,6 +1151,9 @@
 .text-border-muted {
   color: hsl(var(--border-muted));
 }
+.text-brand {
+  color: hsl(var(--brand-default));
+}
 .text-brand-600 {
   color: hsl(var(--brand-600));
 }
@@ -1003,6 +1172,12 @@
 .text-destructive {
   color: hsl(var(--destructive-default));
 }
+.text-destructive-200 {
+  color: hsl(var(--destructive-200));
+}
+.text-destructive-400 {
+  color: hsl(var(--destructive-400));
+}
 .text-destructive-600 {
   color: hsl(var(--destructive-600));
 }
@@ -1069,6 +1244,9 @@
 .text-warning {
   color: hsl(var(--warning-default));
 }
+.text-warning-600 {
+  color: hsl(var(--warning-600));
+}
 .uppercase {
   text-transform: uppercase;
 }
@@ -1091,20 +1269,51 @@
 .opacity-0 {
   opacity: 0%;
 }
+.opacity-40 {
+  opacity: 40%;
+}
 .opacity-50 {
   opacity: 50%;
 }
 .opacity-70 {
   opacity: 70%;
 }
+.shadow {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
   --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.shadow-card {
+  --tw-shadow: 0 2px 8px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.shadow-dropdown {
+  --tw-shadow: 0 4px 16px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.12));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.08)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 2px 4px -2px 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);
+}
 .shadow-none {
   --tw-shadow: 0 0 #0000;
   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 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);
+}
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.08)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .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);
@@ -1117,8 +1326,8 @@
   --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);
 }
-.\[--tw-ring-color\:conic-gradient\(from_180deg\,\#f59e0b\,\#fbbf24\,\#f59e0b\)\] {
-  --tw-ring-color: conic-gradient(from 180deg,#f59e0b,#fbbf24,#f59e0b);
+.\[--tw-ring-color\:conic-gradient\(from_180deg\,hsl\(var\(--brand-default\)\)\,hsl\(var\(--brand-400\)\)\,hsl\(var\(--brand-default\)\)\)\] {
+  --tw-ring-color: conic-gradient(from 180deg,hsl(var(--brand-default)),hsl(var(--brand-400)),hsl(var(--brand-default)));
 }
 .ring-background {
   --tw-ring-color: hsl(var(--background-default));
@@ -1129,6 +1338,9 @@
 .ring-primary {
   --tw-ring-color: hsl(var(--brand-default));
 }
+.ring-ring {
+  --tw-ring-color: hsl(var(--border-strong));
+}
 .ring-ring\/50 {
   --tw-ring-color: hsl(var(--border-strong));
   @supports (color: color-mix(in lab, red, red)) {
@@ -1160,9 +1372,8 @@
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
 }
-.outline-0 {
-  outline-style: var(--tw-outline-style);
-  outline-width: 0px;
+.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;
@@ -1258,6 +1469,11 @@
   -webkit-user-select: none;
   user-select: none;
 }
+.divide-x-reverse {
+  :where(& > :not(:last-child)) {
+    --tw-divide-x-reverse: 1;
+  }
+}
 .duration-200 {
   animation-duration: 200ms;
 }
@@ -1279,9 +1495,15 @@
 .ease-out {
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.fade-in {
+  --tw-enter-opacity: 0;
+}
 .fade-in-50 {
   --tw-enter-opacity: 0.5;
 }
+.fade-out {
+  --tw-exit-opacity: 0;
+}
 .group-focus-within\/menu-item\:opacity-100 {
   &:is(:where(.group\/menu-item):focus-within *) {
     opacity: 100%;
@@ -1297,6 +1519,13 @@
     }
   }
 }
+.group-hover\:scale-\[1\.02\] {
+  &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      scale: 1.02;
+    }
+  }
+}
 .group-hover\:opacity-100 {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -1419,6 +1648,12 @@
     border-color: hsl(var(--border-muted));
   }
 }
+.group-data-\[variant\=floating\]\:shadow-sm {
+  &:is(:where(.group)[data-variant="floating"] *) {
+    --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);
+  }
+}
 .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
   &:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) {
     display: block;
@@ -1470,6 +1705,12 @@
     color: hsl(var(--foreground-default));
   }
 }
+.group-data-\[viewport\=false\]\/navigation-menu\:shadow {
+  &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07));
+    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-\[viewport\=false\]\/navigation-menu\:duration-200 {
   &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
     --tw-duration: 200ms;
@@ -1530,6 +1771,18 @@
     background-color: transparent;
   }
 }
+.file\:text-sm {
+  &::file-selector-button {
+    font-size: 0.875rem;
+    line-height: var(--tw-leading, 1.375rem);
+  }
+}
+.file\:font-medium {
+  &::file-selector-button {
+    --tw-font-weight: 500;
+    font-weight: 500;
+  }
+}
 .file\:text-foreground {
   &::file-selector-button {
     color: hsl(var(--foreground-default));
@@ -1651,6 +1904,17 @@
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
 }
+.focus-within\:ring-offset-foreground-muted {
+  &:focus-within {
+    --tw-ring-offset-color: hsl(var(--foreground-muted));
+  }
+}
+.focus-within\:outline-none {
+  &:focus-within {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+}
 .hover\:border-brand-600 {
   &:hover {
     @media (hover: hover) {
@@ -1679,6 +1943,16 @@
     }
   }
 }
+.hover\:border-foreground\/30 {
+  &:hover {
+    @media (hover: hover) {
+      border-color: hsl(var(--foreground-default));
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, hsl(var(--foreground-default)) 30%, transparent);
+      }
+    }
+  }
+}
 .hover\:border-stronger {
   &:hover {
     @media (hover: hover) {
@@ -1755,6 +2029,20 @@
     }
   }
 }
+.hover\:bg-background-surface-200 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: hsl(var(--background-surface-200));
+    }
+  }
+}
+.hover\:bg-brand-300 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: hsl(var(--brand-300));
+    }
+  }
+}
 .hover\:bg-brand-400 {
   &:hover {
     @media (hover: hover) {
@@ -1772,6 +2060,13 @@
     }
   }
 }
+.hover\:bg-destructive-300 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: hsl(var(--destructive-300));
+    }
+  }
+}
 .hover\:bg-destructive-400 {
   &:hover {
     @media (hover: hover) {
@@ -1779,10 +2074,13 @@
     }
   }
 }
-.hover\:bg-muted {
+.hover\:bg-foreground\/10 {
   &:hover {
     @media (hover: hover) {
-      background-color: hsl(var(--background-muted));
+      background-color: hsl(var(--foreground-default));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--foreground-default)) 10%, transparent);
+      }
     }
   }
 }
@@ -1793,13 +2091,10 @@
     }
   }
 }
-.hover\:bg-muted\/50 {
+.hover\:bg-muted {
   &:hover {
     @media (hover: hover) {
       background-color: hsl(var(--background-muted));
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, hsl(var(--background-muted)) 50%, transparent);
-      }
     }
   }
 }
@@ -1841,6 +2136,13 @@
     }
   }
 }
+.hover\:bg-warning-300 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: hsl(var(--warning-300));
+    }
+  }
+}
 .hover\:bg-warning-400 {
   &:hover {
     @media (hover: hover) {
@@ -1926,6 +2228,14 @@
     }
   }
 }
+.hover\:shadow-md {
+  &:hover {
+    @media (hover: hover) {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 2px 4px -2px 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);
+    }
+  }
+}
 .hover\:ring-4 {
   &:hover {
     @media (hover: hover) {
@@ -2062,6 +2372,16 @@
     --tw-ring-color: hsl(var(--brand-default));
   }
 }
+.focus-visible\:ring-current {
+  &:focus-visible {
+    --tw-ring-color: currentcolor;
+  }
+}
+.focus-visible\:ring-primary {
+  &:focus-visible {
+    --tw-ring-color: hsl(var(--brand-default));
+  }
+}
 .focus-visible\:ring-ring {
   &:focus-visible {
     --tw-ring-color: hsl(var(--border-strong));
@@ -2113,27 +2433,6 @@
     outline-width: 1px;
   }
 }
-.focus-visible\:outline-4 {
-  &:focus-visible {
-    outline-style: var(--tw-outline-style);
-    outline-width: 4px;
-  }
-}
-.focus-visible\:outline-offset-1 {
-  &:focus-visible {
-    outline-offset: 1px;
-  }
-}
-.focus-visible\:outline-border-strong {
-  &:focus-visible {
-    outline-color: hsl(var(--border-strong));
-  }
-}
-.focus-visible\:outline-brand-600 {
-  &:focus-visible {
-    outline-color: hsl(var(--brand-600));
-  }
-}
 .focus-visible\:outline-none {
   &:focus-visible {
     --tw-outline-style: none;
@@ -2417,6 +2716,12 @@
     background-color: hsl(var(--background-selection));
   }
 }
+.data-\[active\=true\]\:font-medium {
+  &[data-active="true"] {
+    --tw-font-weight: 500;
+    font-weight: 500;
+  }
+}
 .data-\[active\=true\]\:text-accent-foreground {
   &[data-active="true"] {
     color: hsl(var(--foreground-default));
@@ -2696,16 +3001,6 @@
     }
   }
 }
-.data-\[state\=active\]\:bg-background {
-  &[data-state="active"] {
-    background-color: hsl(var(--background-default));
-  }
-}
-.data-\[state\=active\]\:text-foreground {
-  &[data-state="active"] {
-    color: hsl(var(--foreground-default));
-  }
-}
 .data-\[state\=checked\]\:border-brand {
   &[data-state="checked"] {
     border-color: hsl(var(--brand-default));
@@ -2853,16 +3148,46 @@
     --tw-exit-opacity: 0;
   }
 }
+.data-\[state\=off\]\:text-muted-foreground {
+  &[data-state="off"] {
+    color: hsl(var(--foreground-muted));
+  }
+}
+.data-\[state\=off\]\:hover\:text-foreground {
+  &[data-state="off"] {
+    &:hover {
+      @media (hover: hover) {
+        color: hsl(var(--foreground-default));
+      }
+    }
+  }
+}
 .data-\[state\=on\]\:bg-accent {
   &[data-state="on"] {
     background-color: hsl(var(--background-surface-200));
   }
 }
+.data-\[state\=on\]\:bg-primary {
+  &[data-state="on"] {
+    background-color: hsl(var(--brand-default));
+  }
+}
 .data-\[state\=on\]\:text-accent-foreground {
   &[data-state="on"] {
     color: hsl(var(--foreground-default));
   }
 }
+.data-\[state\=on\]\:text-primary-foreground {
+  &[data-state="on"] {
+    color: hsl(var(--foreground-contrast));
+  }
+}
+.data-\[state\=on\]\:shadow-sm {
+  &[data-state="on"] {
+    --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);
+  }
+}
 .data-\[state\=open\]\:animate-accordion-down {
   &[data-state="open"] {
     animation: accordion-down 0.2s ease-out;
@@ -2959,26 +3284,6 @@
     opacity: 100%;
   }
 }
-.data-\[state\=open\]\:outline-border-strong {
-  &[data-state="open"] {
-    outline-color: hsl(var(--border-strong));
-  }
-}
-.data-\[state\=open\]\:outline-brand-600 {
-  &[data-state="open"] {
-    outline-color: hsl(var(--brand-600));
-  }
-}
-.data-\[state\=open\]\:outline-destructive {
-  &[data-state="open"] {
-    outline-color: hsl(var(--destructive-default));
-  }
-}
-.data-\[state\=open\]\:outline-warning {
-  &[data-state="open"] {
-    outline-color: hsl(var(--warning-default));
-  }
-}
 .data-\[state\=open\]\:duration-500 {
   &[data-state="open"] {
     --tw-duration: 500ms;
@@ -3105,14 +3410,14 @@
     }
   }
 }
-.data-\[state\=selected\]\:bg-muted {
+.data-\[state\=selected\]\:bg-selection {
   &[data-state="selected"] {
-    background-color: hsl(var(--background-muted));
+    background-color: hsl(var(--background-selection));
   }
 }
-.data-\[state\=selected\]\:bg-muted {
+.data-\[state\=selected\]\:bg-selection {
   &[data-state="selected"] {
-    background-color: hsl(var(--background-muted));
+    background-color: hsl(var(--background-selection));
   }
 }
 .data-\[state\=unchecked\]\:hover\:bg-border {
@@ -3161,6 +3466,18 @@
     }
   }
 }
+.data-\[variant\=label\]\:text-sm {
+  &[data-variant="label"] {
+    font-size: 0.875rem;
+    line-height: var(--tw-leading, 1.375rem);
+  }
+}
+.data-\[variant\=legend\]\:text-base {
+  &[data-variant="legend"] {
+    font-size: 1rem;
+    line-height: var(--tw-leading, 1.625rem);
+  }
+}
 .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\] {
   &[data-vaul-drawer-direction="bottom"] {
     max-height: 80vh;
@@ -3451,6 +3768,18 @@
     }
   }
 }
+.\[\&_\[cmdk-group-heading\]\]\:text-xs {
+  & [cmdk-group-heading] {
+    font-size: 0.75rem;
+    line-height: var(--tw-leading, 1.125rem);
+  }
+}
+.\[\&_\[cmdk-group-heading\]\]\:font-medium {
+  & [cmdk-group-heading] {
+    --tw-font-weight: 500;
+    font-weight: 500;
+  }
+}
 .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
   & [cmdk-group-heading] {
     color: hsl(var(--foreground-muted));
@@ -3523,6 +3852,16 @@
     border-width: 0px;
   }
 }
+.\[\&\:\:-webkit-search-cancel-button\]\:hidden {
+  &::-webkit-search-cancel-button {
+    display: none;
+  }
+}
+.\[\&\:\:-webkit-search-decoration\]\:hidden {
+  &::-webkit-search-decoration {
+    display: none;
+  }
+}
 .\[\&\:hover_svg\]\:\!text-primary {
   &:hover svg {
     color: hsl(var(--brand-default)) !important;
@@ -3682,6 +4021,11 @@
     flex-shrink: 0;
   }
 }
+.\[\&\>svg\]\:text-blue-600 {
+  &>svg {
+    color: #2563eb;
+  }
+}
 .\[\&\>svg\]\:text-brand-600 {
   &>svg {
     color: hsl(var(--brand-600));
@@ -3707,6 +4051,13 @@
     color: hsl(var(--warning-600));
   }
 }
+.dark\:\[\&\>svg\]\:text-blue-400 {
+  &:is([data-theme*="dark"] *) {
+    &>svg {
+      color: #60a5fa;
+    }
+  }
+}
 .\[\&\>tr\]\:last\:border-b-0 {
   &>tr {
     &:last-child {
@@ -3725,6 +4076,22 @@
     rotate: 180deg;
   }
 }
+.\[\[data-bordered\]_\&\]\:border {
+  [data-bordered] & {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+}
+.\[\[data-bordered\]_\&\]\:border {
+  [data-bordered] & {
+    border-color: hsl(var(--border-default));
+  }
+}
+.\[\[data-bordered\]_\&\]\:border-border {
+  [data-bordered] & {
+    border-color: hsl(var(--border-default));
+  }
+}
 .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
   [data-side=left][data-state=collapsed] & {
     cursor: e-resize;
@@ -3735,6 +4102,57 @@
     cursor: w-resize;
   }
 }
+.\[\[data-size\=lg\]_\&\]\:h-full {
+  [data-size=lg] & {
+    height: 100%;
+  }
+}
+.\[\[data-size\=lg\]_\&\]\:text-base {
+  [data-size=lg] & {
+    font-size: 1rem;
+    line-height: var(--tw-leading, 1.625rem);
+  }
+}
+.\[\[data-size\=lg\]_\&\]\:text-lg {
+  [data-size=lg] & {
+    font-size: 1.125rem;
+    line-height: var(--tw-leading, 1.75rem);
+  }
+}
+.\[\[data-size\=md\]_\&\]\:h-full {
+  [data-size=md] & {
+    height: 100%;
+  }
+}
+.\[\[data-size\=md\]_\&\]\:text-base {
+  [data-size=md] & {
+    font-size: 1rem;
+    line-height: var(--tw-leading, 1.625rem);
+  }
+}
+.\[\[data-size\=md\]_\&\]\:text-sm {
+  [data-size=md] & {
+    font-size: 0.875rem;
+    line-height: var(--tw-leading, 1.375rem);
+  }
+}
+.\[\[data-size\=sm\]_\&\]\:h-full {
+  [data-size=sm] & {
+    height: 100%;
+  }
+}
+.\[\[data-size\=sm\]_\&\]\:text-sm {
+  [data-size=sm] & {
+    font-size: 0.875rem;
+    line-height: var(--tw-leading, 1.375rem);
+  }
+}
+.\[\[data-size\=sm\]_\&\]\:text-xs {
+  [data-size=sm] & {
+    font-size: 0.75rem;
+    line-height: var(--tw-leading, 1.125rem);
+  }
+}
 .\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/20 {
   [data-slot=tooltip-content] & {
     background-color: hsl(var(--background-default));
@@ -3758,17 +4176,116 @@
     }
   }
 }
+.\[\[data-sticky-header\]_\&\]\:sticky {
+  [data-sticky-header] & {
+    position: sticky;
+  }
+}
+.\[\[data-sticky-header\]_\&\]\:z-10 {
+  [data-sticky-header] & {
+    z-index: 10;
+  }
+}
+.\[\[data-variant\=default\]_\&\]\:rounded-md {
+  [data-variant=default] & {
+    border-radius: calc(var(--radius) - 2px);
+  }
+}
+.\[\[data-variant\=default\]_\&\]\:data-\[state\=active\]\:bg-background {
+  [data-variant=default] & {
+    &[data-state="active"] {
+      background-color: hsl(var(--background-default));
+    }
+  }
+}
+.\[\[data-variant\=default\]_\&\]\:data-\[state\=active\]\:text-foreground {
+  [data-variant=default] & {
+    &[data-state="active"] {
+      color: hsl(var(--foreground-default));
+    }
+  }
+}
+.\[\[data-variant\=default\]_\&\]\:data-\[state\=active\]\:shadow-sm {
+  [data-variant=default] & {
+    &[data-state="active"] {
+      --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);
+    }
+  }
+}
+.\[\[data-variant\=outline\]_\&\]\:border-e {
+  [data-variant=outline] & {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
+}
+.\[\[data-variant\=outline\]_\&\]\:border-border {
+  [data-variant=outline] & {
+    border-color: hsl(var(--border-default));
+  }
+}
+.\[\[data-variant\=outline\]_\&\]\:first\:rounded-s-lg {
+  [data-variant=outline] & {
+    &:first-child {
+      border-start-start-radius: var(--radius);
+      border-end-start-radius: var(--radius);
+    }
+  }
+}
+.\[\[data-variant\=outline\]_\&\]\:last\:rounded-e-lg {
+  [data-variant=outline] & {
+    &:last-child {
+      border-start-end-radius: var(--radius);
+      border-end-end-radius: var(--radius);
+    }
+  }
+}
+.\[\[data-variant\=outline\]_\&\]\:last\:border-e-0 {
+  [data-variant=outline] & {
+    &:last-child {
+      border-inline-end-style: var(--tw-border-style);
+      border-inline-end-width: 0px;
+    }
+  }
+}
+.\[\[data-variant\=outline\]_\&\]\:data-\[state\=active\]\:text-foreground {
+  [data-variant=outline] & {
+    &[data-state="active"] {
+      color: hsl(var(--foreground-default));
+    }
+  }
+}
+.\[\[data-variant\=underline\]_\&\]\:rounded-none {
+  [data-variant=underline] & {
+    border-radius: 0;
+  }
+}
+.\[\[data-variant\=underline\]_\&\]\:border-b-2 {
+  [data-variant=underline] & {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+}
+.\[\[data-variant\=underline\]_\&\]\:border-transparent {
+  [data-variant=underline] & {
+    border-color: transparent;
+  }
+}
+.\[\[data-variant\=underline\]_\&\]\:data-\[state\=active\]\:border-brand {
+  [data-variant=underline] & {
+    &[data-state="active"] {
+      border-color: hsl(var(--brand-default));
+    }
+  }
+}
+.\[\[data-variant\=underline\]_\&\]\:data-\[state\=active\]\:text-foreground {
+  [data-variant=underline] & {
+    &[data-state="active"] {
+      color: hsl(var(--foreground-default));
+    }
+  }
+}
 :root {
-  --duration-instant: 50ms;
-  --duration-fast: 100ms;
-  --duration-normal: 200ms;
-  --duration-slow: 350ms;
-  --duration-slower: 500ms;
-  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --colors-black: 0deg 0% 0%;
   --colors-white: 0deg 0% 100%;
   --colors-gray-dark-100: 0deg 0% 8.6%;
@@ -3904,9 +4421,22 @@
   --xxl: 128px;
   --content-width-screen-xl: 1128px;
   --font-family-body: Inter;
+  --social-platform-instagram: #E1306C;
+  --social-platform-tiktok: #FE2C55;
+  --social-platform-youtube: #FF0000;
+  --social-platform-linkedin: #0A66C2;
+  --social-platform-telegram: #26A5E4;
 }
 [data-theme='light'], .light {
   --helpers-os-appearance: Light;
+  --social-platform-twitter: #000000;
+  --social-platform-threads: #000000;
+  --shadow-tooltip: 0 2px 12px rgba(0, 0, 0, 0.12);
+  --shadow-tooltip-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
+  --focus-ring-color: hsl(var(--brand-default));
+  --placeholder-color: hsl(var(--foreground-muted));
+  --disabled-opacity: 0.5;
+  --transition-base: 150ms ease;
   --code-block-5: 14deg 80.4% 58%;
   --code-block-4: 276.3deg 60% 52.9%;
   --code-block-3: 83.8deg 61.6% 48%;
@@ -3972,17 +4502,41 @@
   --chart-3: 30.3deg 80.3% 47.8%;
   --chart-4: 247.8deg 100% 70%;
   --chart-5: var(--colors-gray-light-900);
+  --engagement-excellent: 142deg 76% 19%;
+  --engagement-excellent-hover: 143deg 72% 14%;
+  --engagement-very-good: 142deg 71% 45%;
+  --engagement-very-good-hover: 142deg 72% 35%;
+  --engagement-good: 84deg 81% 44%;
+  --engagement-good-hover: 85deg 85% 35%;
+  --engagement-average: 48deg 96% 50%;
+  --engagement-average-hover: 48deg 96% 42%;
+  --engagement-low: 25deg 95% 53%;
+  --engagement-low-hover: 25deg 95% 45%;
+  --engagement-poor: 0deg 84% 60%;
+  --engagement-poor-hover: 0deg 72% 51%;
+  --engagement-inactive: 0deg 0% 83.1%;
+  --sentiment-positive: 142deg 71% 45%;
+  --sentiment-negative: 0deg 84% 60%;
+  --sentiment-neutral: 0deg 0% 43.5%;
 }
 [data-theme='dark'], .dark {
   --helpers-os-appearance: Dark;
+  --social-platform-twitter: #E7E9EA;
+  --social-platform-threads: #E7E9EA;
+  --shadow-tooltip: 0 2px 12px rgba(0, 0, 0, 0.4);
+  --shadow-tooltip-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
+  --focus-ring-color: hsl(var(--brand-default));
+  --placeholder-color: hsl(var(--foreground-muted));
+  --disabled-opacity: 0.5;
+  --transition-base: 150ms ease;
   --code-block-5: 13.8deg 89.7% 69.6%;
   --code-block-4: 276.1deg 67.7% 74.5%;
   --code-block-3: 83.8deg 61.7% 63.1%;
   --code-block-2: 33.2deg 90.3% 75.7%;
   --code-block-1: 170.8deg 43.1% 61.4%;
-  --secondary-default: 247.8deg 100% 70%;
-  --secondary-400: 248.3deg 54.5% 25.9%;
-  --secondary-200: 248deg 53.6% 11%;
+  --secondary-default: 247.8deg 80% 68%;
+  --secondary-400: 248deg 55% 32%;
+  --secondary-200: 248deg 50% 15%;
   --brand-link: 155deg 100% 38.6%;
   --brand-default: 153.1deg 60.2% 52.7%;
   --brand-600: 154.9deg 59.5% 70%;
@@ -4040,18 +4594,42 @@
   --chart-3: 38.9deg 100% 42.9%;
   --chart-4: 247.8deg 100% 70%;
   --chart-5: var(--colors-gray-dark-1000);
+  --engagement-excellent: 142deg 76% 26%;
+  --engagement-excellent-hover: 142deg 76% 19%;
+  --engagement-very-good: 142deg 71% 45%;
+  --engagement-very-good-hover: 142deg 72% 35%;
+  --engagement-good: 84deg 81% 44%;
+  --engagement-good-hover: 85deg 85% 35%;
+  --engagement-average: 48deg 96% 50%;
+  --engagement-average-hover: 48deg 96% 42%;
+  --engagement-low: 25deg 95% 53%;
+  --engagement-low-hover: 25deg 95% 45%;
+  --engagement-poor: 0deg 84% 60%;
+  --engagement-poor-hover: 0deg 72% 51%;
+  --engagement-inactive: 0deg 0% 21.2%;
+  --sentiment-positive: 142deg 71% 45%;
+  --sentiment-negative: 0deg 84% 60%;
+  --sentiment-neutral: 0deg 0% 53.7%;
   color-scheme: dark;
 }
 [data-theme='classic-dark'] {
   --helpers-os-appearance: Classic Dark;
+  --social-platform-twitter: #E7E9EA;
+  --social-platform-threads: #E7E9EA;
+  --shadow-tooltip: 0 2px 12px rgba(0, 0, 0, 0.45);
+  --shadow-tooltip-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
+  --focus-ring-color: hsl(var(--brand-default));
+  --placeholder-color: hsl(var(--foreground-muted));
+  --disabled-opacity: 0.5;
+  --transition-base: 150ms ease;
   --code-block-5: 13.8deg 89.7% 69.6%;
   --code-block-4: 276.1deg 67.7% 74.5%;
   --code-block-3: 83.8deg 61.7% 63.1%;
   --code-block-2: 33.2deg 90.3% 75.7%;
   --code-block-1: 170.8deg 43.1% 61.4%;
-  --secondary-default: 0deg 0% 100%;
-  --secondary-400: 0deg 0% 100%;
-  --secondary-200: 0deg 0% 100%;
+  --secondary-default: 247.8deg 75% 65%;
+  --secondary-400: 248deg 52% 28%;
+  --secondary-200: 248deg 48% 13%;
   --brand-link: 153.1deg 60.2% 52.7%;
   --brand-default: 153.1deg 60.2% 52.7%;
   --brand-600: 153deg 59.5% 70%;
@@ -4059,8 +4637,8 @@
   --brand-400: 153.3deg 65.2% 13.5%;
   --brand-300: 153.8deg 69.6% 9%;
   --brand-200: 152.5deg 75% 6.3%;
-  --warning-default: 38.9deg 100% 57.1%;
-  --warning-600: 38.9deg 89.8% 49.8%;
+  --warning-default: 38.9deg 100% 42.9%;
+  --warning-600: 38.9deg 100% 42.9%;
   --warning-500: 34.8deg 90.9% 21.6%;
   --warning-400: 33.2deg 100% 14.5%;
   --warning-300: 32.3deg 100% 10.2%;
@@ -4109,6 +4687,22 @@
   --chart-3: 38.9deg 100% 42.9%;
   --chart-4: 247.8deg 100% 70%;
   --chart-5: var(--colors-gray-dark-1000);
+  --engagement-excellent: 142deg 76% 26%;
+  --engagement-excellent-hover: 142deg 76% 19%;
+  --engagement-very-good: 142deg 71% 45%;
+  --engagement-very-good-hover: 142deg 72% 35%;
+  --engagement-good: 84deg 81% 44%;
+  --engagement-good-hover: 85deg 85% 35%;
+  --engagement-average: 48deg 96% 50%;
+  --engagement-average-hover: 48deg 96% 42%;
+  --engagement-low: 25deg 95% 53%;
+  --engagement-low-hover: 25deg 95% 45%;
+  --engagement-poor: 0deg 84% 60%;
+  --engagement-poor-hover: 0deg 72% 51%;
+  --engagement-inactive: 0deg 0% 24.3%;
+  --sentiment-positive: 142deg 71% 45%;
+  --sentiment-negative: 0deg 84% 60%;
+  --sentiment-neutral: 0deg 0% 53.7%;
   color-scheme: dark;
 }
 @font-face {
@@ -4166,6 +4760,258 @@
     --chart-5: var(--chart-5);
   }
 }
+@layer utilities {
+  .ms-0 {
+    margin-inline-start: 0;
+  }
+  .ms-1 {
+    margin-inline-start: 0.25rem;
+  }
+  .ms-2 {
+    margin-inline-start: 0.5rem;
+  }
+  .ms-3 {
+    margin-inline-start: 0.75rem;
+  }
+  .ms-4 {
+    margin-inline-start: 1rem;
+  }
+  .ms-5 {
+    margin-inline-start: 1.25rem;
+  }
+  .ms-6 {
+    margin-inline-start: 1.5rem;
+  }
+  .ms-8 {
+    margin-inline-start: 2rem;
+  }
+  .ms-10 {
+    margin-inline-start: 2.5rem;
+  }
+  .ms-12 {
+    margin-inline-start: 3rem;
+  }
+  .ms-16 {
+    margin-inline-start: 4rem;
+  }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
+  .me-0 {
+    margin-inline-end: 0;
+  }
+  .me-1 {
+    margin-inline-end: 0.25rem;
+  }
+  .me-2 {
+    margin-inline-end: 0.5rem;
+  }
+  .me-3 {
+    margin-inline-end: 0.75rem;
+  }
+  .me-4 {
+    margin-inline-end: 1rem;
+  }
+  .me-5 {
+    margin-inline-end: 1.25rem;
+  }
+  .me-6 {
+    margin-inline-end: 1.5rem;
+  }
+  .me-8 {
+    margin-inline-end: 2rem;
+  }
+  .me-10 {
+    margin-inline-end: 2.5rem;
+  }
+  .me-12 {
+    margin-inline-end: 3rem;
+  }
+  .me-16 {
+    margin-inline-end: 4rem;
+  }
+  .me-auto {
+    margin-inline-end: auto;
+  }
+  .ps-0 {
+    padding-inline-start: 0;
+  }
+  .ps-1 {
+    padding-inline-start: 0.25rem;
+  }
+  .ps-2 {
+    padding-inline-start: 0.5rem;
+  }
+  .ps-3 {
+    padding-inline-start: 0.75rem;
+  }
+  .ps-4 {
+    padding-inline-start: 1rem;
+  }
+  .ps-5 {
+    padding-inline-start: 1.25rem;
+  }
+  .ps-6 {
+    padding-inline-start: 1.5rem;
+  }
+  .ps-7 {
+    padding-inline-start: 1.75rem;
+  }
+  .ps-8 {
+    padding-inline-start: 2rem;
+  }
+  .ps-10 {
+    padding-inline-start: 2.5rem;
+  }
+  .ps-12 {
+    padding-inline-start: 3rem;
+  }
+  .pe-0 {
+    padding-inline-end: 0;
+  }
+  .pe-1 {
+    padding-inline-end: 0.25rem;
+  }
+  .pe-2 {
+    padding-inline-end: 0.5rem;
+  }
+  .pe-3 {
+    padding-inline-end: 0.75rem;
+  }
+  .pe-4 {
+    padding-inline-end: 1rem;
+  }
+  .pe-5 {
+    padding-inline-end: 1.25rem;
+  }
+  .pe-6 {
+    padding-inline-end: 1.5rem;
+  }
+  .pe-7 {
+    padding-inline-end: 1.75rem;
+  }
+  .pe-8 {
+    padding-inline-end: 2rem;
+  }
+  .pe-10 {
+    padding-inline-end: 2.5rem;
+  }
+  .pe-12 {
+    padding-inline-end: 3rem;
+  }
+  .start-0 {
+    inset-inline-start: 0;
+  }
+  .start-1 {
+    inset-inline-start: 0.25rem;
+  }
+  .start-2 {
+    inset-inline-start: 0.5rem;
+  }
+  .start-4 {
+    inset-inline-start: 1rem;
+  }
+  .start-6 {
+    inset-inline-start: 1.5rem;
+  }
+  .start-8 {
+    inset-inline-start: 2rem;
+  }
+  .end-0 {
+    inset-inline-end: 0;
+  }
+  .end-1 {
+    inset-inline-end: 0.25rem;
+  }
+  .end-2 {
+    inset-inline-end: 0.5rem;
+  }
+  .end-4 {
+    inset-inline-end: 1rem;
+  }
+  .end-6 {
+    inset-inline-end: 1.5rem;
+  }
+  .end-8 {
+    inset-inline-end: 2rem;
+  }
+  .border-s {
+    border-inline-start-width: 1px;
+  }
+  .border-s-0 {
+    border-inline-start-width: 0;
+  }
+  .border-s-2 {
+    border-inline-start-width: 2px;
+  }
+  .border-s-4 {
+    border-inline-start-width: 4px;
+  }
+  .border-e {
+    border-inline-end-width: 1px;
+  }
+  .border-e-0 {
+    border-inline-end-width: 0;
+  }
+  .border-e-2 {
+    border-inline-end-width: 2px;
+  }
+  .border-e-4 {
+    border-inline-end-width: 4px;
+  }
+  .rounded-s {
+    border-start-start-radius: 0.25rem;
+    border-end-start-radius: 0.25rem;
+  }
+  .rounded-s-none {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .rounded-s-sm {
+    border-start-start-radius: 0.125rem;
+    border-end-start-radius: 0.125rem;
+  }
+  .rounded-s-md {
+    border-start-start-radius: 0.375rem;
+    border-end-start-radius: 0.375rem;
+  }
+  .rounded-s-lg {
+    border-start-start-radius: 0.5rem;
+    border-end-start-radius: 0.5rem;
+  }
+  .rounded-e {
+    border-start-end-radius: 0.25rem;
+    border-end-end-radius: 0.25rem;
+  }
+  .rounded-e-none {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .rounded-e-sm {
+    border-start-end-radius: 0.125rem;
+    border-end-end-radius: 0.125rem;
+  }
+  .rounded-e-md {
+    border-start-end-radius: 0.375rem;
+    border-end-end-radius: 0.375rem;
+  }
+  .rounded-e-lg {
+    border-start-end-radius: 0.5rem;
+    border-end-end-radius: 0.5rem;
+  }
+  .text-start {
+    text-align: start;
+  }
+  .text-end {
+    text-align: end;
+  }
+  [dir='rtl'] .rtl\:rotate-180 {
+    transform: rotate(180deg);
+  }
+  [dir='rtl'] .rtl\:scale-x-flip {
+    transform: scaleX(-1);
+  }
+}
 [data-slot='progress-indicator'] {
   transform-origin: left center;
 }
@@ -4702,6 +5548,43 @@
     font-feature-settings: "lnum";
   }
 }
+@layer components {
+  .text-label {
+    font-size: 0.75rem;
+    line-height: 1;
+    font-weight: 500;
+    letter-spacing: 0.025em;
+  }
+  .text-caption {
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: hsl(var(--foreground-muted));
+  }
+  .text-body-sm {
+    font-size: 0.875rem;
+    line-height: 1.625;
+  }
+  .text-body {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+  .text-heading-sm {
+    font-size: 0.875rem;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+  .text-heading {
+    font-size: 1rem;
+    line-height: 1.25;
+    font-weight: 600;
+    letter-spacing: -0.025em;
+  }
+  .text-display {
+    font-size: 1.125rem;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -4749,11 +5632,58 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -4852,6 +5782,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;
@@ -4891,7 +5874,17 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-divide-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-ordinal: initial;
@@ -4914,6 +5907,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;
       --tw-scale-x: 1;