@simple-builder/react 1.0.8 → 1.0.10

package/dist/{build-container-client-TRHCXW7W.mjs → build-container-client-WS5CHAV7.mjs}

@@ -1,13 +1,13 @@
 'use client';
-import './chunk-EFA2EAPD.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-4Z4JII4A.mjs';
-import { cn, tv, DesignWrapper, builder, Image, spacing } from './chunk-S3NVED5S.mjs';
-import * as React15 from 'react';
-import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon } from 'lucide-react';
+import './chunk-BP6PJZIZ.mjs';
+import { buttonVariants, Button, useBuilder } from './chunk-2PY5SZFT.mjs';
+import { cn, tv, DesignWrapper, builder, Image } from './chunk-LEULOM72.mjs';
+import * as React11 from 'react';
+import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { format } from 'date-fns';
-import { useFormContext, useForm, FormProvider, Controller } from 'react-hook-form';
+import { useFormContext, useForm, useFieldArray, FormProvider, Controller } from 'react-hook-form';
 import { DayPicker } from 'react-day-picker';
 import { Slot } from '@radix-ui/react-slot';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -16,11 +16,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var AlertDialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -32,7 +33,7 @@ var AlertDialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(AlertDialogPortal, null, /* @__PURE__ */ React15.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React15.createElement(
+var AlertDialogContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(AlertDialogPortal, null, /* @__PURE__ */ React11.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React11.createElement(
   AlertDialogPrimitive.Content,
   {
     ref,
@@ -47,7 +48,7 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ React15.createElement(
+}) => /* @__PURE__ */ React11.createElement(
   "div",
   {
     className: cn(
@@ -58,7 +59,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var AlertDialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -67,7 +68,7 @@ var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var AlertDialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -76,7 +77,7 @@ var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var AlertDialogAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -85,7 +86,7 @@ var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var AlertDialogCancel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -101,7 +102,7 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React15.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React15.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React15.createElement(
+var PopoverContent = React11.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React11.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React11.createElement(
   PopoverPrimitive.Content,
   {
     ref,
@@ -121,7 +122,7 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }) {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DayPicker,
     {
       showOutsideDays,
@@ -161,8 +162,8 @@ function Calendar({
         ...classNames
       },
       components: {
-        IconLeft: () => /* @__PURE__ */ React15.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
-        IconRight: () => /* @__PURE__ */ React15.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
+        IconLeft: () => /* @__PURE__ */ React11.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
+        IconRight: () => /* @__PURE__ */ React11.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
       },
       ...props
     }
@@ -182,7 +183,7 @@ var ColorPicker = (props) => {
     "#009DD1",
     "#FF0000"
   ];
-  return /* @__PURE__ */ React15.createElement(Popover, null, /* @__PURE__ */ React15.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
     Button,
     {
       variant: "outline",
@@ -193,14 +194,14 @@ var ColorPicker = (props) => {
         className
       )
     },
-    /* @__PURE__ */ React15.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React11.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React11.createElement(
       "div",
       {
         className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
         style: { background: color }
       }
-    ) : /* @__PURE__ */ React15.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
-  )), /* @__PURE__ */ React15.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React15.createElement(
+    ) : /* @__PURE__ */ React11.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React11.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
+  )), /* @__PURE__ */ React11.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React11.createElement(
     "div",
     {
       key: s,
@@ -213,7 +214,7 @@ var ColorPicker = (props) => {
 var labelVariants = tv({
   base: "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
 });
-var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var Label = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   LabelPrimitive.Root,
   {
     ref,
@@ -225,17 +226,17 @@ Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/ui/form.tsx
 var Form = FormProvider;
-var FormFieldContext = React15.createContext(
+var FormFieldContext = React11.createContext(
   {}
 );
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ React15.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React15.createElement(Controller, { ...props }));
+  return /* @__PURE__ */ React11.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React11.createElement(Controller, { ...props }));
 };
 var useFormField = () => {
-  const fieldContext = React15.useContext(FormFieldContext);
-  const itemContext = React15.useContext(FormItemContext);
+  const fieldContext = React11.useContext(FormFieldContext);
+  const itemContext = React11.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
@@ -251,17 +252,17 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React15.createContext(
+var FormItemContext = React11.createContext(
   {}
 );
-var FormItem = React15.forwardRef(({ className, ...props }, ref) => {
-  const id = React15.useId();
-  return /* @__PURE__ */ React15.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React15.createElement("div", { ref, className: cn("sb-space-y-2", className), ...props }));
+var FormItem = React11.forwardRef(({ className, ...props }, ref) => {
+  const id = React11.useId();
+  return /* @__PURE__ */ React11.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React11.createElement("div", { ref, className: cn("sb-space-y-2", className), ...props }));
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React15.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React11.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Label,
     {
       ref,
@@ -272,9 +273,9 @@ var FormLabel = React15.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React15.forwardRef(({ ...props }, ref) => {
+var FormControl = React11.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Slot,
     {
       ref,
@@ -286,9 +287,9 @@ var FormControl = React15.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React15.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React11.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "p",
     {
       ref,
@@ -302,13 +303,13 @@ var FormDescription = React15.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React15.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React11.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
     return null;
   }
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "p",
     {
       ref,
@@ -323,9 +324,9 @@ var FormMessage = React15.forwardRef(({ className, children, ...props }, ref) =>
   );
 });
 FormMessage.displayName = "FormMessage";
-var Input = React15.forwardRef(
+var Input = React11.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React11.createElement(
       "input",
       {
         type,
@@ -340,19 +341,19 @@ var Input = React15.forwardRef(
   }
 );
 Input.displayName = "Input";
-var AdvancedInput = React15.forwardRef(
+var AdvancedInput = React11.forwardRef(
   ({ prepend, append, ...props }, ref) => {
-    return /* @__PURE__ */ React15.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React15.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React15.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React15.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
+    return /* @__PURE__ */ React11.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React11.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React11.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React11.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
   }
 );
 AdvancedInput.displayName = "AdvancedInput";
 var MediaInput = (props) => {
   const { onFilesChange, limit = 32, multiple = false, onError } = props;
-  const id = React15.useId();
-  const [queue, setQueue] = React15.useState([]);
-  const [sources, setSources] = React15.useState(props.files ?? []);
+  const id = React11.useId();
+  const [queue, setQueue] = React11.useState([]);
+  const [sources, setSources] = React11.useState(props.files ?? []);
   const maxConcurrentUploads = 3;
-  const uploadingCountRef = React15.useRef(0);
+  const uploadingCountRef = React11.useRef(0);
   const handleFilesAdd = async (e) => {
     const files = e.target.files;
     if (!files || files.length === 0) {
@@ -423,7 +424,7 @@ var MediaInput = (props) => {
       body: JSON.stringify({ src })
     });
   };
-  return /* @__PURE__ */ React15.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React15.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React11.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React11.createElement(
     Image,
     {
       src,
@@ -431,14 +432,14 @@ var MediaInput = (props) => {
       fill: true,
       className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
     }
-  ), /* @__PURE__ */ React15.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React11.createElement(
     "button",
     {
       className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
       onClick: () => handleSourceDelete(src)
     },
-    /* @__PURE__ */ React15.createElement(Trash2Icon, { className: "sb-h-4 sb-w-4" })
-  )))), queue.map((_, i) => /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React11.createElement(Trash2Icon, { className: "sb-h-4 sb-w-4" })
+  )))), queue.map((_, i) => /* @__PURE__ */ React11.createElement(
     MediaInputItem,
     {
       key: i,
@@ -447,8 +448,8 @@ var MediaInput = (props) => {
         props.itemClassName
       )
     },
-    /* @__PURE__ */ React15.createElement(Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
-  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React11.createElement(Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
+  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React11.createElement(
     "label",
     {
       htmlFor: id,
@@ -457,8 +458,8 @@ var MediaInput = (props) => {
         props.itemClassName
       )
     },
-    /* @__PURE__ */ React15.createElement(PlusIcon, { className: "sb-h-6 sb-w-6" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React11.createElement(PlusIcon, { className: "sb-h-6 sb-w-6" }),
+    /* @__PURE__ */ React11.createElement(
       "input",
       {
         id,
@@ -472,7 +473,7 @@ var MediaInput = (props) => {
   ) : null);
 };
 var MediaInputItem = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: cn(
@@ -492,7 +493,7 @@ var MediaInputError = class extends Error {
     this.description = description;
   }
 };
-var Switch = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var Switch = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -502,7 +503,7 @@ var Switch = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ...props,
     ref
   },
-  /* @__PURE__ */ React15.createElement(
+  /* @__PURE__ */ React11.createElement(
     SwitchPrimitives.Thumb,
     {
       className: cn(
@@ -512,9 +513,9 @@ var Switch = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   )
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
-var Textarea = React15.forwardRef(
+var Textarea = React11.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React11.createElement(
       "textarea",
       {
         className: cn(
@@ -553,35 +554,133 @@ var ContainerItemForm = (props) => {
       props: values
     });
   };
-  React15.useEffect(() => {
+  React11.useEffect(() => {
     const subscription = form.watch(() => form.handleSubmit(onSubmit)());
     return () => subscription.unsubscribe();
   }, [form.watch, form.handleSubmit]);
-  return /* @__PURE__ */ React15.createElement(Form, { ...form }, /* @__PURE__ */ React15.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React15.createElement(
-    FormField,
+  return /* @__PURE__ */ React11.createElement(Form, { ...form }, /* @__PURE__ */ React11.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React11.createElement(
+    RenderFormField,
     {
       key: input.name,
-      control: form.control,
-      name: input.name,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(RenderInput, { type: input.type, input, field })
+      type: input.type,
+      input,
+      form
     }
   )))));
 };
+var RenderFormField = (props) => {
+  const { type, input, form } = props;
+  const fieldArray = useFieldArray({
+    control: form.control,
+    name: input.name
+  });
+  if (input.multiple) {
+    return /* @__PURE__ */ React11.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
+      (field, i) => type !== "grouped" ? /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: field.id,
+          control: form.control,
+          name: `${input.name}.${i}`,
+          render: ({ field: field2 }) => /* @__PURE__ */ React11.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React11.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React11.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React11.createElement(XIcon, { className: "sb-h-4 sb-w-4" })))
+        }
+      ) : /* @__PURE__ */ React11.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React11.createElement(
+        RenderFormField,
+        {
+          key: field.id,
+          form,
+          type,
+          input: {
+            ...input,
+            name: `${input.name}.${i}`,
+            multiple: false,
+            friendlyName: ""
+          }
+        }
+      ), /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => fieldArray.remove(i),
+          className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
+        },
+        /* @__PURE__ */ React11.createElement(XIcon, { className: "sb-h-4 sb-w-4" })
+      ))
+    ), /* @__PURE__ */ React11.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: cn(
+          "sb-w-[89%] sb-border-2 sb-border-dashed sb-text-muted-foreground",
+          type === "grouped" && "sb-w-full"
+        ),
+        onClick: () => fieldArray.append(void 0)
+      },
+      /* @__PURE__ */ React11.createElement(PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
+    )));
+  }
+  switch (type) {
+    case "string":
+    case "number":
+    case "longText":
+    case "richText":
+    case "color":
+    case "date":
+    case "file":
+      return /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null))
+        }
+      );
+    case "grouped":
+      return /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React11.createElement(
+        RenderFormField,
+        {
+          key: `${input.name}.${sub.name}`,
+          type: sub.type,
+          input: {
+            ...sub,
+            name: `${input.name}.${sub.name}`
+          },
+          form
+        }
+      ))));
+    default:
+      throw new Error(
+        `[simple-builder]: Input type "${props.type}" not supported in render form field.`
+      );
+  }
+};
 var RenderInput = (props) => {
-  const { type, input, field } = props;
+  const { type, field } = props;
   switch (type) {
     case "string":
-      return /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Input, { ...field });
     case "longText":
-      return /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
     case "richText":
-      return /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Textarea, { ...field });
     case "number":
-      return /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Input, { type: "number", ...field });
     case "color":
-      return /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
     case "date":
-      return /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(Popover, null, /* @__PURE__ */ React15.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15.createElement(
+      return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
         Button,
         {
           variant: "outline",
@@ -591,9 +690,9 @@ var RenderInput = (props) => {
             !field.value && "sb-text-muted-foreground"
           )
         },
-        /* @__PURE__ */ React15.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
-        field.value ? format(field.value, "PPP") : /* @__PURE__ */ React15.createElement("span", null, "Pick a date")
-      )), /* @__PURE__ */ React15.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ React11.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+        field.value ? format(field.value, "PPP") : /* @__PURE__ */ React11.createElement("span", null, "Pick a date")
+      )), /* @__PURE__ */ React11.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React11.createElement(
         Calendar,
         {
           mode: "single",
@@ -601,11 +700,11 @@ var RenderInput = (props) => {
           onSelect: field.onChange,
           initialFocus: true
         }
-      )))), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      )));
     case "boolean":
