@upstash/react-redis-browser 0.2.6 → 0.2.7-canary-2

package/dist/index.js

@@ -1,6 +1,24 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/databrowser/index.tsx
 var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react);
 
+// src/dark-mode-context.tsx
+
+var _jsxruntime = require('react/jsx-runtime');
+var DarkModeContext = _react.createContext.call(void 0, void 0);
+var DarkModeProvider = ({
+  children,
+  darkMode
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeContext.Provider, { value: { darkMode }, children });
+};
+var useDarkMode = () => {
+  const context = _react.useContext.call(void 0, DarkModeContext);
+  if (!context) {
+    throw new Error("useDarkMode must be used within a DarkModeProvider");
+  }
+  return context.darkMode;
+};
+
 // src/redis-context.tsx
 
 
@@ -181,7 +199,7 @@ var queryClient = new (0, _reactquery.QueryClient)({
 });
 
 // src/redis-context.tsx
-var _jsxruntime = require('react/jsx-runtime');
+
 var RedisContext = _react.createContext.call(void 0, void 0);
 var RedisProvider = ({
   children,
@@ -497,6 +515,22 @@ var useTab = () => {
 var _reacttooltip = require('@radix-ui/react-tooltip'); var TooltipPrimitive = _interopRequireWildcard(_reacttooltip);
 
 
+// src/lib/portal-root.ts
+var root;
+var wrapper;
+if (typeof document !== "undefined") {
+  const id = "react-redis-browser-portal-root";
+  wrapper = _nullishCoalesce(document.querySelector(`#${id}`), () => ( document.createElement("div")));
+  wrapper.classList.add("ups-db");
+  wrapper.id = "react-redis-browser-portal-root";
+  root = document.createElement("div");
+  root.classList.add("text-zinc-700");
+  wrapper.append(root);
+  document.body.append(wrapper);
+}
+var portalRoot = root;
+var portalWrapper = wrapper;
+
 // src/components/databrowser/components/databrowser-instance.tsx
 var _reactresizablepanels = require('react-resizable-panels');
 
@@ -3013,17 +3047,6 @@ var isTest = typeof window !== "undefined" && window.__PLAYWRIGHT__ === true;
 // src/components/ui/toaster.tsx
 var _reactportal = require('@radix-ui/react-portal');
 
-// src/lib/portal-root.ts
-var root;
-if (typeof document !== "undefined") {
-  const id = "react-redis-browser-portal-root";
-  root = _nullishCoalesce(document.querySelector(`#${id}`), () => ( document.createElement("div")));
-  root.classList.add("ups-db");
-  root.id = "react-redis-browser-portal-root";
-  document.body.append(root);
-}
-var portalRoot = root;
-
 // src/components/ui/toast.tsx
 
 var _reacticons = require('@radix-ui/react-icons');
@@ -3102,12 +3125,12 @@ var ToastViewport = React2.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 var toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-zinc-800",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: "border bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50",
-        destructive: "destructive group border-red-500 bg-red-500 text-zinc-50 dark:border-red-900 dark:bg-red-900 dark:text-zinc-50"
+        default: "border bg-white text-zinc-950",
+        destructive: "destructive group border-red-500 bg-red-500 text-zinc-50"
       }
     },
     defaultVariants: {
@@ -3131,7 +3154,7 @@ var ToastAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:focus:ring-neutral-300 dark:group-[.destructive]:border-neutral-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-neutral-50 dark:group-[.destructive]:focus:ring-red-900",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500",
       className
     ),
     ...props
@@ -3143,7 +3166,7 @@ var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "absolute right-1 top-1 rounded-md p-1 text-neutral-950/50 opacity-0 transition-opacity hover:text-neutral-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-neutral-50/50 dark:hover:text-neutral-50",
+      "absolute right-1 top-1 rounded-md p-1 text-zinc-950/50 opacity-0 transition-opacity hover:text-zinc-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     ),
     "toast-close": "",
@@ -3314,17 +3337,17 @@ var _iconsreact = require('@tabler/icons-react');
 var _reactslot = require('@radix-ui/react-slot');
 
 var buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-[#FFFFFF]/70 dark:bg-black dark:text-[#FFFFFF] dark:hover:bg-black/10",
-        destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
-        outline: "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
-        primary: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-600",
-        secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost: "hover:bg-[#0000000A] dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50"
+        default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-white/70",
+        destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
+        outline: "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900",
+        primary: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600",
+        secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80",
+        ghost: "hover:bg-black/10",
+        link: "text-zinc-900 underline-offset-4 hover:underline"
       },
       size: {
         default: "h-8 px-4 py-2",
@@ -3358,13 +3381,7 @@ Button.displayName = "Button";
 // src/components/ui/skeleton.tsx
 
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      className: cn("animate-pulse rounded-md bg-zinc-900/10 dark:bg-zinc-50/10", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
 }
 
 // src/components/databrowser/components/sidebar/db-size.tsx
@@ -3838,7 +3855,7 @@ var Input = React4.forwardRef(
       {
         type,
         className: cn(
-          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white  file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -3862,7 +3879,7 @@ var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffse
     align,
     sideOffset,
     className: cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 mt-0.5 dark:bg-zinc-950 dark:text-zinc-50",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none mt-0.5",
       className
     ),
     ...props
@@ -3882,7 +3899,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
+      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2  text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
@@ -3900,9 +3917,9 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
             "path",
             {
               d: "M4 6L8 10L12 6",
-              stroke: "black",
+              stroke: "currentColor",
               strokeOpacity: "0.4",
-              strokeWidth: "1.4",
+              strokeWidth: "1.2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
             }
@@ -3918,7 +3935,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       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
     ),
@@ -3951,7 +3968,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -3985,7 +4002,7 @@ var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
+    className: cn("-mx-1 my-1 h-px bg-zinc-100", className),
     ...props
   }
 ));
