@snapcall/design-system 1.25.0 → 1.26.0

package/dist/components/Dialog/index.mjs

@@ -1,11 +1,6 @@
 import {
   XCloseIcon
 } from "../../chunk-FMJFBQTF.mjs";
-import {
-  buttonVariants,
-  iconButtonSizes
-} from "../../chunk-R6W6SKNR.mjs";
-import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -26,7 +21,7 @@ var DialogOverlay = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       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)
@@ -43,32 +38,22 @@ var DialogContent = React.forwardRef(
         __spreadProps(__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 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 md:w-full",
             {
               "top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] rounded-t-3xl": bottomSheet
             },
             {
-              "duration-200 rounded-xl 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": !bottomSheet
+              "duration-200 rounded-2xl 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": !bottomSheet
             },
             className
           )
         }, props), {
           children: [
             children,
-            showClose && /* @__PURE__ */ jsxs(
-              DialogPrimitive.Close,
-              {
-                className: cn(
-                  buttonVariants({ variant: "secondary" }),
-                  iconButtonSizes({ size: "xs" }),
-                  "absolute right-6 top-6"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(XCloseIcon, { className: "w-3 h-3" }),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-                ]
-              }
-            )
+            showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 flex items-center justify-center bg-gray-50 hover:bg-gray-100 rounded-lg p-2 transition-colors", children: [
+              /* @__PURE__ */ jsx(XCloseIcon, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ] })
           ]
         })
       )
@@ -82,12 +67,7 @@ var DialogHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      className: cn("flex flex-col space-y-1.5 text-left", className)
-    }, props)
-  );
+  return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-1 p-4", className) }, props));
 };
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = (_a) => {
@@ -100,7 +80,7 @@ var DialogFooter = (_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)
@@ -113,7 +93,7 @@ var DialogTitle = React.forwardRef((_a, ref) => {
     DialogPrimitive.Title,
     __spreadValues({
       ref,
-      className: cn("text-lg text-black font-semibold", className)
+      className: cn("text-base font-medium text-black", className)
     }, props)
   );
 });
@@ -124,7 +104,7 @@ var DialogDescription = React.forwardRef((_a, ref) => {
     DialogPrimitive.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-gray-700", className)
+      className: cn("text-sm text-gray-900", className)
     }, props)
   );
 });

package/dist/components/DropdownMenu/index.js