-      return /* @__PURE__ */ React15.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
     case "file":
-      return /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
+      return /* @__PURE__ */ React11.createElement(
         MediaInput,
         {
           className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -617,10 +716,10 @@ var RenderInput = (props) => {
             "media-input: Error: " + e?.description
           )
         }
-      )), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      );
     default:
       throw new Error(
-        `[simple-builder]: Input type "${props.type}" not supported`
+        `[simple-builder]: Input type "${props.type}" not supported in render input.`
       );
   }
 };
@@ -636,7 +735,7 @@ var tabsListVariants = tv({
     variant: "contained"
   }
 });
-var TabsList = React15.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var TabsList = React11.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   TabsPrimitive.List,
   {
     ref,
@@ -656,7 +755,7 @@ var tabsTriggerVariants = tv({
     variant: "contained"
   }
 });
-var TabsTrigger = React15.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var TabsTrigger = React11.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -665,7 +764,7 @@ var TabsTrigger = React15.forwardRef(({ variant, className, ...props }, ref) =>
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -700,14 +799,14 @@ var BackgroundPicker = (props) => {
     "url(https://images.unsplash.com/photo-1688822863426-8c5f9b257090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)",
     "url(https://images.unsplash.com/photo-1691225850735-6e4e51834cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)"
   ];
-  const defaultTab = React15.useMemo(() => {
+  const defaultTab = React11.useMemo(() => {
     if (background.includes("url"))
       return "image";
     if (background.includes("gradient"))
       return "gradient";
     return "solid";
   }, [background]);
-  return /* @__PURE__ */ React15.createElement(Popover, null, /* @__PURE__ */ React15.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
     Button,
     {
       variant: "outline",
@@ -718,20 +817,20 @@ var BackgroundPicker = (props) => {
         className
       )
     },
-    /* @__PURE__ */ React15.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React11.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React11.createElement(
       "div",
       {
         className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
         style: { background }
       }
-    ) : /* @__PURE__ */ React15.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
-  )), /* @__PURE__ */ React15.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React15.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React15.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React15.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React15.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React15.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React15.createElement(
+    ) : /* @__PURE__ */ React11.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React11.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
+  )), /* @__PURE__ */ React11.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React11.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React11.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React11.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React11.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React11.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React11.createElement(
     TabsContent,
     {
       value: "solid",
       className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
     },
-    solids.map((s) => /* @__PURE__ */ React15.createElement(
+    solids.map((s) => /* @__PURE__ */ React11.createElement(
       "div",
       {
         key: s,
@@ -740,13 +839,13 @@ var BackgroundPicker = (props) => {
         onClick: () => onBackgroundChange(s)
       }
     ))
-  ), /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     TabsContent,
     {
       value: "gradient",
       className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
     },
-    gradients.map((s) => /* @__PURE__ */ React15.createElement(
+    gradients.map((s) => /* @__PURE__ */ React11.createElement(
       "div",
       {
         key: s,
@@ -755,7 +854,7 @@ var BackgroundPicker = (props) => {
         onClick: () => onBackgroundChange(s)
       }
     ))
-  ), /* @__PURE__ */ React15.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React15.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React11.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React11.createElement(
     MediaInput,
     {
       className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -771,7 +870,7 @@ var BackgroundPicker = (props) => {
         "media-input: Error: " + e?.description
       )
     }
-  )), /* @__PURE__ */ React15.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React15.createElement(
+  )), /* @__PURE__ */ React11.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React11.createElement(
     "div",
     {
       key: s,
@@ -799,7 +898,7 @@ var toggleVariants = tv({
     size: "default"
   }
 });
-var Toggle = React15.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React15.createElement(
+var Toggle = React11.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   TogglePrimitive.Root,
   {
     ref,
@@ -809,32 +908,131 @@ var Toggle = React15.forwardRef(({ className, variant, size, ...props }, ref) =>
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
+// src/components/ui/spacing-input.tsx
+var SpacingInput = (props) => {
+  const [value, setValue] = React11.useState(parse(props.value || "0px"));
+  const [indipendent, setIndipendent] = React11.useState(
+    isIndipendent(parse(props.value || "0px"))
+  );
+  React11.useEffect(() => {
+    if (!props.onChange)
+      return;
+    props.onChange(stringify(value));
+  }, [value, props.onChange]);
+  return /* @__PURE__ */ React11.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React11.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendent ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    AdvancedInput,
+    {
+      value: value.left,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
+      prepend: /* @__PURE__ */ React11.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
+      append: /* @__PURE__ */ React11.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React11.createElement(
+    AdvancedInput,
+    {
+      value: value.top,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
+      prepend: /* @__PURE__ */ React11.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+      append: /* @__PURE__ */ React11.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+    }
+  )) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    AdvancedInput,
+    {
+      value: value.left,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
+      prepend: /* @__PURE__ */ React11.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
+      append: /* @__PURE__ */ React11.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React11.createElement(
+    AdvancedInput,
+    {
+      value: value.top,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
+      prepend: /* @__PURE__ */ React11.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+      append: /* @__PURE__ */ React11.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React11.createElement(
+    AdvancedInput,
+    {
+      value: value.right,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
+      prepend: /* @__PURE__ */ React11.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
+      append: /* @__PURE__ */ React11.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React11.createElement(
+    AdvancedInput,
+    {
+      value: value.bottom,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
+      prepend: /* @__PURE__ */ React11.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
+      append: /* @__PURE__ */ React11.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+    }
+  ))), /* @__PURE__ */ React11.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React11.createElement(
+    Toggle,
+    {
+      className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
+      variant: "outline",
+      size: "sm",
+      pressed: indipendent,
+      onPressedChange: setIndipendent
+    },
+    /* @__PURE__ */ React11.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
+  )));
+};
+var isIndipendent = (value) => {
+  const { top, right, bottom, left } = value;
+  return top !== bottom || right !== left;
+};
+var parse = (value) => {
+  const matches = value.match(/(\d+)/gm);
+  const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
+  switch (matches?.length) {
+    case 1:
+      return { top, right: top, bottom: top, left: top };
+    case 2:
+      return { top, bottom: top, left: right, right };
+    case 3:
+      return { top, right, left: right, bottom };
+    default:
+      return { top, right, bottom, left };
+  }
+};
+var stringify = (value) => {
+  const { top, right, bottom, left } = value;
+  if (top === right && top === bottom && top === left) {
+    return `${top}px`;
+  }
+  if (top === bottom && right === left) {
+    return `${top}px ${right}px`;
+  }
+  if (right === left) {
+    return `${top}px ${right}px ${bottom}px`;
+  }
+  return `${top}px ${right}px ${bottom}px ${left}px`;
+};
+
 // src/components/item-design-form.tsx
-var spacingSchema = z.discriminatedUnion("indipendent", [
-  z.object({
-    indipendent: z.literal(false),
-    horizontal: z.coerce.number(),
-    vertical: z.coerce.number()
-  }),
-  z.object({
-    indipendent: z.literal(true),
-    left: z.coerce.number(),
-    right: z.coerce.number(),
-    top: z.coerce.number(),
-    bottom: z.coerce.number()
-  })
-]);
 var designSchema = z.object({
-  container: z.boolean(),
+  container: z.coerce.boolean(),
   desktop: z.object({
-    padding: spacingSchema.optional(),
-    margin: spacingSchema.optional()
-  }).passthrough().optional(),
+    background: z.string(),
+    color: z.string(),
+    padding: z.string(),
+    margin: z.string()
+  }),
   mobile: z.object({
-    padding: spacingSchema.optional(),
-    margin: spacingSchema.optional()
-  }).passthrough().optional()
-}).passthrough();
+    background: z.string(),
+    color: z.string(),
+    padding: z.string(),
+    margin: z.string()
+  })
+});
 var ItemDesignForm = (props) => {
   const { item } = props;
   const component = builder.getComponent(item.component);
@@ -843,376 +1041,196 @@ var ItemDesignForm = (props) => {
       `[simple-builder]: Component "${item.component}" not found`
     );
   }
-  const defaults = component.defaultStyles || {};
-  const { patchItem } = useBuilder();
-  const [device, setDevice] = React15.useState("desktop");
-  const getDefaultDesktopValue = (key, initial = "") => {
-    const value = item.styles?.desktop?.[key];
-    const def = defaults?.desktop?.[key];
-    if (value !== void 0) {
-      return value;
-    } else if (def !== void 0) {
-      return def;
-    } else {
-      return initial;
+  const getDefaultDeviceValue = (params) => {
+    const { device: device2 = "desktop", key, fallback = "" } = params;
+    if (item.styles?.[device2]?.[key] !== void 0) {
+      return item.styles[device2][key];
     }
-  };
-  const getDefaultMobileValue = (key, initial = "") => {
-    const value = item.styles?.mobile?.[key];
-    const desktopValue = item.styles?.desktop?.[key];
-    const def = defaults?.mobile?.[key];
-    const desktopDef = defaults?.desktop?.[key];
-    if (value !== void 0) {
-      return value;
-    } else if (def !== void 0) {
-      return def;
-    } else if (desktopValue !== void 0) {
-      return desktopValue;
-    } else if (desktopDef !== void 0) {
-      return desktopDef;
-    } else {
-      return initial;
+    if (component.defaultStyles?.[device2]?.[key] !== void 0) {
+      return component.defaultStyles[device2][key];
     }
+    if (device2 === "mobile") {
+      const desktopValue = getDefaultDeviceValue({
+        ...params,
+        device: "desktop"
+      });
+      if (desktopValue !== void 0) {
+        return desktopValue;
+      }
+    }
+    return fallback;
   };
-  const getSpacingValue = (str) => {
-    const parsed = spacing.parse(str);
+  const getDefaultDeviceValues = (device2) => {
     return {
-      indipendent: spacing.isIndipendent(str),
-      horizontal: parsed.left,
-      vertical: parsed.top,
-      ...parsed
+      background: getDefaultDeviceValue({ device: device2, key: "background" }),
+      color: getDefaultDeviceValue({ device: device2, key: "color" }),
+      padding: getDefaultDeviceValue({ device: device2, key: "padding" }),
+      margin: getDefaultDeviceValue({ device: device2, key: "margin" })
     };
   };
   const form = useForm({
     resolver: zodResolver(designSchema),
-    defaultValues: {
-      container: item.styles?.container || defaults.container || true,
-      desktop: {
-        background: getDefaultDesktopValue("background"),
-        color: getDefaultDesktopValue("color"),
-        padding: getSpacingValue(getDefaultDesktopValue("padding")),
-        margin: getSpacingValue(getDefaultDesktopValue("margin"))
-      },
-      mobile: {
-        background: getDefaultMobileValue("background"),
-        color: getDefaultMobileValue("color"),
-        padding: getSpacingValue(getDefaultMobileValue("padding")),
-        margin: getSpacingValue(getDefaultMobileValue("margin"))
-      }
+    values: {
+      container: item.styles?.container ?? true,
+      desktop: getDefaultDeviceValues("desktop"),
+      mobile: getDefaultDeviceValues("mobile")
     }
   });
+  const { patchItem } = useBuilder();
   const onSubmit = (values) => {
-    const { container } = values;
-    const getPatchedDeviceValues = (device2 = "desktop") => {
-      const initital = Object.keys(item.styles?.[device2] || {}).filter((key) => !Object.keys(values[device2]).includes(key)).reduce(
-        (acc, key) => ({ ...acc, [key]: item.styles?.[device2][key] }),
-        {}
-      );
-      return Object.entries(values[device2]).reduce((acc, [key, value]) => {
-        let res = value;
-        if (key === "padding" || key === "margin") {
-          const data = value;
-          const params = data.indipendent ? data : {
-            top: data.vertical,
-            bottom: data.vertical,
-            left: data.horizontal,
-            right: data.horizontal
-          };
-          res = spacing.stringify(params);
+    const { container, desktop, mobile } = values;
+    const dirtyFields = form.formState.dirtyFields;
+    const desktopPatch = Object.entries(desktop).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        ...value && { [key]: value }
+      }),
+      { ...item.styles?.desktop }
+    );
+    const mobilePatch = Object.entries(mobile).reduce(
+      (acc, [key, value]) => {
+        const desktopValue = desktop[key];
+        const isDirty = dirtyFields.desktop?.[key];
+        if (value === desktopValue || isDirty) {
+          return acc;
+        }
+        if (["padding", "margin"].includes(key)) {
+          if (value === "0px" && desktopValue === "0px") {
+            return acc;
+          }
         }
         return {
           ...acc,
-          ...res ? { [key]: res } : {}
+          ...value && { [key]: value }
         };
-      }, initital);
-    };
-    const patchedDesktopValues = getPatchedDeviceValues();
-    const patchedMobileValues = getPatchedDeviceValues("mobile");
+      },
+      { ...item.styles?.mobile }
+    );
     patchItem(item.id, {
       styles: {
         ...container === false && { container },
-        ...Object.keys(patchedDesktopValues).length && {
-          desktop: patchedDesktopValues
-        },
-        ...Object.keys(patchedMobileValues).length && {
-          mobile: patchedMobileValues
-        }
+        ...Object.keys(desktopPatch).length && { desktop: desktopPatch },
+        ...Object.keys(mobilePatch).length && { mobile: mobilePatch }
       }
     });
   };
-  React15.useEffect(() => {
+  const [device, setDevice] = React11.useState("desktop");
+  React11.useEffect(() => {
     const subscription = form.watch(() => form.handleSubmit(onSubmit)());
     return () => subscription.unsubscribe();
   }, [form.watch, form.handleSubmit]);
-  const [indipendentPadding, indipendentMargin] = form.watch([
-    `${device}.padding.indipendent`,
-    `${device}.margin.indipendent`
-  ]);
-  return /* @__PURE__ */ React15.createElement(Form, { ...form }, /* @__PURE__ */ React15.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React15.createElement(Tabs, { defaultValue: device, onValueChange: setDevice }, /* @__PURE__ */ React15.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React15.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React15.createElement(MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React15.createElement("span", null, "Desktop")), /* @__PURE__ */ React15.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React15.createElement(SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React15.createElement("span", null, "Mobiel")))), /* @__PURE__ */ React15.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(Form, { ...form }, /* @__PURE__ */ React11.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React11.createElement(
+    Tabs,
+    {
+      defaultValue: device,
+      onValueChange: (device2) => setDevice(device2)
+    },
+    /* @__PURE__ */ React11.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React11.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React11.createElement(MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React11.createElement("span", null, "Desktop")), /* @__PURE__ */ React11.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React11.createElement(SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React11.createElement("span", null, "Mobiel")))
+  ), /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React11.createElement(
     FormField,
     {
       control: form.control,
       key: `${device}.background`,
       name: `${device}.background`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
+      render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
         BackgroundPicker,
         {
           background: field.value,
           onBackgroundChange: field.onChange
         }
-      )), /* @__PURE__ */ React15.createElement(FormMessage, null))
+      )), /* @__PURE__ */ React11.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     FormField,
     {
       control: form.control,
       key: `${device}.color`,
       name: `${device}.color`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
+      render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
         ColorPicker,
         {
           color: field.value,
           onColorChange: field.onChange
         }
-      )), /* @__PURE__ */ React15.createElement(FormMessage, null))
+      )), /* @__PURE__ */ React11.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15.createElement("hr", null), /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement("hr", null), /* @__PURE__ */ React11.createElement(
     FormField,
     {
       control: form.control,
       name: "container",
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
+      render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
         Switch,
         {
           checked: !field.value,
           onCheckedChange: (v) => field.onChange(!v)
         }
-      )), /* @__PURE__ */ React15.createElement(FormMessage, null))
+      )), /* @__PURE__ */ React11.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15.createElement("hr", null), /* @__PURE__ */ React15.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React15.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement("hr", null), /* @__PURE__ */ React11.createElement(
     FormField,
     {
       control: form.control,
-      key: `${device}.padding.horizontal`,
-      name: `${device}.padding.horizontal`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
+      key: `${device}.padding`,
+      name: `${device}.padding`,
+      render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
+        SpacingInput,
         {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          value: field.value,
+          onChange: field.onChange
         }
-      )))
+      )), /* @__PURE__ */ React11.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     FormField,
     {
       control: form.control,
-      key: `${device}.padding.vertical`,
-      name: `${device}.padding.vertical`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
+      key: `${device}.margin`,
+      name: `${device}.margin`,
+      render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
+        SpacingInput,
         {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          value: field.value,
+          onChange: field.onChange
         }
-      )))
+      )), /* @__PURE__ */ React11.createElement(FormMessage, null))
     }
