@simple-builder/react 1.0.1 → 1.0.3

package/dist/build-container-client-6LLYJPDM.mjs

@@ -1,1268 +0,0 @@
-import { cn, buttonVariants, Button, useBuilder, spacing } from './chunk-YHA5XZL4.mjs';
-import { builder } from './chunk-7K7IGTF3.mjs';
-import * as React15 from 'react';
-import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon, CalendarIcon, Trash2Icon, ImageIcon, Loader2Icon, PaintbrushIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { format } from 'date-fns';
-import { useFormContext, useForm, FormProvider, Controller } from 'react-hook-form';
-import { z } from 'zod';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { Slot } from '@radix-ui/react-slot';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva } from 'class-variance-authority';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import NextImage from 'next/image';
-import { DayPicker } from 'react-day-picker';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-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(
-  AlertDialogPrimitive.Overlay,
-  {
-    className: cn(
-      "fixed inset-0 z-50 bg-sb-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      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(
-  AlertDialogPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-sb-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-      className
-    ),
-    ...props
-  }
-)));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogFooter = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ React15.createElement(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  AlertDialogPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold", className),
-    ...props
-  }
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  AlertDialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-sb-muted-foreground", className),
-    ...props
-  }
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  AlertDialogPrimitive.Action,
-  {
-    ref,
-    className: cn(buttonVariants(), className),
-    ...props
-  }
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  AlertDialogPrimitive.Cancel,
-  {
-    ref,
-    className: cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    ),
-    ...props
-  }
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-var labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-// src/components/ui/form.tsx
-var Form = FormProvider;
-var FormFieldContext = React15.createContext(
-  {}
-);
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ React15.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React15.createElement(Controller, { ...props }));
-};
-var useFormField = () => {
-  const fieldContext = React15.useContext(FormFieldContext);
-  const itemContext = React15.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-  const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-};
-var FormItemContext = React15.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("space-y-2", className), ...props }));
-});
-FormItem.displayName = "FormItem";
-var FormLabel = React15.forwardRef(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ React15.createElement(
-    Label,
-    {
-      ref,
-      className: cn(error && "text-sb-destructive", className),
-      htmlFor: formItemId,
-      ...props
-    }
-  );
-});
-FormLabel.displayName = "FormLabel";
-var FormControl = React15.forwardRef(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ React15.createElement(
-    Slot,
-    {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...props
-    }
-  );
-});
-FormControl.displayName = "FormControl";
-var FormDescription = React15.forwardRef(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ React15.createElement(
-    "p",
-    {
-      ref,
-      id: formDescriptionId,
-      className: cn("text-sm text-sb-muted-foreground", className),
-      ...props
-    }
-  );
-});
-FormDescription.displayName = "FormDescription";
-var FormMessage = React15.forwardRef(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ React15.createElement(
-    "p",
-    {
-      ref,
-      id: formMessageId,
-      className: cn("text-sm font-medium text-sb-destructive", className),
-      ...props
-    },
-    body
-  );
-});
-FormMessage.displayName = "FormMessage";
-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(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-sb-popover p-4 text-sb-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-)));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Tabs = TabsPrimitive.Root;
-var TabsList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn("flex items-center border-b px-4 space-x-6", className),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap py-3 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-black border-b-2 border-transparent data-[state=active]:text-sb-foreground text-sb-muted-sb-foreground",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-var Image = (props) => {
-  if (typeof NextImage !== "undefined") {
-    return /* @__PURE__ */ React15.createElement(NextImage.default, { ...props });
-  }
-  return /* @__PURE__ */ React15.createElement("img", { ...props });
-};
-
-// src/components/ui/media-input.tsx
-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 maxConcurrentUploads = 3;
-  const uploadingCountRef = React15.useRef(0);
-  const handleFilesAdd = async (e) => {
-    const files = e.target.files;
-    if (!files || files.length === 0) {
-      return;
-    }
-    if (files.length + sources.length > (multiple ? limit : 1)) {
-      onError?.(
-        new MediaInputError(
-          `Maximaal ${limit} bestanden.`,
-          `Je probeerde nu ${files.length + sources.length} bestanden toe te voegen, maar je mag er maximaal ${limit} toevoegen.`
-        )
-      );
-      return;
-    }
-    const queue2 = Array.from(files);
-    setQueue(queue2);
-    for (const file of queue2) {
-      try {
-        while (uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0) {
-          await new Promise((resolve) => setTimeout(resolve, 300));
-        }
-        uploadingCountRef.current++;
-        const formData = new FormData();
-        formData.append("file", file);
-        const res = await fetch("/api/simple-builder/file/upload", {
-          method: "POST",
-          body: formData
-        });
-        if (res === void 0 || !res.ok) {
-          onError?.(
-            new MediaInputError(
-              "Bestand uploaden misulukt",
-              `Bestand ${file.name} kon niet worden ge\xFCpload.`
-            )
-          );
-          continue;
-        }
-        const { data: url } = await res.json();
-        if (!url) {
-          onError?.(
-            new MediaInputError(
-              "Bestand uploaden misulukt",
-              `De URL van bestand ${file.name} kon niet worden opgehaald.`
-            )
-          );
-          continue;
-        }
-        setSources((prev) => [...prev, url]);
-        onFilesChange?.([...sources, url]);
-      } catch (e2) {
-        onError?.(
-          new MediaInputError(
-            "Bestand uploaden misulukt",
-            `Bestand ${file.name} kon niet worden ge\xFCpload.`
-          )
-        );
-      } finally {
-        setQueue((prev) => prev.filter((f) => f !== file));
-        uploadingCountRef.current--;
-      }
-    }
-  };
-  const handleSourceDelete = async (src) => {
-    setSources((prev) => prev.filter((s) => s !== src));
-    onFilesChange?.(sources.filter((s) => s !== src));
-    await fetch("/api/uploadthing/delete", {
-      method: "POST",
-      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(
-    Image,
-    {
-      src,
-      alt: "",
-      fill: true,
-      className: "absolute inset-0 object-cover pointer-events-none"
-    }
-  ), /* @__PURE__ */ React15.createElement("div", { className: "absolute right-1 top-1 z-30 flex items-center justify-end gap-3 opacity-0 transition-opacity group-hover:opacity-100" }, /* @__PURE__ */ React15.createElement(
-    "button",
-    {
-      className: "flex h-8 w-8 items-center justify-center rounded-full border bg-sb-secondary text-sb-secondary-foreground opacity-90 shadow transition-opacity hover:opacity-100",
-      onClick: () => handleSourceDelete(src)
-    },
-    /* @__PURE__ */ React15.createElement(Trash2Icon, { className: "h-4 w-4" })
-  )))), queue.map((_, i) => /* @__PURE__ */ React15.createElement(
-    MediaInputItem,
-    {
-      key: i,
-      className: cn(
-        "flex h-28 w-28 items-center justify-center",
-        props.itemClassName
-      )
-    },
-    /* @__PURE__ */ React15.createElement(Loader2Icon, { className: "h-6 w-6 animate-spin" })
-  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React15.createElement(
-    "label",
-    {
-      htmlFor: id,
-      className: cn(
-        "flex h-28 w-28 cursor-pointer items-center justify-center rounded-lg border",
-        props.itemClassName
-      )
-    },
-    /* @__PURE__ */ React15.createElement(PlusIcon, { className: "h-6 w-6" }),
-    /* @__PURE__ */ React15.createElement(
-      "input",
-      {
-        id,
-        type: "file",
-        onChange: handleFilesAdd,
-        multiple,
-        accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
-        className: "hidden"
-      }
-    )
-  ) : null);
-};
-var MediaInputItem = (props) => {
-  return /* @__PURE__ */ React15.createElement(
-    "div",
-    {
-      className: cn(
-        "relative h-28 w-28 overflow-hidden rounded-lg border",
-        props.className
-      )
-    },
-    props.children
-  );
-};
-var MediaInputError = class extends Error {
-  title;
-  description;
-  constructor(message, description) {
-    super(message);
-    this.title = message;
-    this.description = description;
-  }
-};
-
-// src/components/ui/background-picker.tsx
-var BackgroundPicker = (props) => {
-  const { background, onBackgroundChange, className } = props;
-  const solids = props.solids ?? [
-    "#000000",
-    "#ffffff",
-    "#0f172a",
-    "#F1F5F9",
-    "#64748B",
-    "#E6007E",
-    "#F8FAFC",
-    "#009DD1",
-    "#FF0000"
-  ];
-  const gradients = props.gradients ?? [
-    "linear-gradient(to top left,#accbee,#e7f0fd)",
-    "linear-gradient(to top left,#d5d4d0,#d5d4d0,#eeeeec)"
-  ];
-  const images = props.images ?? [
-    "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(() => {
-    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(
-    Button,
-    {
-      variant: "outline",
-      size: "sm",
-      className: cn(
-        "justify-start text-left font-normal normal-case w-full",
-        !background && "text-sb-muted-foreground",
-        className
-      )
-    },
-    /* @__PURE__ */ React15.createElement("div", { className: "w-full flex items-center gap-2" }, background ? /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        className: "h-4 w-4 rounded !bg-center !bg-cover transition-all border",
-        style: { background }
-      }
-    ) : /* @__PURE__ */ React15.createElement(PaintbrushIcon, { className: "h-4 w-4" }), /* @__PURE__ */ React15.createElement("div", { className: "truncate flex-1" }, background ? background : "Kies een achtergrond"))
-  )), /* @__PURE__ */ React15.createElement(PopoverContent, { className: "w-64 p-0" }, /* @__PURE__ */ React15.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React15.createElement(TabsList, { className: "w-full" }, /* @__PURE__ */ React15.createElement(TabsTrigger, { className: "flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React15.createElement(TabsTrigger, { className: "flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React15.createElement(TabsTrigger, { className: "flex-1", value: "image" }, "Image")), /* @__PURE__ */ React15.createElement(
-    TabsContent,
-    {
-      value: "solid",
-      className: "data-[state=active]:flex flex-wrap gap-1 p-4"
-    },
-    solids.map((s) => /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        key: s,
-        style: { background: s },
-        className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
-        onClick: () => onBackgroundChange(s)
-      }
-    ))
-  ), /* @__PURE__ */ React15.createElement(
-    TabsContent,
-    {
-      value: "gradient",
-      className: "data-[state=active]:flex flex-wrap gap-1 p-4"
-    },
-    gradients.map((s) => /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        key: s,
-        style: { background: s },
-        className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
-        onClick: () => onBackgroundChange(s)
-      }
-    ))
-  ), /* @__PURE__ */ React15.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React15.createElement("div", { className: "p-4 border-b" }, /* @__PURE__ */ React15.createElement(
-    MediaInput,
-    {
-      className: "grid grid-cols-2 gap-1",
-      itemClassName: "aspect-video h-auto w-full",
-      multiple: false,
-      onFilesChange: (files) => {
-        if (!files.length)
-          return;
-        onBackgroundChange(`url(${files[0]})`);
-      },
-      onError: (e) => console.error(
-        "[media-input]: Title: " + e?.title,
-        "media-input: Error: " + e?.description
-      )
-    }
-  )), /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-2 gap-1 p-4" }, images.map((s) => /* @__PURE__ */ React15.createElement(
-    "div",
-    {
-      key: s,
-      style: { backgroundImage: s },
-      className: "rounded-md bg-cover bg-center aspect-video w-full cursor-pointer border active:scale-105",
-      onClick: () => onBackgroundChange(s)
-    }
-  )))))));
-};
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}) {
-  return /* @__PURE__ */ React15.createElement(
-    DayPicker,
-    {
-      showOutsideDays,
-      className: cn("p-3", className),
-      classNames: {
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell: "text-sb-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-sb-accent [&:has([aria-selected].day-outside)]:bg-sb-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected: "bg-sb-primary text-sb-primary-foreground hover:bg-sb-primary hover:text-sb-primary-foreground focus:bg-sb-primary focus:text-sb-primary-foreground",
-        day_today: "bg-sb-accent text-sb-accent-foreground",
-        day_outside: "day-outside text-sb-muted-foreground opacity-50 aria-selected:bg-sb-accent/50 aria-selected:text-sb-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-sb-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-sb-accent aria-selected:text-sb-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames
-      },
-      components: {
-        IconLeft: () => /* @__PURE__ */ React15.createElement(ChevronLeftIcon, { className: "h-4 w-4" }),
-        IconRight: () => /* @__PURE__ */ React15.createElement(ChevronRightIcon, { className: "h-4 w-4" })
-      },
-      ...props
-    }
-  );
-}
-Calendar.displayName = "Calendar";
-var ColorPicker = (props) => {
-  const { color, onColorChange, className } = props;
-  const colors = props.colors ?? [
-    "#000000",
-    "#ffffff",
-    "#0f172a",
-    "#F1F5F9",
-    "#64748B",
-    "#E6007E",
-    "#F8FAFC",
-    "#009DD1",
-    "#FF0000"
-  ];
-  return /* @__PURE__ */ React15.createElement(Popover, null, /* @__PURE__ */ React15.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15.createElement(
-    Button,
-    {
-      variant: "outline",
-      size: "sm",
-      className: cn(
-        "justify-start text-left font-normal normal-case w-full",
-        !color && "text-sb-muted-foreground",
-        className
-      )
-    },
-    /* @__PURE__ */ React15.createElement("div", { className: "w-full flex items-center gap-2" }, color ? /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        className: "h-4 w-4 rounded !bg-center !bg-cover transition-all border",
-        style: { background: color }
-      }
-    ) : /* @__PURE__ */ React15.createElement(PaintbrushIcon, { className: "h-4 w-4" }), /* @__PURE__ */ React15.createElement("div", { className: "truncate flex-1" }, color ? color : "Kies een kleur"))
-  )), /* @__PURE__ */ React15.createElement(PopoverContent, { className: "w-64 p-4 flex flex-wrap gap-1" }, colors.map((s) => /* @__PURE__ */ React15.createElement(
-    "div",
-    {
-      key: s,
-      style: { background: s },
-      className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
-      onClick: () => onColorChange(s)
-    }
-  ))));
-};
-var Input = React15.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ React15.createElement(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-8 w-full rounded-md border border-sb-input bg-sb-background px-3 py-1 text-sm ring-offset-sb-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-sb-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sb-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-var AdvancedInput = React15.forwardRef(
-  ({ prepend, append, ...props }, ref) => {
-    return /* @__PURE__ */ React15.createElement("div", { className: "relative" }, /* @__PURE__ */ React15.createElement(Input, { ref, className: "pl-9 pr-7 text-right", ...props }), prepend && /* @__PURE__ */ React15.createElement("div", { className: "absolute top-1/2 left-3 -translate-y-1/2" }, prepend), append && /* @__PURE__ */ React15.createElement("div", { className: "absolute top-1/2 right-3 -translate-y-1/2" }, append));
-  }
-);
-AdvancedInput.displayName = "AdvancedInput";
-var Switch = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  SwitchPrimitives.Root,
-  {
-    className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sb-ring focus-visible:ring-offset-2 focus-visible:ring-offset-sb-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-sb-primary data-[state=unchecked]:bg-sb-input",
-      className
-    ),
-    ...props,
-    ref
-  },
-  /* @__PURE__ */ React15.createElement(
-    SwitchPrimitives.Thumb,
-    {
-      className: cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-sb-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-      )
-    }
-  )
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-var Textarea = React15.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ React15.createElement(
-      "textarea",
-      {
-        className: cn(
-          "flex min-h-[60px] w-full rounded-md border border-sb-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-sb-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sb-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-var toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-sb-background transition-colors hover:bg-sb-muted hover:text-sb-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sb-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-sb-accent data-[state=on]:text-sb-accent-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-sb-accent hover:text-sb-accent-foreground"
-      },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Toggle = React15.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React15.createElement(
-  TogglePrimitive.Root,
-  {
-    ref,
-    className: cn(toggleVariants({ variant, size, className })),
-    ...props
-  }
-));
-Toggle.displayName = TogglePrimitive.Root.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: "absolute z-20 top-1 right-1 rounded-md shadow flex flex-col gap-1 p-1 bg-sb-card text-sb-card-sb-foreground sb-item-toolbar opacity-0 transition-opacity" }, /* @__PURE__ */ React15.createElement("div", { className: "h-10 p-1 border border-sb-input bg-sb-background rounded-md text-sm font-medium flex gap-1 items-center justify-start" }, /* @__PURE__ */ React15.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React15.createElement(
-    Button,
-    {
-      variant: "ghost",
-      className: "w-8 h-8 p-0",
-      onClick: () => bringUp(contentId),
-      disabled: !canBringUp
-    },
-    /* @__PURE__ */ React15.createElement(ArrowUp, { className: "h-5 w-5" })
-  ), /* @__PURE__ */ React15.createElement(
-    Button,
-    {
-      variant: "ghost",
-      className: "w-8 h-8 p-0",
-      onClick: () => bringDown(contentId),
-      disabled: !canBringDown
-    },
-    /* @__PURE__ */ React15.createElement(ArrowDown, { className: "h-5 w-5" })
-  ), /* @__PURE__ */ React15.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: "w-8 h-8 p-0" }, /* @__PURE__ */ React15.createElement(Edit2Icon, { className: "h-5 w-5" }))), /* @__PURE__ */ React15.createElement(
-    PopoverContent,
-    {
-      side: "left",
-      align: "start",
-      sideOffset: 16,
-      alignOffset: -8,
-      className: "p-0",
-      collisionPadding: 16
-    },
-    /* @__PURE__ */ React15.createElement(EditPopoverInner, { id })
-  ));
-};
-var EditPopoverInner = (props) => {
-  const { id } = props;
-  const { getItem } = useBuilder();
-  const item = getItem(id);
-  if (!item) {
-    throw new Error(
-      `[simple-builder]: Item with id ${id} not found in container item form component`
-    );
-  }
-  return /* @__PURE__ */ React15.createElement(Tabs, null, /* @__PURE__ */ React15.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React15.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React15.createElement(TabsTrigger, { 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 })));
-};
-var ContainerItemForm = (props) => {
-  const { item } = props;
-  const { patchItem } = useBuilder();
-  const component = builder.getComponent(item.component);
-  if (!component) {
-    throw new Error(
-      `[simple-builder]: Component with id ${item.component} not found in container item form component`
-    );
-  }
-  const form = useForm({
-    defaultValues: (component.inputs || []).reduce(
-      (acc, input) => ({
-        ...acc,
-        [input.name]: item?.props?.[input.name] ?? input.defaultValue
-      }),
-      {}
-    )
-  });
-  const onSubmit = (values) => {
-    patchItem(item.id, {
-      props: values
-    });
-  };
-  React15.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: "space-y-4 p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      key: input.name,
-      control: form.control,
-      name: input.name,
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(RenderInput, { type: input.type, input, field })
-    }
-  )))));
-};
-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(),
-  background: z.string(),
-  color: z.string(),
-  padding: spacingSchema,
-  margin: spacingSchema
-});
-var ItemDesignForm = (props) => {
-  const { item } = props;
-  const { patchItem } = useBuilder();
-  const initialPadding = spacing.parse(item.styles?.padding ?? "");
-  const initialMargin = spacing.parse(item.styles?.margin ?? "");
-  const form = useForm({
-    resolver: zodResolver(designSchema),
-    defaultValues: {
-      container: item.styles?.container ?? true,
-      background: item.styles?.background ?? "",
-      color: item.styles?.color ?? "",
-      padding: {
-        indipendent: spacing.isIndipendent(
-          item.styles?.padding ?? ""
-        ),
-        horizontal: initialPadding.left,
-        vertical: initialPadding.top,
-        left: initialPadding.left,
-        right: initialPadding.right,
-        top: initialPadding.top,
-        bottom: initialPadding.bottom
-      },
-      margin: {
-        indipendent: spacing.isIndipendent(
-          item.styles?.margin ?? ""
-        ),
-        horizontal: initialMargin.left,
-        vertical: initialMargin.top,
-        left: initialMargin.left,
-        right: initialMargin.right,
-        top: initialMargin.top,
-        bottom: initialMargin.bottom
-      }
-    }
-  });
-  console.log("ERRORS", form.formState.errors);
-  console.log("VALUES", form.getValues());
-  const onSubmit = (values) => {
-    const { container, background, color, padding: p, margin: m } = values;
-    const padding = !p.indipendent ? `${p.vertical}px ${p.horizontal}px` : `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
-    const margin = !m.indipendent ? `${m.vertical}px ${m.horizontal}px` : `${m.top}px ${m.right}px ${m.bottom}px ${m.left}px`;
-    console.log("CALLING_PATCH_ITEM", "ITEM_ID: " + item.id);
-    patchItem(item.id, {
-      styles: {
-        container,
-        background,
-        color,
-        padding,
-        margin
-      }
-    });
-  };
-  React15.useEffect(() => {
-    const subscription = form.watch(() => form.handleSubmit(onSubmit)());
-    return () => subscription.unsubscribe();
-  }, [form.watch, form.handleSubmit]);
-  const [indipendentPadding, indipendentMargin] = form.watch([
-    "padding.indipendent",
-    "margin.indipendent"
-  ]);
-  return /* @__PURE__ */ React15.createElement(Form, { ...form }, /* @__PURE__ */ React15.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15.createElement("div", { className: "space-y-4 p-4" }, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "background",
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        BackgroundPicker,
-        {
-          background: field.value,
-          onBackgroundChange: field.onChange
-        }
-      )), /* @__PURE__ */ React15.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "color",
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, null, /* @__PURE__ */ React15.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        ColorPicker,
-        {
-          color: field.value,
-          onColorChange: field.onChange
-        }
-      )), /* @__PURE__ */ React15.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React15.createElement("hr", null), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "container",
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormItem, { className: "flex flex-row items-center justify-between space-y-0" }, /* @__PURE__ */ React15.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.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: "space-y-2" }, /* @__PURE__ */ React15.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-[1fr,auto] gap-3" }, /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-2 items-center gap-3" }, !indipendentPadding ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  )) : /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 rotate-180" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 -rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ))), /* @__PURE__ */ React15.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "padding.indipendent",
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        Toggle,
-        {
-          className: "shrink-0 flex w-8 h-8 p-0",
-          variant: "outline",
-          size: "sm",
-          pressed: field.value,
-          onPressedChange: field.onChange
-        },
-        /* @__PURE__ */ React15.createElement(ScanIcon, { className: "h-4 w-4" })
-      ))
-    }
-  ))), /* @__PURE__ */ React15.createElement(FormMessage, null)), /* @__PURE__ */ React15.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React15.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-[1fr,auto] gap-3" }, /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-2 items-center gap-3" }, !indipendentMargin ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  )) : /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 rotate-180" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "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: "h-4 w-4 -rotate-90" }),
-          append: /* @__PURE__ */ React15.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
-        }
-      )))
-    }
-  ))), /* @__PURE__ */ React15.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React15.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "margin.indipendent",
-      render: ({ field }) => /* @__PURE__ */ React15.createElement(FormControl, null, /* @__PURE__ */ React15.createElement(
-        Toggle,
-        {
-          className: "shrink-0 flex w-8 h-8 p-0",
-          variant: "outline",
-          size: "sm",
-          pressed: field.value,
-          onPressedChange: field.onChange
-        },
-        /* @__PURE__ */ React15.createElement(ScanIcon, { className: "h-4 w-4" })
-      ))
-    }
-  ))), /* @__PURE__ */ React15.createElement(FormMessage, null)))));
-};
-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));
-    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));
-    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));
-    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));
-    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(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          className: cn(
-            "w-full flex justify-start text-left font-normal",
-            !field.value && "text-muted-foreground"
-          )
-        },
-        /* @__PURE__ */ React15.createElement(CalendarIcon, { className: "mr-2 h-4 w-4" }),
-        field.value ? format(field.value, "PPP") : /* @__PURE__ */ React15.createElement("span", null, "Pick a date")
-      )), /* @__PURE__ */ React15.createElement(PopoverContent, { className: "w-auto p-0", align: "start" }, /* @__PURE__ */ React15.createElement(
-        Calendar,
-        {
-          mode: "single",
-          selected: field.value,
-          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: "flex flex-row items-center justify-between 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));
-    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(
-        MediaInput,
-        {
-          className: "grid grid-cols-2 gap-1",
-          itemClassName: "aspect-video h-auto w-full",
-          multiple: false,
-          onFilesChange: (files) => field.onChange(files[0]),
-          onError: (e) => console.error(
-            "[media-input]: Title: " + e?.title,
-            "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`
-      );
-  }
-};
-var DeleteButton = ({ contentId }) => {
-  const { deleteContent } = useBuilder();
-  return /* @__PURE__ */ React15.createElement(AlertDialog, null, /* @__PURE__ */ React15.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React15.createElement(Button, { variant: "ghost", className: "w-8 h-8 p-0 text-sb-destructive" }, /* @__PURE__ */ React15.createElement(Trash2Icon, { className: "h-5 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(
-    AlertDialogAction,
-    {
-      className: buttonVariants({ variant: "destructive" }),
-      onClick: () => deleteContent(contentId)
-    },
-    "Verwijderen"
-  ))));
-};
-var DesignWrapper = (props) => {
-  const { children, className, styles } = props;
-  const { container = true, background, ...rest } = styles || {};
-  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
-  const src = matches ? matches[1] : void 0;
-  return /* @__PURE__ */ React15.createElement(
-    "div",
-    {
-      className: cn("relative", className),
-      style: { ...!src && { background }, ...rest }
-    },
-    src && /* @__PURE__ */ React15.createElement(
-      Image,
-      {
-        src,
-        alt: "",
-        fill: true,
-        className: "object-cover absolute inset-0 pointer-events-none -z-[1]"
-      }
-    ),
-    container ? /* @__PURE__ */ React15.createElement("div", { className: "container mx-auto" }, children) : children
-  );
-};
-
-// src/components/build-container-client.tsx
-var BuildContainerInner = (props) => {
-  const { id, name, content, multiple = false } = props;
-  const items = Array.isArray(content) ? content : content?.[name] || [];
-  if (!multiple && items.length > 1) {
-    console.error(
-      "[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: "relative sb-container-item" }, /* @__PURE__ */ React15.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React15.createElement(
-    ContainerItemToolbar,
-    {
-      contentId: item.id,
-      canBringUp: i > 0,
-      canBringDown: i < items.length - 1
-    }
-  )), multiple && /* @__PURE__ */ React15.createElement(
-    AddContentDividerButton,
-    {
-      parent: id,
-      container: name,
-      index: i + 1
-    }
-  ))));
-};
-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: "p-1" }, /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-2 gap-2" }, components.map((component) => {
-    const Icon = component.icon ?? ImageIcon;
-    return /* @__PURE__ */ React15.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React15.createElement(
-      Button,
-      {
-        variant: "ghost",
-        className: "justify-start",
-        onClick: () => {
-          addContent(
-            component.name,
-            props.container,
-            props.parent,
-            props.index
-          );
-        }
-      },
-      /* @__PURE__ */ React15.createElement(Icon, { className: "mr-2 h-4 w-4 shrink-0" }),
-      component.friendlyName ?? component.name
-    ));
-  }))));
-};
-var AddContentPlaceholder = (props) => {
-  return /* @__PURE__ */ React15.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15.createElement("div", { className: "flex justify-center bg-sb-primary/50 p-4" }, /* @__PURE__ */ React15.createElement(Button, { size: "sm" }, /* @__PURE__ */ React15.createElement(PlusIcon, { className: "mr-2 h-4 w-4" }), "Blok Toevoegen")));
-};
-var AddContentDividerButton = (props) => {
-  return /* @__PURE__ */ React15.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15.createElement("div", { className: "w-full h-1 -my-[2px] bg-sb-primary relative z-20 opacity-0 add-content-divider-button transition-opacity" }, /* @__PURE__ */ React15.createElement(
-    Button,
-    {
-      size: "sm",
-      className: "absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 shadow"
-    },
-    /* @__PURE__ */ React15.createElement(PlusIcon, { className: "mr-2 h-4 w-4" }),
-    "Blok Toevoegen"
-  )));
-};
-
-export { BuildContainerInner, build_container_client_default as default };