@nuvia/components 1.4.0 → 1.4.2

package/dist/index.cjs

@@ -1182,7 +1182,7 @@ var CommandSeparator = React36__namespace.forwardRef(({ className, ...props }, r
   cmdk.Command.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-border", className),
+    className: cn("-mx-1 h-px bg-card", className),
     ...props
   }
 ));
@@ -1232,84 +1232,107 @@ var PopoverContent = React36__namespace.forwardRef(({ className, align = "center
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-var Combobox = React36__namespace.forwardRef(({
-  options,
-  placeholder = "Select option...",
-  searchPlaceholder = "Search...",
-  emptyMessage = "No option found.",
-  className,
-  value: controlledValue,
-  onValueChange,
-  onSelect,
-  asChild,
-  children
-}, ref) => {
-  const [open, setOpen] = React36__namespace.useState(false);
-  const [value, setValue] = React36__namespace.useState(controlledValue || (Array.isArray(controlledValue) ? [] : ""));
-  const [search, setSearch] = React36__namespace.useState("");
-  React36__namespace.useEffect(() => {
-    if (controlledValue !== void 0) {
-      setValue(controlledValue);
-    }
-  }, [controlledValue]);
-  const handleSelect = React36__namespace.useCallback((currentValue) => {
-    let newValue;
-    if (Array.isArray(value)) {
-      newValue = value.includes(currentValue) ? value.filter((v) => v !== currentValue) : [...value, currentValue];
-    } else {
-      newValue = currentValue === value ? "" : currentValue;
-    }
-    setValue(newValue);
-    onValueChange?.(newValue);
-    onSelect?.(newValue);
-    setOpen(false);
-  }, [value, onValueChange, onSelect]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive.Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        className: cn("w-full justify-between", className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground font-normal", children: Array.isArray(value) ? value.map((val) => options.find((option) => option.value === val)?.label).join(", ") : options.find((option) => option.value === value)?.label || placeholder }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: "opacity-50" })
-        ]
+var Combobox = React36__namespace.forwardRef(
+  ({
+    options,
+    placeholder = "Select option...",
+    searchPlaceholder = "Search...",
+    emptyMessage = "No option found.",
+    className,
+    value: controlledValue,
+    onValueChange,
+    onSelect,
+    asChild,
+    children
+  }, ref) => {
+    const [open, setOpen] = React36__namespace.useState(false);
+    const [value, setValue] = React36__namespace.useState(
+      controlledValue || (Array.isArray(controlledValue) ? [] : "")
+    );
+    const [search, setSearch] = React36__namespace.useState("");
+    React36__namespace.useEffect(() => {
+      if (controlledValue !== void 0) {
+        setValue(controlledValue);
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: cn("w-full p-0 !rounded-xl border-none", className), children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { className: "rounded-xl border", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { value: search, onValueChange: setSearch, placeholder: searchPlaceholder, className: "h-9 w-full" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: emptyMessage }),
-        /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          CommandItem,
-          {
-            keywords: [option.label],
-            className: "rounded-lg",
-            value: option.value,
-            onSelect: () => handleSelect(option.value),
-            onKeyUp: (e) => e.key === "Enter" && handleSelect(option.value),
-            onKeyDown: (e) => e.key === "Enter" && handleSelect(option.value),
-            children: [
-              option.label,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactIcons.CheckIcon,
+    }, [controlledValue]);
+    const handleSelect = React36__namespace.useCallback(
+      (currentValue) => {
+        let newValue;
+        if (Array.isArray(value)) {
+          newValue = value.includes(currentValue) ? value.filter((v) => v !== currentValue) : [...value, currentValue];
+        } else {
+          newValue = currentValue === value ? "" : currentValue;
+        }
+        setValue(newValue);
+        onValueChange?.(newValue);
+        onSelect?.(newValue);
+        setOpen(false);
+      },
+      [value, onValueChange, onSelect]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          className: cn("w-full justify-between", className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground font-normal", children: Array.isArray(value) ? value.map(
+              (val) => options.find((option) => option.value === val)?.label
+            ).join(", ") : options.find((option) => option.value === value)?.label || placeholder }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: "opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverContent,
+        {
+          className: cn("w-full p-0 !rounded-xl border-none", className),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { className: "rounded-xl border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CommandInput,
+              {
+                value: search,
+                onValueChange: setSearch,
+                placeholder: searchPlaceholder,
+                className: "h-9 w-full"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: emptyMessage }),
+              /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                CommandItem,
                 {
-                  className: cn(
-                    "ml-auto",
-                    Array.isArray(value) ? value.includes(option.value) ? "opacity-100" : "opacity-0" : value === option.value ? "opacity-100" : "opacity-0"
-                  )
-                }
-              )
-            ]
-          },
-          option.value
-        )) })
-      ] })
-    ] }) })
-  ] });
-});
+                  keywords: [option.label],
+                  className: "rounded-lg",
+                  value: option.value,
+                  onSelect: () => handleSelect(option.value),
+                  onKeyUp: (e) => e.key === "Enter" && handleSelect(option.value),
+                  onKeyDown: (e) => e.key === "Enter" && handleSelect(option.value),
+                  children: [
+                    option.label,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactIcons.CheckIcon,
+                      {
+                        className: cn(
+                          "ml-auto",
+                          Array.isArray(value) ? value.includes(option.value) ? "opacity-100" : "opacity-0" : value === option.value ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    )
+                  ]
+                },
+                `${option.value}-${option.label}`
+              )) })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
 Combobox.displayName = "Combobox";
 var ContextMenu = ContextMenuPrimitive__namespace.Root;
 var ContextMenuTrigger = ContextMenuPrimitive__namespace.Trigger;