-  )) : /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.padding.left`,
-      name: `${device}.padding.left`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.padding.top`,
-      name: `${device}.padding.top`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.padding.right`,
-      name: `${device}.padding.right`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.padding.bottom`,
-      name: `${device}.padding.bottom`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ))), /* @__PURE__ */ React15.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.padding.indipendent`,
-      name: `${device}.padding.indipendent`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        Toggle,
-        {
-          className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
-          variant: "outline",
-          size: "sm",
-          pressed: field.value,
-          onPressedChange: field.onChange
-        },
-        /* @__PURE__ */ React15.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
-      ))
-    }
-  ))), /* @__PURE__ */ React15.createElement(FormMessage, null)), /* @__PURE__ */ React15.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React15.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin.horizontal`,
-      name: `${device}.margin.horizontal`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin.vertical`,
-      name: `${device}.margin.vertical`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  )) : /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin.left`,
-      name: `${device}.margin.left`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin.top`,
-      name: `${device}.margin.top`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin.right`,
-      name: `${device}.margin.right`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin.bottom`,
-      name: `${device}.margin.bottom`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        AdvancedInput,
-        {
-          ...field,
-          prepend: /* @__PURE__ */ React15.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "sb-text-muted-foreground" }, "px")
-        }
-      )))
-    }
-  ))), /* @__PURE__ */ React15.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin.indipendent`,
-      name: `${device}.margin.indipendent`,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        Toggle,
-        {
-          className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
-          variant: "outline",
-          size: "sm",
-          pressed: field.value,
-          onPressedChange: field.onChange
-        },
-        /* @__PURE__ */ React15.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
-      ))
-    }
-  ))), /* @__PURE__ */ React15.createElement(FormMessage, null))))));
+  )))));
 };
