@syscore/ui-library 1.1.9 → 1.1.10

package/dist/ui/index.es.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
+import React__default, { useState, useEffect, useCallback } from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronUp, ChevronRight, ChevronLeft, MoreHorizontal, ArrowLeft, ArrowRight, Search } from "lucide-react";
+import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronUp, ChevronRight, ChevronLeft, MoreHorizontal, XIcon, ArrowLeft, ArrowRight, Search } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
@@ -21,11 +22,11 @@ import { OTPInput, OTPInputContext } from "input-otp";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { useFormContext, FormProvider, Controller } from "react-hook-form";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { DayPicker } from "react-day-picker";
+import "motion/react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
@@ -86,30 +87,20 @@ const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "rounded-lg border bg-card text-card-foreground shadow-xs",
+      "rounded-lg border border-gray-100 bg-cyan-50  shadow-xs p-6 space-y-6",
       className
     ),
     ...props
   }
 ));
 Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-6", className), ...props }));
 CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
-    className: cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    ),
+    className: cn("heading-xxsmall text-gray-800", className),
     ...props
   }
 ));
@@ -118,18 +109,25 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
   "p",
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("body-base text-gray-800", className),
     ...props
   }
 ));
 CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("body-base text-gray-800", className),
+    ...props
+  }
+));
 CardContent.displayName = "CardContent";
 const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
-    className: cn("flex items-center p-6 pt-0", className),
+    className: cn("flex items-center body-base text-gray-800", className),
     ...props
   }
 ));
@@ -301,144 +299,64 @@ function useIsMobile() {
   return !!isMobile;
 }
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 active:scale-[.98]",
+  "group inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
   {
     variants: {
       variant: {
-        // CTA Button Variants
-        "primary-gradient": [
-          "text-white shadow-xs",
-          "bg-linear-to-r from-cyan-gradient-from via-cyan-gradient-via to-cyan-gradient-to",
-          "hover:shadow-lg hover:scale-[1.02]",
-          "relative",
-          "before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-r before:from-cyan-800 before:to-cyan-800 before:opacity-60 before:mix-blend-overlay"
-        ],
-        "primary-dark": [
-          "text-white shadow-xs",
-          "bg-linear-to-r from-cyan-800 to-cyan-dark",
-          "hover:shadow-lg hover:brightness-110"
-        ],
-        "secondary-light": [
-          "text-cyan-800 bg-white shadow-xs",
-          "border border-gray-200",
-          "hover:bg-gray-50/80"
-        ],
-        "tertiary-light": [
-          "text-blue-600 bg-blue-50 shadow-xs",
-          "border border-blue-200",
-          "hover:bg-blue-50/80"
-        ],
-        // Utility Button Variants
-        "utility-primary": ["text-white bg-blue-600", "hover:bg-blue-600/90"],
-        "utility-secondary": [
-          "text-blue-600 bg-white",
-          "border border-blue-200",
-          "hover:bg-gray-50"
-        ],
-        "utility-tertiary": [
-          "text-gray-600 bg-white",
-          "border border-gray-200",
-          "hover:bg-gray-50"
-        ],
-        "tooltip-primary": ["text-white bg-cyan-300", "hover:bg-cyan-300/90"],
-        "tooltip-secondary": ["text-white bg-gray-500", "hover:bg-gray-500/90"],
-        // Icon Button Variants
-        "icon-reset": [
-          "text-gray-500 bg-white",
-          "border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0"
-        ],
-        "icon-close": [
-          "text-gray-500 bg-white",
-          "border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0"
-        ],
-        "icon-close-semi": [
-          "text-white bg-black/8",
-          "hover:bg-black/12",
-          "p-0"
-        ],
-        "icon-utility": [
-          "text-gray-500 bg-white",
-          "border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0"
-        ],
-        "icon-account": [
-          "bg-white border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0"
-        ],
-        "icon-account-semi": ["bg-black/8 hover:bg-black/12", "p-0"]
+        // CTA variants
+        "primary-gradient": "text-white hover:opacity-90 btn-primary-gradient",
+        "primary-dark": "bg-cyan-800 text-white hover:bg-cyan-900 focus-visible:ring-cyan-800",
+        "secondary-light": "bg-white border border-gray-200 text-cyan-800 hover:bg-gray-50 focus-visible:ring-gray-200",
+        "tertiary-light": "bg-blue-50 border border-blue-200 text-blue-600 hover:bg-blue-100 focus-visible:ring-blue-200",
+        // Utility variants
+        "general-primary": "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600",
+        "general-secondary": "bg-white border border-blue-200 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-200",
+        "general-tertiary": "bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-200",
+        "tooltip-primary": "bg-cyan-300 text-white hover:bg-cyan-400 focus-visible:ring-cyan-300",
+        "tooltip-secondary": "bg-gray-500 text-white hover:bg-gray-600 focus-visible:ring-gray-500"
       },
       size: {
-        xs: "h-8 px-4 text-sm rounded-full",
-        // utility buttons
-        sm: "h-8 px-3 text-xs rounded-md",
-        md: "h-10 px-4 text-sm rounded-md",
-        lg: "h-12 px-8 text-base rounded-full",
-        // large CTA
-        xl: "h-16 px-10 text-lg rounded-full",
-        // xlarge CTA
-        icon: "h-8 w-8 rounded-full"
-        // 32px icon buttons
-      },
-      fullWidth: {
-        true: "w-full"
+        xlarge: "h-16 px-10",
+        large: "h-12 px-8",
+        utility: "h-8 px-4",
+        icon: "size-[32px]"
       }
     },
+    compoundVariants: [
+      {
+        size: "xlarge",
+        className: "font-semibold"
+      },
+      {
+        size: "large",
+        className: "font-semibold"
+      },
+      {
+        size: "utility",
+        className: "font-semibold"
+      },
+      {
+        size: "icon",
+        className: "p-0 bg-white border border-gray-100 "
+      }
+    ],
     defaultVariants: {
-      variant: "primary-gradient",
-      size: "md"
+      variant: "primary-dark",
+      size: "large"
     }
   }
 );
 const Button = React.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    fullWidth,
