@simple-builder/react 1.0.1 → 1.0.3

package/dist/build-container-client-R2FNJHPM.mjs

@@ -0,0 +1,1287 @@
+'use client';
+import './chunk-IVFWYNC3.mjs';
+import { cn, buttonVariants, Button, useBuilder, spacing } from './chunk-LPIHSXYO.mjs';
+import { builder } from './chunk-FGQSJAOO.mjs';
+import * as React13 from 'react';
+import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon, CalendarIcon, Loader2Icon, PaintbrushIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useFormContext, useForm, FormProvider, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { Slot } from '@radix-ui/react-slot';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import NextImage from 'next/image';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { format } from 'date-fns';
+import { DayPicker } from 'react-day-picker';
+
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  AlertDialogPrimitive.Overlay,
+  {
+    className: cn(
+      "sb-fixed sb-inset-0 sb-z-50 sb-bg-background/80 sb-backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(AlertDialogPortal, null, /* @__PURE__ */ React13.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React13.createElement(
+  AlertDialogPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "sb-fixed sb-font-roboto sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
+      className
+    ),
+    ...props
+  }
+)));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ React13.createElement(
+  "div",
+  {
+    className: cn(
+      "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("sb-text-lg sb-font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    className: cn("sb-text-sm sb-text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogAction = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    className: cn(buttonVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(
+      buttonVariants({ variant: "outline" }),
+      "sb-mt-2 sm:sb-mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverClose = PopoverPrimitive.Close;
+var PopoverContent = React13.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React13.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React13.createElement(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "sb-z-50 sb-w-72 sb-font-roboto sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+)));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var labelVariants = cva(
+  "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 = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/ui/form.tsx
+var Form = FormProvider;
+var FormFieldContext = React13.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ React13.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React13.createElement(Controller, { ...props }));
+};
+var useFormField = () => {
+  const fieldContext = React13.useContext(FormFieldContext);
+  const itemContext = React13.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 = React13.createContext(
+  {}
+);
+var FormItem = React13.forwardRef(({ className, ...props }, ref) => {
+  const id = React13.useId();
+  return /* @__PURE__ */ React13.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React13.createElement("div", { ref, className: cn("sb-space-y-2", className), ...props }));
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React13.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ React13.createElement(
+    Label,
+    {
+      ref,
+      className: cn(error && "sb-text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React13.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ React13.createElement(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React13.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ React13.createElement(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn(
+        "sb-text-sm sb-font-roboto sb-text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React13.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ React13.createElement(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn(
+        "sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
+        className
+      ),
+      ...props
+    },
+    body
+  );
+});
+FormMessage.displayName = "FormMessage";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "sb-inline-flex sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-py-3 sb-text-sm sb-font-medium sb-transition-all focus-visible:sb-outline-none disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-border-black sb-border-b-2 sb-border-transparent data-[state=active]:sb-text-foreground sb-text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+var Image = (props) => {
+  if (typeof NextImage !== "undefined") {
+    return /* @__PURE__ */ React13.createElement(NextImage.default, { ...props });
+  }
+  return /* @__PURE__ */ React13.createElement("img", { ...props });
+};
+
+// src/components/ui/media-input.tsx
+var MediaInput = (props) => {
+  const { onFilesChange, limit = 32, multiple = false, onError } = props;
+  const id = React13.useId();
+  const [queue, setQueue] = React13.useState([]);
+  const [sources, setSources] = React13.useState(props.files ?? []);
+  const maxConcurrentUploads = 3;
+  const uploadingCountRef = React13.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__ */ React13.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React13.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React13.createElement(
+    Image,
+    {
+      src,
+      alt: "",
+      fill: true,
+      className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
+    }
+  ), /* @__PURE__ */ React13.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__ */ React13.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__ */ React13.createElement(Trash2Icon, { className: "sb-h-4 sb-w-4" })
+  )))), queue.map((_, i) => /* @__PURE__ */ React13.createElement(
+    MediaInputItem,
+    {
+      key: i,
+      className: cn(
+        "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
+        props.itemClassName
+      )
+    },
+    /* @__PURE__ */ React13.createElement(Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
+  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React13.createElement(
+    "label",
+    {
+      htmlFor: id,
+      className: cn(
+        "sb-flex sb-h-28 sb-w-28 sb-cursor-pointer sb-items-center sb-justify-center sb-rounded-lg sb-border",
+        props.itemClassName
+      )
+    },
+    /* @__PURE__ */ React13.createElement(PlusIcon, { className: "sb-h-6 sb-w-6" }),
+    /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        id,
+        type: "file",
+        onChange: handleFilesAdd,
+        multiple,
+        accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
+        className: "sb-hidden"
+      }
+    )
+  ) : null);
+};
+var MediaInputItem = (props) => {
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      className: cn(
+        "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-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 = React13.useMemo(() => {
+    if (background.includes("url"))
+      return "image";
+    if (background.includes("gradient"))
+      return "gradient";
+    return "solid";
+  }, [background]);
+  return /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: cn(
+        "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
+        !background && "sb-text-muted-foreground",
+        className
+      )
+    },
+    /* @__PURE__ */ React13.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React13.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__ */ React13.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React13.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
+  )), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React13.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React13.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React13.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React13.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React13.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React13.createElement(
+    TabsContent,
+    {
+      value: "solid",
+      className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
+    },
+    solids.map((s) => /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        key: s,
+        style: { background: s },
+        className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
+        onClick: () => onBackgroundChange(s)
+      }
+    ))
+  ), /* @__PURE__ */ React13.createElement(
+    TabsContent,
+    {
+      value: "gradient",
+      className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
+    },
+    gradients.map((s) => /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        key: s,
+        style: { background: s },
+        className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
+        onClick: () => onBackgroundChange(s)
+      }
+    ))
+  ), /* @__PURE__ */ React13.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React13.createElement(
+    MediaInput,
+    {
+      className: "sb-grid sb-grid-cols-2 sb-gap-1",
+      itemClassName: "sb-aspect-video sb-h-auto sb-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__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      key: s,
+      style: { backgroundImage: s },
+      className: "sb-rounded-md sb-bg-cover sb-bg-center sb-aspect-video sb-w-full sb-cursor-pointer sb-border active:sb-scale-105",
+      onClick: () => onBackgroundChange(s)
+    }
+  )))))));
+};
+var ColorPicker = (props) => {
+  const { color, onColorChange, className } = props;
+  const colors = props.colors ?? [
+    "#000000",
+    "#ffffff",
+    "#0f172a",
+    "#F1F5F9",
+    "#64748B",
+    "#E6007E",
+    "#F8FAFC",
+    "#009DD1",
+    "#FF0000"
+  ];
+  return /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: cn(
+        "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
+        !color && "sb-text-muted-foreground",
+        className
+      )
+    },
+    /* @__PURE__ */ React13.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React13.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__ */ React13.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React13.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
+  )), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      key: s,
+      style: { background: s },
+      className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
+      onClick: () => onColorChange(s)
+    }
+  ))));
+};
+var Input = React13.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        type,
+        className: cn(
+          "sb-flex sb-h-8 sb-w-full sb-font-roboto sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-1 sb-text-sm sb-ring-offset-background file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:ring-sb-ring focus-visible:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var AdvancedInput = React13.forwardRef(
+  ({ prepend, append, ...props }, ref) => {
+    return /* @__PURE__ */ React13.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React13.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React13.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React13.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 Switch = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer sb-inline-flex sb-h-6 sb-w-11 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
+      className
+    ),
+    ...props,
+    ref
+  },
+  /* @__PURE__ */ React13.createElement(
+    SwitchPrimitives.Thumb,
+    {
+      className: cn(
+        "sb-pointer-events-none sb-block sb-h-5 sb-w-5 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-5 data-[state=unchecked]:sb-translate-x-0"
+      )
+    }
+  )
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+var toggleVariants = cva(
+  "sb-inline-flex sb-items-center sb-justify-center sb-rounded-md sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "sb-bg-transparent",
+        outline: "sb-border sb-border-input sb-bg-transparent hover:sb-bg-accent hover:sb-text-accent-foreground"
+      },
+      size: {
+        default: "sb-h-10 sb-px-3",
+        sm: "sb-h-9 sb-px-2.5",
+        lg: "sb-h-11 sb-px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = React13.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  TogglePrimitive.Root,
+  {
+    ref,
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+// 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(),
+  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
+      }
+    }
+  });
+  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`;
+    patchItem(item.id, {
+      styles: {
+        container,
+        background,
+        color,
+        padding,
+        margin
+      }
+    });
+  };
+  React13.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__ */ React13.createElement(Form, { ...form }, /* @__PURE__ */ React13.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "background",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        BackgroundPicker,
+        {
+          background: field.value,
+          onBackgroundChange: field.onChange
+        }
+      )), /* @__PURE__ */ React13.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "color",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        ColorPicker,
+        {
+          color: field.value,
+          onColorChange: field.onChange
+        }
+      )), /* @__PURE__ */ React13.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React13.createElement("hr", null), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "container",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React13.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        Switch,
+        {
+          checked: !field.value,
+          onCheckedChange: (v) => field.onChange(!v)
+        }
+      )), /* @__PURE__ */ React13.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React13.createElement("hr", null), /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React13.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "padding.horizontal",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "padding.vertical",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  )) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "padding.left",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "padding.top",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "padding.right",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "padding.bottom",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ))), /* @__PURE__ */ React13.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "padding.indipendent",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.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__ */ React13.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
+      ))
+    }
+  ))), /* @__PURE__ */ React13.createElement(FormMessage, null)), /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React13.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "margin.horizontal",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "margin.vertical",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  )) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "margin.left",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "margin.top",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "margin.right",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "margin.bottom",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        AdvancedInput,
+        {
+          ...field,
+          prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
+          append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+        }
+      )))
+    }
+  ))), /* @__PURE__ */ React13.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "margin.indipendent",
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.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__ */ React13.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
+      ))
+    }
+  ))), /* @__PURE__ */ React13.createElement(FormMessage, null)))));
+};
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ React13.createElement(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("sb-p-3 sb-font-roboto", className),
+      classNames: {
+        months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
+        month: "sb-space-y-4",
+        caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
+        caption_label: "sb-text-sm sb-font-medium",
+        nav: "sb-space-x-1 sb-flex sb-items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
+        ),
+        nav_button_previous: "sb-absolute sb-left-1",
+        nav_button_next: "sb-absolute sb-right-1",
+        table: "sb-w-full sb-border-collapse sb-space-y-1",
+        head_row: "sb-flex",
+        head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
+        row: "sb-flex sb-w-full sb-mt-2",
+        cell: cn(
+          "sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary hover:sb-text-primary-foreground focus:sb-bg-primary focus:sb-text-primary-foreground",
+        day_today: "sb-bg-accent sb-text-accent-foreground",
+        day_outside: "day-outside sb-text-muted-foreground sb-opacity-50 aria-selected:sb-bg-accent/50 aria-selected:sb-text-muted-foreground aria-selected:sb-opacity-30",
+        day_disabled: "sb-text-muted-foreground sb-opacity-50",
+        day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        IconLeft: () => /* @__PURE__ */ React13.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
+        IconRight: () => /* @__PURE__ */ React13.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+var Textarea = React13.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ React13.createElement(
+      "textarea",
+      {
+        className: cn(
+          "sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/components/container-item-form.tsx
+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
+    });
+  };
+  React13.useEffect(() => {
+    const subscription = form.watch(() => form.handleSubmit(onSubmit)());
+    return () => subscription.unsubscribe();
+  }, [form.watch, form.handleSubmit]);
+  return /* @__PURE__ */ React13.createElement(Form, { ...form }, /* @__PURE__ */ React13.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React13.createElement(
+    FormField,
+    {
+      key: input.name,
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => /* @__PURE__ */ React13.createElement(RenderInput, { type: input.type, input, field })
+    }
+  )))));
+};
+var RenderInput = (props) => {
+  const { type, input, field } = props;
+  switch (type) {
+    case "string":
+      return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    case "longText":
+      return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    case "richText":
+      return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    case "number":
+      return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    case "color":
+      return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    case "date":
+      return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: cn(
+            "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
+            !field.value && "sb-text-muted-foreground"
+          )
+        },
+        /* @__PURE__ */ React13.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+        field.value ? format(field.value, "PPP") : /* @__PURE__ */ React13.createElement("span", null, "Pick a date")
+      )), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React13.createElement(
+        Calendar,
+        {
+          mode: "single",
+          selected: field.value,
+          onSelect: field.onChange,
+          initialFocus: true
+        }
+      )))), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    case "boolean":
+      return /* @__PURE__ */ React13.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    case "file":
+      return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
+        MediaInput,
+        {
+          className: "sb-grid sb-grid-cols-2 sb-gap-1",
+          itemClassName: "sb-aspect-video sb-h-auto sb-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__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
+    default:
+      throw new Error(
+        `[simple-builder]: Input type "${props.type}" not supported`
+      );
+  }
+};
+
+// src/components/container-item-toolbar.tsx
+var ContainerItemToolbar = (props) => {
+  const { contentId, canBringUp = false, canBringDown = false } = props;
+  const { bringUp, bringDown } = useBuilder();
+  return /* @__PURE__ */ React13.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__ */ React13.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__ */ React13.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React13.createElement(
+    Button,
+    {
+      variant: "ghost",
+      className: "sb-w-8 sb-h-8 sb-p-0",
+      onClick: () => bringUp(contentId),
+      disabled: !canBringUp
+    },
+    /* @__PURE__ */ React13.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
+  ), /* @__PURE__ */ React13.createElement(
+    Button,
+    {
+      variant: "ghost",
+      className: "sb-w-8 sb-h-8 sb-p-0",
+      onClick: () => bringDown(contentId),
+      disabled: !canBringDown
+    },
+    /* @__PURE__ */ React13.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
+  ), /* @__PURE__ */ React13.createElement(DeleteButton, { contentId })));
+};
+var EditButton = ({ id }) => {
+  return /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React13.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React13.createElement(
+    PopoverContent,
+    {
+      side: "left",
+      align: "start",
+      sideOffset: 16,
+      alignOffset: -8,
+      className: "sb-p-0",
+      collisionPadding: 16
+    },
+    /* @__PURE__ */ React13.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__ */ React13.createElement(Tabs, null, /* @__PURE__ */ React13.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React13.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React13.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React13.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React13.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React13.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React13.createElement(ItemDesignForm, { item })));
+};
+var DeleteButton = ({ contentId }) => {
+  const { deleteContent } = useBuilder();
+  return /* @__PURE__ */ React13.createElement(AlertDialog, null, /* @__PURE__ */ React13.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
+    Button,
+    {
+      variant: "ghost",
+      className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
+    },
+    /* @__PURE__ */ React13.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
+  )), /* @__PURE__ */ React13.createElement(AlertDialogContent, null, /* @__PURE__ */ React13.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React13.createElement(AlertDialogFooter, null, /* @__PURE__ */ React13.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React13.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__ */ React13.createElement(
+    "div",
+    {
+      className: cn("sb-relative", className),
+      style: { ...!src && { background }, ...rest }
+    },
+    src && /* @__PURE__ */ React13.createElement(
+      Image,
+      {
+        src,
+        alt: "",
+        fill: true,
+        className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
+      }
+    ),
+    container ? /* @__PURE__ */ React13.createElement("div", { className: "sb-container sb-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__ */ React13.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React13.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React13.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React13.createElement(React13.Fragment, { key: item.id }, /* @__PURE__ */ React13.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React13.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React13.createElement(
+    ContainerItemToolbar,
+    {
+      contentId: item.id,
+      canBringUp: i > 0,
+      canBringDown: i < items.length - 1
+    }
+  )), multiple && /* @__PURE__ */ React13.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__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
+    const Icon = component.icon ?? ImageIcon;
+    return /* @__PURE__ */ React13.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React13.createElement(
+      Button,
+      {
+        variant: "ghost",
+        className: "sb-justify-start",
+        onClick: () => {
+          addContent(
+            component.name,
+            props.container,
+            props.parent,
+            props.index
+          );
+        }
+      },
+      /* @__PURE__ */ React13.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
+      component.friendlyName ?? component.name
+    ));
+  }))));
+};
+var AddContentPlaceholder = (props) => {
+  return /* @__PURE__ */ React13.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React13.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React13.createElement(Button, { size: "sm" }, /* @__PURE__ */ React13.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
+};
+var AddContentDividerButton = (props) => {
+  return /* @__PURE__ */ React13.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React13.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__ */ React13.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__ */ React13.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+    "Blok Toevoegen"
+  )));
+};
+
+export { build_container_client_default as default };