Created a new system for the Groups that will persist after having entities

src/components/Low/Checkbox.tsx

@@ -5,7 +5,7 @@ import {BsCheck} from "react-icons/bs";
 interface Props {
 	isChecked: boolean;
 	onChange: (isChecked: boolean) => void;
-	children: ReactNode;
+	children?: ReactNode;
 	disabled?: boolean;
 }
 

src/components/Low/Separator.tsx

@@ -0,0 +1,3 @@
+const Separator = () => <div className="w-full h-[1px] bg-mti-gray-platinum rounded-full" />;
+
+export default Separator;

src/components/Low/Tooltip.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import {ReactNode} from "react";
+
+interface Props {
+	tooltip: string;
+	disabled?: boolean;
+	className?: string;
+	children: ReactNode;
+}
+
+export default function Tooltip({tooltip, disabled = false, className, children}: Props) {
+	return (
+		<div className={clsx(!disabled && "tooltip", className)} data-tip={tooltip}>
+			{children}
+		</div>
+	);
+}