@@ -4010,7 +4027,7 @@ var Spinner = ({
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "2",
+        strokeWidth: "1.2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
         className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
@@ -4237,7 +4254,7 @@ var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-900",
       inset && "pl-8",
       className
     ),
@@ -4254,7 +4271,7 @@ var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -4266,7 +4283,7 @@ var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -4278,7 +4295,7 @@ var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -4291,7 +4308,7 @@ var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -4308,7 +4325,7 @@ var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props },
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -4323,11 +4340,7 @@ var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) =
   ContextMenuPrimitive.Label,
   {
     ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold text-neutral-950 dark:text-neutral-50",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("px-2 py-1.5 text-sm font-semibold text-zinc-950", inset && "pl-8", className),
     ...props
   }
 ));
@@ -4336,22 +4349,13 @@ var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    className: cn("-mx-1 my-1 h-px bg-zinc-200", className),
     ...props
   }
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      ),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
@@ -4367,7 +4371,7 @@ var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /*
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-white/80 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 dark:bg-zinc-950/80",
+      "fixed inset-0 z-50 bg-white/80 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,
@@ -4382,7 +4386,7 @@ var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /*
     {
       ref,
       className: cn(
-        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 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%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
+        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=open]:slide-in-from-top-[48%]sm:rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 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 md:w-full",
         className
       ),
       ...props
@@ -4413,7 +4417,7 @@ var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) =>
   AlertDialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
+    className: cn("text-sm text-zinc-500", className),
     ...props
   }
 ));
@@ -4457,7 +4461,7 @@ function DeleteAlertDialog({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           AlertDialogAction,
           {
-            className: "bg-red-500 text-gray-50 hover:bg-red-600",
+            className: "bg-red-500 text-zinc-50 hover:bg-red-600",
             onClick: onDeleteConfirm,
             children: "Yes, Delete"
           }
@@ -4630,7 +4634,7 @@ var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
-        className: cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")
+        className: cn("relative flex-1 rounded-full bg-zinc-200/70")
       }
     )
   }
@@ -4715,13 +4719,13 @@ var DATA_TYPE_NAMES = {
 
 
 var iconsMap = {
-  string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.3 }),
-  set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.3 }),
-  hash: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconHash, { size: 15, stroke: 1.3 }),
-  json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.3 }),
-  zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.3 }),
-  list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.3 }),
-  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.3 })
+  string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.2 }),
+  set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.2 }),
+  hash: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconHash, { size: 15, stroke: 1.2 }),
+  json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.2 }),
+  zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.2 }),
+  list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 }),
+  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 })
 };
 var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -4763,7 +4767,7 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "data-[state=open]:bg-zinc-100[&_svg]:pointer-events-none flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     ),
@@ -4780,7 +4784,7 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -4793,7 +4797,7 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md",
       "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -4806,7 +4810,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
       inset && "pl-8",
       className
     ),
@@ -4819,7 +4823,7 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -4836,7 +4840,7 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -4860,7 +4864,7 @@ var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
+    className: cn("-mx-1 my-1 h-px bg-zinc-100", className),
     ...props
   }
 ));
@@ -4960,7 +4964,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 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 dark:bg-zinc-50 dark:text-zinc-900",
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 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
@@ -5124,6 +5128,7 @@ var CustomEditor = ({
   const { active } = useTab();
   const monaco = _react2.useMonaco.call(void 0, );
   const editorRef = _react.useRef.call(void 0, );
+  const theme = useDarkMode();
   _react.useEffect.call(void 0, () => {
     if (!active || !monaco || !editorRef.current) {
       return;
@@ -5133,6 +5138,7 @@ var CustomEditor = ({
   const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Editor,
     {
+      theme: theme === "dark" ? "vs-dark" : "light",
       loading: void 0,
       onMount: (editor2) => {
         editorRef.current = editor2;
@@ -5164,8 +5170,10 @@ var CustomEditor = ({
         automaticLayout: true,
         scrollBeyondLastLine: false,
         renderLineHighlight: "none",
-        unusualLineTerminators: "auto"
-      }
+        unusualLineTerminators: "auto",
+        padding: { top: 0, bottom: 0 }
+      },
+      className: "[&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent"
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -5558,7 +5566,7 @@ var EditorDisplayForm = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-1", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : selector }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md border border-zinc-300 bg-white p-1", children: editor })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md border border-zinc-300 bg-white p-1 dark:!bg-[#192321]", children: editor })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex gap-2", children: [
       form.formState.isDirty && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleCancel, children: "Cancel" }),
@@ -5583,7 +5591,7 @@ var DataDisplay = () => {
   const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/sidebar/index.tsx
@@ -5639,7 +5647,7 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "svg",
             {
@@ -5690,7 +5698,7 @@ var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
+    className: cn("text-sm text-zinc-500", className),
     ...props
   }
 ));
@@ -6025,7 +6033,7 @@ var SearchInput = () => {
         type: "button",
         variant: "link",
         size: "icon",
-        className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
+        className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900",
         onClick: () => {
           setSearchKey("");
           setState("");
@@ -6087,7 +6095,7 @@ function Sidebar() {
             Button,
             {
               "aria-label": "Refresh",
-              className: "h-7 w-7 px-0",
+              className: "h-7 w-7 px-0 text-zinc-500",
               onClick: () => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -6169,7 +6177,7 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-zinc-950",
       className
     ),
     ...props
@@ -6183,7 +6191,7 @@ var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
     {
       ref,
       className: cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -6200,21 +6208,14 @@ var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = _cmdk.Command.List.displayName;
-var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _cmdk.Command.Empty,
-  {
-    ref,
-    className: "py-6 text-center text-sm",
-    ...props
-  }
-));
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = _cmdk.Command.Empty.displayName;
 var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   _cmdk.Command.Group,
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-neutral-950 [&_[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-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
+      "text-zinc-950[&_[cmdk-group-heading]]:px-2 overflow-hidden p-1 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500",
       className
     ),
     ...props
@@ -6225,7 +6226,7 @@ var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @
   _cmdk.Command.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    className: cn("-mx-1 h-px bg-zinc-200", className),
     ...props
   }
 ));
@@ -6235,27 +6236,15 @@ var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50",
+      "data-[disabled=true]:opacity-50[&_svg]:pointer-events-none relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 [&_svg]:size-4 [&_svg]:shrink-0",
       className
     ),
     ...props
   }
 ));
 CommandItem.displayName = _cmdk.Command.Item.displayName;
-var CommandShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      ),
-      ...props
-    }
-  );
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
@@ -6697,25 +6686,40 @@ var RedisBrowser = ({
   token,
   url,
   hideTabs,
-  storage
+  storage,
+  darkMode = "light"
 }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
   const rootRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      className: "ups-db",
-      style: { height: "100%", display: "flex", flexDirection: "column" },
-      ref: rootRef,
-      children: [
-        !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
-      ]
-    }
-  ) }) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { darkMode, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisBrowserRoot, { hideTabs, rootRef }) }) }) }) }) });
+};
+var RedisBrowserRoot = ({
+  hideTabs,
+  rootRef
+}) => {
+  const theme = useDarkMode();
+  _react.useEffect.call(void 0, () => {
+    portalWrapper.classList.add("text-zinc-700");
+    portalWrapper.classList.toggle("dark", theme === "dark");
+  }, [theme]);
+  return (
+    /* ups-db is the custom class used to prefix every style in the css bundle */
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: `ups-db ${theme === "dark" ? "dark" : ""}`,
+        style: { height: "100%", display: "flex", flexDirection: "column" },
+        ref: rootRef,
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-zinc-700", children: [
+          !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
+        ] })
+      }
+    )
+  );
 };
 var DatabrowserInstances = () => {
   const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore();