@szum-tech/design-system 2.1.1 → 2.2.0

package/dist/{chunk-J56UDYA3.js → chunk-IV5F734M.js}

@@ -1,15 +1,15 @@
+import { cn } from './chunk-ZD2QRAOX.js';
 import { Dialog as Dialog$1 } from 'radix-ui';
 import { twMerge } from 'tailwind-merge';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/dialog/dialog.tsx
 var Dialog = Dialog$1.Root;
 var DialogClose = Dialog$1.Close;
 var dialogContentStyles = cva(
   [
-    "bg-foreground fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg",
+    "bg-app-foreground fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-800 p-4 shadow-lg",
     "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] duration-200"
   ],
   {
@@ -33,39 +33,36 @@ var dialogContentStyles = cva(
     }
   }
 );
-function DialogOverlay(props) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Overlay,
-    {
-      className: "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
-      ...props
-    }
-  );
-}
 function DialogContent({ className, children, width = "md", ...props }) {
   return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(Dialog$1.Content, { className: twMerge(dialogContentStyles({ width }), className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      Dialog$1.Overlay,
+      {
+        className: "bg-app-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxs(Dialog$1.Content, { "aria-modal": "true", className: twMerge(dialogContentStyles({ width }), className), ...props, children: [
       children,
-      /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
+      /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-app-foreground data-[state=open]:bg-app-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
         /* @__PURE__ */ jsx(Cross1Icon, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close dialog" })
       ] })
     ] })
   ] });
 }
 var DialogTrigger = Dialog$1.Trigger;
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: twMerge("text-heading-6", className), ...props });
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: cn("text-heading-6", className), ...props });
 }
 function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: twMerge("text-body-2 text-gray-200", className), ...props });
+  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: cn("text-body-2 text-gray-300", className), ...props });
 }
 
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/{chunk-YXTTED5V.cjs → chunk-P4J2TTH7.cjs}