+var ScrollArea = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("sb-relative sb-overflow-hidden", className),
+    ...props
+  },
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
+  /* @__PURE__ */ React11.createElement(ScrollBar, null),
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "sb-flex sb-touch-none sb-select-none sb-transition-colors",
+      orientation === "vertical" && "sb-h-full sb-w-2.5 sb-border-l sb-border-l-transparent sb-p-[1px]",
+      orientation === "horizontal" && "sb-h-2.5 sb-flex-col sb-border-t sb-border-t-transparent sb-p-[1px]",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/container-item-toolbar.tsx
 var ContainerItemToolbar = (props) => {
   const { contentId, canBringUp = false, canBringDown = false } = props;
   const { bringUp, bringDown } = useBuilder();
-  return /* @__PURE__ */ React15.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React15.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React15.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React11.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React11.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React11.createElement(
     Button,
     {
       variant: "ghost",
@@ -1220,8 +1238,8 @@ var ContainerItemToolbar = (props) => {
       onClick: () => bringUp(contentId),
       disabled: !canBringUp
     },
-    /* @__PURE__ */ React15.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
-  ), /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React11.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
+  ), /* @__PURE__ */ React11.createElement(
     Button,
     {
       variant: "ghost",
@@ -1229,21 +1247,21 @@ var ContainerItemToolbar = (props) => {
       onClick: () => bringDown(contentId),
       disabled: !canBringDown
     },
-    /* @__PURE__ */ React15.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
-  ), /* @__PURE__ */ React15.createElement(DeleteButton, { contentId })));
+    /* @__PURE__ */ React11.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
+  ), /* @__PURE__ */ React11.createElement(DeleteButton, { contentId })));
 };
 var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React15.createElement(Popover, null, /* @__PURE__ */ React15.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React15.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(Popover, { modal: true }, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11.createElement(
     PopoverContent,
     {
       side: "left",
       align: "start",
       sideOffset: 16,
       alignOffset: -8,
-      className: "sb-p-0",
+      className: "sb-p-0 sb-relative",
       collisionPadding: 16
     },
-    /* @__PURE__ */ React15.createElement(EditPopoverInner, { id })
+    /* @__PURE__ */ React11.createElement(EditPopoverInner, { id })
   ));
 };
 var EditPopoverInner = (props) => {
@@ -1255,18 +1273,18 @@ var EditPopoverInner = (props) => {
       `[simple-builder]: Item with id ${id} not found in container item form component`
     );
   }