-    leftIcon,
-    rightIcon,
-    iconOnly,
-    children,
-    style,
-    ...props
-  }, ref) => {
-    const buttonStyle = {
-      fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-      ...style
-    };
-    if (iconOnly) {
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          ref,
-          className: cn(
-            buttonVariants({ variant, size: size || "icon", fullWidth }),
-            className
-          ),
-          style: buttonStyle,
-          ...props,
-          children: iconOnly
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxs(
+  ({ className, variant, size, children, style, ...props }, ref) => {
+    const bodyClass = size === "xlarge" ? "body-large" : size === "large" ? "body-base" : size === "utility" ? "body-small" : "";
+    return /* @__PURE__ */ jsx(
       "button",
       {
+        className: cn(buttonVariants({ variant, size }), className),
+        style,
         ref,
-        className: cn(buttonVariants({ variant, size, fullWidth }), className),
-        style: buttonStyle,
         ...props,
-        children: [
-          leftIcon,
-          /* @__PURE__ */ jsx("span", { children }),
-          rightIcon
-        ]
+        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("relative z-10", bodyClass), children })
       }
     );
   }
@@ -570,22 +488,72 @@ function Skeleton({
     }
   );
 }
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
-      className
-    ),
-    ...props
-  }
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  side = "bottom",
+  children,
+  alignOffset = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      alignOffset,
+      side,
+      className: cn(
+        "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-6 pt-8 pb-6  text-balance shadow-sm",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "10",
+            height: "5",
+            viewBox: "0 0 10 5",
+            fill: "none",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M10 -1.74846e-06L-7.36867e-07 0C-3.29906e-07 2.76142 2.23858 5 5 5C7.76142 5 10 2.76142 10 -1.74846e-06Z",
+                fill: "#39C9EA"
+              }
+            )
+          }
+        ) }),
+        children
+      ]
+    }
+  ) });
+}
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
@@ -774,7 +742,7 @@ const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref)
     {
       ref,
       "data-sidebar": "trigger",
-      variant: "ghost",
+      variant: "general-tertiary",
       size: "icon",
       className: cn("h-7 w-7", className),
       onClick: (event) => {
@@ -1154,14 +1122,15 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", i
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "overline-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Label = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
     className: cn(labelVariants(), className),
-    ...props
+    ...props,
+    children
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
@@ -1500,8 +1469,36 @@ const FormMessage = React.forwardRef(({ className, children, ...props }, ref) =>
   );
 });
 FormMessage.displayName = "FormMessage";
