@dust-tt/sparkle 0.2.446 → 0.2.448

package/dist/sparkle.css

@@ -588,6 +588,34 @@ select {
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+.s-label-xs {
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: normal;
+  font-weight: 700;
+}
+
+.s-label-sm {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.28px;
+  font-weight: 700;
+}
+
+.s-label-base {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.32px;
+  font-weight: 700;
+}
+
+.s-heading-base {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.32px;
+  font-weight: 600;
+}
+
 .s-heading-lg {
   font-size: 18px;
   line-height: 28px;
@@ -2729,22 +2757,22 @@ select {
 
 .s-bg-amber-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 149 23 / var(--tw-bg-opacity));
+  background-color: rgb(254 156 26 / var(--tw-bg-opacity));
 }
 
 .s-bg-amber-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(227 129 34 / var(--tw-bg-opacity));
+  background-color: rgb(226 119 22 / var(--tw-bg-opacity));
 }
 
 .s-bg-amber-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(183 96 32 / var(--tw-bg-opacity));
+  background-color: rgb(175 85 17 / var(--tw-bg-opacity));
 }
 
 .s-bg-amber-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(113 57 18 / var(--tw-bg-opacity));
+  background-color: rgb(112 53 12 / var(--tw-bg-opacity));
 }
 
 .s-bg-amber-950 {
@@ -3023,22 +3051,22 @@ select {
 
 .s-bg-golden-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 149 23 / var(--tw-bg-opacity));
+  background-color: rgb(254 156 26 / var(--tw-bg-opacity));
 }
 
 .s-bg-golden-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(227 129 34 / var(--tw-bg-opacity));
+  background-color: rgb(226 119 22 / var(--tw-bg-opacity));
 }
 
 .s-bg-golden-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(183 96 32 / var(--tw-bg-opacity));
+  background-color: rgb(175 85 17 / var(--tw-bg-opacity));
 }
 
 .s-bg-golden-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(113 57 18 / var(--tw-bg-opacity));
+  background-color: rgb(112 53 12 / var(--tw-bg-opacity));
 }
 
 .s-bg-golden-950 {
@@ -3303,22 +3331,22 @@ select {
 
 .s-bg-info-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 149 23 / var(--tw-bg-opacity));
+  background-color: rgb(254 156 26 / var(--tw-bg-opacity));
 }
 
 .s-bg-info-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(227 129 34 / var(--tw-bg-opacity));
+  background-color: rgb(226 119 22 / var(--tw-bg-opacity));
 }
 
 .s-bg-info-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(183 96 32 / var(--tw-bg-opacity));
+  background-color: rgb(175 85 17 / var(--tw-bg-opacity));
 }
 
 .s-bg-info-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(113 57 18 / var(--tw-bg-opacity));