-  return /* @__PURE__ */ React15.createElement(Tabs, null, /* @__PURE__ */ React15.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React15.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React15.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React15.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React15.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React15.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React15.createElement(ItemDesignForm, { item })));
+  return /* @__PURE__ */ React11.createElement(Tabs, null, /* @__PURE__ */ React11.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11.createElement(ScrollArea, null, /* @__PURE__ */ React11.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React11.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11.createElement(ItemDesignForm, { item })));
 };
 var DeleteButton = ({ contentId }) => {
   const { deleteContent } = useBuilder();
-  return /* @__PURE__ */ React15.createElement(AlertDialog, null, /* @__PURE__ */ React15.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(AlertDialog, null, /* @__PURE__ */ React11.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
     Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
     },
-    /* @__PURE__ */ React15.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
-  )), /* @__PURE__ */ React15.createElement(AlertDialogContent, null, /* @__PURE__ */ React15.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React15.createElement(AlertDialogFooter, null, /* @__PURE__ */ React15.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React11.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
+  )), /* @__PURE__ */ React11.createElement(AlertDialogContent, null, /* @__PURE__ */ React11.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React11.createElement(AlertDialogFooter, null, /* @__PURE__ */ React11.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React11.createElement(
     AlertDialogAction,
     {
       className: buttonVariants({ variant: "destructive" }),
@@ -1285,14 +1303,14 @@ var BuildContainerInner = (props) => {
       "[simple-builder]: Multiple content blocks detected when using property multiple false."
     );
   }
-  return /* @__PURE__ */ React15.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React15.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React15.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React15.createElement(React15.Fragment, { key: item.id }, /* @__PURE__ */ React15.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React15.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React11.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React11.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React11.createElement(React11.Fragment, { key: item.id }, /* @__PURE__ */ React11.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React11.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React11.createElement(
     ContainerItemToolbar,
     {
       contentId: item.id,
       canBringUp: i > 0,
       canBringDown: i < items.length - 1
     }
-  )), multiple && /* @__PURE__ */ React15.createElement(
+  )), multiple && /* @__PURE__ */ React11.createElement(
     AddContentDividerButton,
     {
       parent: id,
@@ -1305,9 +1323,9 @@ var build_container_client_default = BuildContainerInner;
 var AddContentButton = (props) => {
   const components = builder.getComponents();
   const { addContent } = useBuilder();
-  return /* @__PURE__ */ React15.createElement(Popover, null, /* @__PURE__ */ React15.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React15.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React15.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
+  return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React11.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React11.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
     const Icon = component.icon ?? ImageIcon;
-    return /* @__PURE__ */ React15.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React11.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React11.createElement(
       Button,
       {
         variant: "ghost",
@@ -1321,22 +1339,22 @@ var AddContentButton = (props) => {
           );
         }
       },
-      /* @__PURE__ */ React15.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
+      /* @__PURE__ */ React11.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
       component.friendlyName ?? component.name
     ));
   }))));
 };
 var AddContentPlaceholder = (props) => {
-  return /* @__PURE__ */ React15.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React15.createElement(Button, { size: "sm" }, /* @__PURE__ */ React15.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
+  return /* @__PURE__ */ React11.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React11.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React11.createElement(Button, { size: "sm" }, /* @__PURE__ */ React11.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
 };
 var AddContentDividerButton = (props) => {
-  return /* @__PURE__ */ React15.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React11.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React11.createElement(
     Button,
     {
       size: "sm",
       className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
     },
-    /* @__PURE__ */ React15.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+    /* @__PURE__ */ React11.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
     "Blok Toevoegen"
   )));
 };