@powerhousedao/vetra 6.1.0-dev.13 → 6.1.0-dev.14

package/dist/{editor-CLERZjRS.js → editor-fvDig5Bd.js}

@@ -1,8 +1,9 @@
 import { addDocument, setSelectedNode, showCreateDocumentModal, showDeleteNodeModal, useDocumentModelModules, useEditorModuleById, usePHToast, useSelectedDrive, useSetPHAppConfig } from "@powerhousedao/reactor-browser";
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConnectDropdownMenu, DefaultEditorLoader, fileNodeDropdownOptions } from "@powerhousedao/design-system/connect";
-import { Icon, cn } from "@powerhousedao/design-system";
+import { Icon } from "@powerhousedao/design-system";
 //#region editors/vetra-drive-app/config.ts
 const editorConfig = {
 	allowedDocumentTypes: [
@@ -68,7 +69,7 @@ const DriveInfoItem = ({ label, value }) => {
 	};
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-label": `Copy ${label}`,
-		className: "flex h-8 items-center gap-1 rounded-lg bg-slate-50 pr-2 pl-1 text-xs whitespace-nowrap text-stone-300",
+		className: "flex h-8 items-center gap-1 rounded-lg bg-gray-50 pr-2 pl-1 text-xs whitespace-nowrap text-stone-300 dark:bg-slate-800",
 		onClick: handleCopy,
 		children: [
 			/* @__PURE__ */ jsx(LinkIcon, {
@@ -77,7 +78,7 @@ const DriveInfoItem = ({ label, value }) => {
 			}),
 			label,
 			/* @__PURE__ */ jsx("span", {
-				className: "text-gray-900",
+				className: "text-gray-900 dark:text-slate-50",
 				children: value
 			})
 		]
@@ -119,7 +120,7 @@ const ShareMenuItem = ({ label, url }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-1",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-xs text-gray-500",
+			className: "text-xs text-gray-500 dark:text-slate-400",
 			children: label
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
@@ -131,14 +132,14 @@ const ShareMenuItem = ({ label, url }) => {
 					type: "text",
 					readOnly: true,
 					value: url,
-					className: "w-[300px] truncate rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-800 underline outline-none"
+					className: "w-[300px] truncate rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-900 underline outline-none placeholder:text-gray-700 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:placeholder:text-slate-200"
 				}), showTooltip && /* @__PURE__ */ jsx("div", {
-					className: "absolute top-full left-0 z-20 mt-1 max-w-md rounded-lg bg-gray-800 px-3 py-2 text-xs break-all text-white shadow-lg",
+					className: "absolute top-full left-0 z-20 mt-1 max-w-md rounded-lg bg-gray-800 px-3 py-2 text-xs break-all text-white shadow-lg dark:bg-slate-100 dark:text-slate-900",
 					children: url
 				})]
 			}), /* @__PURE__ */ jsx("button", {
 				"aria-label": "Copy URL",
-				className: "rounded-sm p-1 transition-colors hover:bg-gray-100",
+				className: "rounded-sm p-1 transition-colors hover:bg-gray-100 dark:hover:bg-slate-700",
 				onClick: handleCopy,
 				children: /* @__PURE__ */ jsx(CopyIcon, {
 					width: 16,
@@ -151,12 +152,12 @@ const ShareMenuItem = ({ label, url }) => {
 };
 //#endregion
 //#region editors/vetra-drive-app/icons/InfoIcon.tsx
-const InfoIcon = ({ width = 16, height = 16, className = "", fill = "none", stroke = "#343839" }) => {
+const InfoIcon = ({ width = 16, height = 16, className = "" }) => {
 	return /* @__PURE__ */ jsxs("svg", {
 		width,
 		height,
 		viewBox: "0 0 16 16",
-		fill,
+		fill: "none",
 		className,
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [/* @__PURE__ */ jsxs("g", {
@@ -164,21 +165,21 @@ const InfoIcon = ({ width = 16, height = 16, className = "", fill = "none", stro
 			children: [
 				/* @__PURE__ */ jsx("path", {
 					d: "M7.99999 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 7.99999 1.33398C4.3181 1.33398 1.33333 4.31875 1.33333 8.00065C1.33333 11.6825 4.3181 14.6673 7.99999 14.6673Z",
-					stroke,
+					stroke: "currentColor",
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round"
 				}),
 				/* @__PURE__ */ jsx("path", {
 					d: "M8 10.6667V8",
-					stroke,
+					stroke: "currentColor",
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round"
 				}),
 				/* @__PURE__ */ jsx("path", {
 					d: "M8 5.33398H8.00833",
-					stroke,
+					stroke: "currentColor",
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round"
@@ -196,7 +197,7 @@ const InfoIcon = ({ width = 16, height = 16, className = "", fill = "none", stro
 };
 //#endregion
 //#region editors/vetra-drive-app/icons/ExternalLinkIcon.tsx
-const ExternalLinkIcon = ({ width = 16, height = 16, className = "", fill = "#8391A7" }) => {
+const ExternalLinkIcon = ({ width = 16, height = 16, className = "" }) => {
 	return /* @__PURE__ */ jsx("svg", {
 		width,
 		height,
@@ -206,7 +207,7 @@ const ExternalLinkIcon = ({ width = 16, height = 16, className = "", fill = "#83
 		xmlns: "http://www.w3.org/2000/svg",
 		children: /* @__PURE__ */ jsx("path", {
 			d: "M8.73535 4L7.28711 5.53809H4.05469C3.6549 5.53813 3.33109 5.88285 3.33105 6.30762V11.6924C3.33109 12.1172 3.6549 12.4619 4.05469 12.4619H9.12305C9.52269 12.4617 9.84664 12.117 9.84668 11.6924V8.25781L11.2949 6.71973V11.6924C11.2949 12.9667 10.3224 13.9998 9.12305 14H4.05469C2.85521 14 1.88285 12.9669 1.88281 11.6924V6.30762C1.88285 5.03318 2.85521 4.00004 4.05469 4H8.73535ZM13.7266 2C13.9431 2 14.1191 2.16789 14.1191 2.375V5.59473C14.1191 5.92879 13.6963 6.0956 13.4492 5.85938L12.3203 4.78027L6.0459 10.7803C5.7396 11.0731 5.24282 11.0731 4.93652 10.7803C4.63043 10.4874 4.63042 10.0126 4.93652 9.71973L11.2109 3.71973L10.082 2.64062C9.83504 2.40445 10.0102 2.00022 10.3594 2H13.7266Z",
-			fill
+			fill: "currentColor"
 		})
 	});
 };
@@ -261,30 +262,30 @@ const ShareIcon = ({ width = 16, height = 16, className = "", stroke = "currentC
 };
 //#endregion
 //#region editors/vetra-drive-app/icons/VetraIcon.tsx
-const VetraIcon = ({ width = 23, height = 22, className = "", fill = "#343839" }) => {
+const VetraIcon = ({ width = 23, height = 22, className = "" }) => {
 	return /* @__PURE__ */ jsxs("svg", {
 		width,
 		height,
 		viewBox: "0 0 23 22",
 		fill: "none",
-		className,
+		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsx("path", {
 				d: "M23 8.75169C23 9.6137 22.2916 10.3125 21.4177 10.3125L20.457 10.3125C16.0876 10.3125 12.5455 6.8185 12.5455 2.50844L12.5455 1.56081C12.5455 0.698798 13.2539 1.13218e-07 14.1278 1.88577e-07L21.4177 8.17224e-07C22.2916 8.92583e-07 23 0.6988 23 1.56081L23 8.75169Z",
-				fill
+				fill: "currentColor"
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M14.1278 22C13.2539 22 12.5455 21.3012 12.5455 20.4392L12.5455 19.4916C12.5455 15.1815 16.0876 11.6875 20.457 11.6875L21.4177 11.6875C22.2916 11.6875 23 12.3863 23 13.2483L23 20.4392C23 21.3012 22.2916 22 21.4177 22L14.1278 22Z",
-				fill
+				fill: "currentColor"
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M0 13.2483C0 12.3863 0.708424 11.6875 1.58231 11.6875H2.543C6.91243 11.6875 10.4545 15.1815 10.4545 19.4916V20.4392C10.4545 21.3012 9.74612 22 8.87224 22H1.58231C0.708423 22 0 21.3012 0 20.4392L0 13.2483Z",
-				fill
+				fill: "currentColor"
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M8.87224 -6.82252e-08C9.74612 -3.05454e-08 10.4545 0.698799 10.4545 1.56081L10.4545 2.50845C10.4545 6.81851 6.91242 10.3125 2.543 10.3125L1.58231 10.3125C0.708423 10.3125 5.27658e-07 9.6137 5.65857e-07 8.75169L8.84509e-07 1.56081C9.22708e-07 0.698798 0.708425 -4.20228e-07 1.58231 -3.82548e-07L8.87224 -6.82252e-08Z",
-				fill
+				fill: "currentColor"
 			})
 		]
 	});
@@ -333,18 +334,18 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 		}
 	}, [driveUrl]);
 	return /* @__PURE__ */ jsx("div", {
-		className: "bg-gray-50 px-6 py-4",
+		className: "bg-gray-50 px-6 py-4 dark:bg-slate-800",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
+				className: "flex items-center gap-2 text-gray-900 dark:text-slate-50",
 				children: [
 					/* @__PURE__ */ jsx(VetraIcon, {
 						width: 20,
 						height: 20
 					}),
 					/* @__PURE__ */ jsx("h1", {
-						className: "text-lg font-semibold text-gray-900",
+						className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
 						children: "Vetra Studio Drive"
 					}),
 					/* @__PURE__ */ jsxs("div", {
@@ -353,12 +354,12 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 						children: [/* @__PURE__ */ jsx("button", {
 							"aria-label": "Drive information",
 							"aria-expanded": isInfoMenuOpen,
-							className: "rounded-full p-1 transition-colors hover:bg-gray-100",
+							className: "rounded-full p-1 text-gray-500 transition-colors hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-700",
 							onClick: toggleInfoMenu,
-							children: /* @__PURE__ */ jsx(InfoIcon, { className: "text-gray-500" })
+							children: /* @__PURE__ */ jsx(InfoIcon, { className: "" })
 						}), isInfoMenuOpen && /* @__PURE__ */ jsxs("div", {
 							role: "menu",
-							className: "absolute top-full left-0 z-10 mt-2 flex flex-col items-start gap-2 rounded-lg bg-white p-3 shadow-lg",
+							className: "absolute top-full left-0 z-10 mt-2 flex flex-col items-start gap-2 rounded-lg bg-gray-50 p-3 shadow-lg dark:bg-slate-700",
 							children: [/* @__PURE__ */ jsx(DriveInfoItem, {
 								label: "Name",
 								value: driveName
@@ -374,16 +375,15 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 						children: [/* @__PURE__ */ jsx("button", {
 							"aria-label": "Share drive",
 							"aria-expanded": isShareMenuOpen,
-							className: "rounded-full p-1 transition-colors hover:bg-gray-100",
+							className: "rounded-full p-1 text-gray-900 transition-colors hover:bg-gray-100 dark:text-slate-50 dark:hover:bg-slate-700",
 							onClick: toggleShareMenu,
 							children: /* @__PURE__ */ jsx(ShareIcon, {
 								width: 16,
-								height: 16,
-								stroke: "#343839"
+								height: 16
 							})
 						}), isShareMenuOpen && /* @__PURE__ */ jsxs("div", {
 							role: "menu",
-							className: "absolute top-full left-0 z-10 mt-2 flex w-max flex-col gap-4 rounded-lg bg-white p-4 shadow-lg",
+							className: "absolute top-full left-0 z-10 mt-2 flex w-max flex-col gap-4 rounded-lg bg-gray-50 p-4 shadow-lg dark:bg-slate-800",
 							children: [/* @__PURE__ */ jsx(ShareMenuItem, {
 								label: "Copy the Drive URL",
 								url: driveUrl
@@ -398,8 +398,8 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 				href: "https://academy.vetra.io/",
 				target: "_blank",
 				rel: "noopener noreferrer",
-				className: "flex items-center gap-2 text-sm text-gray-900 underline transition-colors hover:text-gray-700",
-				children: [/* @__PURE__ */ jsx(ExternalLinkIcon, { fill: "#111827" }), "Vetra Academy"]
+				className: "flex items-center gap-2 text-sm text-gray-900 underline transition-colors hover:text-gray-700 dark:text-slate-50 dark:hover:text-slate-200",
+				children: [/* @__PURE__ */ jsx(ExternalLinkIcon, {}), "Vetra Academy"]
 			})]
 		})
 	});
@@ -495,21 +495,21 @@ const Accordion = ({ isOpen, onToggle, header, children, className = "" }) => {
 const ModuleAccordion = ({ title, count, onAdd, children, defaultOpen = false, className = "", headerClassName = "" }) => {
 	const [isOpen, setIsOpen] = useState(defaultOpen);
 	const header = /* @__PURE__ */ jsxs("div", {
-		className: `flex items-center justify-between rounded-md px-3 py-2 transition-colors hover:bg-gray-50 ${headerClassName}`,
+		className: twMerge("flex items-center justify-between rounded-md bg-gray-50 px-3 py-2 text-gray-900 transition-colors hover:bg-gray-50 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800", headerClassName),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [
 				/* @__PURE__ */ jsx(ChevronIcon, {
 					width: 12,
 					height: 12,
-					className: `text-gray-600 transition-transform duration-300 ${isOpen ? "rotate-90" : ""}`
+					className: twMerge("text-gray-700 transition-transform duration-300 dark:text-slate-200", isOpen ? "rotate-90" : "")
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium text-gray-700",
+					className: "text-sm font-medium text-gray-700 dark:text-slate-200",
 					children: title
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600",
+					className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-slate-700 dark:text-slate-200",
 					children: count
 				})
 			]
@@ -518,16 +518,16 @@ const ModuleAccordion = ({ title, count, onAdd, children, defaultOpen = false, c
 				e.stopPropagation();
 				onAdd?.();
 			},
-			className: "rounded-sm p-1 transition-colors hover:bg-gray-200",
+			className: "rounded-sm p-1 transition-colors hover:bg-gray-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
 			children: /* @__PURE__ */ jsx(PlusIcon, {
 				width: 16,
 				height: 16,
-				className: "text-gray-600"
+				className: "text-gray-700 dark:text-slate-200"
 			})
 		})]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: `mb-2 ${className}`,
+		className: twMerge("mb-2", className),
 		children: /* @__PURE__ */ jsx(Accordion, {
 			isOpen,
 			onToggle: () => setIsOpen(!isOpen),
@@ -547,26 +547,26 @@ const AddNewIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className,
+		className: twMerge(className, "text-gray-900 dark:text-slate-100"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsx("g", {
 				filter: "url(#filter0_di_2184_4955)",
 				children: /* @__PURE__ */ jsx("path", {
 					d: "M4.7384 6.83572C4.7384 3.48006 7.38337 0.759766 10.6461 0.759766H29.3538C32.6165 0.759766 35.2615 3.48006 35.2615 6.83572V33.1648C35.2615 36.5205 32.6165 39.2408 29.3538 39.2408H10.6461C7.38337 39.2408 4.7384 36.5205 4.7384 33.1648V6.83572Z",
-					fill: "#F3F5F7"
+					fill: "none"
 				})
 			}),
 			/* @__PURE__ */ jsx("g", {
 				filter: "url(#filter1_di_2184_4955)",
 				children: /* @__PURE__ */ jsx("path", {
 					d: "M9.97019 38.4365C10.1911 38.4661 10.4167 38.481 10.6462 38.481H11.426C11.8337 38.4812 12.1644 38.8212 12.1644 39.2405C12.1644 39.6599 11.8337 39.9998 11.426 40H10.6462C10.3526 40 10.063 39.9808 9.77885 39.9426C9.37459 39.8883 9.08971 39.507 9.14231 39.0912C9.19506 38.6752 9.56578 38.3823 9.97019 38.4365ZM16.1029 38.481C16.5106 38.4812 16.8413 38.8212 16.8413 39.2405C16.8413 39.6599 16.5106 39.9998 16.1029 40H14.5433C14.1356 39.9998 13.8048 39.6599 13.8048 39.2405C13.8048 38.8212 14.1356 38.4812 14.5433 38.481H16.1029ZM20.7798 38.481C21.1875 38.4812 21.5183 38.8212 21.5183 39.2405C21.5183 39.6599 21.1875 39.9998 20.7798 40H19.2202C18.8125 39.9998 18.4817 39.6599 18.4817 39.2405C18.4817 38.8212 18.8125 38.4812 19.2202 38.481H20.7798ZM25.4567 38.481C25.8644 38.4812 26.1952 38.8212 26.1952 39.2405C26.1952 39.6599 25.8644 39.9998 25.4567 40H23.8971C23.4894 39.9998 23.1587 39.6599 23.1587 39.2405C23.1587 38.8212 23.4894 38.4812 23.8971 38.481H25.4567ZM30.0298 38.4365C30.4342 38.3823 30.8049 38.6752 30.8577 39.0912C30.9103 39.507 30.6254 39.8883 30.2212 39.9426C29.937 39.9808 29.6474 40 29.3538 40H28.574C28.1663 39.9998 27.8356 39.6599 27.8356 39.2405C27.8356 38.8212 28.1663 38.4812 28.574 38.481H29.3538C29.5833 38.481 29.8089 38.4661 30.0298 38.4365ZM5.50865 36.2609C5.83191 36.0054 6.29565 36.0681 6.54423 36.4003C6.81962 36.7689 7.14163 37.1001 7.5 37.3833C7.82304 37.639 7.88398 38.1159 7.63558 38.4484C7.38716 38.7808 6.92335 38.843 6.6 38.5878C6.13985 38.2241 5.72668 37.7992 5.37308 37.326C5.12492 36.9934 5.18544 36.5164 5.50865 36.2609ZM33.4558 36.4003C33.7044 36.0681 34.1681 36.0054 34.4913 36.2609C34.8146 36.5164 34.8751 36.9934 34.6269 37.326C34.2733 37.7992 33.8601 38.2241 33.4 38.5878C33.0766 38.843 32.6128 38.7808 32.3644 38.4484C32.116 38.1159 32.177 37.639 32.5 37.3833C32.8584 37.1001 33.1804 36.7689 33.4558 36.4003ZM4 33.1646V32.4328C4.00023 32.0135 4.33076 31.6733 4.73846 31.6733C5.14616 31.6733 5.47669 32.0135 5.47692 32.4328V33.1646C5.47692 33.4005 5.49139 33.6326 5.52019 33.8598C5.57294 34.2757 5.28807 34.657 4.88365 34.7112C4.47938 34.7653 4.10858 34.4723 4.05577 34.0566C4.01871 33.7644 4 33.4665 4 33.1646ZM34.5231 33.1646V32.4328C34.5233 32.0135 34.8538 31.6733 35.2615 31.6733C35.6692 31.6733 35.9998 32.0135 36 32.4328V33.1646C36 33.4665 35.9813 33.7644 35.9442 34.0566C35.8914 34.4723 35.5206 34.7653 35.1163 34.7112C34.7119 34.657 34.4271 34.2757 34.4798 33.8598C34.5086 33.6326 34.5231 33.4005 34.5231 33.1646ZM4 29.5075V28.0449C4.00006 27.6255 4.33066 27.2854 4.73846 27.2854C5.14627 27.2854 5.47686 27.6255 5.47692 28.0449V29.5075C5.47692 29.927 5.1463 30.267 4.73846 30.267C4.33062 30.267 4 29.927 4 29.5075ZM34.5231 29.5075V28.0449C34.5231 27.6255 34.8537 27.2854 35.2615 27.2854C35.6693 27.2854 35.9999 27.6255 36 28.0449V29.5075C36 29.927 35.6694 30.267 35.2615 30.267C34.8537 30.267 34.5231 29.927 34.5231 29.5075ZM4 25.1197V23.657C4 23.2376 4.33062 22.8975 4.73846 22.8975C5.1463 22.8975 5.47692 23.2376 5.47692 23.657V25.1197C5.47686 25.5391 5.14627 25.8792 4.73846 25.8792C4.33066 25.8792 4.00006 25.5391 4 25.1197ZM34.5231 25.1197V23.657C34.5231 23.2376 34.8537 22.8975 35.2615 22.8975C35.6694 22.8975 36 23.2376 36 23.657V25.1197C35.9999 25.5391 35.6693 25.8792 35.2615 25.8792C34.8537 25.8792 34.5231 25.5391 34.5231 25.1197ZM4 20.7318V19.2682C4.00023 18.8489 4.33076 18.5087 4.73846 18.5087C5.14616 18.5087 5.47669 18.8489 5.47692 19.2682V20.7318C5.47669 21.1511 5.14616 21.4913 4.73846 21.4913C4.33076 21.4913 4.00023 21.1511 4 20.7318ZM34.5231 20.7318V19.2682C34.5233 18.8489 34.8538 18.5087 35.2615 18.5087C35.6692 18.5087 35.9998 18.8489 36 19.2682V20.7318C35.9998 21.1511 35.6692 21.4913 35.2615 21.4913C34.8538 21.4913 34.5233 21.1511 34.5231 20.7318ZM4 16.343V14.8803C4.00006 14.4609 4.33066 14.1208 4.73846 14.1208C5.14627 14.1208 5.47687 14.4609 5.47692 14.8803V16.343C5.47692 16.7624 5.1463 17.1025 4.73846 17.1025C4.33062 17.1025 4 16.7624 4 16.343ZM34.5231 16.343V14.8803C34.5231 14.4609 34.8537 14.1208 35.2615 14.1208C35.6693 14.1208 35.9999 14.4609 36 14.8803V16.343C36 16.7624 35.6694 17.1025 35.2615 17.1025C34.8537 17.1025 34.5231 16.7624 34.5231 16.343ZM4 11.9551V10.4925C4 10.073 4.33062 9.73299 4.73846 9.73299C5.1463 9.73299 5.47692 10.073 5.47692 10.4925V11.9551C5.47687 12.3745 5.14627 12.7146 4.73846 12.7146C4.33066 12.7146 4.00006 12.3745 4 11.9551ZM34.5231 11.9551V10.4925C34.5231 10.073 34.8537 9.73299 35.2615 9.73299C35.6694 9.73299 36 10.073 36 10.4925V11.9551C35.9999 12.3745 35.6693 12.7146 35.2615 12.7146C34.8537 12.7146 34.5231 12.3745 34.5231 11.9551ZM4 7.56725V6.83544C4 6.53354 4.01871 6.23565 4.05577 5.94343C4.10858 5.52766 4.47938 5.23467 4.88365 5.28877C5.28807 5.34302 5.57294 5.7243 5.52019 6.14023C5.49139 6.36741 5.47692 6.59948 5.47692 6.83544V7.56725C5.47669 7.9865 5.14616 8.32674 4.73846 8.32674C4.33076 8.32674 4.00023 7.9865 4 7.56725ZM34.5231 7.56725V6.83544C34.5231 6.59948 34.5086 6.36741 34.4798 6.14023C34.4271 5.7243 34.7119 5.34302 35.1163 5.28877C35.5206 5.23467 35.8914 5.52766 35.9442 5.94343C35.9813 6.23565 36 6.53354 36 6.83544V7.56725C35.9998 7.9865 35.6692 8.32674 35.2615 8.32674C34.8538 8.32674 34.5233 7.9865 34.5231 7.56725ZM6.6 1.41218C6.92335 1.15696 7.38716 1.2192 7.63558 1.55162C7.88398 1.88408 7.82304 2.36103 7.5 2.61669C7.14163 2.89993 6.81962 3.23111 6.54423 3.59968C6.29565 3.93193 5.83191 3.9946 5.50865 3.73912C5.18544 3.48363 5.12492 3.00661 5.37308 2.67405C5.72668 2.2008 6.13985 1.77586 6.6 1.41218ZM32.3644 1.55162C32.6128 1.2192 33.0766 1.15696 33.4 1.41218C33.8601 1.77586 34.2733 2.2008 34.6269 2.67405C34.8751 3.00661 34.8146 3.48363 34.4913 3.73912C34.1681 3.9946 33.7044 3.93193 33.4558 3.59968C33.1804 3.23111 32.8584 2.89993 32.5 2.61669C32.177 2.36103 32.116 1.88408 32.3644 1.55162ZM11.426 0C11.8337 0.000178509 12.1644 0.340147 12.1644 0.759494C12.1644 1.17884 11.8337 1.51881 11.426 1.51899H10.6462C10.4167 1.51899 10.1911 1.53386 9.97019 1.56349C9.56578 1.61774 9.19506 1.32475 9.14231 0.908821C9.08971 0.493037 9.37459 0.111671 9.77885 0.0573576C10.063 0.0192405 10.3526 0 10.6462 0H11.426ZM29.3538 0C29.6474 0 29.937 0.0192406 30.2212 0.0573576C30.6254 0.111671 30.9103 0.493038 30.8577 0.908821C30.8049 1.32475 30.4342 1.61774 30.0298 1.56349C29.8089 1.53386 29.5833 1.51899 29.3538 1.51899H28.574C28.1663 1.51881 27.8356 1.17884 27.8356 0.759494C27.8356 0.340147 28.1663 0.000178083 28.574 0H29.3538ZM16.1029 0C16.5106 0.000178509 16.8413 0.340147 16.8413 0.759494C16.8413 1.17884 16.5106 1.51881 16.1029 1.51899H14.5433C14.1356 1.51881 13.8048 1.17884 13.8048 0.759494C13.8048 0.340147 14.1356 0.000177889 14.5433 0H16.1029ZM20.7798 0C21.1875 0.000178509 21.5183 0.340147 21.5183 0.759494C21.5183 1.17884 21.1875 1.51881 20.7798 1.51899H19.2202C18.8125 1.51881 18.4817 1.17884 18.4817 0.759494C18.4817 0.340147 18.8125 0.000177889 19.2202 0H20.7798ZM25.4567 0C25.8644 0.000178199 26.1952 0.340147 26.1952 0.759494C26.1952 1.17884 25.8644 1.51881 25.4567 1.51899H23.8971C23.4894 1.51881 23.1587 1.17884 23.1587 0.759494C23.1587 0.340147 23.4894 0.000177889 23.8971 0H25.4567Z",
-					fill: "#404446"
+					fill: "currentColor"
 				})
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M14.5846 18.9851H24.4307M19.5079 13.9238V24.0504",
-				stroke: "#404446",
+				stroke: "currentColor",
 				strokeWidth: "1.5",
 				strokeLinecap: "round",
 				strokeLinejoin: "round"
@@ -715,14 +715,14 @@ const AppIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className,
+		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
 				filter: "url(#filter0_di_2184_4446)",
 				children: [/* @__PURE__ */ jsx("path", {
 					d: "M0 6C0 2.68629 2.68629 0 6 0L24 0L32 8V34C32 37.3137 29.3137 40 26 40H6C2.68629 40 0 37.3137 0 34V6Z",
-					fill: "#F3F5F7"
+					fill: "currentColor"
 				}), /* @__PURE__ */ jsx("path", {
 					d: "M6 0.75H23.6895L31.25 8.31055V34C31.25 36.8995 28.8995 39.25 26 39.25H6C3.10051 39.25 0.75 36.8995 0.75 34V6C0.75 3.10051 3.10051 0.75 6 0.75Z",
 					stroke: "#FF891D",
@@ -827,14 +827,14 @@ const DocModelIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className,
+		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
 				filter: "url(#filter0_di_2102_4407)",
 				children: [/* @__PURE__ */ jsx("path", {
 					d: "M4 6C4 2.68629 6.68629 0 10 0L28 0L36 8V34C36 37.3137 33.3137 40 30 40H10C6.68629 40 4 37.3137 4 34V6Z",
-					fill: "#F3F5F7"
+					fill: "currentColor"
 				}), /* @__PURE__ */ jsx("path", {
 					d: "M10 0.75H27.6895L35.25 8.31055V34C35.25 36.8995 32.8995 39.25 30 39.25H10C7.10051 39.25 4.75 36.8995 4.75 34V6C4.75 3.10051 7.10051 0.75 10 0.75Z",
 					stroke: "#FF6A55",
@@ -939,14 +939,14 @@ const EditorIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className,
+		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
 				filter: "url(#filter0_di_2102_4406)",
 				children: [/* @__PURE__ */ jsx("path", {
 					d: "M4 6C4 2.68629 6.68629 0 10 0L28 0L36 8V34C36 37.3137 33.3137 40 30 40H10C6.68629 40 4 37.3137 4 34V6Z",
-					fill: "#F3F5F7"
+					fill: "currentColor"
 				}), /* @__PURE__ */ jsx("path", {
 					d: "M10 0.75H27.6895L35.25 8.31055V34C35.25 36.8995 32.8995 39.25 30 39.25H10C7.10051 39.25 4.75 36.8995 4.75 34V6C4.75 3.10051 7.10051 0.75 10 0.75Z",
 					stroke: "#FF891D",
@@ -1072,14 +1072,14 @@ const ProcessorIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className,
+		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
 				filter: "url(#filter0_di_2184_4836)",
 				children: [/* @__PURE__ */ jsx("path", {
 					d: "M0 6C0 2.68629 2.68629 0 6 0L24 0L32 8V34C32 37.3137 29.3137 40 26 40H6C2.68629 40 0 37.3137 0 34V6Z",
-					fill: "#F3F5F7"
+					fill: "currentColor"
 				}), /* @__PURE__ */ jsx("path", {
 					d: "M6 0.75H23.6895L31.25 8.31055V34C31.25 36.8995 28.8995 39.25 26 39.25H6C3.10051 39.25 0.75 36.8995 0.75 34V6C0.75 3.10051 3.10051 0.75 6 0.75Z",
 					stroke: "#3292ED",
@@ -1180,14 +1180,14 @@ const SubgraphIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className,
+		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
 				filter: "url(#filter0_di_2184_4816)",
 				children: [/* @__PURE__ */ jsx("path", {
 					d: "M0 6C0 2.68629 2.68629 0 6 0L24 0L32 8V34C32 37.3137 29.3137 40 26 40H6C2.68629 40 0 37.3137 0 34V6Z",
-					fill: "#F3F5F7"
+					fill: "currentColor"
 				}), /* @__PURE__ */ jsx("path", {
 					d: "M6 0.75H23.6895L31.25 8.31055V34C31.25 36.8995 28.8995 39.25 26 39.25H6C3.10051 39.25 0.75 36.8995 0.75 34V6C0.75 3.10051 3.10051 0.75 6 0.75Z",
 					stroke: "#3292ED",
@@ -1355,7 +1355,7 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		onClick: () => onClick(fileNode),
-		className: cn("group flex w-full cursor-pointer items-center gap-3 rounded-md bg-zinc-100 p-1 text-left transition-colors hover:bg-zinc-200", className),
+		className: twMerge("group flex w-full cursor-pointer items-center gap-3 rounded-md bg-gray-100 p-1 text-left transition-colors hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:text-slate-100", className),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "shrink-0",
@@ -1364,10 +1364,10 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "truncate text-sm font-medium text-gray-900",
+					className: "truncate text-sm font-medium text-gray-900 dark:text-slate-50",
 					children: fileNode.name
 				}), /* @__PURE__ */ jsx("p", {
-					className: "truncate text-xs text-gray-500",
+					className: "truncate text-xs text-gray-500 dark:text-slate-400",
 					children: fileNode.documentType
 				})]
 			}),
@@ -1376,15 +1376,15 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 				onItemClick: onDropdownMenuOptionClick,
 				onOpenChange: setIsDropdownMenuOpen,
 				open: isDropdownMenuOpen,
-				menuClassName: "border-zinc-200",
+				menuClassName: "border-gray-200 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
 				children: /* @__PURE__ */ jsx("button", {
-					className: cn("hidden group-hover:block", isDropdownMenuOpen && "block"),
+					className: twMerge("hidden group-hover:block", isDropdownMenuOpen && "block"),
 					onClick: (e) => {
 						e.stopPropagation();
 						setIsDropdownMenuOpen(true);
 					},
 					children: /* @__PURE__ */ jsx(Icon, {
-						className: "text-gray-600",
+						className: "text-gray-700 dark:text-slate-200",
 						name: "VerticalDots"
 					})
 				})
@@ -1397,17 +1397,17 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 const NewModuleItem = ({ title, subtitle, onClick, className = "" }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		onClick,
-		className: `flex w-full items-center gap-3 rounded-md bg-zinc-100 p-1 text-left transition-colors hover:bg-zinc-200 ${className}`,
+		className: twMerge("flex w-full items-center gap-3 rounded-md bg-gray-100 p-1 text-left transition-colors hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:text-slate-100", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "shrink-0",
 			children: /* @__PURE__ */ jsx(AddNewIcon, {})
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ jsx("h3", {
-				className: "truncate text-sm font-medium text-gray-900",
+				className: "truncate text-sm font-medium text-gray-900 dark:text-slate-50",
 				children: title
 			}), /* @__PURE__ */ jsx("p", {
-				className: "truncate text-xs text-gray-500",
+				className: "truncate text-xs text-gray-500 dark:text-slate-400",
 				children: subtitle
 			})]
 		})]
@@ -1419,14 +1419,14 @@ const ModuleList = ({ items, documentType, onAddNewSpec = () => {}, onClickItem
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-2",
 		children: [items.map((item, index) => /* @__PURE__ */ jsx("div", {
-			className: "px-2 py-1 text-sm text-gray-600",
+			className: "px-2 py-1 text-sm text-gray-700 dark:text-slate-200",
 			children: /* @__PURE__ */ jsx(ModuleItem, {
 				fileNode: item,
 				onClick: onClickItem,
 				onDelete
 			})
 		}, index)), /* @__PURE__ */ jsx("div", {
-			className: "px-2 py-1 text-sm text-gray-600",
+			className: "px-2 py-1 text-sm text-gray-700 dark:text-slate-200",
 			children: /* @__PURE__ */ jsx(NewModuleItem, {
 				title: "Add new specification",
 				subtitle: documentType,
@@ -1439,17 +1439,17 @@ const ModuleList = ({ items, documentType, onAddNewSpec = () => {}, onClickItem
 //#region editors/vetra-drive-app/components/DataIntegrationsColumn.tsx
 const DataIntegrationsColumn = ({ subgraphs, processors, codegenProcessors, onAddSubgraph, onAddProcessor, onAddCodegenProcessor, onOpenDocument, onDelete }) => {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-		className: "mb-4 text-sm font-normal text-gray-700",
+		className: "mb-4 text-sm font-normal text-gray-700 dark:text-slate-200",
 		children: "3. Data Integrations"
 	}), /* @__PURE__ */ jsxs("div", {
-		className: "rounded-md border border-zinc-200 bg-zinc-50",
+		className: "rounded-md border border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
 		children: [
 			/* @__PURE__ */ jsx(ModuleAccordion, {
 				title: "Subgraphs",
 				count: subgraphs.length,
 				onAdd: onAddSubgraph || (() => console.log("Add subgraph clicked")),
 				defaultOpen: true,
-				headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md",
+				headerClassName: "m-4 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-md dark:hover:bg-slate-600 dark:border-slate-500 dark:bg-slate-600 dark:hover:text-slate-100 dark:text-slate-100",
 				children: /* @__PURE__ */ jsx(ModuleList, {
 					items: subgraphs,
 					documentType: DOCUMENT_TYPES.documentSubgraph,
@@ -1463,7 +1463,7 @@ const DataIntegrationsColumn = ({ subgraphs, processors, codegenProcessors, onAd
 				count: processors.length,
 				onAdd: onAddProcessor || (() => console.log("Add processor clicked")),
 				defaultOpen: true,
-				headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md",
+				headerClassName: "m-4 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-md dark:hover:bg-slate-600 dark:border-slate-500 dark:bg-slate-600 dark:hover:text-slate-100 dark:text-slate-100",
 				children: /* @__PURE__ */ jsx(ModuleList, {
 					items: processors,
 					documentType: DOCUMENT_TYPES.documentProcessor,
@@ -1477,7 +1477,7 @@ const DataIntegrationsColumn = ({ subgraphs, processors, codegenProcessors, onAd
 				count: codegenProcessors.length,
 				onAdd: onAddCodegenProcessor || (() => console.log("Add codegen processor clicked")),
 				defaultOpen: true,
-				headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md",
+				headerClassName: "m-4 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-md dark:hover:bg-slate-600 dark:border-slate-500 dark:bg-slate-600 dark:hover:text-slate-100 dark:text-slate-100",
 				children: /* @__PURE__ */ jsx(ModuleList, {
 					items: codegenProcessors,
 					documentType: DOCUMENT_TYPES.documentCodegenProcessor,
@@ -1493,16 +1493,16 @@ const DataIntegrationsColumn = ({ subgraphs, processors, codegenProcessors, onAd
 //#region editors/vetra-drive-app/components/DocumentModelsColumn.tsx
 const DocumentModelsColumn = ({ documentModels, onAddDocumentModel, onOpenDocument, onDelete }) => {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-		className: "mb-4 text-sm font-normal text-gray-700",
+		className: "mb-4 text-sm font-normal text-gray-700 dark:text-slate-200",
 		children: "1. Document Models"
 	}), /* @__PURE__ */ jsx("div", {
-		className: "rounded-md border border-zinc-200 bg-zinc-50",
+		className: "rounded-md border border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
 		children: /* @__PURE__ */ jsx(ModuleAccordion, {
 			title: "Document Models",
 			count: documentModels.length,
 			onAdd: onAddDocumentModel || (() => console.log("Add document model clicked")),
 			defaultOpen: true,
-			headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md",
+			headerClassName: "m-4 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-md dark:hover:bg-slate-600 dark:border-slate-500 dark:bg-slate-600 dark:hover:text-slate-100 dark:text-slate-100",
 			children: /* @__PURE__ */ jsx(ModuleList, {
 				items: documentModels,
 				documentType: DOCUMENT_TYPES.documentModel,
@@ -1523,15 +1523,15 @@ const SectionAccordion = ({ title, children, defaultOpen = false, className = ""
 			isOpen,
 			onToggle: () => setIsOpen(!isOpen),
 			header: /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 px-4 py-2 transition-colors hover:bg-zinc-100",
+				className: "flex items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-4 py-2 transition-colors hover:bg-gray-100 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:bg-slate-700",
 				children: [
 					/* @__PURE__ */ jsx(ChevronIcon, {
 						width: 16,
 						height: 16,
-						className: `text-gray-600 transition-transform duration-300 ${isOpen ? "rotate-90" : ""}`
+						className: twMerge("text-gray-700 transition-transform duration-300 dark:text-slate-200", isOpen ? "rotate-90" : "")
 					}),
 					/* @__PURE__ */ jsx("h2", {
-						className: "text-base font-semibold text-gray-800",
+						className: "text-base font-semibold text-gray-900 dark:text-slate-100",
 						children: title
 					}),
 					actionButton && /* @__PURE__ */ jsx("div", {
@@ -1551,16 +1551,16 @@ const SectionAccordion = ({ title, children, defaultOpen = false, className = ""
 //#region editors/vetra-drive-app/components/UserExperiencesColumn.tsx
 const UserExperiencesColumn = ({ editors, apps, onAddEditor, onAddApp, onOpenDocument, onDelete }) => {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-		className: "mb-4 text-sm font-normal text-gray-700",
+		className: "mb-4 text-sm font-normal text-gray-700 dark:text-slate-200",
 		children: "2. User Experiences"
 	}), /* @__PURE__ */ jsxs("div", {
-		className: "rounded-md border border-zinc-200 bg-zinc-50",
+		className: "rounded-md border border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
 		children: [/* @__PURE__ */ jsx(ModuleAccordion, {
 			title: "Editors",
 			count: editors.length,
 			onAdd: onAddEditor || (() => console.log("Add editor clicked")),
 			defaultOpen: true,
-			headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md",
+			headerClassName: "m-4 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-md dark:hover:bg-slate-600 dark:border-slate-500 dark:bg-slate-600 dark:hover:text-slate-100 dark:text-slate-100",
 			children: /* @__PURE__ */ jsx(ModuleList, {
 				items: editors,
 				documentType: DOCUMENT_TYPES.documentEditor,
@@ -1573,7 +1573,7 @@ const UserExperiencesColumn = ({ editors, apps, onAddEditor, onAddApp, onOpenDoc
 			count: apps.length,
 			onAdd: onAddApp || (() => console.log("Add app clicked")),
 			defaultOpen: true,
-			headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md",
+			headerClassName: "m-4 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-md dark:hover:bg-slate-600 dark:border-slate-500 dark:bg-slate-600 dark:hover:text-slate-100 dark:text-slate-100",
 			children: /* @__PURE__ */ jsx(ModuleList, {
 				items: apps,
 				documentType: DOCUMENT_TYPES.documentApp,
@@ -1644,7 +1644,7 @@ const EditorContainer = (props) => {
 //#region editors/vetra-drive-app/components/PackageInformationSection.tsx
 const PackageInformationSection = ({ className, packageDocumentId, onAddPackageDocument, onOpenPackageDocument }) => {
 	const createpackageContent = /* @__PURE__ */ jsx("button", {
-		className: "my-2 h-[200px] w-full rounded-md border border-dashed border-zinc-200 bg-zinc-50",
+		className: "my-2 h-50 w-full rounded-md border border-dashed border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
 		onClick: onAddPackageDocument,
 		children: "Click to create package manifest"
 	});
@@ -1657,7 +1657,7 @@ const PackageInformationSection = ({ className, packageDocumentId, onAddPackageD
 				e.stopPropagation();
 				onOpenPackageDocument();
 			},
-			className: "flex items-center justify-center rounded-sm p-1 text-gray-600 transition-colors hover:bg-zinc-200 hover:text-gray-800",
+			className: "flex items-center justify-center rounded-sm bg-gray-50 p-1 text-gray-700 transition-colors hover:bg-gray-200 hover:text-gray-800 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
 			"aria-label": "Open package document",
 			children: /* @__PURE__ */ jsx(Icon, {
 				name: "Moved",
@@ -1737,7 +1737,7 @@ function BaseEditor(props) {
 	}, [packageNode]);
 	return !!children ? children : /* @__PURE__ */ jsx("div", {
 		style: { height: "100%" },
-		className: "bg-gray-50 p-6 after:pointer-events-none after:absolute after:inset-0 after:bg-blue-500 after:opacity-0 after:transition after:content-['']",
+		className: "bg-gray-50 p-6 after:pointer-events-none after:absolute after:inset-0 after:bg-blue-500 after:opacity-0 after:transition after:content-[''] dark:bg-slate-800 dark:after:bg-blue-400",
 		children: /* @__PURE__ */ jsx(DriveExplorer, {
 			driveId,
 			driveName,
@@ -1769,4 +1769,4 @@ function Editor(props) {
 //#endregion
 export { BaseEditor, Editor as default };
 
-//# sourceMappingURL=editor-CLERZjRS.js.map
+//# sourceMappingURL=editor-fvDig5Bd.js.map