fix form builder dark mode (#20474)

packages/features/form-builder/Components.tsx

@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AddressInput } from "@calcom/ui/components/address";
 import { InfoBadge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { Label, CheckboxField, EmailField, InputField } from "@calcom/ui/components/form";
+import { Label, CheckboxField, EmailField, InputField, Checkbox } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { RadioGroup, RadioField } from "@calcom/ui/components/radio";
 import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -334,17 +334,15 @@ export const Components: Record<FieldType, Component> = {
           {options.map((option, i) => {
             return (
               <label key={i} className="block">
-                <input
-                  type="checkbox"
+                <Checkbox
                   disabled={readOnly}
-                  onChange={(e) => {
+                  onCheckedChange={(checked) => {
                     const newValue = value.filter((v) => v !== option.value);
-                    if (e.target.checked) {
+                    if (checked) {
                       newValue.push(option.value);
                     }
                     setValue(newValue);
                   }}
-                  className="border-default dark:border-default hover:bg-subtle checked:hover:bg-brand-default checked:bg-brand-default dark:checked:bg-brand-default dark:hover:bg-subtle dark:checked:hover:bg-brand-default h-4 w-4 cursor-pointer rounded transition ltr:mr-2 rtl:ml-2"
                   value={option.value}
                   checked={value.includes(option.value)}
                 />

packages/features/form-builder/FormBuilder.tsx

@@ -365,7 +365,7 @@ function Options({
     <div className={className}>
       <Label>{label}</Label>
       <div className="bg-muted rounded-md p-4">
-        <ul ref={animationRef}>
+        <ul ref={animationRef} className="flex flex-col gap-1">
           {value?.map((option, index) => (
             <li key={index}>
               <div className="flex items-center">