@snapcall/design-system 1.21.2 → 1.22.0-beta.1

package/dist/components/MediaCard/index.js

@@ -396,6 +396,7 @@ var MediaCard = (_a) => {
     actionBehavior = "default",
     isLoading,
     size,
+    author,
     className
   } = _b, otherProps = __objRest(_b, [
     "title",
@@ -407,18 +408,15 @@ var MediaCard = (_a) => {
     "actionBehavior",
     "isLoading",
     "size",
+    "author",
     "className"
   ]);
   const thumbnail = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
-    __spreadProps(__spreadValues({}, otherProps), {
-      className: cn(
-        "flex-1 min-h-0 bg-gray-50 relative",
-        {
-          "aspect-square rounded-md": size === "medium" || size === "small"
-        },
-        className
-      ),
+    {
+      className: cn("flex-1 min-h-0 bg-gray-50 relative", {
+        "aspect-square rounded-md": size === "medium" || size === "small"
+      }),
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
@@ -428,8 +426,15 @@ var MediaCard = (_a) => {
               size === "large" ? "p-2" : "p-1"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full h-full flex justify-center items-center", children: [
-              duration && size === "large" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
-              size !== "small" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Avatar, { size: size === "large" ? "sm" : "xs", name: "Avatar" }) }),
+              duration !== void 0 && size === "large" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
+              size !== "small" && author && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                Avatar,
+                {
+                  size: size === "large" ? "sm" : "xs",
+                  name: author.name,
+                  image: author.image
+                }
+              ) }),
               type === "video" && image && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 PlayIcon,
                 {
@@ -445,20 +450,21 @@ var MediaCard = (_a) => {
           size: size === "large" ? 24 : size === "medium" ? 18 : 16
         })
       ] })
-    })
+    }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
-    {
+    __spreadProps(__spreadValues({}, otherProps), {
       className: cn(
-        "flex flex-col bg-white border border-gray-200 divide-y divide-gray-200 rounded-lg shadow-sm group/mediacard",
+        "flex flex-col bg-white border border-gray-200 divide-y divide-gray-200 rounded-lg shadow-xs group/mediacard",
         "hover:bg-gray-25 active:bg-gray-50 overflow-hidden",
         {
           "opacity-40": isLoading,
           "w-[232px] h-[184px]": size === "large",
           "w-[240px] h-[72px]": size === "medium",
           "w-[240px] h-[52px]": size === "small"
-        }
+        },
+        className
       ),
       children: [
         size === "large" && thumbnail,
@@ -490,7 +496,7 @@ var MediaCard = (_a) => {
           }
         )
       ]
-    }
+    })
   );
 };
 MediaCard.displayName = "MediaCard";

package/dist/components/MediaCard/index.mjs

@@ -221,6 +221,7 @@ var MediaCard = (_a) => {
     actionBehavior = "default",
     isLoading,
     size,
+    author,
     className
   } = _b, otherProps = __objRest(_b, [
     "title",
@@ -232,18 +233,15 @@ var MediaCard = (_a) => {
     "actionBehavior",
     "isLoading",
     "size",
+    "author",
     "className"
   ]);
   const thumbnail = /* @__PURE__ */ jsx5(
     "div",
-    __spreadProps(__spreadValues({}, otherProps), {
-      className: cn(
-        "flex-1 min-h-0 bg-gray-50 relative",
-        {
-          "aspect-square rounded-md": size === "medium" || size === "small"
-        },
-        className
-      ),
+    {
+      className: cn("flex-1 min-h-0 bg-gray-50 relative", {
+        "aspect-square rounded-md": size === "medium" || size === "small"
+      }),
       children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
         /* @__PURE__ */ jsx5(
           "div",
@@ -253,8 +251,15 @@ var MediaCard = (_a) => {
               size === "large" ? "p-2" : "p-1"
             ),
             children: /* @__PURE__ */ jsxs4("div", { className: "relative w-full h-full flex justify-center items-center", children: [
-              duration && size === "large" && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ jsx5("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
-              size !== "small" && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ jsx5(Avatar, { size: size === "large" ? "sm" : "xs", name: "Avatar" }) }),
+              duration !== void 0 && size === "large" && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ jsx5("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
+              size !== "small" && author && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ jsx5(
+                Avatar,
+                {
+                  size: size === "large" ? "sm" : "xs",
+                  name: author.name,
+                  image: author.image
+                }
+              ) }),
               type === "video" && image && /* @__PURE__ */ jsx5(
                 PlayIcon,
                 {
@@ -270,20 +275,21 @@ var MediaCard = (_a) => {
           size: size === "large" ? 24 : size === "medium" ? 18 : 16
         })
       ] })
-    })
+    }
   );
   return /* @__PURE__ */ jsxs4(
     "div",
-    {
+    __spreadProps(__spreadValues({}, otherProps), {
       className: cn(
-        "flex flex-col bg-white border border-gray-200 divide-y divide-gray-200 rounded-lg shadow-sm group/mediacard",
+        "flex flex-col bg-white border border-gray-200 divide-y divide-gray-200 rounded-lg shadow-xs group/mediacard",
         "hover:bg-gray-25 active:bg-gray-50 overflow-hidden",
         {
           "opacity-40": isLoading,
           "w-[232px] h-[184px]": size === "large",
           "w-[240px] h-[72px]": size === "medium",
           "w-[240px] h-[52px]": size === "small"
-        }
+        },
+        className
       ),
       children: [
         size === "large" && thumbnail,
@@ -315,7 +321,7 @@ var MediaCard = (_a) => {
           }
         )
       ]
-    }
+    })
   );
 };
 MediaCard.displayName = "MediaCard";

