@snapcall/design-system 1.25.1 → 1.26.0

package/dist/{chunk-R6W6SKNR.mjs → chunk-7WNKULE2.mjs}

@@ -14,7 +14,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "cva";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
       primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",

package/dist/{chunk-YC4ZDBIC.mjs → chunk-VBMQG5SW.mjs}

@@ -36,33 +36,33 @@ var randomPickFromArray = ({
 import { jsx } from "react/jsx-runtime";
 var colors = {
   gray: "text-gray-900",
-  green: "text-green-700",
-  red: "text-red-700",
-  yellow: "text-amber-700",
-  blue: "text-blue-700",
-  crimson: "text-crimson-700",
-  violet: "text-violet-700",
-  cyan: "text-cyan-700",
-  teal: "text-teal-700",
-  brown: "text-brown-700",
-  orange: "text-orange-700"
+  green: "text-green-900",
+  red: "text-red-900",
+  amber: "text-amber-900",
+  blue: "text-blue-900",
+  crimson: "text-crimson-900",
+  violet: "text-violet-900",
+  cyan: "text-cyan-900",
+  teal: "text-teal-900",
+  brown: "text-brown-900",
+  orange: "text-orange-900"
 };
 var colorsArray = Object.keys(colors);
 var badgeVariants = cva({
-  base: "inline-flex items-center justify-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold transition-colors",
+  base: "inline-flex items-center justify-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold transition-colors",
   variants: {
     variant: {
       default: "",
-      outline: "ring-1",
+      outline: "border border-solid bg-transparent",
       fill: ""
     },
     color: colors
   },
   compoundVariants: [
-    { variant: "default", color: "gray", className: "bg-gray-50" },
+    { variant: "default", color: "gray", className: "bg-gray-100" },
     { variant: "default", color: "green", className: "bg-green-100" },
     { variant: "default", color: "red", className: "bg-red-100" },
-    { variant: "default", color: "yellow", className: "bg-amber-100" },
+    { variant: "default", color: "amber", className: "bg-amber-100" },
     { variant: "default", color: "blue", className: "bg-blue-100" },
     { variant: "default", color: "crimson", className: "bg-crimson-100" },
     { variant: "default", color: "violet", className: "bg-violet-100" },
@@ -73,88 +73,108 @@ var badgeVariants = cva({
     {
       variant: "outline",
       color: "gray",
-      className: "bg-transparent ring-gray-200"
+      className: "border-gray-200 text-black dark:bg-gray-25"
     },
     {
       variant: "outline",
       color: "green",
-      className: "bg-transparent ring-green-300"
+      className: "border-green-700 text-green-700 dark:bg-green-25"
     },
     {
       variant: "outline",
       color: "red",
-      className: "bg-transparent ring-red-300"
+      className: "border-red-700 text-red-700 dark:bg-red-25"
     },
     {
       variant: "outline",
-      color: "yellow",
-      className: "bg-transparent ring-amber-300"
+      color: "amber",
+      className: "border-amber-700 text-amber-700 dark:bg-amber-25"
     },
     {
       variant: "outline",
       color: "blue",
-      className: "bg-transparent ring-blue-300"
+      className: "border-blue-700 text-blue-700 dark:bg-blue-25"
     },
     {
       variant: "outline",
       color: "crimson",
-      className: "bg-transparent ring-crimson-300"
+      className: "border-crimson-700 text-crimson-700 dark:bg-crimson-25"
     },
     {
       variant: "outline",
       color: "violet",
-      className: "bg-transparent ring-violet-300"
+      className: "border-violet-700 text-violet-700 dark:bg-violet-25"
     },
     {
       variant: "outline",
       color: "cyan",
-      className: "bg-transparent ring-cyan-300"
+      className: "border-cyan-700 text-cyan-700 dark:bg-cyan-25"
     },
     {
       variant: "outline",
       color: "teal",
-      className: "bg-transparent ring-teal-300"
+      className: "border-teal-700 text-teal-700 dark:bg-teal-25"
     },
     {
       variant: "outline",
       color: "brown",
-      className: "bg-transparent ring-brown-300"
+      className: "border-brown-700 text-brown-700 dark:bg-brown-25"
     },
     {
       variant: "outline",
       color: "orange",
-      className: "bg-transparent ring-orange-300"
+      className: "border-orange-700 text-orange-700 dark:bg-orange-25"
     },
-    { variant: "fill", color: "gray", className: "text-white bg-gray-900" },
-    { variant: "fill", color: "green", className: "text-white bg-green-700" },
-    { variant: "fill", color: "red", className: "text-white bg-red-700" },
+    { variant: "fill", color: "gray", className: "bg-black text-white" },
     {
       variant: "fill",
-      color: "yellow",
-      className: "text-white bg-amber-700"
+      color: "green",
+      className: "bg-green-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "red",
+      className: "bg-red-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "amber",
+      className: "bg-amber-700 text-white dark:text-black"
     },
     {
       variant: "fill",
       color: "blue",
-      className: "text-white dark:text-black bg-blue-700"
+      className: "bg-blue-700 text-white dark:text-black"
     },
     {
       variant: "fill",
       color: "crimson",
-      className: "text-white bg-crimson-700"
+      className: "bg-crimson-700 text-white dark:text-black"
     },
     {
       variant: "fill",
       color: "violet",
-      className: "text-white bg-violet-700"
+      className: "bg-violet-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "cyan",
+      className: "bg-cyan-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "teal",
+      className: "bg-teal-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "brown",
+      className: "bg-brown-700 text-white dark:text-black"
     },
-    { variant: "fill", color: "cyan", className: "text-white bg-cyan-700" },
-    { variant: "fill", color: "teal", className: "text-white bg-teal-700" },
-    { variant: "fill", color: "brown", className: "text-white bg-brown-700" },
     {
       variant: "fill",
       color: "orange",
-      className: "text-white bg-orange-700"
+      className: "bg-orange-700 text-white dark:text-black"
     }
   ],
   defaultVariants: {

package/dist/{chunk-SSZ45TLL.mjs → chunk-VIB6AUT2.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-TU6HU32A.mjs";
 import {
   Button
-} from "./chunk-R6W6SKNR.mjs";
+} from "./chunk-7WNKULE2.mjs";
 import {
   SpinnerIcon
 } from "./chunk-N65I4EXR.mjs";
@@ -73,7 +73,7 @@ var Command = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-white",
+        "flex h-full w-full flex-col overflow-hidden rounded-lg bg-white",
         className
       )
     }, props)
@@ -100,7 +100,7 @@ var CommandInput = React.forwardRef((_a, ref) => {
             ref,
             value: val,
             className: cn(
-              "flex w-full py-2 rounded-md bg-transparent text-sm font-normal text-black outline-hidden placeholder:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",
+              "flex w-full py-2 rounded-lg bg-transparent text-sm font-normal text-black outline-hidden placeholder:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             onValueChange: (val2) => {
@@ -195,7 +195,7 @@ var CommandItem = React.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         className: cn(
-          "px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-md cursor-pointer focus-within:bg-gray-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 hover:bg-gray-50 active:bg-gray-100 data-[state=checked]:bg-gray-50 data-[selected=true]:bg-gray-50",
+          "px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-lg cursor-pointer focus-within:bg-gray-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 hover:bg-gray-50 active:bg-gray-100 data-[state=checked]:bg-gray-50 data-[selected=true]:bg-gray-50",
           className
         )
       }, props), {

package/dist/components/AlertDialog/index.js

@@ -129,7 +129,7 @@ var SpinnerIcon = (0, import_react.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
       primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
@@ -242,7 +242,7 @@ var AlertDialogOverlay = React2.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Overlay,
     __spreadProps(__spreadValues({
       className: cn(
-        "fixed inset-0 z-50 bg-black/25 backdrop-blur-xs 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 bg-black/25 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )
     }, props), {
@@ -260,7 +260,7 @@ var AlertDialogContent = React2.forwardRef((_a, ref) => {
       __spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 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 rounded-2xl md:w-full",
+          "fixed left-[50%] top-[50%] z-50 flex flex-col divide-y divide-gray-200 w-full max-w-[400px] max-h-[90vh] overflow-hidden translate-x-[-50%] translate-y-[-50%] border border-gray-200 bg-white shadow-sm duration-200 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 rounded-2xl md:w-full",
           className
         )
       }, props)
@@ -274,12 +274,7 @@ var AlertDialogHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    __spreadValues({
-      className: cn("flex flex-col space-y-5 text-left", className)
-    }, props)
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", __spreadValues({ className: cn("flex flex-col gap-1 p-4", className) }, props));
 };
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = (_a) => {
@@ -292,7 +287,7 @@ var AlertDialogFooter = (_a) => {
     "div",
     __spreadValues({
       className: cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        "flex items-center justify-end gap-2 p-4 bg-gray-25",
         className
       )
     }, props)
@@ -305,7 +300,7 @@ var AlertDialogTitle = React2.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Title,
     __spreadValues({
       ref,
-      className: cn("text-lg text-black font-semibold", className)
+      className: cn("text-base font-medium text-black", className)
     }, props)
   );
 });
@@ -316,7 +311,7 @@ var AlertDialogDescription = React2.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-gray-700", className)
+      className: cn("text-sm text-gray-900", className)
     }, props)
   );
 });
@@ -345,7 +340,6 @@ var AlertDialogCancel = React2.forwardRef((_a, ref) => {
       className: cn(
         buttonVariants({ variant: "outline" }),
         buttonSizes({ size: "md" }),
-        "mt-2 sm:mt-0",
         className
       )
     }, props)

package/dist/components/AlertDialog/index.mjs

@@ -1,7 +1,7 @@
 import {
   buttonSizes,
   buttonVariants
-} from "../../chunk-R6W6SKNR.mjs";
+} from "../../chunk-7WNKULE2.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
@@ -22,7 +22,7 @@ var AlertDialogOverlay = React.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Overlay,
     __spreadProps(__spreadValues({
       className: cn(
-        "fixed inset-0 z-50 bg-black/25 backdrop-blur-xs 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 bg-black/25 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )
     }, props), {
@@ -40,7 +40,7 @@ var AlertDialogContent = React.forwardRef((_a, ref) => {
       __spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 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 rounded-2xl md:w-full",
+          "fixed left-[50%] top-[50%] z-50 flex flex-col divide-y divide-gray-200 w-full max-w-[400px] max-h-[90vh] overflow-hidden translate-x-[-50%] translate-y-[-50%] border border-gray-200 bg-white shadow-sm duration-200 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 rounded-2xl md:w-full",
           className
         )
       }, props)
@@ -54,12 +54,7 @@ var AlertDialogHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      className: cn("flex flex-col space-y-5 text-left", className)
-    }, props)
-  );
+  return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-1 p-4", className) }, props));
 };
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = (_a) => {
@@ -72,7 +67,7 @@ var AlertDialogFooter = (_a) => {
     "div",
     __spreadValues({
       className: cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        "flex items-center justify-end gap-2 p-4 bg-gray-25",
         className
       )
     }, props)
@@ -85,7 +80,7 @@ var AlertDialogTitle = React.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Title,
     __spreadValues({
       ref,
-      className: cn("text-lg text-black font-semibold", className)
+      className: cn("text-base font-medium text-black", className)
     }, props)
   );
 });
