@codapet/design-system 0.6.5 → 0.6.8

package/dist/index.d.mts

@@ -849,7 +849,7 @@ declare function DisplayHeading({ className, size, asChild, ...props }: React$1.
 declare const bodyTextVariants: (props?: ({
     size?: "md" | "sm" | "lg" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Body({ className, size, asChild, ...props }: React$1.ComponentProps<'h1'> & VariantProps<typeof bodyTextVariants> & {
+declare function Body({ className, size, asChild, ...props }: React$1.ComponentProps<'p'> & VariantProps<typeof bodyTextVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function HeadingXL({ className, asChild, ...props }: React$1.ComponentProps<'h1'> & {
@@ -870,9 +870,27 @@ declare function HeadingXS({ className, asChild, ...props }: React$1.ComponentPr
 declare function HeadingXXS({ className, asChild, ...props }: React$1.ComponentProps<'h6'> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
+declare function HeadingXLMedium({ className, asChild, ...props }: React$1.ComponentProps<'h1'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingLMedium({ className, asChild, ...props }: React$1.ComponentProps<'h2'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingMMedium({ className, asChild, ...props }: React$1.ComponentProps<'h3'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingSMedium({ className, asChild, ...props }: React$1.ComponentProps<'h4'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingXSMedium({ className, asChild, ...props }: React$1.ComponentProps<'h5'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingXXSMedium({ className, asChild, ...props }: React$1.ComponentProps<'h6'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 
 declare function useIsMobile(): boolean;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertBanner, type AlertBannerProps, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, BadgeActionable, type BadgeActionableProps, BadgeInformative, BadgeInformativeGroup, BadgeInformativeItem, type BadgeInformativeProps, BadgeNumber, type BadgeNumberProps, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DateFormat, DateInput, type DateInputProps, DateRangeInput, type DateRangeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownSelect, DropdownSelectContent, type DropdownSelectContentProps, DropdownSelectLabel, type DropdownSelectLabelProps, DropdownSelectOption, type DropdownSelectOptionProps, type DropdownSelectProps, DropdownSelectTrigger, type DropdownSelectTriggerProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingM, HeadingS, HeadingXL, HeadingXS, HeadingXXS, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MultiSelectFreeText, type MultiSelectFreeTextOption, type MultiSelectFreeTextProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTooltipContent, type RichTooltipContentProps, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, type SearchSuggestion, SearchableSelect, SearchableSelectContent, SearchableSelectEmpty, SearchableSelectGroup, SearchableSelectItem, type SearchableSelectOption, type SearchableSelectProps, SearchableSelectTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, type TimeFormat, TimeInput, type TimeInputProps, type TimeValue, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertBannerVariants, badgeActionableVariants, badgeInformativeVariants, badgeNumberVariants, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, progressBarVariants, tabsTriggerVariants, toggleVariants, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertBanner, type AlertBannerProps, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, BadgeActionable, type BadgeActionableProps, BadgeInformative, BadgeInformativeGroup, BadgeInformativeItem, type BadgeInformativeProps, BadgeNumber, type BadgeNumberProps, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DateFormat, DateInput, type DateInputProps, DateRangeInput, type DateRangeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownSelect, DropdownSelectContent, type DropdownSelectContentProps, DropdownSelectLabel, type DropdownSelectLabelProps, DropdownSelectOption, type DropdownSelectOptionProps, type DropdownSelectProps, DropdownSelectTrigger, type DropdownSelectTriggerProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingLMedium, HeadingM, HeadingMMedium, HeadingS, HeadingSMedium, HeadingXL, HeadingXLMedium, HeadingXS, HeadingXSMedium, HeadingXXS, HeadingXXSMedium, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MultiSelectFreeText, type MultiSelectFreeTextOption, type MultiSelectFreeTextProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTooltipContent, type RichTooltipContentProps, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, type SearchSuggestion, SearchableSelect, SearchableSelectContent, SearchableSelectEmpty, SearchableSelectGroup, SearchableSelectItem, type SearchableSelectOption, type SearchableSelectProps, SearchableSelectTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, type TimeFormat, TimeInput, type TimeInputProps, type TimeValue, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertBannerVariants, badgeActionableVariants, badgeInformativeVariants, badgeNumberVariants, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, progressBarVariants, tabsTriggerVariants, toggleVariants, useFormField, useIsMobile, useSidebar };

package/dist/index.mjs

@@ -149,9 +149,9 @@ var alertBannerVariants = cva2(
   {
     variants: {
       type: {
-        informative: "bg-alert-bg-informative border-gray-stroke-light",
-        error: "bg-alert-bg-error border-error-stroke-light",
-        success: "bg-success-surface-subtle border-success-stroke-light"
+        informative: "bg-alert-bg-informative border-gray-stroke-light [&_svg]:text-[#52525c] dark:[&_svg]:text-[#a1a1aa]",
+        error: "bg-alert-bg-error border-error-stroke-light [&_svg]:text-[#ff6467] dark:[&_svg]:text-[#ff8486]",
+        success: "bg-success-surface-subtle border-success-stroke-light [&_svg]:text-[#00a63e] dark:[&_svg]:text-[#34d399]"
       }
     },
     defaultVariants: {
@@ -212,14 +212,14 @@ var buttonVariants = cva3(
     variants: {
       variant: {
         primary: "bg-primary text-primary-foreground hover:bg-brand-dark active:bg-active-primary",
-        secondary: "bg-brand-subtle text-brand-vibrant hover:bg-primary-surface-light border border-brand-light active:bg-icon-disabled hover:border-transparent active:border-transparent",
-        tertiary: "bg-gray-surface-light text-foreground-secondary hover:bg-gray-surface-default border border-gray-stroke-light active:bg-gray-surface-default",
+        secondary: "bg-brand-subtle text-primary-stroke-default hover:bg-primary-surface-light border border-brand-light active:bg-icon-disabled",
+        tertiary: "bg-gray-surface-light text-foreground-secondary hover:bg-gray-surface-default border border-gray-stroke-light hover:border-transparent active:border-transparent active:bg-[#9f9fa9] dark:active:bg-[#71717a]",
         outline: "text-foreground-secondary border border-gray-surface-default bg-background hover:bg-gray-surface-light hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:bg-gray-surface-default",
-        ghost: "text-brand-vibrant hover:bg-primary-surface-subtle dark:hover:bg-accent/50 active:bg-primary-surface-light",
+        ghost: "text-primary-stroke-default hover:bg-primary-surface-subtle dark:hover:bg-accent/50 active:bg-primary-surface-light",
         "ghost-secondary": "text-foreground-secondary hover:bg-gray-surface-light hover:text-accent-foreground dark:hover:bg-accent/50 active:bg-gray-surface-default",
         "ghost-destructive": "bg-transparent text-destructive-text hover:bg-destructive-hover focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-destructive-active",
         link: "text-foreground-secondary underline-offset-4 underline hover:bg-none active:bg-none hover:text-brand-vibrant",
-        destructive: "bg-error-surface-default text-primary-foreground hover:bg-destructive-bg-deep focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-error-surface-dark",
+        destructive: "bg-error-surface-default text-primary-foreground hover:bg-red-800 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-error-surface-dark",
         "destructive-secondary": "bg-error-surface-light border border-error-stroke-light text-destructive-text hover:border-error-surface-default focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-destructive-active",
         "destructive-tertiary": "bg-transparent border border-error-stroke-light text-destructive-text hover:bg-destructive-hover focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-destructive-active"
       },
@@ -2209,28 +2209,19 @@ var inputVariants = cva8(
   [
     // Base styles
     "file:text-foreground-secondary placeholder:text-gray-subtle selection:bg-primary selection:text-primary-foreground",
-    "flex w-full min-w-0 rounded-md border bg-transparent text-base  transition-all duration-400",
+    "flex w-full min-w-0 rounded-lg border bg-transparent text-base font-medium transition-all duration-400",
     "outline-none font-sans",
     // File input styles
     "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
     // Disabled styles
-    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-    // Responsive text size
-    "md:text-sm",
-    // Default state
-    "border-border-default bg-background",
-    // Hover state
-    "hover:border-primary-stroke-default",
-    // Focus state
-    "focus:border-focus-ring",
-    "active:border-brand-normal"
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60"
   ],
   {
     variants: {
       size: {
-        sm: "h-9 px-3 py-1 text-base",
-        md: "h-10 px-3 py-2 text-base",
-        lg: "h-12 px-4 py-3 text-base"
+        sm: "h-10 px-3 py-2 text-base",
+        md: "h-12 px-3 py-2 text-base",
+        lg: "h-14 px-4 py-3 text-base"
       }
     },
     defaultVariants: {
@@ -2252,11 +2243,17 @@ var Input = React22.forwardRef(
     error,
     ...props
   }, ref) => {
-    const errorStyles2 = error ? [
-      "border-destructive bg-red-subtle",
-      "focus:border-destructive focus:ring-destructive/20",
-      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-    ] : [];
+    const stateStyles = error ? [
+      "border-error-stroke-default bg-error-surface-subtle",
+      "hover:border-error-stroke-default",
+      "focus:border-2 focus:border-error-stroke-default",
+      "active:border-error-stroke-default"
+    ] : [
+      "border-gray-stroke-default bg-background",
+      "hover:border-focus-ring",
+      "focus:border-2 focus:border-focus-ring",
+      "active:border-focus-ring"
+    ];
     if (leftIcon || rightIcon) {
       return /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
         /* @__PURE__ */ jsx24(
@@ -2266,9 +2263,9 @@ var Input = React22.forwardRef(
             "data-slot": "input",
             className: cn(
               inputVariants({ size }),
-              errorStyles2,
+              stateStyles,
               "peer",
-              leftIcon && "pl-8",
+              leftIcon && "pl-10",
               rightIcon && "pr-10",
               className
             ),
@@ -2283,13 +2280,13 @@ var Input = React22.forwardRef(
             className: cn(
               "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center",
               "transition-colors stroke-[1.5px]",
-              error ? "text-destructive peer-hover:text-destructive peer-focus:text-destructive peer-active:text-destructive" : "text-muted-foreground peer-hover:text-brand-normal peer-focus:text-focus-ring peer-active:text-brand-normal",
+              error ? "text-error-stroke-default peer-hover:text-error-stroke-default peer-focus:text-error-stroke-default peer-active:text-error-stroke-default" : "text-muted-foreground peer-hover:text-focus-ring peer-focus:text-focus-ring peer-active:text-focus-ring",
               leftIconClassName
             ),
             children: React22.isValidElement(leftIcon) ? (() => {
               const iconEl = leftIcon;
               return React22.cloneElement(iconEl, {
-                className: cn("h-4 w-4", iconEl.props.className)
+                className: cn("h-5 w-5", iconEl.props.className)
               });
             })() : leftIcon
           }
@@ -2303,7 +2300,7 @@ var Input = React22.forwardRef(
             className: cn(
               "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center",
               "h-6 w-6 rounded-sm transition-colors",
-              error ? "text-destructive hover:text-destructive focus:text-destructive" : "text-muted-foreground hover:text-brand-normal focus:text-focus-ring",
+              error ? "text-error-stroke-default hover:text-error-stroke-default focus:text-error-stroke-default" : "text-muted-foreground hover:text-focus-ring focus:text-focus-ring",
               rightIconClassName
             ),
             "aria-label": "Input action",
@@ -2311,7 +2308,7 @@ var Input = React22.forwardRef(
             children: React22.isValidElement(rightIcon) ? (() => {
               const iconEl = rightIcon;
               return React22.cloneElement(iconEl, {
-                className: cn("h-4 w-4", iconEl.props.className)
+                className: cn("h-5 w-5", iconEl.props.className)
               });
             })() : rightIcon
           }
@@ -2323,7 +2320,7 @@ var Input = React22.forwardRef(
       {
         type,
         "data-slot": "input",
-        className: cn(inputVariants({ size }), errorStyles2, className),
+        className: cn(inputVariants({ size }), stateStyles, className),
         ref,
         "aria-invalid": error,
         ...props
@@ -3543,7 +3540,7 @@ import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { cva as cva9 } from "class-variance-authority";
 import "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
-var labelTextVariants = cva9("font-sans font-semibold ", {
+var labelTextVariants = cva9("font-sans font-semibold text-vibrant-text-body", {
   variants: {
     size: {
       lg: "text-base md:text-lg md:leading-[1.625rem] leading-[1.5rem]",
@@ -7224,13 +7221,13 @@ import { cva as cva15 } from "class-variance-authority";
 import "react";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var displayTextVariants = cva15(
-  "tracking-normal font-normal leading-none text-brand-dark font-serif italic",
+  "tracking-normal font-normal font-serif italic text-vibrant-text-display",
   {
     variants: {
       size: {
-        md: "text-[1.75rem] md:text-4xl leading-[2.75rem] md:leading-[4rem]",
-        sm: "text-lg md:text-xl leading-[2.5rem] md:leading-[3rem]",
-        lg: "text-4xl md:text-[3.25rem] leading-[4rem] md:leading-[5rem]"
+        lg: "text-4xl md:text-[3.25rem] leading-[44px] md:leading-[64px]",
+        md: "text-[1.75rem] md:text-4xl leading-[36px] md:leading-[44px]",
+        sm: "text-lg md:text-xl leading-[26px] md:leading-[28px]"
       }
     },
     defaultVariants: {
@@ -7254,13 +7251,13 @@ function DisplayHeading({
     }
   );
 }
-var bodyTextVariants = cva15("font-sans ", {
+var bodyTextVariants = cva15("font-sans text-vibrant-text-body", {
   variants: {
     size: {
-      lg: "text-lg md:text-xl leading-[1.625rem] md:leading-[1.75rem]",
-      md: "text-base  leading-[1.5rem] ",
-      sm: "text-sm  leading-[1.25rem] ",
-      xs: "text-xs leading-[1rem]"
+      lg: "text-lg md:text-xl leading-[26px] md:leading-[28px]",
+      md: "text-base leading-[24px]",
+      sm: "text-sm leading-[20px]",
+      xs: "text-xs leading-[16px]"
     }
   },
   defaultVariants: {
@@ -7277,7 +7274,7 @@ function Body({
   return /* @__PURE__ */ jsx63(
     Comp,
     {
-      "data-slot": "h1",
+      "data-slot": "p",
       className: cn(bodyTextVariants({ size, className })),
       ...props
     }
@@ -7294,7 +7291,7 @@ function HeadingXL({
     {
       "data-slot": "h1",
       className: cn(
-        "text-2xl md:text-[2rem] md:leading-[2.5rem] leading-[2rem] font-semibold font-sans",
+        "text-2xl md:text-[2rem] leading-[32px] md:leading-[40px] font-semibold font-sans text-vibrant-text-heading",
         className
       ),
       ...props
@@ -7312,7 +7309,7 @@ function HeadingL({
     {
       "data-slot": "h2",
       className: cn(
-        "md:text-[1.5rem] text-[1.25rem] md:leading-[2rem] leading-[1.75rem] font-semibold font-sans",
+        "text-[1.25rem] md:text-[1.5rem] leading-[28px] md:leading-[32px] font-semibold font-sans text-vibrant-text-heading",
         className
       ),
       ...props
@@ -7330,7 +7327,7 @@ function HeadingM({
     {
       "data-slot": "h3",
       className: cn(
-        "text-[1.125rem] md:text-xl md:leading-[1.75rem] leading-[1.625rem] font-semibold font-sans",
+        "text-[1.125rem] md:text-xl leading-[26px] md:leading-[28px] font-semibold font-sans text-vibrant-text-heading",
         className
       ),
       ...props
@@ -7348,7 +7345,7 @@ function HeadingS({
     {
       "data-slot": "h4",
       className: cn(
-        "text-base leading-[1.5rem] font-semibold font-sans",
+        "text-base leading-[24px] font-semibold font-sans text-vibrant-text-heading",
         className
       ),
       ...props
@@ -7366,7 +7363,7 @@ function HeadingXS({
     {
       "data-slot": "h5",
       className: cn(
-        "text-sm  leading-[1.25rem] font-semibold font-sans",
+        "text-sm leading-[20px] font-semibold font-sans text-vibrant-text-heading",
         className
       ),
       ...props
@@ -7379,12 +7376,120 @@ function HeadingXXS({
   ...props
 }) {
   const Comp = asChild ? Slot7 : "h6";
+  return /* @__PURE__ */ jsx63(
+    Comp,
+    {
+      "data-slot": "h6",
+      className: cn(
+        "text-xs leading-[16px] font-medium font-sans text-vibrant-text-heading",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingXLMedium({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h1";
+  return /* @__PURE__ */ jsx63(
+    Comp,
+    {
+      "data-slot": "h1",
+      className: cn(
+        "text-2xl md:text-[2rem] leading-[32px] md:leading-[40px] font-medium font-sans text-vibrant-text-heading",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingLMedium({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h2";
+  return /* @__PURE__ */ jsx63(
+    Comp,
+    {
+      "data-slot": "h2",
+      className: cn(
+        "text-[1.25rem] md:text-[1.5rem] leading-[28px] md:leading-[32px] font-medium font-sans text-vibrant-text-heading",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingMMedium({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h3";
+  return /* @__PURE__ */ jsx63(
+    Comp,
+    {
+      "data-slot": "h3",
+      className: cn(
+        "text-[1.125rem] md:text-xl leading-[26px] md:leading-[28px] font-medium font-sans text-vibrant-text-heading",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingSMedium({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h4";
+  return /* @__PURE__ */ jsx63(
+    Comp,
+    {
+      "data-slot": "h4",
+      className: cn(
+        "text-base leading-[24px] font-medium font-sans text-vibrant-text-heading",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingXSMedium({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h5";
   return /* @__PURE__ */ jsx63(
     Comp,
     {
       "data-slot": "h5",
       className: cn(
-        "text-xs leading-[1rem]  font-semibold font-sans",
+        "text-sm leading-[20px] font-medium font-sans text-vibrant-text-heading",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingXXSMedium({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h6";
+  return /* @__PURE__ */ jsx63(
+    Comp,
+    {
+      "data-slot": "h6",
+      className: cn(
+        "text-xs leading-[16px] font-medium font-sans text-vibrant-text-heading",
         className
       ),
       ...props
@@ -7533,11 +7638,17 @@ export {
   FormLabel,
   FormMessage,
   HeadingL,
+  HeadingLMedium,
   HeadingM,
+  HeadingMMedium,
   HeadingS,
+  HeadingSMedium,
   HeadingXL,
+  HeadingXLMedium,
   HeadingXS,
+  HeadingXSMedium,
   HeadingXXS,
+  HeadingXXSMedium,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,