package/dist/components/Pagination/index.js

@@ -246,15 +246,15 @@ 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-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  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",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      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",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",

package/dist/components/Pagination/index.mjs

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

package/dist/components/Popover/index.js

@@ -86,7 +86,7 @@ var PopoverContent = React.forwardRef((_a, ref) => {
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 rounded-md border bg-white p-4 text-black shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border border-gray-200 bg-white p-4 text-black shadow-md outline-hidden 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",
         className
       )
     }, props)

package/dist/components/Popover/index.mjs

@@ -19,7 +19,7 @@ var PopoverContent = React.forwardRef((_a, ref) => {
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 rounded-md border bg-white p-4 text-black shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border border-gray-200 bg-white p-4 text-black shadow-md outline-hidden 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",
         className
       )
     }, props)

package/dist/components/RadioGroup/index.js

@@ -96,7 +96,7 @@ var RadioGroupItem = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "aspect-square h-4 w-4 bg-gray-50 rounded-full border border-gray-200 data-[state=checked]:border-blue-700 ring-blue-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 bg-gray-50 rounded-full border border-gray-200 data-[state=checked]:border-blue-700 ring-blue-300 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )
     }, props), {

package/dist/components/RadioGroup/index.mjs

@@ -28,7 +28,7 @@ var RadioGroupItem = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "aspect-square h-4 w-4 bg-gray-50 rounded-full border border-gray-200 data-[state=checked]:border-blue-700 ring-blue-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 bg-gray-50 rounded-full border border-gray-200 data-[state=checked]:border-blue-700 ring-blue-300 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )
     }, props), {

package/dist/components/Select/index.js

@@ -126,7 +126,7 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-none text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white [.dark-theme_&]:bg-gray-50 focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px] items-center justify-between",
+        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white in-[.dark-theme]:bg-gray-50 focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px] items-center justify-between",
         { "cursor-not-allowed opacity-50": isDisabled },
         "disabled:cursor-not-allowed disabled:opacity-50",
         // when the disabled attr is set by reference
@@ -151,7 +151,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "relative z-[150] overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-150 overflow-hidden rounded-md border border-gray-200 bg-white shadow-xs 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",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -189,7 +189,7 @@ var SelectItem = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "flex w-full cursor-default select-none items-center rounded-md py-1.5 px-2 text-black text-sm outline-none hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-gray-50",
+        "flex w-full cursor-default select-none items-center rounded-md py-1.5 px-2 text-black text-sm outline-hidden hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-100 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=checked]:bg-gray-50",
         className
       )
     }, props), {

package/dist/components/Select/index.mjs

@@ -54,7 +54,7 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-none text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white [.dark-theme_&]:bg-gray-50 focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px] items-center justify-between",
+        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white in-[.dark-theme]:bg-gray-50 focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px] items-center justify-between",
         { "cursor-not-allowed opacity-50": isDisabled },
         "disabled:cursor-not-allowed disabled:opacity-50",
         // when the disabled attr is set by reference