+function useSegmentedControl({
+  value,
+  defaultValue,
+  onValueChange
+}) {
+  const [internalValue, setInternalValue] = useState(
+    value ?? defaultValue
+  );
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const handleValueChange = useCallback(
+    (newValue) => {
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [value, onValueChange]
+  );
+  const currentValue = value ?? internalValue;
+  return {
+    value: currentValue,
+    onValueChange: handleValueChange
+  };
+}
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
       variant: {
@@ -1520,15 +1517,36 @@ const toggleVariants = cva(
     }
   }
 );
-const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  TogglePrimitive.Root,
-  {
-    ref,
-    className: cn(toggleVariants({ variant, size, className })),
-    ...props
+const SegmentedControlInner = React.forwardRef(
+  ({ className, options, value, defaultValue, onValueChange, ...props }, ref) => {
+    var _a;
+    const { value: selectedValue, onValueChange: handleValueChange } = useSegmentedControl({
+      value,
+      defaultValue: defaultValue ?? ((_a = options[0]) == null ? void 0 : _a.value),
+      onValueChange
+    });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...props, children: options.map((option) => {
+      const isReactElement = React.isValidElement(option.label);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(
+            "inline-flex items-center justify-center h-8 px-6  rounded-full transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+            selectedValue === option.value ? "bg-cyan-700 text-white font-semibold" : "text-gray-600 hover:bg-gray-50 font-medium"
+          ),
+          onClick: () => handleValueChange(option.value),
+          type: "button",
+          "data-active": selectedValue === option.value,
+          children: isReactElement ? option.label : /* @__PURE__ */ jsx("span", { className: "body-small font-medium", children: option.label })
+        },
+        option.value
+      );
+    }) });
   }