@@ -8,7 +8,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var helperTextCva = classVarianceAuthority.cva("", {
   variants: {
     type: {
-      description: "text-body-2 text-gray-200",
+      description: "text-body-2 text-gray-300",
       error: "text-caption text-error-500"
     }
   },

package/dist/{chunk-RF5YR553.cjs → chunk-Q2IKZZ3U.cjs}

@@ -12,7 +12,7 @@ function Separator({ className, orientation = "horizontal", decorative = false,
       orientation,
       "aria-orientation": orientation,
       className: chunkH2BWO3SI_cjs.cn(
-        "shrink-0 bg-gray-400",
+        "shrink-0 bg-gray-800",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       ),

package/dist/{chunk-QRSQCHBO.cjs → chunk-QQ7CBNSR.cjs}

@@ -1,23 +1,23 @@
 'use strict';
 
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
 var radixUi = require('radix-ui');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/select/select.tsx
 var selectCva = classVarianceAuthority.cva(
   [
-    "bg-app-foreground text-body-2 inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border px-3 py-2 text-gray-100 outline-0 transition-colors duration-300 ease-in-out",
-    "placeholder:select-none placeholder:text-gray-200",
-    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
-    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
+    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border pl-3 pr-1.5 py-2 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
+    "data-[placeholder]:select-none data-[placeholder]:text-gray-400",
+    "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
+    "disabled:border-gray-800 disabled:text-gray-300 disabled:[&>svg]:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
   ],
   {
     variants: {
       invalid: {
         true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
+        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
       }
     },
     defaultVariants: {
@@ -28,25 +28,28 @@ var selectCva = classVarianceAuthority.cva(
 function Select({ children, placeholder, invalid = false, ref, ...props }) {
   const selectStyles = selectCva({ invalid });
   return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Root, { ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Trigger, { className: selectStyles, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Trigger, { className: selectStyles, ref, "aria-invalid": invalid || void 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Value, { placeholder }),
-      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CaretSortIcon, { className: "size-5 text-gray-200" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CaretSortIcon, { className: "size-5 text-gray-100" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       radixUi.Select.Content,
       {
         sideOffset: 4,
-        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-400 py-1",
+        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-800 py-1",
         children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Viewport, { children })
       }
     ) })
   ] });
 }
-function SelectItem({ children, ...props }) {
+function SelectItem({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     radixUi.Select.Item,
     {
-      className: "text-body-2 data-[state=checked]:bg-primary-300 flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-400 data-[highlighted]:outline-none",
+      className: chunkH2BWO3SI_cjs.cn(
+        "text-body-2 data-[state=checked]:bg-primary-500 data-[state=checked]:text-app-foreground flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-900 data-[highlighted]:outline-none data-[state=checked]:outline-none",
+        className
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemText, { className: "flex-1", children }),

package/dist/{chunk-J264N6AZ.js → chunk-RXYZURP4.js}

@@ -10,7 +10,7 @@ function Separator({ className, orientation = "horizontal", decorative = false,
       orientation,
       "aria-orientation": orientation,
       className: cn(
-        "shrink-0 bg-gray-400",
+        "shrink-0 bg-gray-800",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       ),

package/dist/{chunk-V4POHGAW.cjs → chunk-TMXVL5CV.cjs}

@@ -7,26 +7,14 @@ var tailwindMerge = require('tailwind-merge');
 
 var AlertDialog = radixUi.AlertDialog.Root;
 var AlertDialogTrigger = radixUi.AlertDialog.Trigger;
-function AlertDialogOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.AlertDialog.Overlay,
-    {
-      className: chunkH2BWO3SI_cjs.cn(
-        "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
-        className
-      ),
-      ...props
-    }
-  );
-}
 function AlertDialogContent({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Overlay, { className: "bg-app-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       radixUi.AlertDialog.Content,
       {
         className: chunkH2BWO3SI_cjs.cn(
-          "bg-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 flex w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg duration-200",
+          "bg-app-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 flex w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-800 p-4 shadow-lg duration-200",
           className
         ),
         ...props
@@ -34,9 +22,7 @@ function AlertDialogContent({ className, ...props }) {
     )
   ] });
 }
-function AlertDialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("mb-4 flex flex-col space-y-2 text-center sm:text-left", className), ...props });
-}
+var AlertDialogAction = radixUi.AlertDialog.Action;
 function AlertDialogFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
 }
@@ -44,10 +30,12 @@ function AlertDialogTitle({ className, ref, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Title, { ref, className: chunkH2BWO3SI_cjs.cn("text-heading-6", className), ...props });
 }
 function AlertDialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Description, { className: chunkH2BWO3SI_cjs.cn("text-body-2 text-gray-200", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Description, { className: chunkH2BWO3SI_cjs.cn("text-body-2 text-gray-300", className), ...props });
 }
-var AlertDialogAction = radixUi.AlertDialog.Action;
 var AlertDialogCancel = radixUi.AlertDialog.Cancel;
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("mb-4 flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+}
 
 exports.AlertDialog = AlertDialog;
 exports.AlertDialogAction = AlertDialogAction;

package/dist/{chunk-YHU2OW52.js → chunk-UW6GOD7J.js}

@@ -5,7 +5,7 @@ function Header({ children, ...props }) {
   return /* @__PURE__ */ jsx(
     "header",
     {
-      className: "bg-foreground/95 supports-[backdrop-filter]:bg-foreground/60 sticky top-0 z-50 w-full border-b border-gray-400 backdrop-blur",
+      className: "bg-app-foreground/95 supports-[backdrop-filter]:bg-app-foreground/60 sticky top-0 z-50 w-full border-b border-gray-800 backdrop-blur",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "container flex h-16 items-center", children })
     }

package/dist/{chunk-XPM62WMM.js → chunk-V5OVQTDR.js}

@@ -1,24 +1,24 @@
+import { cn } from './chunk-ZD2QRAOX.js';
 import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
-// src/components/card/card.tsx
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("bg-app-foreground h-full rounded border border-gray-400", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: twMerge("bg-app-foreground h-full rounded border border-gray-800", className), ...props });
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col p-6", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col p-6", className), ...props });
 }
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx("h3", { className: twMerge("text-heading-5", className), ...props });
 }
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { className: twMerge("text-body-2 text-gray-200", className), ...props });
+  return /* @__PURE__ */ jsx("p", { className: cn("text-body-2 text-gray-300", className), ...props });
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("p-6 pt-0", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ...props });
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center p-6 pt-0", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
 }
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/{chunk-US32J7DK.js → chunk-VZKTT6CG.js}