@@ -96,7 +91,7 @@ var AlertDialogDescription = React.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-gray-700", className)
+      className: cn("text-sm text-gray-900", className)
     }, props)
   );
 });
@@ -125,7 +120,6 @@ var AlertDialogCancel = React.forwardRef((_a, ref) => {
       className: cn(
         buttonVariants({ variant: "outline" }),
         buttonSizes({ size: "md" }),
-        "mt-2 sm:mt-0",
         className
       )
     }, props)

package/dist/components/Badge/index.d.mts

@@ -4,7 +4,7 @@ import { VariantProps } from 'cva';
 
 declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "fill" | undefined;
-    color?: "gray" | "green" | "red" | "yellow" | "blue" | "crimson" | "violet" | "cyan" | "teal" | "brown" | "orange" | undefined;
+    color?: "gray" | "green" | "red" | "amber" | "blue" | "crimson" | "violet" | "cyan" | "teal" | "brown" | "orange" | undefined;
 } & ({
     class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;

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

@@ -4,7 +4,7 @@ import { VariantProps } from 'cva';
 
 declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "fill" | undefined;
-    color?: "gray" | "green" | "red" | "yellow" | "blue" | "crimson" | "violet" | "cyan" | "teal" | "brown" | "orange" | undefined;
+    color?: "gray" | "green" | "red" | "amber" | "blue" | "crimson" | "violet" | "cyan" | "teal" | "brown" | "orange" | undefined;
 } & ({
     class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;

package/dist/components/Badge/index.js

@@ -99,33 +99,33 @@ var randomPickFromArray = ({
 var import_jsx_runtime = require("react/jsx-runtime");
 var colors = {
   gray: "text-gray-900",
-  green: "text-green-700",
-  red: "text-red-700",
-  yellow: "text-amber-700",
-  blue: "text-blue-700",
-  crimson: "text-crimson-700",
-  violet: "text-violet-700",
-  cyan: "text-cyan-700",
-  teal: "text-teal-700",
-  brown: "text-brown-700",
-  orange: "text-orange-700"
+  green: "text-green-900",
+  red: "text-red-900",
+  amber: "text-amber-900",
+  blue: "text-blue-900",
+  crimson: "text-crimson-900",
+  violet: "text-violet-900",
+  cyan: "text-cyan-900",
+  teal: "text-teal-900",
+  brown: "text-brown-900",
+  orange: "text-orange-900"
 };
 var colorsArray = Object.keys(colors);
 var badgeVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold transition-colors",
+  base: "inline-flex items-center justify-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold transition-colors",
   variants: {
     variant: {
       default: "",
-      outline: "ring-1",
+      outline: "border border-solid bg-transparent",
       fill: ""
     },
     color: colors
   },
   compoundVariants: [
-    { variant: "default", color: "gray", className: "bg-gray-50" },
+    { variant: "default", color: "gray", className: "bg-gray-100" },
     { variant: "default", color: "green", className: "bg-green-100" },
     { variant: "default", color: "red", className: "bg-red-100" },
-    { variant: "default", color: "yellow", className: "bg-amber-100" },
+    { variant: "default", color: "amber", className: "bg-amber-100" },
     { variant: "default", color: "blue", className: "bg-blue-100" },
     { variant: "default", color: "crimson", className: "bg-crimson-100" },
     { variant: "default", color: "violet", className: "bg-violet-100" },
@@ -136,88 +136,108 @@ var badgeVariants = (0, import_cva.cva)({
     {
       variant: "outline",
       color: "gray",
-      className: "bg-transparent ring-gray-200"
+      className: "border-gray-200 text-black dark:bg-gray-25"
     },
     {
       variant: "outline",
       color: "green",
-      className: "bg-transparent ring-green-300"
+      className: "border-green-700 text-green-700 dark:bg-green-25"
     },
     {
       variant: "outline",
       color: "red",
-      className: "bg-transparent ring-red-300"
+      className: "border-red-700 text-red-700 dark:bg-red-25"
     },
     {
       variant: "outline",
-      color: "yellow",
-      className: "bg-transparent ring-amber-300"
+      color: "amber",
+      className: "border-amber-700 text-amber-700 dark:bg-amber-25"
     },
     {
       variant: "outline",
       color: "blue",
-      className: "bg-transparent ring-blue-300"
+      className: "border-blue-700 text-blue-700 dark:bg-blue-25"
     },
     {
       variant: "outline",
       color: "crimson",
-      className: "bg-transparent ring-crimson-300"
+      className: "border-crimson-700 text-crimson-700 dark:bg-crimson-25"
     },
     {
       variant: "outline",
       color: "violet",
-      className: "bg-transparent ring-violet-300"
+      className: "border-violet-700 text-violet-700 dark:bg-violet-25"
     },
     {
       variant: "outline",
       color: "cyan",
-      className: "bg-transparent ring-cyan-300"
+      className: "border-cyan-700 text-cyan-700 dark:bg-cyan-25"
     },
     {
       variant: "outline",
       color: "teal",
-      className: "bg-transparent ring-teal-300"
+      className: "border-teal-700 text-teal-700 dark:bg-teal-25"
     },
     {
       variant: "outline",
       color: "brown",
-      className: "bg-transparent ring-brown-300"
+      className: "border-brown-700 text-brown-700 dark:bg-brown-25"
     },
     {
       variant: "outline",
       color: "orange",
-      className: "bg-transparent ring-orange-300"
+      className: "border-orange-700 text-orange-700 dark:bg-orange-25"
     },
-    { variant: "fill", color: "gray", className: "text-white bg-gray-900" },
-    { variant: "fill", color: "green", className: "text-white bg-green-700" },
-    { variant: "fill", color: "red", className: "text-white bg-red-700" },
+    { variant: "fill", color: "gray", className: "bg-black text-white" },
     {
       variant: "fill",
-      color: "yellow",
-      className: "text-white bg-amber-700"
+      color: "green",
+      className: "bg-green-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "red",
+      className: "bg-red-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "amber",
+      className: "bg-amber-700 text-white dark:text-black"
     },
     {
       variant: "fill",
       color: "blue",
-      className: "text-white dark:text-black bg-blue-700"
+      className: "bg-blue-700 text-white dark:text-black"
     },
     {
       variant: "fill",
       color: "crimson",
-      className: "text-white bg-crimson-700"
+      className: "bg-crimson-700 text-white dark:text-black"
     },
     {
       variant: "fill",
       color: "violet",
-      className: "text-white bg-violet-700"
+      className: "bg-violet-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "cyan",
+      className: "bg-cyan-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "teal",
+      className: "bg-teal-700 text-white dark:text-black"
+    },
+    {
+      variant: "fill",
+      color: "brown",
+      className: "bg-brown-700 text-white dark:text-black"
     },
-    { variant: "fill", color: "cyan", className: "text-white bg-cyan-700" },
-    { variant: "fill", color: "teal", className: "text-white bg-teal-700" },
-    { variant: "fill", color: "brown", className: "text-white bg-brown-700" },
     {
       variant: "fill",
       color: "orange",
-      className: "text-white bg-orange-700"
+      className: "bg-orange-700 text-white dark:text-black"
     }
   ],
   defaultVariants: {

package/dist/components/Badge/index.mjs

@@ -1,6 +1,6 @@
 import {
   Badge
-} from "../../chunk-YC4ZDBIC.mjs";
+} from "../../chunk-VBMQG5SW.mjs";
 import "../../chunk-BOWIL6WZ.mjs";
 export {
   Badge

package/dist/components/Button/index.js

@@ -120,7 +120,7 @@ function cn(...inputs) {
 // src/components/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
       primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",

package/dist/components/Button/index.mjs

@@ -3,7 +3,7 @@ import {
   buttonSizes,
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-R6W6SKNR.mjs";
+} from "../../chunk-7WNKULE2.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import "../../chunk-BOWIL6WZ.mjs";
 export {

package/dist/components/Calendar/index.js

@@ -184,7 +184,7 @@ var SpinnerIcon = (0, import_react3.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
       primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",

package/dist/components/Calendar/index.mjs

@@ -7,7 +7,7 @@ import {
 import {
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-R6W6SKNR.mjs";
+} from "../../chunk-7WNKULE2.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,

package/dist/components/Carousel/index.js

@@ -253,7 +253,7 @@ var SpinnerIcon = (0, import_react5.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
       primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",

package/dist/components/Carousel/index.mjs

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../../chunk-R6W6SKNR.mjs";
+} from "../../chunk-7WNKULE2.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,