-));
-Toggle.displayName = TogglePrimitive.Root.displayName;
+);
+SegmentedControlInner.displayName = "SegmentedControl";
+const SegmentedControl = SegmentedControlInner;
+const Toggle = SegmentedControl;
 const ToggleGroupContext = React.createContext({
   size: "default",
   variant: "default"
@@ -1713,7 +1731,7 @@ const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      buttonVariants({ variant: "outline" }),
+      buttonVariants({ variant: "general-secondary" }),
       "mt-2 sm:mt-0",
       className
     ),
@@ -1853,7 +1871,7 @@ function Calendar({
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
+          buttonVariants({ variant: "general-secondary" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
         nav_button_previous: "absolute left-1",
@@ -1864,7 +1882,7 @@ function Calendar({
         row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
-          buttonVariants({ variant: "ghost" }),
+          buttonVariants({ variant: "general-tertiary" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
         day_range_end: "day-range-end",
@@ -1889,8 +1907,16 @@ function Calendar({
   );
 }
 Calendar.displayName = "Calendar";
-const Tabs = TabsPrimitive.Root;
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TabsRoot = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn("w-full", className),
+    ...props
+  }
+));
+TabsRoot.displayName = TabsPrimitive.Root.displayName;
+const TabsList = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -1902,24 +1928,24 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TabsTrigger = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     ),
     ...props
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TabsContent = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
     className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     ),
     ...props
@@ -1958,7 +1984,7 @@ const PaginationLink = ({
     "aria-current": isActive ? "page" : void 0,
     className: cn(
       buttonVariants({
-        variant: isActive ? "outline-solid" : "ghost",
+        variant: isActive ? "general-secondary" : "general-tertiary",
         size
       }),
       className
@@ -1974,7 +2000,7 @@ const PaginationPrevious = ({
   PaginationLink,
   {
     "aria-label": "Go to previous page",
-    size: "default",
+    size: "utility",
     className: cn("gap-1 pl-2.5", className),
     ...props,
     children: [
@@ -1991,7 +2017,7 @@ const PaginationNext = ({
   PaginationLink,
   {
     "aria-label": "Go to next page",
-    size: "default",
+    size: "utility",
     className: cn("gap-1 pr-2.5", className),
     ...props,
     children: [
@@ -2393,93 +2419,126 @@ const DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-const Dialog = SheetPrimitive.Root;
-const DialogTrigger = SheetPrimitive.Trigger;
-const DialogPortal = SheetPrimitive.Portal;
-const DialogClose = SheetPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = SheetPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    SheetPrimitive.Content,
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
     {
-      ref,
+      "data-slot": "dialog-overlay",
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "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/50",
         className
       ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
+      ...props
     }
-  )
-] }));
-DialogContent.displayName = SheetPrimitive.Content.displayName;
-const DialogHeader = ({
+  );
+}
+function DialogContent({
   className,
+  children,
+  showCloseButton = true,
   ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "DialogContent overflow-hidden rounded-[40px] gap-4  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 fixed top-[30%] left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] border-12 border-[rgba(255,255,255,0.20)]  duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "p-6 bg-gray-50", children }),
+          showCloseButton && /* @__PURE__ */ jsxs(
+            SheetPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
-DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Title,
-  {
-    ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-DialogTitle.displayName = SheetPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = SheetPrimitive.Description.displayName;
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("heading-xxsmall ", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
 const Drawer = ({
   shouldScaleBackground = true,
   ...props
@@ -2861,53 +2920,57 @@ const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      ref,
-      variant,
-      size,
-      className: cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollPrev,
-      onClick: scrollPrev,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-});
+const CarouselPrevious = React.forwardRef(
+  ({ className, variant = "general-secondary", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className: cn(
+          "absolute  h-8 w-8 rounded-full",
+          orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+        ]
+      }
+    );
+  }
+);
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      ref,
-      variant,
-      size,
-      className: cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollNext,
-      onClick: scrollNext,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
-});
+const CarouselNext = React.forwardRef(
+  ({ className, variant = "general-secondary", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className: cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+        ]
+      }
+    );
+  }
+);
 CarouselNext.displayName = "CarouselNext";
 const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
@@ -2916,37 +2979,47 @@ const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   Command$1,
   {
     ref,
-    className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    ),
+    className: cn("flex h-full w-full flex-col overflow-hidden", className),
     ...props
   }
 ));
 Command.displayName = Command$1.displayName;
 const CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx(Command, { className: "**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
-const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx(
-    Command$1.Input,
-    {
-      ref,
-      className: cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  )
-] }));
+const CommandInput = React.forwardRef(({ className, icon: Icon = Search, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn(
+      "group relative flex h-14 w-full  sm:min-w-[344px] items-center gap-4 rounded-lg border border-gray-200 bg-white p-4  focus:ring-0 focus:outline-none",
+      className
+    ),
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ jsx(Icon, { className: " h-4 w-4 shrink-0 group-focus-within:-translate-x-4 group-focus-within:opacity-0 ease-in-out duration-200" }),
+      /* @__PURE__ */ jsx(
+        Command$1.Input,
+        {
+          ref,
+          className: cn(
+            "text-base w-full ring-0 outline-none group-focus-within:-translate-x-8 ease-in-out duration-200",
+            className
+          ),
+          ...props
+        }
+      )
+    ]
+  }
+));
 CommandInput.displayName = Command$1.Input.displayName;
 const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.List,
   {
     ref,
-    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    className: cn(
+      "max-h-[300px] overflow-y-auto overflow-x-hidden bg-gray-700  rounded-b-lg",
+      className
+    ),
     ...props
   }
 ));
@@ -2965,7 +3038,7 @@ const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+      "group overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground ",
       className
     ),
     ...props
@@ -2986,7 +3059,7 @@ const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex w-full items-center gap-2 cursor-default select-none p-4 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-gray-700 hover:bg-[rgba(0,0,0,0.2)] text-gray-200",
       className
     ),
     ...props
@@ -3674,7 +3747,7 @@ export {
   TableHead,
   TableHeader,
   TableRow,
-  Tabs,
+  TabsRoot as Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
@@ -3697,6 +3770,5 @@ export {
   badgeVariants,
   buttonVariants,
   navigationMenuTriggerStyle,
-  toggleVariants,
   useToast
 };