@maxsteinwender/sort-ui 0.1.1 → 1.0.2

package/dist/styles.css

@@ -11,19 +11,7 @@
 
 @font-face {
   font-family: "remixicon";
-
-  src: url('remixicon.eot?t=1769685282643');
-
-  /* IE9*/
-
-  src: url('remixicon.eot?t=1769685282643#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("remixicon.woff2?t=1769685282643") format("woff2"),
-  url("remixicon.woff?t=1769685282643") format("woff"),
-  url('remixicon.ttf?t=1769685282643') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('remixicon.svg?t=1769685282643#remixicon') format('svg');
-
-  /* iOS 4.1- */
-
+  src: url('./fonts/remixicon/remixicon.woff2?t=1769685282643') format('woff2');
   font-display: swap;
 }
 
@@ -13918,9 +13906,9 @@ video {
   --bg-muted: #f4f4f5;
   --bg-card: #ffffff;
   --bg-inverted: #18181b;
-  --bg-state-primary: #437dfc;
-  --bg-state-primary-hover: #65a0fd;
-  --bg-state-primary-press: #437dfc;
+  --bg-state-primary: #2563eb;
+  --bg-state-primary-hover: #3b82f6;
+  --bg-state-primary-press: #2563eb;
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafafa;
@@ -13931,9 +13919,9 @@ video {
   --bg-state-ghost: rgba(39, 39, 42, 0.0001);
   --bg-state-ghost-hover: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-press: rgba(39, 39, 42, 0.08);
-  --bg-state-destructive: #e74341;
-  --bg-state-destructive-hover: #ed6664;
-  --bg-state-destructive-press: #e74341;
+  --bg-state-destructive: #c0392b;
+  --bg-state-destructive-hover: #d44538;
+  --bg-state-destructive-press: #c0392b;
   --bg-state-brand: #437dfc;
   --bg-state-brand-hover: #65a0fd;
   --bg-state-brand-press: #437dfc;
@@ -14067,6 +14055,12 @@ video {
   --bg-state-ghost-loading: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-loading-inverted: rgba(255, 255, 255, 0.08);
   /* === GENERATED TOKENS END === */
+  /* Social button brand colors */
+  --social-brand-default: #111115;
+  --social-brand-facebook: #0766FF;
+  --social-brand-linkedin: #0077B5;
+  --social-brand-dribbble: #D95889;
+  --social-brand-dropbox: #2860F5;
 }
 
 /* ===== Sort UI Theme 1 — Dark ===== */
@@ -14218,9 +14212,9 @@ video {
   --bg-state-ghost: rgba(255, 255, 255, 0.0001);
   --bg-state-ghost-hover: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-press: rgba(255, 255, 255, 0.15);
-  --bg-state-destructive: #e74341;
-  --bg-state-destructive-hover: #ed6664;
-  --bg-state-destructive-press: #e74341;
+  --bg-state-destructive: #c0392b;
+  --bg-state-destructive-hover: #d44538;
+  --bg-state-destructive-press: #c0392b;
   --bg-state-brand: #437dfc;
   --bg-state-brand-hover: #65a0fd;
   --bg-state-brand-press: #437dfc;
@@ -14492,9 +14486,9 @@ video {
   --bg-muted: #f5f5f4;
   --bg-card: #ffffff;
   --bg-inverted: #24211e;
-  --bg-state-primary: #f27313;
-  --bg-state-primary-hover: #f38f36;
-  --bg-state-primary-press: #f27313;
+  --bg-state-primary: #c05621;
+  --bg-state-primary-hover: #d1692c;
+  --bg-state-primary-press: #c05621;
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafaf9;
@@ -14505,9 +14499,9 @@ video {
   --bg-state-ghost: rgba(39, 39, 42, 0.0001);
   --bg-state-ghost-hover: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-press: rgba(39, 39, 42, 0.08);
-  --bg-state-destructive: #eb3e5b;
-  --bg-state-destructive-hover: #f16e81;
-  --bg-state-destructive-press: #eb3e5b;
+  --bg-state-destructive: #c4334d;
+  --bg-state-destructive-hover: #d4445f;
+  --bg-state-destructive-press: #c4334d;
   --bg-state-brand: #f27313;
   --bg-state-brand-hover: #f38f36;
   --bg-state-brand-press: #f27313;
@@ -14779,9 +14773,9 @@ video {
   --bg-muted: #0c0a09;
   --bg-card: #301108;
   --bg-inverted: #ffffff;
-  --bg-state-primary: #e35706;
-  --bg-state-primary-hover: #f27313;
-  --bg-state-primary-press: #e35706;
+  --bg-state-primary: #c04b05;
+  --bg-state-primary-hover: #d15a06;
+  --bg-state-primary-press: #c04b05;
   --bg-state-disabled: rgba(255, 255, 255, 0.08);
   --bg-state-secondary: rgba(255, 255, 255, 0.04);
   --bg-state-secondary-hover: rgba(255, 255, 255, 0.08);
@@ -14792,9 +14786,9 @@ video {
   --bg-state-ghost: rgba(255, 255, 255, 0.0001);
   --bg-state-ghost-hover: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-press: rgba(255, 255, 255, 0.15);
-  --bg-state-destructive: #eb3e5b;
-  --bg-state-destructive-hover: #f16e81;
-  --bg-state-destructive-press: #eb3e5b;
+  --bg-state-destructive: #c4334d;
+  --bg-state-destructive-hover: #d4445f;
+  --bg-state-destructive-press: #c4334d;
   --bg-state-brand: #e35706;
   --bg-state-brand-hover: #f27313;
   --bg-state-brand-press: #e35706;
@@ -15193,6 +15187,10 @@ body {
   right: 1rem;
 }
 
+.right-\[9px\] {
+  right: 9px;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -15225,10 +15223,6 @@ body {
   top: -25px;
 }
 
-.top-\[1px\] {
-  top: 1px;
-}
-
 .top-\[50\%\] {
   top: 50%;
 }
@@ -15237,6 +15231,10 @@ body {
   top: 60%;
 }
 
+.top-\[9px\] {
+  top: 9px;
+}
+
 .top-full {
   top: 100%;
 }
@@ -15273,6 +15271,14 @@ body {
   grid-column: span 2 / span 2;
 }
 
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.row-span-3 {
+  grid-row: span 3 / span 3;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -15428,6 +15434,13 @@ body {
   margin-top: var(--spacing-8);
 }
 
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .block {
   display: block;
 }
@@ -15464,6 +15477,14 @@ body {
   display: none;
 }
 
+.aspect-\[3\/2\] {
+  aspect-ratio: 3/2;
+}
+
+.aspect-\[5\/3\] {
+  aspect-ratio: 5/3;
+}
+
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -15650,6 +15671,10 @@ body {
   height: 3.5rem;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
 .h-2 {
   height: 0.5rem;
 }
@@ -15674,6 +15699,10 @@ body {
   height: 10rem;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -15682,6 +15711,10 @@ body {
   height: 1.5rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
 .h-7 {
   height: 1.75rem;
 }
@@ -15706,6 +15739,10 @@ body {
   height: 120px;
 }
 
+.h-\[150px\] {
+  height: 150px;
+}
+
 .h-\[180px\] {
   height: 180px;
 }
@@ -15903,6 +15940,10 @@ body {
   width: 0.25rem;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -15927,6 +15968,10 @@ body {
   width: 0.625rem;
 }
 
+.w-2\/3 {
+  width: 66.666667%;
+}
+
 .w-20 {
   width: 5rem;
 }
@@ -15939,10 +15984,6 @@ body {
   width: 7rem;
 }
 
-.w-3 {
-  width: 0.75rem;
-}
-
 .w-3\.5 {
   width: 0.875rem;
 }
@@ -15959,6 +16000,14 @@ body {
   width: 1rem;
 }
 
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -15991,6 +16040,10 @@ body {
   width: 2.25rem;
 }
 
+.w-96 {
+  width: 24rem;
+}
+
 .w-\[--cell-size\] {
   width: var(--cell-size);
 }
@@ -16079,6 +16132,10 @@ body {
   width: 32px;
 }
 
+.w-\[340px\] {
+  width: 340px;
+}
+
 .w-\[350px\] {
   width: 350px;
 }
@@ -16306,6 +16363,10 @@ body {
   max-width: 480px;
 }
 
+.max-w-\[560px\] {
+  max-width: 560px;
+}
+
 .max-w-\[900px\] {
   max-width: 900px;
 }
@@ -16339,6 +16400,10 @@ body {
   flex: 1 0 0;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .shrink {
   flex-shrink: 1;
 }
@@ -16406,6 +16471,11 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-45 {
   --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -16563,6 +16633,10 @@ body {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -16659,6 +16733,10 @@ body {
   gap: 1rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .gap-6 {
   gap: 1.5rem;
 }
@@ -16734,6 +16812,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-sui-16 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(var(--spacing-16) * calc(1 - var(--tw-space-y-reverse)));
@@ -16880,6 +16964,11 @@ body {
   border-bottom-right-radius: var(--radius-xs);
 }
 
+.rounded-t-card-md {
+  border-top-left-radius: var(--radius-card-md);
+  border-top-right-radius: var(--radius-card-md);
+}
+
 .rounded-tl-sm {
   border-top-left-radius: var(--radius-sm);
 }
@@ -16960,22 +17049,10 @@ body {
   border-color: var(--bg-checkbox-active);
 }
 
-.border-destructive {
-  border-color: hsl(var(--destructive));
-}
-
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
 
-.border-foreground\/15 {
-  border-color: hsl(var(--foreground) / 0.15);
-}
-
-.border-input {
-  border-color: hsl(var(--input));
-}
-
 .border-primary {
   border-color: hsl(var(--primary));
 }
@@ -17024,6 +17101,10 @@ body {
   border-color: var(--border-success);
 }
 
+.border-sui-border-warning {
+  border-color: var(--border-warning);
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -17064,12 +17145,8 @@ body {
   background-color: var(--bg-checkbox-disabled);
 }
 
-.bg-\[var\(--sb-bg\2c \#111115\)\] {
-  background-color: var(--sb-bg,#111115);
-}
-
-.bg-accent {
-  background-color: hsl(var(--accent));
+.bg-\[var\(--sb-bg\2c var\(--social-brand-default\)\)\] {
+  background-color: var(--sb-bg,var(--social-brand-default));
 }
 
 .bg-amber-500 {
@@ -17077,10 +17154,6 @@ body {
   background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
 }
 
-.bg-background {
-  background-color: hsl(var(--background));
-}
-
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
@@ -17098,10 +17171,6 @@ body {
   background-color: hsl(var(--card));
 }
 
-.bg-destructive {
-  background-color: hsl(var(--destructive));
-}
-
 .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -17132,14 +17201,6 @@ body {
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
 }
 
-.bg-muted {
-  background-color: hsl(var(--muted));
-}
-
-.bg-popover {
-  background-color: hsl(var(--popover));
-}
-
 .bg-primary {
   background-color: hsl(var(--primary));
 }
@@ -17154,10 +17215,6 @@ body {
   background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
 }
 
-.bg-secondary {
-  background-color: hsl(var(--secondary));
-}
-
 .bg-sidebar {
   background-color: hsl(var(--sidebar-background));
 }
@@ -17214,6 +17271,10 @@ body {
   background-color: var(--bg-basic-amber-accent);
 }
 
+.bg-sui-bg-basic-amber-subtle {
+  background-color: var(--bg-basic-amber-subtle);
+}
+
 .bg-sui-bg-basic-blue-accent {
   background-color: var(--bg-basic-blue-accent);
 }
@@ -17464,8 +17525,46 @@ body {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
 }
 
-.fill-current {
-  fill: currentColor;
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.from-sui-bg-card-subtle {
+  --tw-gradient-from: var(--bg-card-subtle) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-sui-bg-default {
+  --tw-gradient-from: var(--bg-default) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-transparent {
+  --tw-gradient-from: transparent var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-sui-bg-default {
+  --tw-gradient-to: var(--bg-default) var(--tw-gradient-to-position);
+}
+
+.to-sui-border-default {
+  --tw-gradient-to: var(--border-default) var(--tw-gradient-to-position);
+}
+
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
 .object-contain {
@@ -17506,6 +17605,10 @@ body {
   padding: 3rem;
 }
 
+.p-16 {
+  padding: 4rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -17534,6 +17637,10 @@ body {
   padding: 2rem;
 }
 
+.p-9 {
+  padding: 2.25rem;
+}
+
 .p-\[13px\] {
   padding: 13px;
 }
@@ -17631,6 +17738,11 @@ body {
   padding-right: 1.5rem;
 }
 
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
 .px-\[--cell-size\] {
   padding-left: var(--cell-size);
   padding-right: var(--cell-size);
@@ -17746,6 +17858,11 @@ body {
   padding-bottom: 0.625rem;
 }
 
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -17829,6 +17946,10 @@ body {
   padding-bottom: 0.5rem;
 }
 
+.pb-2\.5 {
+  padding-bottom: 0.625rem;
+}
+
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -17837,6 +17958,10 @@ body {
   padding-bottom: 1rem;
 }
 
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
 .pb-sui-24 {
   padding-bottom: var(--spacing-24);
 }
@@ -17937,10 +18062,18 @@ body {
   padding-top: 0px;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
 .pt-2 {
   padding-top: 0.5rem;
 }
 
+.pt-24 {
+  padding-top: 6rem;
+}
+
 .pt-3 {
   padding-top: 0.75rem;
 }
@@ -17953,6 +18086,10 @@ body {
   padding-top: 2rem;
 }
 
+.pt-9 {
+  padding-top: 2.25rem;
+}
+
 .pt-\[10px\] {
   padding-top: 10px;
 }
@@ -18043,10 +18180,18 @@ body {
   font-size: 10px;
 }
 
+.text-\[12px\] {
+  font-size: 12px;
+}
+
 .text-\[16px\] {
   font-size: 16px;
 }
 
+.text-\[8px\] {
+  font-size: 8px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -18142,6 +18287,14 @@ body {
   line-height: 1;
 }
 
+.leading-snug {
+  line-height: 1.375;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
 .tracking-tight {
   letter-spacing: var(--tracking-tight);
 }
@@ -18162,26 +18315,14 @@ body {
   color: hsl(var(--background));
 }
 
-.text-card-foreground {
-  color: hsl(var(--card-foreground));
-}
-
 .text-destructive {
   color: hsl(var(--destructive));
 }
 
-.text-destructive-foreground {
-  color: hsl(var(--destructive-foreground));
-}
-
 .text-foreground {
   color: hsl(var(--foreground));
 }
 
-.text-foreground\/50 {
-  color: hsl(var(--foreground) / 0.5);
-}
-
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
@@ -18244,10 +18385,6 @@ body {
   color: hsl(var(--muted-foreground));
 }
 
-.text-popover-foreground {
-  color: hsl(var(--popover-foreground));
-}
-
 .text-primary {
   color: hsl(var(--primary));
 }
@@ -18344,6 +18481,10 @@ body {
   color: var(--text-white-default);
 }
 
+.text-sui-text-white-subtle {
+  color: var(--text-white-subtle);
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -18361,6 +18502,10 @@ body {
   text-decoration-line: line-through;
 }
 
+.no-underline {
+  text-decoration-line: none;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -18416,18 +18561,24 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[0px_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c inset_0px_-1px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
-  --tw-shadow: 0px 1px 2px rgba(0,0,0,0.06),inset 0px -1px 0px rgba(0,0,0,0.08);
-  --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color), inset 0px -1px 0px var(--tw-shadow-color);
+.shadow-\[inset_0px_-1px_0px_0px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
+  --tw-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.1);
+  --tw-shadow-colored: inset 0px -1px 0px 0px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[0px_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.08\)\2c inset_0px_-2px_0px_rgba\(0\2c 0\2c 0\2c 0\.20\)\] {
-  --tw-shadow: 0px 1px 2px rgba(0,0,0,0.08),inset 0px -2px 0px rgba(0,0,0,0.20);
+.shadow-button-default {
+  --tw-shadow: 0px 1px 2px rgba(0,0,0,0.08), inset 0px -2px 0px rgba(0,0,0,0.20);
   --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color), inset 0px -2px 0px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-button-secondary {
+  --tw-shadow: 0px 1px 2px rgba(0,0,0,0.06), inset 0px -1px 0px rgba(0,0,0,0.08);
+  --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color), inset 0px -1px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-card {
   --tw-shadow: var(--shadow-card);
   --tw-shadow-colored: var(--shadow-card);
@@ -18482,12 +18633,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-modal-sm {
   --tw-shadow: var(--shadow-modal-sm);
   --tw-shadow-colored: var(--shadow-modal-sm);
@@ -18576,8 +18721,8 @@ body {
   --tw-ring-offset-width: 1px;
 }
 
-.ring-offset-background {
-  --tw-ring-offset-color: hsl(var(--background));
+.ring-offset-sui-bg-default {
+  --tw-ring-offset-color: var(--bg-default);
 }
 
 .grayscale {
@@ -18829,16 +18974,8 @@ body {
   font-weight: var(--font-weight-medium);
 }
 
-.file\:text-foreground::file-selector-button {
-  color: hsl(var(--foreground));
-}
-
-.placeholder\:text-muted-foreground::-moz-placeholder {
-  color: hsl(var(--muted-foreground));
-}
-
-.placeholder\:text-muted-foreground::placeholder {
-  color: hsl(var(--muted-foreground));
+.file\:text-sui-text-default::file-selector-button {
+  color: var(--text-default);
 }
 
 .placeholder\:text-sui-text-hint::-moz-placeholder {
@@ -19135,20 +19272,8 @@ body {
   border-color: var(--border-strong);
 }
 
-.hover\:bg-\[color-mix\(in_srgb\2c \#fff_15\%\2c var\(--sb-bg\2c \#111115\)\)\]:hover {
-  background-color: color-mix(in srgb,#fff 15%,var(--sb-bg,#111115));
-}
-
-.hover\:bg-accent:hover {
-  background-color: hsl(var(--accent));
-}
-
-.hover\:bg-foreground\/\[0\.04\]:hover {
-  background-color: hsl(var(--foreground) / 0.04);
-}
-
-.hover\:bg-secondary:hover {
-  background-color: hsl(var(--secondary));
+.hover\:bg-\[color-mix\(in_srgb\2c \#fff_15\%\2c var\(--sb-bg\2c var\(--social-brand-default\)\)\)\]:hover {
+  background-color: color-mix(in srgb,#fff 15%,var(--sb-bg,var(--social-brand-default)));
 }
 
 .hover\:bg-sidebar-accent:hover {
@@ -19199,14 +19324,6 @@ body {
   background-color: var(--border-highlight);
 }
 
-.hover\:text-accent-foreground:hover {
-  color: hsl(var(--accent-foreground));
-}
-
-.hover\:text-foreground:hover {
-  color: hsl(var(--foreground));
-}
-
 .hover\:text-icon-default-subtle:hover {
   color: var(--icon-default-subtle);
 }
@@ -19254,22 +19371,26 @@ body {
   background-color: hsl(var(--sidebar-border));
 }
 
-.focus\:bg-accent:focus {
-  background-color: hsl(var(--accent));
-}
-
 .focus\:bg-sui-bg-state-ghost-hover:focus {
   background-color: var(--bg-state-ghost-hover);
 }
 
-.focus\:text-accent-foreground:focus {
-  color: hsl(var(--accent-foreground));
+.focus\:text-sui-text-default:focus {
+  color: var(--text-default);
 }
 
 .focus\:opacity-100:focus {
   opacity: 1;
 }
 
+.focus\:shadow-card:focus {
+  --tw-shadow: var(--shadow-card);
+  --tw-shadow-colored: var(--shadow-card);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-color: hsl(var(--card));
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -19281,10 +19402,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-ring:focus {
-  --tw-ring-color: hsl(var(--ring));
-}
-
 .focus\:ring-sui-border-highlight:focus {
   --tw-ring-color: var(--border-highlight);
 }
@@ -19382,10 +19499,6 @@ body {
   --tw-ring-inset: inset;
 }
 
-.focus-visible\:ring-ring:focus-visible {
-  --tw-ring-color: hsl(var(--ring));
-}
-
 .focus-visible\:ring-sidebar-ring:focus-visible {
   --tw-ring-color: hsl(var(--sidebar-ring));
 }
@@ -19422,12 +19535,8 @@ body {
   cursor: grabbing;
 }
 
-.active\:bg-\[color-mix\(in_srgb\2c \#fff_25\%\2c var\(--sb-bg\2c \#111115\)\)\]:active {
-  background-color: color-mix(in srgb,#fff 25%,var(--sb-bg,#111115));
-}
-
-.active\:bg-foreground\/\[0\.06\]:active {
-  background-color: hsl(var(--foreground) / 0.06);
+.active\:bg-\[color-mix\(in_srgb\2c \#fff_25\%\2c var\(--sb-bg\2c var\(--social-brand-default\)\)\)\]:active {
+  background-color: color-mix(in srgb,#fff 25%,var(--sb-bg,var(--social-brand-default)));
 }
 
 .active\:bg-sidebar-accent:active {
@@ -19474,15 +19583,15 @@ body {
   color: var(--text-subtle);
 }
 
-.active\:shadow-\[inset_0px_1px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]:active {
-  --tw-shadow: inset 0px 1px 0px rgba(0,0,0,0.08);
-  --tw-shadow-colored: inset 0px 1px 0px var(--tw-shadow-color);
+.active\:shadow-button-press:active {
+  --tw-shadow: inset 0px 2px 0px rgba(0,0,0,0.20);
+  --tw-shadow-colored: inset 0px 2px 0px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.active\:shadow-\[inset_0px_2px_0px_rgba\(0\2c 0\2c 0\2c 0\.20\)\]:active {
-  --tw-shadow: inset 0px 2px 0px rgba(0,0,0,0.20);
-  --tw-shadow-colored: inset 0px 2px 0px var(--tw-shadow-color);
+.active\:shadow-button-secondary-press:active {
+  --tw-shadow: inset 0px 1px 0px rgba(0,0,0,0.08);
+  --tw-shadow-colored: inset 0px 1px 0px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -19593,77 +19702,54 @@ body {
   color: var(--text-hint);
 }
 
-.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
-  border-color: hsl(var(--muted) / 0.4);
-}
-
-.group.toaster .group-\[\.toaster\]\:border-border {
-  border-color: hsl(var(--border));
-}
-
-.group.toast .group-\[\.toast\]\:bg-muted {
-  background-color: hsl(var(--muted));
+.group.toaster .group-\[\.toaster\]\:border-sui-border-default {
+  border-color: var(--border-default);
 }
 
-.group.toast .group-\[\.toast\]\:bg-primary {
-  background-color: hsl(var(--primary));
+.group.toast .group-\[\.toast\]\:bg-sui-bg-state-primary {
+  background-color: var(--bg-state-primary);
 }
 
-.group.toaster .group-\[\.toaster\]\:bg-background {
-  background-color: hsl(var(--background));
+.group.toast .group-\[\.toast\]\:bg-sui-bg-subtle {
+  background-color: var(--bg-subtle);
 }
 
-.group.destructive .group-\[\.destructive\]\:text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+.group.toaster .group-\[\.toaster\]\:bg-sui-bg-default {
+  background-color: var(--bg-default);
 }
 
-.group.toast .group-\[\.toast\]\:text-muted-foreground {
-  color: hsl(var(--muted-foreground));
+.group.toast .group-\[\.toast\]\:text-sui-text-muted {
+  color: var(--text-muted);
 }
 
-.group.toast .group-\[\.toast\]\:text-primary-foreground {
-  color: hsl(var(--primary-foreground));
+.group.toast .group-\[\.toast\]\:text-sui-text-white-default {
+  color: var(--text-white-default);
 }
 
-.group.toaster .group-\[\.toaster\]\:text-foreground {
-  color: hsl(var(--foreground));
+.group.toaster .group-\[\.toaster\]\:text-sui-text-default {
+  color: var(--text-default);
 }
 
-.group.toaster .group-\[\.toaster\]\:shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+.group.toaster .group-\[\.toaster\]\:shadow-modal-sm {
+  --tw-shadow: var(--shadow-modal-sm);
+  --tw-shadow-colored: var(--shadow-modal-sm);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
-  border-color: hsl(var(--destructive) / 0.3);
-}
-
-.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
-  background-color: hsl(var(--destructive));
-}
-
-.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
-  color: hsl(var(--destructive-foreground));
-}
-
-.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
+.group.destructive .group-\[\.destructive\]\:hover\:bg-sui-bg-state-destructive:hover {
+  background-color: var(--bg-state-destructive);
 }
 
-.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
-  --tw-ring-color: hsl(var(--destructive));
+.group.destructive .group-\[\.destructive\]\:hover\:text-sui-text-white-default:hover {
+  color: var(--text-white-default);
 }
 
-.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
+.group.destructive .group-\[\.destructive\]\:focus\:ring-sui-border-highlight:focus {
+  --tw-ring-color: var(--border-highlight);
 }
 
-.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
-  --tw-ring-offset-color: #dc2626;
+.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-sui-bg-state-destructive:focus {
+  --tw-ring-offset-color: var(--bg-state-destructive);
 }
 
 .peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
@@ -19674,8 +19760,8 @@ body {
   cursor: not-allowed;
 }
 
-.peer:disabled ~ .peer-disabled\:opacity-70 {
-  opacity: 0.7;
+.peer:disabled ~ .peer-disabled\:text-sui-text-hint {
+  color: var(--text-hint);
 }
 
 .has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]) {
@@ -19871,12 +19957,12 @@ body {
   background-color: var(--bg-state-brand);
 }
 
-.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true'] {
-  background-color: hsl(var(--accent));
+.data-\[selected\=true\]\:bg-sui-bg-state-ghost-hover[data-selected="true"] {
+  background-color: var(--bg-state-ghost-hover);
 }
 
-.data-\[state\=active\]\:bg-background[data-state="active"] {
-  background-color: hsl(var(--background));
+.data-\[state\=active\]\:bg-sui-bg-default[data-state="active"] {
+  background-color: var(--bg-default);
 }
 
 .data-\[state\=active\]\:bg-sui-bg-state-secondary[data-state="active"] {
@@ -19903,18 +19989,6 @@ body {
   background-color: var(--bg-badge-blue);
 }
 
-.data-\[state\=open\]\:bg-accent[data-state="open"] {
-  background-color: hsl(var(--accent));
-}
-
-.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
-  background-color: hsl(var(--accent) / 0.5);
-}
-
-.data-\[state\=open\]\:bg-secondary[data-state="open"] {
-  background-color: hsl(var(--secondary));
-}
-
 .data-\[state\=open\]\:bg-sui-bg-input[data-state="open"] {
   background-color: var(--bg-input);
 }
@@ -19947,6 +20021,10 @@ body {
   color: hsl(var(--sidebar-accent-foreground));
 }
 
+.data-\[disabled\=true\]\:text-sui-text-hint[data-disabled="true"] {
+  color: var(--text-hint);
+}
+
 .data-\[disabled\]\:text-sui-text-hint[data-disabled] {
   color: var(--text-hint);
 }
@@ -19971,12 +20049,8 @@ body {
   color: var(--text-white-default);
 }
 
-.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
-  color: hsl(var(--accent-foreground));
-}
-
-.data-\[state\=active\]\:text-foreground[data-state="active"] {
-  color: hsl(var(--foreground));
+.data-\[selected\=true\]\:text-sui-text-default[data-selected="true"] {
+  color: var(--text-default);
 }
 
 .data-\[state\=active\]\:text-sui-text-default[data-state="active"] {
@@ -19987,16 +20061,12 @@ body {
   color: var(--bg-basic-blue-strong);
 }
 
-.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
-  color: hsl(var(--accent-foreground));
-}
-
-.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
-  color: hsl(var(--muted-foreground));
+.data-\[state\=open\]\:text-sui-text-default[data-state="open"] {
+  color: var(--text-default);
 }
 
-.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
-  opacity: 0.5;
+.data-\[state\=open\]\:text-sui-text-muted[data-state="open"] {
+  color: var(--text-muted);
 }
 
 .data-\[state\=open\]\:opacity-100[data-state="open"] {
@@ -20331,10 +20401,6 @@ body {
   background-color: var(--bg-switch-active-hover);
 }
 
-.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
-  background-color: hsl(var(--accent));
-}
-
 .data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
   background-color: hsl(var(--sidebar-accent));
 }
@@ -20359,10 +20425,6 @@ body {
   color: hsl(var(--sidebar-accent-foreground));
 }
 
-.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
-  background-color: hsl(var(--accent));
-}
-
 .disabled\:data-\[state\=checked\]\:border-sui-border-default[data-state="checked"]:disabled {
   border-color: var(--border-default);
 }
@@ -20642,6 +20704,10 @@ body {
     display: flex;
   }
 
+  .sm\:max-w-\[425px\] {
+    max-width: 425px;
+  }
+
   .sm\:max-w-sm {
     max-width: 24rem;
   }
@@ -20694,6 +20760,14 @@ body {
     display: flex;
   }
 
+  .md\:w-\[400px\] {
+    width: 400px;
+  }
+
+  .md\:w-\[500px\] {
+    width: 500px;
+  }
+
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     width: var(--radix-navigation-menu-viewport-width);
   }
@@ -20706,6 +20780,10 @@ body {
     max-width: 420px;
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -20748,6 +20826,18 @@ body {
 }
 
 @media (min-width: 1024px) {
+  .lg\:w-\[500px\] {
+    width: 500px;
+  }
+
+  .lg\:w-\[600px\] {
+    width: 600px;
+  }
+
+  .lg\:grid-cols-\[\.75fr_1fr\] {
+    grid-template-columns: .75fr 1fr;
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -20843,6 +20933,11 @@ body {
   display: none;
 }
 
+.\[\&\>i\]\:text-sm>i {
+  font-size: var(--font-size-sm);
+  line-height: var(--leading-5);
+}
+
 .\[\&\>li\]\:mt-2>li {
   margin-top: 0.5rem;
 }
@@ -20941,10 +21036,6 @@ body {
   color: hsl(var(--destructive));
 }
 
-.\[\&\>svg\]\:text-foreground>svg {
-  color: hsl(var(--foreground));
-}
-
 .\[\&\>svg\]\:text-icon-default-muted>svg {
   color: var(--icon-default-muted);
 }
@@ -20953,6 +21044,10 @@ body {
   color: hsl(var(--sidebar-accent-foreground));
 }
 
+.\[\&\>svg\]\:text-sui-text-default>svg {
+  color: var(--text-default);
+}
+
 .\[\&\>svg\]\:text-sui-text-muted>svg {
   color: var(--text-muted);
 }
@@ -21048,8 +21143,8 @@ body {
   font-weight: var(--font-weight-medium);
 }
 
-.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
-  color: hsl(var(--muted-foreground));
+.\[\&_\[cmdk-group-heading\]\]\:text-sui-text-hint [cmdk-group-heading] {
+  color: var(--text-hint);
 }
 
 .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
@@ -21061,12 +21156,12 @@ body {
   padding-right: 0.5rem;
 }
 
-.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
-  height: 1.25rem;
+.\[\&_\[cmdk-input-wrapper\]_i\]\:h-4 [cmdk-input-wrapper] i {
+  height: 1rem;
 }
 
-.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
-  width: 1.25rem;
+.\[\&_\[cmdk-input-wrapper\]_i\]\:w-4 [cmdk-input-wrapper] i {
+  width: 1rem;
 }
 
 .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
@@ -21083,12 +21178,12 @@ body {
   padding-bottom: 0.75rem;
 }
 
-.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
-  height: 1.25rem;
+.\[\&_\[cmdk-item\]_i\]\:h-4 [cmdk-item] i {
+  height: 1rem;
 }
 
-.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
-  width: 1.25rem;
+.\[\&_\[cmdk-item\]_i\]\:w-4 [cmdk-item] i {
+  width: 1rem;
 }
 
 .\[\&_\[role\=progressbar\]\]\:h-0\.5 [role=progressbar] {
@@ -21347,6 +21442,10 @@ body {
   border-bottom-width: var(--border-width-default);
 }
 
+.\[\&_tr\]\:border-sui-border-default tr {
+  border-color: var(--border-default);
+}
+
 [data-disabled] .\[\[data-disabled\]_\&\]\:hidden {
   display: none;
 }