@@ -1,13 +1,12 @@
+import { cn } from './chunk-ZD2QRAOX.js';
 import { Label as Label$1 } from 'radix-ui';
-import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
-// src/components/label/label.tsx
 function Label({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Label$1.Root,
     {
-      className: twMerge("text-subtitle-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className),
+      className: cn("text-subtitle-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className),
       ...props
     }
   );

package/dist/{chunk-HIWVHD4V.js → chunk-WIOOP3VE.js}

@@ -1,21 +1,21 @@
+import { cn } from './chunk-ZD2QRAOX.js';
 import { Select as Select$1 } from 'radix-ui';
 import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/select/select.tsx
 var selectCva = cva(
   [
-    "bg-app-foreground text-body-2 inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border px-3 py-2 text-gray-100 outline-0 transition-colors duration-300 ease-in-out",
-    "placeholder:select-none placeholder:text-gray-200",
-    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
-    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
+    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border pl-3 pr-1.5 py-2 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
+    "data-[placeholder]:select-none data-[placeholder]:text-gray-400",
+    "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
+    "disabled:border-gray-800 disabled:text-gray-300 disabled:[&>svg]:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
   ],
   {
     variants: {
       invalid: {
         true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
+        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
       }
     },
     defaultVariants: {
@@ -26,25 +26,28 @@ var selectCva = cva(
 function Select({ children, placeholder, invalid = false, ref, ...props }) {
   const selectStyles = selectCva({ invalid });
   return /* @__PURE__ */ jsxs(Select$1.Root, { ...props, children: [
-    /* @__PURE__ */ jsxs(Select$1.Trigger, { className: selectStyles, ref, children: [
+    /* @__PURE__ */ jsxs(Select$1.Trigger, { className: selectStyles, ref, "aria-invalid": invalid || void 0, children: [
       /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
-      /* @__PURE__ */ jsx(Select$1.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "size-5 text-gray-200" }) })
+      /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "size-5 text-gray-100" }) })
     ] }),
     /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
       Select$1.Content,
       {
         sideOffset: 4,
-        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-400 py-1",
+        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-800 py-1",
         children: /* @__PURE__ */ jsx(Select$1.Viewport, { children })
       }
     ) })
   ] });
 }