@@ -1421,7 +1444,7 @@ var ContextMenuSeparator = React36__namespace.forwardRef(({ className, ...props
   ContextMenuPrimitive__namespace.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-mx-1 my-1 h-px bg-card", className),
     ...props
   }
 ));
@@ -2326,149 +2349,163 @@ var MenubarShortcut = ({
   );
 };
 MenubarShortcut.displayname = "MenubarShortcut";
-var MultiCombobox = React36__namespace.forwardRef(({
-  options,
-  placeholder = "Select options...",
-  searchPlaceholder = "Search...",
-  emptyMessage = "No options found.",
-  className,
-  contentClassName,
-  value: controlledValue,
-  onValueChange,
-  onSelect,
-  onCreate,
-  maxDisplayedItems = 3,
-  asChild,
-  children
-}, ref) => {
-  const [open, setOpen] = React36__namespace.useState(false);
-  const [value, setValue] = React36__namespace.useState(controlledValue || []);
-  const [search, setSearch] = React36__namespace.useState("");
-  React36__namespace.useEffect(() => {
-    if (controlledValue !== void 0) {
-      setValue(controlledValue);
-    }
-  }, [controlledValue]);
-  const handleSelect = React36__namespace.useCallback((currentValue) => {
-    const newValue = value.includes(currentValue) ? value.filter((v) => v !== currentValue) : [...value, currentValue];
-    setValue(newValue);
-    onValueChange?.(newValue);
-    onSelect?.(newValue);
-  }, [value, onValueChange, onSelect]);
-  const handleRemove = React36__namespace.useCallback((valueToRemove) => {
-    const newValue = value.filter((v) => v !== valueToRemove);
-    setValue(newValue);
-    onValueChange?.(newValue);
-    onSelect?.(newValue);
-  }, [value, onValueChange, onSelect]);
-  const selectedLabels = React36__namespace.useMemo(() => {
-    return value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
-  }, [value, options]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive.Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        className: cn("w-full justify-between", className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1 items-center", children: [
-            value.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1", children: [
-              selectedLabels.slice(0, maxDisplayedItems).map((label, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
+var MultiCombobox = React36__namespace.forwardRef(
+  ({
+    options,
+    placeholder = "Select options...",
+    searchPlaceholder = "Search...",
+    emptyMessage = "No options found.",
+    className,
+    contentClassName,
+    value: controlledValue,
+    onValueChange,
+    onSelect,
+    onCreate,
+    maxDisplayedItems = 3,
+    asChild,
+    children
+  }, ref) => {
+    const [open, setOpen] = React36__namespace.useState(false);
+    const [value, setValue] = React36__namespace.useState(controlledValue || []);
+    const [search, setSearch] = React36__namespace.useState("");
+    React36__namespace.useEffect(() => {
+      if (controlledValue !== void 0) {
+        setValue(controlledValue);
+      }
+    }, [controlledValue]);
+    const handleSelect = React36__namespace.useCallback(
+      (currentValue) => {
+        const newValue = value.includes(currentValue) ? value.filter((v) => v !== currentValue) : [...value, currentValue];
+        setValue(newValue);
+        onValueChange?.(newValue);
+        onSelect?.(newValue);
+      },
+      [value, onValueChange, onSelect]
+    );
+    const handleRemove = React36__namespace.useCallback(
+      (valueToRemove) => {
+        const newValue = value.filter((v) => v !== valueToRemove);
+        setValue(newValue);
+        onValueChange?.(newValue);
+        onSelect?.(newValue);
+      },
+      [value, onValueChange, onSelect]
+    );
+    const selectedLabels = React36__namespace.useMemo(() => {
+      return value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
+    }, [value, options]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          className: cn("w-full justify-between", className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1 items-center", children: [
+              value.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1", children: [
+                selectedLabels.slice(0, maxDisplayedItems).map((label, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-1 bg-secondary px-2 py-0.5 rounded-md text-sm",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleRemove(value[index]);
+                          },
+                          className: "hover:bg-secondary-foreground/20 rounded-sm",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, { className: "h-3 w-3" })
+                        }
+                      )
+                    ]
+                  },
+                  index
+                )),
+                selectedLabels.length > maxDisplayedItems && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                  "+",
+                  selectedLabels.length - maxDisplayedItems,
+                  " more"
+                ] })
+              ] }),
+              value.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground font-normal", children: placeholder })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: "opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverContent,
+        {
+          className: cn("w-full p-0 !rounded-xl border-none", contentClassName),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { className: "rounded-xl border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CommandInput,
+              {
+                placeholder: searchPlaceholder,
+                className: "h-9 w-full",
+                value: search,
+                onValueChange: setSearch
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(CommandEmpty, { className: "flex flex-col gap-3 px-4 py-5", children: [
+                !!onCreate && search && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => {
+                      setOpen(false);
+                      onCreate(search);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PlusIcon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+                        'Create "',
+                        search,
+                        '"'
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-muted-foreground text-xs", children: "No results found" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                CommandItem,
                 {
-                  className: "flex items-center gap-1 bg-secondary px-2 py-0.5 rounded-md text-sm",
+                  className: "rounded-xl",
+                  keywords: [option.label],
+                  value: option.value,
+                  onSelect: () => handleSelect(option.value),
+                  onKeyUp: (e) => e.key === "Enter" && handleSelect(option.value),
+                  onKeyDown: (e) => e.key === "Enter" && handleSelect(option.value),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                    option.label,
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
+                      reactIcons.CheckIcon,
                       {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleRemove(value[index]);
-                        },
-                        className: "hover:bg-secondary-foreground/20 rounded-sm",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, { className: "h-3 w-3" })
+                        className: cn(
+                          "ml-auto",
+                          value.includes(option.value) ? "opacity-100" : "opacity-0"
+                        )
                       }
                     )
                   ]
                 },
-                index
-              )),
-              selectedLabels.length > maxDisplayedItems && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-                "+",
-                selectedLabels.length - maxDisplayedItems,
-                " more"
-              ] })
-            ] }),
-            value.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground font-normal", children: placeholder })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: "opacity-50" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: cn("w-full p-0 !rounded-xl border-none", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { className: "rounded-xl border", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CommandInput,
-        {
-          placeholder: searchPlaceholder,
-          className: "h-9 w-full",
-          value: search,
-          onValueChange: setSearch
+                `${option.value}-${option.label}`
+              )) })
+            ] })
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(CommandEmpty, { className: "flex flex-col gap-3 px-4 py-5", children: [
-          !!onCreate && search && /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: () => {
-                setOpen(false);
-                onCreate(search);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PlusIcon, { className: "h-4 w-4" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
-                  'Create "',
-                  search,
-                  '"'
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-muted-foreground text-xs", children: "No results found" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          CommandItem,
-          {
-            className: "rounded-lg",
-            keywords: [option.label],
-            value: option.value,
-            onSelect: () => handleSelect(option.value),
-            onKeyUp: (e) => e.key === "Enter" && handleSelect(option.value),
-            onKeyDown: (e) => e.key === "Enter" && handleSelect(option.value),
-            children: [
-              option.label,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactIcons.CheckIcon,
-                {
-                  className: cn(
-                    "ml-auto",
-                    value.includes(option.value) ? "opacity-100" : "opacity-0"
-                  )
-                }
-              )
-            ]
-          },
-          option.value
-        )) })
-      ] })
-    ] }) })
-  ] });
-});
+      )
+    ] });
+  }
+);
 MultiCombobox.displayName = "MultiCombobox";
 var NavigationMenu = React36__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   NavigationMenuPrimitive__namespace.Root,
@@ -2556,7 +2593,7 @@ var NavigationMenuIndicator = React36__namespace.forwardRef(({ className, ...pro
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-card shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive__namespace.Indicator.displayName;
@@ -2712,11 +2749,11 @@ var ResizableHandle = ({
   ResizablePrimitive__namespace.PanelResizeHandle,
   {
     className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center bg-card after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     ),
     ...props,
-    children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { className: "h-2.5 w-2.5" }) })
+    children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { className: "h-2.5 w-2.5" }) })
   }
 );
 var ScrollArea = React36__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2745,7 +2782,7 @@ var ScrollBar = React36__namespace.forwardRef(({ className, orientation = "verti
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-card" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
@@ -3786,7 +3823,7 @@ var Table = React36__namespace.forwardRef(
     "div",
     {
       className: cn(
-        "relative w-full rounded-xl border border-border overflow-auto",
+        "relative w-full rounded-xl bg-background border border-border overflow-auto",
         containerClassName
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(