@simple-builder/react 1.0.7 → 1.0.9

package/dist/{build-container-client-CMWYMBFS.mjs → build-container-client-BOFDDL56.mjs}

@@ -1,9 +1,9 @@
 'use client';
-import './chunk-YWYOBSS7.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-PL6PDFN7.mjs';
-import { cn, tv, DesignWrapper, builder, Image, spacing } from './chunk-YGH42ZBJ.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-LULPEBSO.mjs';
+import { buttonVariants, Button, useBuilder } from './chunk-2GQCSML3.mjs';
+import { cn, tv, DesignWrapper, builder, Image } from './chunk-OCMLPCSW.mjs';
+import * as React11 from 'react';
+import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, 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';
@@ -20,7 +20,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 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 +32,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 +47,7 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ React15.createElement(
+}) => /* @__PURE__ */ React11.createElement(
   "div",
   {
     className: cn(
@@ -58,7 +58,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 +67,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 +76,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 +85,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 +101,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 +121,7 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }) {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DayPicker,
     {
       showOutsideDays,
@@ -161,8 +161,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 +182,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 +193,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 +213,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 +225,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 +251,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 +272,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 +286,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 +302,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 +323,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 +340,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 +423,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 +431,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 +447,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 +457,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 +472,7 @@ var MediaInput = (props) => {
   ) : null);
 };
 var MediaInputItem = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: cn(
@@ -492,7 +492,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 +502,7 @@ var Switch = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ...props,
     ref
   },
-  /* @__PURE__ */ React15.createElement(
+  /* @__PURE__ */ React11.createElement(
     SwitchPrimitives.Thumb,
     {
       className: cn(
@@ -512,9 +512,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,17 +553,17 @@ 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(
+  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(
     FormField,
     {
       key: input.name,
       control: form.control,
       name: input.name,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(RenderInput, { type: input.type, input, field })
+      render: ({ field }) => /* @__PURE__ */ React11.createElement(RenderInput, { type: input.type, input, field })
     }
   )))));
 };
@@ -571,17 +571,17 @@ var RenderInput = (props) => {
   const { type, input, 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(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     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));
+      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.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(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     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(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     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(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     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(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
         Button,
         {
           variant: "outline",
@@ -591,9 +591,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 +601,11 @@ var RenderInput = (props) => {
           onSelect: field.onChange,
           initialFocus: true
         }
-      )))), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      )))), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.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(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(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     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(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
         MediaInput,
         {
           className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -617,7 +617,7 @@ var RenderInput = (props) => {
             "media-input: Error: " + e?.description
           )
         }
-      )), input.helperText && /* @__PURE__ */ React15.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15.createElement(FormMessage, null));
+      )), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     default:
       throw new Error(
         `[simple-builder]: Input type "${props.type}" not supported`
@@ -636,7 +636,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 +656,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 +665,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 +700,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 +718,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 +740,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 +755,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 +771,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 +799,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 +809,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,372 +942,163 @@ 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") => {
-      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;
         }
         return {
           ...acc,
-          ...res ? { [key]: res } : {}
+          ...value && { [key]: value }
         };
-      }, {});
-    };
-    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
-        }
+        desktop: desktopPatch,
+        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__ */ 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(
-    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,
-        {
-          ...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}.padding.vertical`,
-      name: `${device}.padding.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}.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__ */ React11.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React11.createElement("hr", null), /* @__PURE__ */ React11.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,
+      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(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
-          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}.margin.bottom`,
-      name: `${device}.margin.bottom`,
-      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(AlignHorizontalJustifyStartIcon, { 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__ */ 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__ */ React11.createElement(FormMessage, null))
     }
-  ))), /* @__PURE__ */ React15.createElement(FormMessage, null))))));
+  )))));
 };
 
 // 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",
@@ -1216,8 +1106,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",
@@ -1225,11 +1115,11 @@ 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, null, /* @__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",
@@ -1239,7 +1129,7 @@ var EditButton = ({ id }) => {
       className: "sb-p-0",
       collisionPadding: 16
     },
-    /* @__PURE__ */ React15.createElement(EditPopoverInner, { id })
+    /* @__PURE__ */ React11.createElement(EditPopoverInner, { id })
   ));
 };
 var EditPopoverInner = (props) => {
@@ -1251,18 +1141,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(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" }),
@@ -1281,14 +1171,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,
@@ -1301,9 +1191,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",
@@ -1317,22 +1207,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"
   )));
 };