-function SelectItem({ children, ...props }) {
+function SelectItem({ children, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     Select$1.Item,
     {
-      className: "text-body-2 data-[state=checked]:bg-primary-300 flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-400 data-[highlighted]:outline-none",
+      className: cn(
+        "text-body-2 data-[state=checked]:bg-primary-500 data-[state=checked]:text-app-foreground flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-900 data-[highlighted]:outline-none data-[state=checked]:outline-none",
+        className
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex-1", children }),

package/dist/{chunk-C5YRMEKV.js → chunk-XDTI4DFM.js}

@@ -40,8 +40,8 @@ var buttonCva = cva(
         color: "neutral",
         class: [
           "text-gray-100",
-          "hover:border-gray-350 hover:bg-gray-350 hover:text-gray-100",
-          "active:border-gray-400 active:bg-gray-400"
+          "hover:border-gray-500 hover:bg-gray-500 hover:text-app-foreground",
+          "active:border-gray-600 active:bg-gray-600"
         ]
       },
       {
@@ -84,7 +84,7 @@ var buttonCva = cva(
       {
         variant: "outlined",
         color: "neutral",
-        class: ["border-gray-350 text-gray-100", "hover:bg-gray-350", "active:bg-gray-400"]
+        class: ["border-gray-500 text-gray-100", "hover:bg-gray-500 hover:text-app-foreground", "active:bg-gray-600"]
       },
       {
         variant: "outlined",
@@ -127,9 +127,9 @@ var buttonCva = cva(
         variant: "contained",
         color: "neutral",
         class: [
-          "border-gray-350 bg-gray-350 text-gray-100",
-          "hover:border-gray-300 hover:bg-gray-300",
-          "active:border-gray-400 active:bg-gray-400"
+          "border-gray-500 bg-gray-500 text-gray-100",
+          "hover:border-gray-400 hover:bg-gray-400 hover:text-app-foreground",
+          "active:border-gray-600 active:bg-gray-600"
         ]
       },
       {

package/dist/{chunk-VFRIU5CV.cjs → chunk-YWG7TML6.cjs}

@@ -7,7 +7,7 @@ function Header({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
-      className: "bg-foreground/95 supports-[backdrop-filter]:bg-foreground/60 sticky top-0 z-50 w-full border-b border-gray-400 backdrop-blur",
+      className: "bg-app-foreground/95 supports-[backdrop-filter]:bg-app-foreground/60 sticky top-0 z-50 w-full border-b border-gray-800 backdrop-blur",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container flex h-16 items-center", children })
     }

package/dist/components/alert-dialog/index.cjs

@@ -1,43 +1,43 @@
 'use strict';
 
-var chunkV4POHGAW_cjs = require('../../chunk-V4POHGAW.cjs');
+var chunkTMXVL5CV_cjs = require('../../chunk-TMXVL5CV.cjs');
 require('../../chunk-H2BWO3SI.cjs');
 
 
 
 Object.defineProperty(exports, "AlertDialog", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialog; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialog; }
 });
 Object.defineProperty(exports, "AlertDialogAction", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogAction; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogAction; }
 });
 Object.defineProperty(exports, "AlertDialogCancel", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogCancel; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogCancel; }
 });
 Object.defineProperty(exports, "AlertDialogContent", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogContent; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogContent; }
 });
 Object.defineProperty(exports, "AlertDialogDescription", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogDescription; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogDescription; }
 });
 Object.defineProperty(exports, "AlertDialogFooter", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogFooter; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogFooter; }
 });
 Object.defineProperty(exports, "AlertDialogHeader", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogHeader; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogHeader; }
 });
 Object.defineProperty(exports, "AlertDialogTitle", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogTitle; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogTitle; }
 });
 Object.defineProperty(exports, "AlertDialogTrigger", {
   enumerable: true,
-  get: function () { return chunkV4POHGAW_cjs.AlertDialogTrigger; }
+  get: function () { return chunkTMXVL5CV_cjs.AlertDialogTrigger; }
 });

package/dist/components/alert-dialog/index.d.cts

@@ -11,8 +11,8 @@ declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialog$1.
 type AlertDialogContentProps = React.ComponentProps<typeof AlertDialog$1.Content>;
 declare function AlertDialogContent({ className, ...props }: AlertDialogContentProps): react_jsx_runtime.JSX.Element;
 
-type AlertDialogHeaderProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): react_jsx_runtime.JSX.Element;
+type AlertDialogActionProps = AlertDialog$1.AlertDialogActionProps;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
 
 type AlertDialogFooterProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): react_jsx_runtime.JSX.Element;
@@ -23,10 +23,10 @@ declare function AlertDialogTitle({ className, ref, ...props }: AlertDialogTitle
 type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialog$1.Description>;
 declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): react_jsx_runtime.JSX.Element;
 
-type AlertDialogActionProps = AlertDialog$1.AlertDialogActionProps;
-declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
-
 type AlertDialogCancelProps = AlertDialog$1.AlertDialogCancelProps;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
 
+type AlertDialogHeaderProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): react_jsx_runtime.JSX.Element;
+
 export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/alert-dialog/index.d.ts

@@ -11,8 +11,8 @@ declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialog$1.
 type AlertDialogContentProps = React.ComponentProps<typeof AlertDialog$1.Content>;
 declare function AlertDialogContent({ className, ...props }: AlertDialogContentProps): react_jsx_runtime.JSX.Element;
 
-type AlertDialogHeaderProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): react_jsx_runtime.JSX.Element;
+type AlertDialogActionProps = AlertDialog$1.AlertDialogActionProps;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
 
 type AlertDialogFooterProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): react_jsx_runtime.JSX.Element;