@@ -79,7 +79,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "relative z-[150] overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-150 overflow-hidden rounded-md border border-gray-200 bg-white shadow-xs 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",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -117,7 +117,7 @@ var SelectItem = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "flex w-full cursor-default select-none items-center rounded-md py-1.5 px-2 text-black text-sm outline-none hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-gray-50",
+        "flex w-full cursor-default select-none items-center rounded-md py-1.5 px-2 text-black text-sm outline-hidden hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-100 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=checked]:bg-gray-50",
         className
       )
     }, props), {

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

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { VariantProps } from 'cva';
+import { I as IconProps } from '../types-DBpSTFQy.mjs';
 
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
 declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -9,7 +10,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<Omit<SheetPrimitive.Di
 declare const sheetVariants: (props?: ({
     side?: "top" | "bottom" | "left" | "right" | 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 | any | {
+    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;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -34,10 +35,10 @@ declare const sheetVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: 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 | any | {
+    class?: never;
+    className?: 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;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -72,7 +73,7 @@ declare const SheetHeader: {
     displayName: string;
 };
 declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    icon?: React.ReactElement<IconProps>;
 } & React.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 

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

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { VariantProps } from 'cva';
+import { I as IconProps } from '../types-DBpSTFQy.js';
 
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
 declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -9,7 +10,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<Omit<SheetPrimitive.Di
 declare const sheetVariants: (props?: ({
     side?: "top" | "bottom" | "left" | "right" | 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 | any | {
+    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;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -34,10 +35,10 @@ declare const sheetVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: 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 | any | {
+    class?: never;
+    className?: 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;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -72,7 +73,7 @@ declare const SheetHeader: {
     displayName: string;
 };
 declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    icon?: React.ReactElement<IconProps>;
 } & React.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 

package/dist/components/Sheet/index.js

@@ -160,15 +160,15 @@ var SpinnerIcon = (0, import_react2.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime3 = 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-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  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",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      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",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",
@@ -298,7 +298,7 @@ var SheetOverlay = React2.forwardRef((_a, ref) => {
 });
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = (0, import_cva2.cva)({
-  base: "fixed z-50 gap-4 bg-white p-6 shadow-sm border-gray-200 xl:rounded-none transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  base: "fixed z-50 gap-4 bg-white p-6 shadow-xs border-gray-200 xl:rounded-none transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   variants: {
     side: {
       top: "inset-x-0 top-0 border-b rounded-b-3xl data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",

package/dist/components/Sheet/index.mjs

@@ -3,7 +3,7 @@ import {
 } from "../../chunk-FMJFBQTF.mjs";
 import {
   Button
-} from "../../chunk-XI3KELZM.mjs";
+} from "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
@@ -50,7 +50,7 @@ var SheetOverlay = React.forwardRef((_a, ref) => {
 });
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva({
-  base: "fixed z-50 gap-4 bg-white p-6 shadow-sm border-gray-200 xl:rounded-none transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  base: "fixed z-50 gap-4 bg-white p-6 shadow-xs border-gray-200 xl:rounded-none transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   variants: {
     side: {
       top: "inset-x-0 top-0 border-b rounded-b-3xl data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",

package/dist/components/Switch/index.js

@@ -82,7 +82,7 @@ var Switch = React.forwardRef((_a, ref) => {
     SwitchPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "box-border text-left relative w-[42px] h-6 bg-transparent border-2 border-gray-600 rounded-full data-[state=checked]:border-blue-700 data-[state=checked]:bg-blue-700 data-[disabled]:data-[state=unchecked]:bg-gray-300 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
+        "box-border text-left relative w-[42px] h-6 bg-transparent border-2 border-gray-600 rounded-full data-[state=checked]:border-blue-700 data-[state=checked]:bg-blue-700 data-disabled:data-[state=unchecked]:bg-gray-300 data-disabled:opacity-50 data-disabled:cursor-not-allowed",
         className
       )
     }, props), {

package/dist/components/Switch/index.mjs

@@ -15,7 +15,7 @@ var Switch = React.forwardRef((_a, ref) => {
     SwitchPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "box-border text-left relative w-[42px] h-6 bg-transparent border-2 border-gray-600 rounded-full data-[state=checked]:border-blue-700 data-[state=checked]:bg-blue-700 data-[disabled]:data-[state=unchecked]:bg-gray-300 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
+        "box-border text-left relative w-[42px] h-6 bg-transparent border-2 border-gray-600 rounded-full data-[state=checked]:border-blue-700 data-[state=checked]:bg-blue-700 data-disabled:data-[state=unchecked]:bg-gray-300 data-disabled:opacity-50 data-disabled:cursor-not-allowed",
         className
       )
     }, props), {

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

@@ -7,11 +7,11 @@ declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
 declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableEmpty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    title?: string | undefined;
-    description?: string | undefined;
+    title?: string;
+    description?: string;
 } & React.RefAttributes<HTMLDivElement & {
-    title?: string | undefined;
-    description?: string | undefined;
+    title?: string;
+    description?: string;
 }>>;
 
 export { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow };

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

@@ -7,11 +7,11 @@ declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
 declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableEmpty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    title?: string | undefined;
-    description?: string | undefined;
+    title?: string;
+    description?: string;
 } & React.RefAttributes<HTMLDivElement & {
-    title?: string | undefined;
-    description?: string | undefined;
+    title?: string;
+    description?: string;
 }>>;
 
 export { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow };

package/dist/components/Table/index.js

@@ -83,7 +83,7 @@ function cn(...inputs) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var Table = React.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-auto border rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-auto border border-gray-200 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "table",
     __spreadValues({
       ref,
@@ -124,7 +124,7 @@ var TableRow = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "border-b transition-colors data-[state=selected]:bg-gray-50 text-black",
+        "border-b border-gray-200 transition-colors data-[state=selected]:bg-gray-50 text-black",
         className
       )
     }, props)

package/dist/components/Table/index.mjs

@@ -10,7 +10,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Table = React.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto border rounded-lg", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto border border-gray-200 rounded-lg", children: /* @__PURE__ */ jsx(
     "table",
     __spreadValues({
       ref,
@@ -51,7 +51,7 @@ var TableRow = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "border-b transition-colors data-[state=selected]:bg-gray-50 text-black",
+        "border-b border-gray-200 transition-colors data-[state=selected]:bg-gray-50 text-black",
         className
       )
     }, props)

package/dist/components/Tabs/index.js

@@ -99,8 +99,8 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
       ref,
       className: cn(
         "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-semibold ring-offset-white transition-all",
-        "hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
-        "data-[state=active]:bg-white data-[state=active]:text-blue-700 dark:data-[state=active]:text-black data-[state=active]:shadow-sm",
+        "hover:bg-gray-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
+        "data-[state=active]:bg-white data-[state=active]:text-blue-700 dark:data-[state=active]:text-black data-[state=active]:shadow-xs",
         "disabled:pointer-events-none disabled:opacity-50",
         className
       )
@@ -115,7 +115,7 @@ var TabsContent = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
+        "mt-2 ring-offset-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
         className
       )
     }, props)

package/dist/components/Tabs/index.mjs

@@ -31,8 +31,8 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
       ref,
       className: cn(
         "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-semibold ring-offset-white transition-all",
-        "hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
-        "data-[state=active]:bg-white data-[state=active]:text-blue-700 dark:data-[state=active]:text-black data-[state=active]:shadow-sm",
+        "hover:bg-gray-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
+        "data-[state=active]:bg-white data-[state=active]:text-blue-700 dark:data-[state=active]:text-black data-[state=active]:shadow-xs",
         "disabled:pointer-events-none disabled:opacity-50",
         className
       )
@@ -47,7 +47,7 @@ var TabsContent = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
+        "mt-2 ring-offset-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
         className
       )
     }, props)

package/dist/components/Textarea/index.js

@@ -94,7 +94,7 @@ var Textarea = React.forwardRef(
           "textarea",
           __spreadProps(__spreadValues({}, props), {
             disabled: isDisabled,
-            className: "w-full px-3 py-2 text-sm bg-transparent outline-none text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
+            className: "w-full px-3 py-2 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
             ref
           })
         )

package/dist/components/Textarea/index.mjs

@@ -27,7 +27,7 @@ var Textarea = React.forwardRef(
           "textarea",
           __spreadProps(__spreadValues({}, props), {
             disabled: isDisabled,
-            className: "w-full px-3 py-2 text-sm bg-transparent outline-none text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
+            className: "w-full px-3 py-2 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
             ref
           })
         )