{shouldShowPrivacyAlert && (
diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
index b6beb4b43..3d1d4219a 100644
--- a/web/src/components/admin/connectors/Field.tsx
+++ b/web/src/components/admin/connectors/Field.tsx
@@ -51,7 +51,7 @@ export function Label({
}) {
return (
diff --git a/web/src/components/ui/CheckField.tsx b/web/src/components/ui/CheckField.tsx
new file mode 100644
index 000000000..d3a62ced4
--- /dev/null
+++ b/web/src/components/ui/CheckField.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { useField } from "formik";
+import { cn } from "@/lib/utils";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface CheckFieldProps {
+ name: string;
+ label: string;
+ sublabel?: string;
+ size?: "sm" | "md" | "lg";
+ tooltip?: string;
+ onChange?: (checked: boolean) => void;
+}
+
+export const CheckFormField: React.FC
= ({
+ name,
+ label,
+ onChange,
+ sublabel,
+ size = "md",
+ tooltip,
+ ...props
+}) => {
+ const [field, , helpers] = useField({ name, type: "checkbox" });
+
+ const sizeClasses = {
+ sm: "h-2 w-2",
+ md: "h-3 w-3",
+ lg: "h-4 w-4",
+ };
+
+ const handleClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ helpers.setValue(!field.value);
+ onChange?.(field.value);
+ };
+
+ const checkboxContent = (
+
+
{
+ helpers.setValue(Boolean(checked));
+ onChange?.(Boolean(checked));
+ }}
+ className={cn(
+ "peer shrink-0 rounded-sm border border-neutral-200 bg-white ring-offset-white " +
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 " +
+ "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " +
+ "data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 " +
+ "dark:border-neutral-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 " +
+ "dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
+ sizeClasses[size]
+ )}
+ {...props}
+ >
+
+
+
+
+
+
+
+
+ );
+
+ return tooltip ? (
+
+
+ {checkboxContent}
+
+ {tooltip}
+
+
+
+ ) : (
+ checkboxContent
+ );
+};
diff --git a/web/src/components/ui/accordion.tsx b/web/src/components/ui/accordion.tsx
new file mode 100644
index 000000000..75ce5ff24
--- /dev/null
+++ b/web/src/components/ui/accordion.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ svg]:rotate-180",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+const AccordionContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };