@powerhousedao/vetra 6.2.0-dev.2 → 6.2.0-dev.21

package/dist/{editor-Dz3cXtzn.js → editor-mor7dV6n.js}

@@ -69,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-gray-50 pr-2 pl-1 text-xs whitespace-nowrap text-stone-300 dark:bg-slate-800",
+		className: "flex h-8 items-center gap-1 rounded-lg bg-background pr-2 pl-1 text-xs whitespace-nowrap text-foreground",
 		onClick: handleCopy,
 		children: [
 			/* @__PURE__ */ jsx(LinkIcon, {
@@ -78,7 +78,7 @@ const DriveInfoItem = ({ label, value }) => {
 			}),
 			label,
 			/* @__PURE__ */ jsx("span", {
-				className: "text-gray-900 dark:text-slate-50",
+				className: "text-foreground",
 				children: value
 			})
 		]
@@ -120,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 dark:text-slate-400",
+			className: "text-xs text-muted-foreground",
 			children: label
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
@@ -132,14 +132,14 @@ const ShareMenuItem = ({ label, url }) => {
 					type: "text",
 					readOnly: true,
 					value: url,
-					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"
+					className: "w-[300px] truncate rounded-lg border border-border bg-background px-3 py-2 text-xs text-foreground underline outline-none placeholder:text-muted-foreground disabled:disabled-effect"
 				}), 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 dark:bg-slate-100 dark:text-slate-900",