@@ -191,7 +191,7 @@ var DropdownMenuItemBase = ({
     "div",
     {
       className: cn(
-        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-md cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
+        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-lg cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
         { "text-red-700 font-medium": destructive },
         className
       ),
@@ -256,7 +256,7 @@ var DropdownMenuContent = import_react3.default.forwardRef(
       DropdownMenuPrimitive.Content,
       __spreadProps(__spreadValues({
         className: cn(
-          "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
+          "min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-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",
           className
         ),
         side,
@@ -344,7 +344,7 @@ var DropdownMenuSubContent = import_react3.default.forwardRef((_a, forwardedRef)
     DropdownMenuPrimitive.SubContent,
     __spreadProps(__spreadValues({
       className: cn(
-        "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
+        "min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-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",
         className
       ),
       sideOffset

package/dist/components/DropdownMenu/index.mjs

@@ -31,7 +31,7 @@ var DropdownMenuItemBase = ({
     "div",
     {
       className: cn(
-        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-md cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
+        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-lg cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
         { "text-red-700 font-medium": destructive },
         className
       ),
@@ -96,7 +96,7 @@ var DropdownMenuContent = React.forwardRef(
       DropdownMenuPrimitive.Content,
       __spreadProps(__spreadValues({
         className: cn(
-          "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
+          "min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-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",
           className
         ),
         side,
@@ -184,7 +184,7 @@ var DropdownMenuSubContent = React.forwardRef((_a, forwardedRef) => {
     DropdownMenuPrimitive.SubContent,
     __spreadProps(__spreadValues({
       className: cn(
-        "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
+        "min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-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",
         className
       ),
       sideOffset

package/dist/components/FilterButton/index.js

@@ -105,33 +105,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" },
@@ -142,88 +142,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: {
@@ -294,7 +314,7 @@ var SpinnerIcon = (0, import_react2.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva2.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/FilterButton/index.mjs

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

package/dist/components/Input/index.js

@@ -100,7 +100,7 @@ var Input = React.forwardRef(
         "div",
         {
           className: cn(
-            "flex h-9 w-full rounded-md border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
+            "flex h-9 w-full rounded-lg border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
             { "cursor-not-allowed opacity-50": isDisabled },
             {
               "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]

package/dist/components/Input/index.mjs

@@ -33,7 +33,7 @@ var Input = React.forwardRef(
         "div",
         {
           className: cn(
-            "flex h-9 w-full rounded-md border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
+            "flex h-9 w-full rounded-lg border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
             { "cursor-not-allowed opacity-50": isDisabled },
             {
               "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]

package/dist/components/Pagination/index.js

@@ -246,7 +246,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/Pagination/index.mjs

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

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-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",
+        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-lg border border-gray-200 bg-white focus-within:outline-2 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
@@ -137,8 +137,14 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "truncate", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ChevronSelectorVerticalIcon,
+          {
+            size: "16",
+            className: "w-4 h-4 opacity-50 shrink-0"
+          }
+        ) })
       ]
     })
   );
@@ -151,7 +157,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-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",
+        "relative z-150 overflow-hidden rounded-lg 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
       ),
@@ -162,7 +168,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
         {
           className: cn(
             "p-1",
-            position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] h-[var(--radix-select-trigger-height)]"
+            position === "popper" && "w-full min-w-(--radix-select-trigger-width) h-(--radix-select-trigger-height)"
           ),
           children
         }
@@ -189,7 +195,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-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",
+        "flex w-full cursor-default select-none items-center rounded-lg 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-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",
+        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-lg border border-gray-200 bg-white focus-within:outline-2 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
@@ -65,8 +65,14 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        children,
-        /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
+        /* @__PURE__ */ jsx2("div", { className: "truncate", children }),
+        /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(
+          ChevronSelectorVerticalIcon,
+          {
+            size: "16",
+            className: "w-4 h-4 opacity-50 shrink-0"
+          }
+        ) })
       ]
     })
   );
@@ -79,7 +85,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-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",
+        "relative z-150 overflow-hidden rounded-lg 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
       ),
@@ -90,7 +96,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
         {
           className: cn(
             "p-1",
-            position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] h-[var(--radix-select-trigger-height)]"
+            position === "popper" && "w-full min-w-(--radix-select-trigger-width) h-(--radix-select-trigger-height)"
           ),
           children
         }
@@ -117,7 +123,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-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",
+        "flex w-full cursor-default select-none items-center rounded-lg 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.js

@@ -160,7 +160,7 @@ 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-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/Sheet/index.mjs

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

package/dist/components/Switch/index.js

@@ -87,7 +87,7 @@ var Switch = React.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchPrimitive.Thumb, { className: "flex w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
     })
   );
 });

package/dist/components/Switch/index.mjs

@@ -20,7 +20,7 @@ var Switch = React.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "flex w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
     })
   );
 });

package/dist/components/Tabs/index.js

@@ -84,7 +84,7 @@ var TabsList = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex items-center justify-center gap-2 rounded-lg p-1.5 bg-gray-50 text-gray-700",
+        "inline-flex items-center justify-center gap-1 rounded-lg p-1 bg-gray-50 text-gray-700",
         className
       )
     }, props)
@@ -98,7 +98,7 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
     __spreadValues({
       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",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-white transition-all",
         "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",

package/dist/components/Tabs/index.mjs

@@ -16,7 +16,7 @@ var TabsList = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex items-center justify-center gap-2 rounded-lg p-1.5 bg-gray-50 text-gray-700",
+        "inline-flex items-center justify-center gap-1 rounded-lg p-1 bg-gray-50 text-gray-700",
         className
       )
     }, props)
@@ -30,7 +30,7 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
     __spreadValues({
       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",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-white transition-all",
         "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",

package/dist/components/Textarea/index.js

@@ -123,11 +123,11 @@ var Textarea = React.forwardRef(
       "onMaximizeClick"
     ]);
     const isDisabled = !!props["data-is-disabled"] || disabled;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
         className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
+          "flex min-h-[80px] w-full rounded-lg border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
           { "cursor-not-allowed opacity-50": isDisabled },
           {
             "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
@@ -156,7 +156,7 @@ var Textarea = React.forwardRef(
           )
         ]
       }
-    ) });
+    );
   }
 );
 Textarea.displayName = "Textarea";

package/dist/components/Textarea/index.mjs

@@ -58,11 +58,11 @@ var Textarea = React.forwardRef(
       "onMaximizeClick"
     ]);
     const isDisabled = !!props["data-is-disabled"] || disabled;
-    return /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
+          "flex min-h-[80px] w-full rounded-lg border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
           { "cursor-not-allowed opacity-50": isDisabled },
           {
             "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
@@ -91,7 +91,7 @@ var Textarea = React.forwardRef(
           )
         ]
       }
-    ) });
+    );
   }
 );
 Textarea.displayName = "Textarea";