@cryptlex/web-components 1.3.5 → 1.4.0

package/dist/index.es.js

@@ -2,17 +2,17 @@ import { Accordion as t, AccordionContent as a, AccordionItem as n, AccordionTri
 import { Avatar as m, AvatarFallback as l, AvatarImage as d } from "./components/ui/avatar.es.js";
 import { Badge as S, badgeVariants as g } from "./components/ui/badge.es.js";
 import { Breadcrumb as b, BreadcrumbEllipsis as C, BreadcrumbItem as D, BreadcrumbLink as x, BreadcrumbList as f, BreadcrumbPage as c, BreadcrumbSeparator as s } from "./components/ui/breadcrumb.es.js";
-import { Button as I, buttonVariants as P } from "./components/ui/button.es.js";
+import { Button as I, buttonVariants as L } from "./components/ui/button.es.js";
 import { Calendar as F } from "./components/ui/calendar.es.js";
-import { Card as E, CardContent as R, CardDescription as v, CardFooter as h, CardHeader as A, CardTitle as O } from "./components/ui/card.es.js";
+import { Card as E, CardContent as R, CardDescription as v, CardFooter as A, CardHeader as O, CardTitle as h } from "./components/ui/card.es.js";
 import { ChartContainer as N, ChartLegend as _, ChartLegendContent as y, ChartStyle as G, ChartTooltip as k, ChartTooltipContent as H } from "./components/ui/chart.es.js";
 import { Checkbox as V } from "./components/ui/checkbox.es.js";
 import { Collapsible as K, CollapsibleContent as z, CollapsibleTrigger as X } from "./components/ui/collapsible.es.js";
 import { Command as q, CommandDialog as J, CommandEmpty as Q, CommandGroup as W, CommandInput as Z, CommandItem as $, CommandList as ee, CommandSeparator as oe, CommandShortcut as re } from "./components/ui/command.es.js";
 import { CopyButton as ae } from "./components/ui/copy-button.es.js";
 import { Dialog as ie, DialogClose as pe, DialogContent as me, DialogDescription as le, DialogFooter as de, DialogHeader as ue, DialogOverlay as Se, DialogPortal as ge, DialogTitle as Te, DialogTrigger as be } from "./components/ui/dialog.es.js";
-import { Drawer as De, DrawerClose as xe, DrawerContent as fe, DrawerDescription as ce, DrawerFooter as se, DrawerHeader as Me, DrawerOverlay as Ie, DrawerPortal as Pe, DrawerTitle as Le, DrawerTrigger as Fe } from "./components/ui/drawer.es.js";
-import { DropdownMenu as Ee, DropdownMenuCheckboxItem as Re, DropdownMenuContent as ve, DropdownMenuGroup as he, DropdownMenuItem as Ae, DropdownMenuLabel as Oe, DropdownMenuPortal as Be, DropdownMenuRadioGroup as Ne, DropdownMenuRadioItem as _e, DropdownMenuSeparator as ye, DropdownMenuShortcut as Ge, DropdownMenuSub as ke, DropdownMenuSubContent as He, DropdownMenuSubTrigger as Ue, DropdownMenuTrigger as Ve } from "./components/ui/dropdown-menu.es.js";
+import { Drawer as De, DrawerClose as xe, DrawerContent as fe, DrawerDescription as ce, DrawerFooter as se, DrawerHeader as Me, DrawerOverlay as Ie, DrawerPortal as Le, DrawerTitle as Pe, DrawerTrigger as Fe } from "./components/ui/drawer.es.js";
+import { DropdownMenu as Ee, DropdownMenuCheckboxItem as Re, DropdownMenuContent as ve, DropdownMenuGroup as Ae, DropdownMenuItem as Oe, DropdownMenuLabel as he, DropdownMenuPortal as Be, DropdownMenuRadioGroup as Ne, DropdownMenuRadioItem as _e, DropdownMenuSeparator as ye, DropdownMenuShortcut as Ge, DropdownMenuSub as ke, DropdownMenuSubContent as He, DropdownMenuSubTrigger as Ue, DropdownMenuTrigger as Ve } from "./components/ui/dropdown-menu.es.js";
 import { Form as Ke, FormControl as ze, FormDescription as Xe, FormField as je, FormItem as qe, FormLabel as Je, FormMessage as Qe, useFormField as We } from "./components/ui/form.es.js";
 import { Input as $e } from "./components/ui/input.es.js";
 import { InputOTP as oo, InputOTPGroup as ro, InputOTPSeparator as to, InputOTPSlot as ao } from "./components/ui/input-otp.es.js";
@@ -21,15 +21,15 @@ import { LinkButton as mo } from "./components/ui/link-button.es.js";
 import { Loader as uo } from "./components/ui/loader.es.js";
 import "./components/ui/mutli-select.es.js";
 import { NavigationMenu as go, NavigationMenuContent as To, NavigationMenuIndicator as bo, NavigationMenuItem as Co, NavigationMenuLink as Do, NavigationMenuList as xo, NavigationMenuListItem as fo, NavigationMenuTrigger as co, NavigationMenuViewport as so, navigationMenuTriggerStyle as Mo } from "./components/ui/navigation-menu.es.js";
-import { Pagination as Po, PaginationContent as Lo, PaginationEllipsis as Fo, PaginationItem as wo, PaginationLink as Eo, PaginationNext as Ro, PaginationPrevious as vo } from "./components/ui/pagination.es.js";
-import { PasswordInput as Ao } from "./components/ui/password-input.es.js";
+import { Pagination as Lo, PaginationContent as Po, PaginationEllipsis as Fo, PaginationItem as wo, PaginationLink as Eo, PaginationNext as Ro, PaginationPrevious as vo } from "./components/ui/pagination.es.js";
+import { PasswordInput as Oo } from "./components/ui/password-input.es.js";
 import { Popover as Bo, PopoverAnchor as No, PopoverContent as _o, PopoverTrigger as yo } from "./components/ui/popover.es.js";
 import { RadioGroup as ko, RadioGroupItem as Ho } from "./components/ui/radio-group.es.js";
 import { SearchInput as Vo } from "./components/ui/search-input.es.js";
 import { Select as Ko, SelectContent as zo, SelectGroup as Xo, SelectItem as jo, SelectLabel as qo, SelectScrollDownButton as Jo, SelectScrollUpButton as Qo, SelectSeparator as Wo, SelectTrigger as Zo, SelectValue as $o } from "./components/ui/select.es.js";
 import { Separator as or } from "./components/ui/separator.es.js";
 import { Sheet as tr, SheetClose as ar, SheetContent as nr, SheetDescription as ir, SheetFooter as pr, SheetHeader as mr, SheetOverlay as lr, SheetPortal as dr, SheetTitle as ur, SheetTrigger as Sr } from "./components/ui/sheet.es.js";
-import { Sidebar as Tr, SidebarContent as br, SidebarFooter as Cr, SidebarGroup as Dr, SidebarGroupAction as xr, SidebarGroupContent as fr, SidebarGroupLabel as cr, SidebarHeader as sr, SidebarInput as Mr, SidebarInset as Ir, SidebarMenu as Pr, SidebarMenuAction as Lr, SidebarMenuBadge as Fr, SidebarMenuButton as wr, SidebarMenuItem as Er, SidebarMenuSkeleton as Rr, SidebarMenuSub as vr, SidebarMenuSubButton as hr, SidebarMenuSubItem as Ar, SidebarProvider as Or, SidebarRail as Br, SidebarSeparator as Nr, SidebarTrigger as _r, useSidebar as yr } from "./components/ui/sidebar.es.js";
+import { Sidebar as Tr, SidebarContent as br, SidebarFooter as Cr, SidebarGroup as Dr, SidebarGroupAction as xr, SidebarGroupContent as fr, SidebarGroupLabel as cr, SidebarHeader as sr, SidebarInput as Mr, SidebarInset as Ir, SidebarMenu as Lr, SidebarMenuAction as Pr, SidebarMenuBadge as Fr, SidebarMenuButton as wr, SidebarMenuItem as Er, SidebarMenuSkeleton as Rr, SidebarMenuSub as vr, SidebarMenuSubButton as Ar, SidebarMenuSubItem as Or, SidebarProvider as hr, SidebarRail as Br, SidebarSeparator as Nr, SidebarTrigger as _r, useSidebar as yr } from "./components/ui/sidebar.es.js";
 import { Skeleton as kr } from "./components/ui/skeleton.es.js";
 import { Toaster as Ur } from "./components/ui/sonner.es.js";
 import { Table as Yr, TableBody as Kr, TableCaption as zr, TableCell as Xr, TableFooter as jr, TableHead as qr, TableHeader as Jr, TableRow as Qr } from "./components/ui/table.es.js";
@@ -40,23 +40,24 @@ import { useIsMobile as dt } from "./hooks/use-mobile.es.js";
 import { cn as St, getThemeHue as gt, logout as Tt, setThemeHue as bt } from "./utils/index.es.js";
 import { DataTable as Dt } from "./components/data-table/data-table.es.js";
 import { CHECK_BOX as ft, DEFAULT_DATE_COLUMNS as ct, ID_COLUMN as st } from "./components/data-table/table-commons.es.js";
-import { COMPARISON_OPERATOR_LABELS as It, DEFAULT_FILTERABLE_FIELDS as Pt, FILTERABLE_PROPERTY_TYPES as Lt, FILTER_COMPARISON_OPERATORS as Ft, OPERATORS_FOR_FILTER_TYPE as wt, RESOURCE_DEFINITIONS as Et, RESOURCE_NAMES as Rt, getLicenseStatus as vt, getResourceDisplayName as ht, getValidityDisplay as At, getValueFromData as Ot, secondsToDuration as Bt } from "./components/data-table/table-utils/constants.es.js";
-import { createTableFetchFn as _t } from "./components/data-table/table-utils/createTableFetchFn.es.js";
-import { FormatDate as Gt } from "./components/data-table/table-utils/date.es.js";
-import { getLinkDisplay as Ht } from "./components/data-table/table-utils/link-display.es.js";
-import { convertCamelCaseToTitleCase as Vt, convertToTitleCase as Yt, pluralizeTimes as Kt } from "./components/data-table/table-utils/string.es.js";
-import { DYNAMIC_INPUT_TARGET as Xt } from "./components/data-table/table-utils/types.es.js";
-import { KeyValueCard as qt } from "./components/key-value-card/key-value-card.es.js";
-import { AppLayout as Qt } from "./components/sidebar/app-layout.es.js";
-import { NavMain as Zt } from "./components/sidebar/nav-main.es.js";
-import { SideBar as ea } from "./components/sidebar/sidebar.es.js";
-import { StaticDataTable as ra } from "./components/static-data-table/data-table.es.js";
+import { ALL_OS as It, COMPARISON_OPERATOR_LABELS as Lt, DEFAULT_FILTERABLE_FIELDS as Pt, FILTERABLE_PROPERTY_TYPES as Ft, FILTER_COMPARISON_OPERATORS as wt, OPERATORS_FOR_FILTER_TYPE as Et, RESOURCE_DEFINITIONS as Rt, RESOURCE_NAMES as vt, getLicenseStatus as At, getResourceDisplayName as Ot, getValidityDisplay as ht, getValueFromData as Bt, secondsToDuration as Nt } from "./components/data-table/table-utils/constants.es.js";
+import { createTableFetchFn as yt } from "./components/data-table/table-utils/createTableFetchFn.es.js";
+import { FormatDate as kt } from "./components/data-table/table-utils/date.es.js";
+import { getLinkDisplay as Ut } from "./components/data-table/table-utils/link-display.es.js";
+import { convertCamelCaseToTitleCase as Yt, convertToTitleCase as Kt, pluralizeTimes as zt } from "./components/data-table/table-utils/string.es.js";
+import { DYNAMIC_INPUT_TARGET as jt } from "./components/data-table/table-utils/types.es.js";
+import { KeyValueCard as Jt } from "./components/key-value-card/key-value-card.es.js";
+import { AppLayout as Wt } from "./components/sidebar/app-layout.es.js";
+import { NavMain as $t } from "./components/sidebar/nav-main.es.js";
+import { SideBar as oa } from "./components/sidebar/sidebar.es.js";
+import { StaticDataTable as ta } from "./components/static-data-table/data-table.es.js";
 export {
+  It as ALL_OS,
   t as Accordion,
   a as AccordionContent,
   n as AccordionItem,
   i as AccordionTrigger,
-  Qt as AppLayout,
+  Wt as AppLayout,
   m as Avatar,
   l as AvatarFallback,
   d as AvatarImage,
@@ -70,14 +71,14 @@ export {
   s as BreadcrumbSeparator,
   I as Button,
   ft as CHECK_BOX,
-  It as COMPARISON_OPERATOR_LABELS,
+  Lt as COMPARISON_OPERATOR_LABELS,
   F as Calendar,
   E as Card,
   R as CardContent,
   v as CardDescription,
-  h as CardFooter,
-  A as CardHeader,
-  O as CardTitle,
+  A as CardFooter,
+  O as CardHeader,
+  h as CardTitle,
   N as ChartContainer,
   _ as ChartLegend,
   y as ChartLegendContent,
@@ -100,7 +101,7 @@ export {
   ae as CopyButton,
   ct as DEFAULT_DATE_COLUMNS,
   Pt as DEFAULT_FILTERABLE_FIELDS,
-  Xt as DYNAMIC_INPUT_TARGET,
+  jt as DYNAMIC_INPUT_TARGET,
   Dt as DataTable,
   ie as Dialog,
   pe as DialogClose,
@@ -119,15 +120,15 @@ export {
   se as DrawerFooter,
   Me as DrawerHeader,
   Ie as DrawerOverlay,
-  Pe as DrawerPortal,
-  Le as DrawerTitle,
+  Le as DrawerPortal,
+  Pe as DrawerTitle,
   Fe as DrawerTrigger,
   Ee as DropdownMenu,
   Re as DropdownMenuCheckboxItem,
   ve as DropdownMenuContent,
-  he as DropdownMenuGroup,
-  Ae as DropdownMenuItem,
-  Oe as DropdownMenuLabel,
+  Ae as DropdownMenuGroup,
+  Oe as DropdownMenuItem,
+  he as DropdownMenuLabel,
   Be as DropdownMenuPortal,
   Ne as DropdownMenuRadioGroup,
   _e as DropdownMenuRadioItem,
@@ -137,8 +138,8 @@ export {
   He as DropdownMenuSubContent,
   Ue as DropdownMenuSubTrigger,
   Ve as DropdownMenuTrigger,
-  Lt as FILTERABLE_PROPERTY_TYPES,
-  Ft as FILTER_COMPARISON_OPERATORS,
+  Ft as FILTERABLE_PROPERTY_TYPES,
+  wt as FILTER_COMPARISON_OPERATORS,
   Ke as Form,
   ze as FormControl,
   Xe as FormDescription,
@@ -146,18 +147,18 @@ export {
   qe as FormItem,
   Je as FormLabel,
   Qe as FormMessage,
-  Gt as FormatDate,
+  kt as FormatDate,
   st as ID_COLUMN,
   $e as Input,
   oo as InputOTP,
   ro as InputOTPGroup,
   to as InputOTPSeparator,
   ao as InputOTPSlot,
-  qt as KeyValueCard,
+  Jt as KeyValueCard,
   io as Label,
   mo as LinkButton,
   uo as Loader,
-  Zt as NavMain,
+  $t as NavMain,
   go as NavigationMenu,
   To as NavigationMenuContent,
   bo as NavigationMenuIndicator,
@@ -167,21 +168,21 @@ export {
   fo as NavigationMenuListItem,
   co as NavigationMenuTrigger,
   so as NavigationMenuViewport,
-  wt as OPERATORS_FOR_FILTER_TYPE,
-  Po as Pagination,
-  Lo as PaginationContent,
+  Et as OPERATORS_FOR_FILTER_TYPE,
+  Lo as Pagination,
+  Po as PaginationContent,
   Fo as PaginationEllipsis,
   wo as PaginationItem,
   Eo as PaginationLink,
   Ro as PaginationNext,
   vo as PaginationPrevious,
-  Ao as PasswordInput,
+  Oo as PasswordInput,
   Bo as Popover,
   No as PopoverAnchor,
   _o as PopoverContent,
   yo as PopoverTrigger,
-  Et as RESOURCE_DEFINITIONS,
-  Rt as RESOURCE_NAMES,
+  Rt as RESOURCE_DEFINITIONS,
+  vt as RESOURCE_NAMES,
   ko as RadioGroup,
   Ho as RadioGroupItem,
   Vo as SearchInput,
@@ -206,7 +207,7 @@ export {
   dr as SheetPortal,
   ur as SheetTitle,
   Sr as SheetTrigger,
-  ea as SideBar,
+  oa as SideBar,
   Tr as Sidebar,
   br as SidebarContent,
   Cr as SidebarFooter,
@@ -217,21 +218,21 @@ export {
   sr as SidebarHeader,
   Mr as SidebarInput,
   Ir as SidebarInset,
-  Pr as SidebarMenu,
-  Lr as SidebarMenuAction,
+  Lr as SidebarMenu,
+  Pr as SidebarMenuAction,
   Fr as SidebarMenuBadge,
   wr as SidebarMenuButton,
   Er as SidebarMenuItem,
   Rr as SidebarMenuSkeleton,
   vr as SidebarMenuSub,
-  hr as SidebarMenuSubButton,
-  Ar as SidebarMenuSubItem,
-  Or as SidebarProvider,
+  Ar as SidebarMenuSubButton,
+  Or as SidebarMenuSubItem,
+  hr as SidebarProvider,
   Br as SidebarRail,
   Nr as SidebarSeparator,
   _r as SidebarTrigger,
   kr as Skeleton,
-  ra as StaticDataTable,
+  ta as StaticDataTable,
   Yr as Table,
   Kr as TableBody,
   zr as TableCaption,
@@ -251,21 +252,21 @@ export {
   nt as TooltipProvider,
   it as TooltipTrigger,
   g as badgeVariants,
-  P as buttonVariants,
+  L as buttonVariants,
   St as cn,
-  Vt as convertCamelCaseToTitleCase,
-  Yt as convertToTitleCase,
-  _t as createTableFetchFn,
-  vt as getLicenseStatus,
-  Ht as getLinkDisplay,
-  ht as getResourceDisplayName,
+  Yt as convertCamelCaseToTitleCase,
+  Kt as convertToTitleCase,
+  yt as createTableFetchFn,
+  At as getLicenseStatus,
+  Ut as getLinkDisplay,
+  Ot as getResourceDisplayName,
   gt as getThemeHue,
-  At as getValidityDisplay,
-  Ot as getValueFromData,
+  ht as getValidityDisplay,
+  Bt as getValueFromData,
   Tt as logout,
   Mo as navigationMenuTriggerStyle,
-  Kt as pluralizeTimes,
-  Bt as secondsToDuration,
+  zt as pluralizeTimes,
+  Nt as secondsToDuration,
   bt as setThemeHue,
   We as useFormField,
   dt as useIsMobile,

package/lib/index.css

@@ -1,62 +1,9 @@
 @import url('tokens.css');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import './tailwind.preset.css';
 
-:root {
-  /* shad/cn tokens */
-  --background: var(--neutral-1);
-  --foreground: var(--neutral-10);
-
-  --card: var(--neutral-2);
-  --card-foreground: var(--foreground);
-  --popover: var(--background);
-  --popover-foreground: var(--foreground);
-
-  --primary: var(--primary-8);
-  --primary-foreground: var(--primary-2);
-
-  --secondary: var(--secondary-8);
-  --secondary-foreground: var(--secondary-2);
-
-  --muted: var(--neutral-7);
-  --muted-foreground: var(--neutral-4);
-
-  --accent: var(--neutral-7);
-  --accent-foreground: var(--neutral-4);
-
-  --destructive: var(--destructive-8);
-  --destructive-foreground: var(--destructive-2);
-
-  --success: var(--success-8);
-  --succcess-foreground: var(--success-2);
-
-  --border: var(--neutral-3);
-  --input: var(--border);
-  --ring: var(--neutral-5);
-
-  --chart-1: var(--primary-5);
-  --chart-2: var(--primary-4);
-  --chart-3: var(--secondary-5);
-  --chart-4: var(--secondary-4);
-  --chart-5: var(--secondary-2);
-
-  --radius: 0.25rem;
-
-  --sidebar-background: var(--background);
-  --sidebar-foreground: var(--foreground);
-
-  --sidebar-primary: 240 5.9% 10%;
-  --sidebar-primary-foreground: 0 0% 98%;
-
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
-
-  --sidebar-border: 220 13% 91%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
-
-  /** Grid Tokens */
-  --grid-fluid-min: 16rem;
+@utility link {
+  @apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
 }
 
 @layer base {
@@ -68,42 +15,23 @@
     @apply link;
   }
 
-  h1 {
-    @apply text-heading-1;
-  }
-
-  h2 {
-    @apply text-heading-2;
-  }
-
-  h3 {
-    @apply text-heading-3;
-  }
-
-  h4 {
-    @apply text-heading-4;
-  }
-
-  h5 {
-    @apply text-heading-5;
+  body {
+    @apply bg-background/50 text-foreground;
   }
 
-  h6 {
-    @apply text-heading-6;
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
   }
 
-  p {
-    @apply text-body;
-  }  
-
-  body {
-    @apply bg-background text-foreground;
+  *::-webkit-scrollbar-track {
+    background: white;
+    border-radius: 2px;
   }
 
-}
+  *::-webkit-scrollbar-thumb {
+    background-color: gray;
 
-@layer components {
-  .link {
-    @apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
+    border: 3px solid gray;
   }
 }

package/lib/tailwind.preset.css

@@ -0,0 +1,220 @@
+/** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
+
+@plugin "tailwindcss-animate";
+
+@theme {
+    /* Radius */
+    --radius: 0.25rem;
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    /* Text Sizes */
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-md: 1.125rem;
+    --text-lg: 1.25rem;
+    --text-xl: 1.5rem;
+    --text-2xl: 1.75rem;
+    --text-3xl: 2rem;
+
+    /* Colors */
+    --color-*: initial;
+    --color-primary-1: var(--primary-1);
+    --color-primary-2: var(--primary-2);
+    --color-primary-3: var(--primary-3);
+    --color-primary-4: var(--primary-4);
+    --color-primary-5: var(--primary-5);
+    --color-primary-6: var(--primary-6);
+    --color-primary-7: var(--primary-7);
+    --color-primary-8: var(--primary-8);
+    --color-primary-9: var(--primary-9);
+    --color-primary-10: var(--primary-10);
+
+    --color-secondary-1: var(--secondary-1);
+    --color-secondary-2: var(--secondary-2);
+    --color-secondary-3: var(--secondary-3);
+    --color-secondary-4: var(--secondary-4);
+    --color-secondary-5: var(--secondary-5);
+    --color-secondary-6: var(--secondary-6);
+    --color-secondary-7: var(--secondary-7);
+    --color-secondary-8: var(--secondary-8);
+    --color-secondary-9: var(--secondary-9);
+    --color-secondary-10: var(--secondary-10);
+
+    --color-neutral-1: var(--neutral-1);
+    --color-neutral-2: var(--neutral-2);
+    --color-neutral-3: var(--neutral-3);
+    --color-neutral-4: var(--neutral-4);
+    --color-neutral-5: var(--neutral-5);
+    --color-neutral-6: var(--neutral-6);
+    --color-neutral-7: var(--neutral-7);
+    --color-neutral-8: var(--neutral-8);
+    --color-neutral-9: var(--neutral-9);
+    --color-neutral-10: var(--neutral-10);
+
+    --color-destructive-1: var(--destructive-1);
+    --color-destructive-2: var(--destructive-2);
+    --color-destructive-3: var(--destructive-3);
+    --color-destructive-4: var(--destructive-4);
+    --color-destructive-5: var(--destructive-5);
+    --color-destructive-6: var(--destructive-6);
+    --color-destructive-7: var(--destructive-7);
+    --color-destructive-8: var(--destructive-8);
+    --color-destructive-9: var(--destructive-9);
+    --color-destructive-10: var(--destructive-10);
+
+    --color-success-1: var(--success-1);
+    --color-success-2: var(--success-2);
+    --color-success-3: var(--success-3);
+    --color-success-4: var(--success-4);
+    --color-success-5: var(--success-5);
+    --color-success-6: var(--success-6);
+    --color-success-7: var(--success-7);
+    --color-success-8: var(--success-8);
+    --color-success-9: var(--success-9);
+    --color-success-10: var(--success-10);
+
+    --color-background: var(--color-neutral-2);
+    --color-foreground: var(--color-neutral-10);
+
+    --color-card: var(--color-neutral-2);
+    --color-card-foreground: var(--color-foreground);
+
+    --color-popover: var(--color-background);
+    --color-popover-foreground: var(--color-foreground);
+
+    --color-primary: var(--color-primary-8);
+    --color-primary-foreground: var(--color-primary-2);
+    --color-secondary: var(--color-secondary-8);
+    --color-secondary-foreground: var(--color-secondary-2);
+    --color-muted: var(--color-neutral-7);
+    --color-muted-foreground: var(--color-neutral-4);
+    --color-accent: var(--color-neutral-7);
+    --color-accent-foreground: var(--color-neutral-4);
+    --color-destructive: var(--color-destructive-8);
+    --color-destructive-foreground: var(--color-destructive-2);
+    --color-success: var(--color-success-8);
+    --color-success-foreground: var(--color-success-2);
+
+    --color-border: var(--color-neutral-3);
+    --color-input: var(--color-border);
+    --color-ring: var(--color-neutral-5);
+
+    --color-chart-1: var(--color-primary-5);
+    --color-chart-2: var(--color-primary-4);
+    --color-chart-3: var(--color-secondary-5);
+    --color-chart-4: var(--color-secondary-4);
+    --color-chart-5: var(--color-secondary-2);
+
+    --color-sidebar-background: var(--color-background);
+    --color-sidebar-foreground: var(--color-foreground);
+    /* // TODO */
+    --color-sidebar-primary: 240 5.9% 10%;
+    --color-sidebar-primary-foreground: 0 0% 98%;
+
+    --color-sidebar-accent: 240 4.8% 95.9%;
+    --color-sidebar-accent-foreground: 240 5.9% 10%;
+
+    --color-sidebar-border: var(--color-border);
+    --color-sidebar-ring: var(--color-ring);
+
+    /** TODO Grid Tokens */
+    /* --grid-fluid-min: 16rem;
+    gridTemplateColumns: {
+        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
+      }, */
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    --animate-collapsible-down: collapsible-down 0.2s ease-out;
+
+    @keyframes collapsible-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-collapsible-content-height);
+        }
+    }
+
+    --animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+    @keyframes collapsible-up {
+        from {
+            height: var(--radix-collapsible-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+@utility text-caption {
+    @apply text-sm;
+}
+
+
+@utility text-body {
+    @apply text-base;
+    /* lineHeight: '1.6', */
+}
+
+@utility text-heading-6 {
+    @apply text-base;
+    /* fontWeight: 700, */
+    /* lineHeight: '1.2', */
+
+}
+
+@utility text-heading-5 {
+    @apply text-md;
+    /* lineHeight: '1.2', */
+}
+
+@utility text-heading-4 {
+    @apply text-lg;
+    /* lineHeight: '1.2', */
+    /* fontWeight: 500, */
+}
+
+@utlility text-heading-3 {
+    @apply text-xl;
+}
+
+@utility text-heading-2 {
+    @apply text-2xl;
+    /* lineHeight: '1', */
+    /* fontWeight: 300, */
+}
+
+@utility text-heading-1 {
+    @apply text-3xl;
+    /* lineHeight: '1', */
+}
+
+@layer components {}