+  background-color: rgb(112 53 12 / var(--tw-bg-opacity));
 }
 
 .s-bg-info-950 {
@@ -4126,8 +4154,8 @@ select {
 }
 
 .s-from-amber-800 {
-  --tw-gradient-from: #B76020 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(183 96 32 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-from: #AF5511 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(175 85 17 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -4252,7 +4280,7 @@ select {
 }
 
 .s-to-amber-800 {
-  --tw-gradient-to: #B76020 var(--tw-gradient-to-position);
+  --tw-gradient-to: #AF5511 var(--tw-gradient-to-position);
 }
 
 .s-to-blue-500 {
@@ -4731,17 +4759,17 @@ select {
 
 .s-text-amber-700 {
   --tw-text-opacity: 1;
-  color: rgb(227 129 34 / var(--tw-text-opacity));
+  color: rgb(226 119 22 / var(--tw-text-opacity));
 }
 
 .s-text-amber-800 {
   --tw-text-opacity: 1;
-  color: rgb(183 96 32 / var(--tw-text-opacity));
+  color: rgb(175 85 17 / var(--tw-text-opacity));
 }
 
 .s-text-amber-900 {
   --tw-text-opacity: 1;
-  color: rgb(113 57 18 / var(--tw-text-opacity));
+  color: rgb(112 53 12 / var(--tw-text-opacity));
 }
 
 .s-text-amber-950 {
@@ -4795,7 +4823,7 @@ select {
 
 .s-text-brand-orange-golden {
   --tw-text-opacity: 1;
-  color: rgb(255 170 13 / var(--tw-text-opacity));
+  color: rgb(254 156 26 / var(--tw-text-opacity));
 }
 
 .s-text-brand-red-rose {
@@ -4894,17 +4922,17 @@ select {
 
 .s-text-golden-600 {
   --tw-text-opacity: 1;
-  color: rgb(240 149 23 / var(--tw-text-opacity));
+  color: rgb(254 156 26 / var(--tw-text-opacity));
 }
 
 .s-text-golden-800 {
   --tw-text-opacity: 1;
-  color: rgb(183 96 32 / var(--tw-text-opacity));
+  color: rgb(175 85 17 / var(--tw-text-opacity));
 }
 
 .s-text-golden-900 {
   --tw-text-opacity: 1;
-  color: rgb(113 57 18 / var(--tw-text-opacity));
+  color: rgb(112 53 12 / var(--tw-text-opacity));
 }
 
 .s-text-golden-950 {
@@ -5029,12 +5057,12 @@ select {
 
 .s-text-info-800 {
   --tw-text-opacity: 1;
-  color: rgb(183 96 32 / var(--tw-text-opacity));
+  color: rgb(175 85 17 / var(--tw-text-opacity));
 }
 
 .s-text-info-900 {
   --tw-text-opacity: 1;
-  color: rgb(113 57 18 / var(--tw-text-opacity));
+  color: rgb(112 53 12 / var(--tw-text-opacity));
 }
 
 .s-text-info-950 {
@@ -5277,11 +5305,6 @@ select {
   color: rgb(123 129 141 / var(--tw-text-opacity));
 }
 
-.s-text-slate-700 {
-  --tw-text-opacity: 1;
-  color: rgb(54 65 83 / var(--tw-text-opacity));
-}
-
 .s-text-slate-800 {
   --tw-text-opacity: 1;
   color: rgb(42 50 65 / var(--tw-text-opacity));
@@ -5923,11 +5946,6 @@ select {
   background-color: rgb(238 238 239 / var(--tw-bg-opacity));
 }
 
-.hover\:s-bg-primary-150:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(223 224 226 / var(--tw-bg-opacity));
-}
-
 .hover\:s-bg-primary-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(211 213 217 / var(--tw-bg-opacity));
@@ -5982,6 +6000,11 @@ select {
   color: rgb(150 156 165 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-primary-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(123 129 141 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-primary-900:hover {
   --tw-text-opacity: 1;
   color: rgb(28 34 45 / var(--tw-text-opacity));
@@ -6617,42 +6640,12 @@ select {
     padding-bottom: 0.25rem;
   }
 
-  .\@sm\:s-text-2xl {
-    font-size: 24px;
-    line-height: 32px;
-    letter-spacing: -0.96px;
-  }
-
-  .\@sm\:s-text-3xl {
-    font-size: 32px;
-    line-height: 40px;
-    letter-spacing: -1.28px;
-  }
-
-  .\@sm\:s-text-4xl {
-    font-size: 40px;
-    line-height: 48px;
-    letter-spacing: -2.4px;
-  }
-
   .\@sm\:s-text-base {
     font-size: 16px;
     line-height: 24px;
     letter-spacing: -0.32px;
   }
 
-  .\@sm\:s-text-lg {
-    font-size: 18px;
-    line-height: 28px;
-    letter-spacing: -0.36px;
-  }
-
-  .\@sm\:s-text-xl {
-    font-size: 20px;
-    line-height: 26px;
-    letter-spacing: -0.4px;
-  }
-
   .\@sm\:s-leading-7 {
     line-height: 1.75rem;
   }
@@ -6712,17 +6705,17 @@ select {
 
 :is(.s-dark .dark\:s-border-amber-100-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(113 57 18 / var(--tw-border-opacity));
+  border-color: rgb(112 53 12 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-amber-200-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(183 96 32 / var(--tw-border-opacity));
+  border-color: rgb(175 85 17 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-amber-300-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(227 129 34 / var(--tw-border-opacity));
+  border-color: rgb(226 119 22 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-blue-100-night) {
@@ -6803,17 +6796,17 @@ select {
 
 :is(.s-dark .dark\:s-border-golden-100-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(113 57 18 / var(--tw-border-opacity));
+  border-color: rgb(112 53 12 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-golden-200-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(183 96 32 / var(--tw-border-opacity));
+  border-color: rgb(175 85 17 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-golden-300-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(227 129 34 / var(--tw-border-opacity));
+  border-color: rgb(226 119 22 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-gray-100-night) {
@@ -6878,17 +6871,17 @@ select {
 
 :is(.s-dark .dark\:s-border-info-100-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(113 57 18 / var(--tw-border-opacity));
+  border-color: rgb(112 53 12 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-info-200-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(183 96 32 / var(--tw-border-opacity));
+  border-color: rgb(175 85 17 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-info-300-night) {
   --tw-border-opacity: 1;
-  border-color: rgb(227 129 34 / var(--tw-border-opacity));
+  border-color: rgb(226 119 22 / var(--tw-border-opacity));
 }
 
 :is(.s-dark .dark\:s-border-lime-100-night) {
@@ -7108,22 +7101,22 @@ select {
 
 :is(.s-dark .dark\:s-bg-amber-100-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(113 57 18 / var(--tw-bg-opacity));
+  background-color: rgb(112 53 12 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-amber-200-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(183 96 32 / var(--tw-bg-opacity));
+  background-color: rgb(175 85 17 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-amber-300-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(227 129 34 / var(--tw-bg-opacity));
+  background-color: rgb(226 119 22 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-amber-400-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 149 23 / var(--tw-bg-opacity));
+  background-color: rgb(254 156 26 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-amber-50-night) {
@@ -7352,22 +7345,22 @@ select {
 
 :is(.s-dark .dark\:s-bg-golden-100-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(113 57 18 / var(--tw-bg-opacity));
+  background-color: rgb(112 53 12 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-golden-200-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(183 96 32 / var(--tw-bg-opacity));
+  background-color: rgb(175 85 17 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-golden-300-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(227 129 34 / var(--tw-bg-opacity));
+  background-color: rgb(226 119 22 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-golden-400-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 149 23 / var(--tw-bg-opacity));
+  background-color: rgb(254 156 26 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-golden-50-night) {
@@ -7632,22 +7625,22 @@ select {
 
 :is(.s-dark .dark\:s-bg-info-100-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(113 57 18 / var(--tw-bg-opacity));
+  background-color: rgb(112 53 12 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-info-200-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(183 96 32 / var(--tw-bg-opacity));
+  background-color: rgb(175 85 17 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-info-300-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(227 129 34 / var(--tw-bg-opacity));
+  background-color: rgb(226 119 22 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-info-400-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 149 23 / var(--tw-bg-opacity));
+  background-color: rgb(254 156 26 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-info-50-night) {
@@ -9295,11 +9288,6 @@ select {
   background-color: rgb(42 50 65 / var(--tw-bg-opacity));
 }
 
-:is(.s-dark .dark\:hover\:s-bg-primary-800:hover) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(42 50 65 / var(--tw-bg-opacity));
-}
-
 :is(.s-dark .dark\:hover\:s-bg-primary-900:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(28 34 45 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.446",
+  "version": "0.2.448",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/AssistantCard.tsx

@@ -65,7 +65,7 @@ export const AssistantCard = React.forwardRef<
           <div
             className={cn("-s-mt-0.5 s-flex s-flex-col", action && "s-pr-8")}
           >
-            <h3 className="s-line-clamp-1 s-overflow-hidden s-text-ellipsis s-break-all s-text-base s-font-semibold">
+            <h3 className="s-heading-base s-line-clamp-1 s-overflow-hidden s-text-ellipsis s-break-all">
               {title}
             </h3>
             <p

package/src/components/AttachmentChip.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { cn } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+interface AttachmentChipProps {
+  label: string;
+  icon?: React.ComponentType;
+  className?: string;
+}
+
+export function AttachmentChip({
+  label,
+  icon,
+  className,
+}: AttachmentChipProps) {
+  return (
+    <div
+      className={cn(
+        "s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-lg s-px-2 s-py-1 s-text-sm s-font-semibold",
+        "s-border-border s-bg-background",
+        "dark:s-border-border-night dark:s-bg-background-night",
+        "s-text-foreground dark:s-text-foreground-night",
+        "s-max-w-44",
+        className
+      )}
+    >
+      <Icon visual={icon} size="xs" className="s-shrink-0" />
+      <span className="s-pointer s-grow s-truncate">{label}</span>
+    </div>
+  );
+}

package/src/components/Avatar.tsx

@@ -99,7 +99,7 @@ const textVariants = cva("s-select-none s-font-semibold", {
 
 const getColor = (name: string) => {
   if (/\+/.test(name)) {
-    return "s-bg-slate-300";
+    return "s-bg-primary-300";
   }
   let hash = 0;
   for (let i = 0; i < name.length; i++) {
@@ -128,7 +128,7 @@ const getColor = (name: string) => {
 
 const getTextVariant = (name: string) => {
   if (/\+/.test(name)) {
-    return "s-text-slate-700";
+    return "s-text-muted-foreground";
   }
   let hash = 0;
   for (let i = 0; i < name.length; i++) {

package/src/components/BarHeader.tsx

@@ -28,7 +28,7 @@ export function BarHeader({
 }: BarHeaderProps) {
   const titleClasses = classNames(
     "s-text-foreground dark:s-text-foreground-night",
-    "s-text-base s-font-bold s-truncate s-grow"
+    "s-heading-base s-truncate s-grow"
   );
   const buttonBarClasses = "s-flex s-gap-1";
 

package/src/components/Button.tsx

@@ -60,7 +60,7 @@ const styleVariants: Record<ButtonVariantType, string> = {
     "s-text-primary dark:s-text-primary-night",
     "s-bg-background dark:s-bg-background-night",
     "hover:s-text-primary dark:hover:s-text-primary-night",
-    "hover:s-bg-primary-150 dark:hover:s-bg-primary-800",
+    "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
     "hover:s-border-primary-150 dark:hover:s-border-border-night",
     "active:s-bg-primary-300 dark:active:s-bg-primary-900",
     "disabled:s-text-primary-muted dark:disabled:s-text-primary-muted-night",
@@ -70,7 +70,7 @@ const styleVariants: Record<ButtonVariantType, string> = {
     "s-border",
     "s-border-border/0 dark:s-border-border-night/0",
     "s-text-foreground dark:s-text-white",
-    "hover:s-bg-primary-150 dark:hover:s-bg-primary-800",
+    "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
     "hover:s-text-primary-900 dark:hover:s-text-white",
     "hover:s-border-border-dark dark:hover:s-border-border-night",
     "active:s-bg-primary-300 dark:active:s-bg-primary-900",
@@ -80,7 +80,7 @@ const styleVariants: Record<ButtonVariantType, string> = {
     "s-border",
     "s-border-border/0 dark:s-border-border-night/0",
     "s-text-muted-foreground dark:s-text-muted-foreground-night",
-    "hover:s-bg-primary-150 dark:hover:s-bg-primary-800",
+    "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
     "hover:s-text-primary-900 dark:hover:s-text-primary-900-night",
     "hover:s-border-border-dark dark:hover:s-border-border-night",
     "active:s-bg-primary-300 dark:active:s-bg-primary-900",
@@ -89,15 +89,22 @@ const styleVariants: Record<ButtonVariantType, string> = {
 };
 
 const sizeVariants: Record<ButtonSizeType, string> = {
-  mini: "s-h-7 s-p-1.5 s-rounded-lg s-text-sm s-gap-1.5",
-  xs: "s-h-7 s-px-2.5 s-rounded-lg s-text-xs s-gap-1.5",
-  sm: "s-h-9 s-px-3 s-rounded-xl s-text-sm s-gap-2",
-  md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-text-base s-gap-2.5",
+  mini: "s-h-7 s-p-1.5 s-rounded-lg s-label-xs s-gap-1.5",
+  xs: "s-h-7 s-px-2.5 s-rounded-lg s-label-xs s-gap-1.5",
+  sm: "s-h-9 s-px-3 s-rounded-xl s-label-sm s-gap-2",
+  md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-label-base s-gap-2.5",
+};
+
+const labelVariants: Record<ButtonSizeType, string> = {
+  mini: "s-label-xs",
+  xs: "s-label-xs",
+  sm: "s-label-sm",
+  md: "s-label-base",
 };
 
 const buttonVariants = cva(
   cn(
-    "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-font-semibold s-ring-offset-background s-transition-colors",
+    "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-ring-offset-background s-transition-colors",
     "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-2",
     "dark:focus-visible:s-ring-0 dark:focus-visible:s-ring-offset-1"
   ),
@@ -219,7 +226,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         )}
 
         {showContainer && (
-          <div className="s-flex s-items-center s-gap-2">
+          <div
+            className={cn("s-flex s-items-center s-gap-2", labelVariants[size])}
+          >
             {label}
             {showCounter && (
               <Counter

package/src/components/Chip.tsx

@@ -3,7 +3,6 @@ import React, { ComponentType, ReactNode } from "react";
 
 import {
   AnimatedText,
-  IconButton,
   LinkWrapper,
   LinkWrapperProps,
 } from "@sparkle/components/";
@@ -168,12 +167,13 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
           </span>
         )}
         {onRemove && (
-          <IconButton
-            variant="outline"
-            icon={XMarkIcon}
-            size={size}
-            onClick={onRemove ?? undefined}
-          />
+          <div onClick={onRemove ?? undefined}>
+            <Icon
+              visual={XMarkIcon}
+              size={size}
+              className="s-text-primary-700 hover:s-text-primary-500"
+            />
+          </div>
         )}
       </div>
     );

package/src/components/ContextItem.tsx

@@ -51,7 +51,7 @@ export function ContextItem({
         {visual}
         <div className="s-mb-0.5 s-flex s-min-w-0 s-grow s-flex-col s-gap-0">
           <div className="s-flex s-min-w-0 s-grow s-flex-col s-text-foreground dark:s-text-foreground-night sm:s-flex-row sm:s-gap-3">
-            <div className="s-min-w-0 s-overflow-hidden s-text-ellipsis s-whitespace-nowrap s-text-base s-font-semibold">
+            <div className="s-heading-base s-min-w-0 s-overflow-hidden s-text-ellipsis s-whitespace-nowrap">
               {title}
             </div>
             <div className="s-flex s-flex-shrink-0 s-items-center s-gap-3 s-overflow-hidden s-pt-0.5 s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
@@ -161,11 +161,11 @@ ContextItem.SectionHeader = function ({
         hasBorder ? "s-border-b s-border-border dark:s-border-border-night" : ""
       )}
     >
-      <div className="s-font-regular s-text-xl s-text-foreground dark:s-text-foreground-night">
+      <div className="s-heading-xl s-text-foreground dark:s-text-foreground-night">
         {title}
       </div>
       {description && (
-        <div className="s-text-sm s-font-normal s-text-muted-foreground dark:s-text-muted-foreground-night">
+        <div className="s-copy-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
           {description}
         </div>
       )}

package/src/components/Dialog.tsx

@@ -177,7 +177,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "s-text-lg s-font-semibold",
+      "s-heading-lg",
       "s-text-foreground dark:s-text-foreground-night",
       className
     )}

package/src/components/DropzoneOverlay.tsx

@@ -74,8 +74,8 @@ export default function DropzoneOverlay({
           {visual}
         </div>
       </div>
-      <div className="s-text-xl s-font-bold">{title}</div>
-      <div className="s-font-base s-text-base s-text-muted-foreground dark:s-text-muted-foreground-night">
+      <div className="s-heading-xl">{title}</div>
+      <div className="s-text-base s-text-muted-foreground dark:s-text-muted-foreground-night">
         {description}
       </div>
     </div>