+					className: "absolute top-full left-0 z-20 mt-1 max-w-md rounded-lg bg-primary px-3 py-2 text-xs break-all text-primary-foreground shadow-lg",
 					children: url
 				})]
 			}), /* @__PURE__ */ jsx("button", {
 				"aria-label": "Copy URL",
-				className: "rounded-sm p-1 transition-colors hover:bg-gray-100 dark:hover:bg-slate-700",
+				className: "rounded-sm p-1 transition-colors hover:hover-effect",
 				onClick: handleCopy,
 				children: /* @__PURE__ */ jsx(CopyIcon, {
 					width: 16,
@@ -268,7 +268,7 @@ const VetraIcon = ({ width = 23, height = 22, className = "" }) => {
 		height,
 		viewBox: "0 0 23 22",
 		fill: "none",
-		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
+		className: twMerge(className, "text-primary-foreground"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsx("path", {
@@ -334,18 +334,18 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 		}
 	}, [driveUrl]);
 	return /* @__PURE__ */ jsx("div", {
-		className: "bg-gray-50 px-6 py-4 dark:bg-slate-800",
+		className: "bg-background px-6 py-4",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 text-gray-900 dark:text-slate-50",
+				className: "flex items-center gap-2 text-foreground",
 				children: [
 					/* @__PURE__ */ jsx(VetraIcon, {
 						width: 20,
 						height: 20
 					}),
 					/* @__PURE__ */ jsx("h1", {
-						className: "text-lg font-semibold text-gray-900 dark:text-slate-50",
+						className: "text-lg font-semibold text-foreground",
 						children: "Vetra Studio Drive"
 					}),
 					/* @__PURE__ */ jsxs("div", {
@@ -354,12 +354,12 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 						children: [/* @__PURE__ */ jsx("button", {
 							"aria-label": "Drive information",
 							"aria-expanded": isInfoMenuOpen,
-							className: "rounded-full p-1 text-gray-500 transition-colors hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-700",
+							className: "rounded-full p-1 text-muted-foreground transition-colors hover:hover-effect",
 							onClick: toggleInfoMenu,
 							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-gray-50 p-3 shadow-lg dark:bg-slate-700",
+							className: "absolute top-full left-0 z-10 mt-2 flex flex-col items-start gap-2 rounded-lg bg-background p-3 shadow-lg",
 							children: [/* @__PURE__ */ jsx(DriveInfoItem, {
 								label: "Name",
 								value: driveName
@@ -375,7 +375,7 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 						children: [/* @__PURE__ */ jsx("button", {
 							"aria-label": "Share drive",
 							"aria-expanded": isShareMenuOpen,
-							className: "rounded-full p-1 text-gray-900 transition-colors hover:bg-gray-100 dark:text-slate-50 dark:hover:bg-slate-700",
+							className: "rounded-full p-1 text-foreground transition-colors hover:hover-effect",
 							onClick: toggleShareMenu,
 							children: /* @__PURE__ */ jsx(ShareIcon, {
 								width: 16,
@@ -383,7 +383,7 @@ const DriveHeader = ({ driveId, driveName, driveUrl }) => {
 							})
 						}), 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-gray-50 p-4 shadow-lg dark:bg-slate-800",
+							className: "absolute top-full left-0 z-10 mt-2 flex w-max flex-col gap-4 rounded-lg bg-background p-4 shadow-lg",
 							children: [/* @__PURE__ */ jsx(ShareMenuItem, {
 								label: "Copy the Drive URL",
 								url: driveUrl
@@ -398,7 +398,7 @@ 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 dark:text-slate-50 dark:hover:text-slate-200",
+				className: "flex items-center gap-2 text-sm text-foreground underline transition-colors hover:hover-effect",
 				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: 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),
+		className: twMerge("flex items-center justify-between rounded-md bg-background px-3 py-2 text-foreground transition-colors hover:hover-effect", headerClassName),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [
 				/* @__PURE__ */ jsx(ChevronIcon, {
 					width: 12,
 					height: 12,
-					className: twMerge("text-gray-700 transition-transform duration-300 dark:text-slate-200", isOpen ? "rotate-90" : "")
+					className: twMerge("text-foreground transition-transform duration-300", isOpen ? "rotate-90" : "")
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium text-gray-700 dark:text-slate-200",
+					className: "text-sm font-medium text-foreground",
 					children: title
 				}),
 				/* @__PURE__ */ jsx("span", {
-					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",
+					className: "rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground",
 					children: count
 				})
 			]
@@ -518,11 +518,11 @@ const ModuleAccordion = ({ title, count, onAdd, children, defaultOpen = false, c
 				e.stopPropagation();
 				onAdd?.();
 			},
-			className: "rounded-sm p-1 transition-colors hover:bg-gray-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
+			className: "rounded-sm p-1 transition-colors hover:hover-effect",
 			children: /* @__PURE__ */ jsx(PlusIcon, {
 				width: 16,
 				height: 16,
-				className: "text-gray-700 dark:text-slate-200"
+				className: "text-foreground"
 			})
 		})]
 	});
@@ -547,7 +547,7 @@ const AddNewIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className: twMerge(className, "text-gray-900 dark:text-slate-100"),
+		className: twMerge(className, "text-foreground"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsx("g", {
@@ -715,7 +715,7 @@ const AppIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
+		className: twMerge(className, "text-primary-foreground"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
@@ -827,7 +827,7 @@ const DocModelIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
+		className: twMerge(className, "text-primary-foreground"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
@@ -939,7 +939,7 @@ const EditorIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
+		className: twMerge(className, "text-primary-foreground"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
@@ -1072,7 +1072,7 @@ const ProcessorIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
+		className: twMerge(className, "text-primary-foreground"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
@@ -1180,7 +1180,7 @@ const SubgraphIcon = ({ width = 40, height = 48, className = "" }) => {
 		height,
 		viewBox: "0 0 40 42",
 		fill: "none",
-		className: twMerge(className, "text-gray-50 dark:text-slate-800"),
+		className: twMerge(className, "text-primary-foreground"),
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
 			/* @__PURE__ */ jsxs("g", {
@@ -1355,7 +1355,7 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		onClick: () => onClick(fileNode),
-		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),
+		className: twMerge("group flex w-full cursor-pointer items-center gap-3 rounded-md bg-muted p-1 text-left transition-colors hover:hover-effect", 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 dark:text-slate-50",
+					className: "truncate text-sm font-medium text-foreground",
 					children: fileNode.name
 				}), /* @__PURE__ */ jsx("p", {
-					className: "truncate text-xs text-gray-500 dark:text-slate-400",
+					className: "truncate text-xs text-muted-foreground",
 					children: fileNode.documentType
 				})]
 			}),
@@ -1376,7 +1376,7 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 				onItemClick: onDropdownMenuOptionClick,
 				onOpenChange: setIsDropdownMenuOpen,
 				open: isDropdownMenuOpen,
-				menuClassName: "border-gray-200 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+				menuClassName: "border-border",
 				children: /* @__PURE__ */ jsx("button", {
 					className: twMerge("hidden group-hover:block", isDropdownMenuOpen && "block"),
 					onClick: (e) => {
@@ -1384,7 +1384,7 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 						setIsDropdownMenuOpen(true);
 					},
 					children: /* @__PURE__ */ jsx(Icon, {
-						className: "text-gray-700 dark:text-slate-200",
+						className: "text-foreground",
 						name: "VerticalDots"
 					})
 				})
@@ -1397,17 +1397,17 @@ const ModuleItem = ({ fileNode, onClick, onDelete, className = "" }) => {
 const NewModuleItem = ({ title, subtitle, onClick, className = "" }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		onClick,
-		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),
+		className: twMerge("flex w-full items-center gap-3 rounded-md bg-muted p-1 text-left transition-colors hover:hover-effect", 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 dark:text-slate-50",
+				className: "truncate text-sm font-medium text-foreground",
 				children: title
 			}), /* @__PURE__ */ jsx("p", {
-				className: "truncate text-xs text-gray-500 dark:text-slate-400",
+				className: "truncate text-xs text-muted-foreground",
 				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-700 dark:text-slate-200",
+			className: "px-2 py-1 text-sm text-foreground",
 			children: /* @__PURE__ */ jsx(ModuleItem, {
 				fileNode: item,
 				onClick: onClickItem,
 				onDelete
 			})
 		}, index)), /* @__PURE__ */ jsx("div", {
-			className: "px-2 py-1 text-sm text-gray-700 dark:text-slate-200",
+			className: "px-2 py-1 text-sm text-foreground",
 			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 dark:text-slate-200",
+		className: "mb-4 text-sm font-normal text-foreground",
 		children: "3. Data Integrations"
 	}), /* @__PURE__ */ jsxs("div", {
-		className: "rounded-md border border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+		className: "rounded-md border border-border bg-background",
 		children: [
 			/* @__PURE__ */ jsx(ModuleAccordion, {
 				title: "Subgraphs",
 				count: subgraphs.length,
 				onAdd: onAddSubgraph || (() => console.log("Add subgraph clicked")),
 				defaultOpen: true,
-				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",
+				headerClassName: "m-4 rounded-md border border-border bg-muted hover:hover-effect",
 				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-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",
+				headerClassName: "m-4 rounded-md border border-border bg-muted hover:hover-effect",
 				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-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",
+				headerClassName: "m-4 rounded-md border border-border bg-muted hover:hover-effect",
 				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 dark:text-slate-200",
+		className: "mb-4 text-sm font-normal text-foreground",
 		children: "1. Document Models"
 	}), /* @__PURE__ */ jsx("div", {
-		className: "rounded-md border border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+		className: "rounded-md border border-border bg-background",
 		children: /* @__PURE__ */ jsx(ModuleAccordion, {
 			title: "Document Models",
 			count: documentModels.length,
 			onAdd: onAddDocumentModel || (() => console.log("Add document model clicked")),
 			defaultOpen: true,
-			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",
+			headerClassName: "m-4 rounded-md border border-border bg-muted hover:hover-effect",
 			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-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",
+				className: "flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 transition-colors hover:hover-effect",
 				children: [
 					/* @__PURE__ */ jsx(ChevronIcon, {
 						width: 16,
 						height: 16,
-						className: twMerge("text-gray-700 transition-transform duration-300 dark:text-slate-200", isOpen ? "rotate-90" : "")
+						className: twMerge("text-foreground transition-transform duration-300", isOpen ? "rotate-90" : "")
 					}),
 					/* @__PURE__ */ jsx("h2", {
-						className: "text-base font-semibold text-gray-900 dark:text-slate-100",
+						className: "text-base font-semibold text-foreground",
 						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 dark:text-slate-200",
+		className: "mb-4 text-sm font-normal text-foreground",
 		children: "2. User Experiences"
 	}), /* @__PURE__ */ jsxs("div", {
-		className: "rounded-md border border-gray-200 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+		className: "rounded-md border border-border bg-background",
 		children: [/* @__PURE__ */ jsx(ModuleAccordion, {
 			title: "Editors",
 			count: editors.length,
 			onAdd: onAddEditor || (() => console.log("Add editor clicked")),
 			defaultOpen: true,
-			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",
+			headerClassName: "m-4 rounded-md border border-border bg-muted hover:hover-effect",
 			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-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",
+			headerClassName: "m-4 rounded-md border border-border bg-muted hover:hover-effect",
 			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-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",
+		className: "my-2 h-50 w-full rounded-md border border-dashed border-border bg-background",
 		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 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",
+			className: "flex items-center justify-center rounded-sm bg-background p-1 text-foreground transition-colors hover:hover-effect",
 			"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-[''] dark:bg-slate-800 dark:after:bg-blue-400",
+		className: "bg-background p-6 after:pointer-events-none after:absolute after:inset-0 after:bg-info after:opacity-0 after:transition after:content-['']",
 		children: /* @__PURE__ */ jsx(DriveExplorer, {
 			driveId,
 			driveName,
@@ -1769,4 +1769,4 @@ function Editor(props) {
 //#endregion
 export { BaseEditor, Editor as default };
 
-//# sourceMappingURL=editor-Dz3cXtzn.js.map
+//# sourceMappingURL=editor-mor7dV6n.js.map