@@ -23,10 +23,10 @@ declare function AlertDialogTitle({ className, ref, ...props }: AlertDialogTitle
 type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialog$1.Description>;
 declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): react_jsx_runtime.JSX.Element;
 
-type AlertDialogActionProps = AlertDialog$1.AlertDialogActionProps;
-declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
-
 type AlertDialogCancelProps = AlertDialog$1.AlertDialogCancelProps;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
 
+type AlertDialogHeaderProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): react_jsx_runtime.JSX.Element;
+
 export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/alert-dialog/index.js

@@ -1,2 +1,2 @@
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../../chunk-5EN2HNFU.js';
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../../chunk-5MJPZUTO.js';
 import '../../chunk-ZD2QRAOX.js';

package/dist/components/avatar/index.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
-var chunkKPB3CBHE_cjs = require('../../chunk-KPB3CBHE.cjs');
+var chunk4NO6IM75_cjs = require('../../chunk-4NO6IM75.cjs');
 require('../../chunk-H2BWO3SI.cjs');
 
 
 
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,
-  get: function () { return chunkKPB3CBHE_cjs.Avatar; }
+  get: function () { return chunk4NO6IM75_cjs.Avatar; }
 });
 Object.defineProperty(exports, "AvatarFallback", {
   enumerable: true,
-  get: function () { return chunkKPB3CBHE_cjs.AvatarFallback; }
+  get: function () { return chunk4NO6IM75_cjs.AvatarFallback; }
 });
 Object.defineProperty(exports, "AvatarImage", {
   enumerable: true,
-  get: function () { return chunkKPB3CBHE_cjs.AvatarImage; }
+  get: function () { return chunk4NO6IM75_cjs.AvatarImage; }
 });

package/dist/components/avatar/index.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Avatar as Avatar$1 } from 'radix-ui';
 import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type AvatarProps = Avatar$1.AvatarProps & React.RefAttributes<HTMLSpanElement> & {
     /**
@@ -14,7 +14,7 @@ declare function Avatar({ className, size, ref, ...props }: AvatarProps): react_
 
 declare const avatarCva: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type AvatarCvaProps = VariantProps<typeof avatarCva>;
 type AvatarSizeType = NonNullable<AvatarCvaProps["size"]>;

package/dist/components/avatar/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Avatar as Avatar$1 } from 'radix-ui';
 import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type AvatarProps = Avatar$1.AvatarProps & React.RefAttributes<HTMLSpanElement> & {
     /**
@@ -14,7 +14,7 @@ declare function Avatar({ className, size, ref, ...props }: AvatarProps): react_
 
 declare const avatarCva: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type AvatarCvaProps = VariantProps<typeof avatarCva>;
 type AvatarSizeType = NonNullable<AvatarCvaProps["size"]>;

package/dist/components/avatar/index.js

@@ -1,2 +1,2 @@
-export { Avatar, AvatarFallback, AvatarImage } from '../../chunk-HFHADY43.js';
+export { Avatar, AvatarFallback, AvatarImage } from '../../chunk-EU7G37IS.js';
 import '../../chunk-ZD2QRAOX.js';

package/dist/components/button/index.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk5ENMEB5L_cjs = require('../../chunk-5ENMEB5L.cjs');
+var chunk25X5IOB3_cjs = require('../../chunk-25X5IOB3.cjs');
 require('../../chunk-TSN5DAKH.cjs');
 
 
 
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunk5ENMEB5L_cjs.Button; }
+  get: function () { return chunk25X5IOB3_cjs.Button; }
 });

package/dist/components/button/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type Props = {
     /**
@@ -54,7 +54,7 @@ declare const buttonCva: (props?: ({
     color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     variant?: "text" | "outlined" | "contained" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type ButtonCvaProps = VariantProps<typeof buttonCva>;
 type ButtonSizeType = NonNullable<ButtonCvaProps["size"]>;

package/dist/components/button/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type Props = {
     /**
@@ -54,7 +54,7 @@ declare const buttonCva: (props?: ({
     color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     variant?: "text" | "outlined" | "contained" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type ButtonCvaProps = VariantProps<typeof buttonCva>;
 type ButtonSizeType = NonNullable<ButtonCvaProps["size"]>;