@simple-builder/react 1.0.2 → 1.0.4

package/dist/{build-container-client-LHGW2FFR.js → build-container-client-PDM3LRIQ.js}

@@ -1,27 +1,24 @@
+'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var chunk3S4FFEHM_js = require('./chunk-3S4FFEHM.js');
-var chunkVMHWPKU4_js = require('./chunk-VMHWPKU4.js');
-var React15 = require('react');
+require('./chunk-KOBGFPWB.js');
+var chunkXEMUNFCV_js = require('./chunk-XEMUNFCV.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var React12 = require('react');
 var lucideReact = require('lucide-react');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 var zod$1 = require('@hookform/resolvers/zod');
-var dateFns = require('date-fns');
 var reactHookForm = require('react-hook-form');
 var zod = require('zod');
-var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactSlot = require('@radix-ui/react-slot');
 var LabelPrimitive = require('@radix-ui/react-label');
 var classVarianceAuthority = require('class-variance-authority');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-var NextImage = require('next/image');
-var reactDayPicker = require('react-day-picker');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var dateFns = require('date-fns');
+var reactDayPicker = require('react-day-picker');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -41,22 +38,21 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
+var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
-var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var AlertDialogOverlay = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   AlertDialogPrimitive__namespace.Overlay,
   {
-    className: chunk3S4FFEHM_js.cn(
+    className: chunkJ36K7WVK_js.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
     ),
@@ -65,11 +61,11 @@ var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React15__namespace.createElement(
+var AlertDialogContent = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React12__namespace.createElement(
   AlertDialogPrimitive__namespace.Content,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(
+    className: chunkJ36K7WVK_js.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
     ),
@@ -80,10 +76,10 @@ AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.display
 var AlertDialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ React15__namespace.createElement(
+}) => /* @__PURE__ */ React12__namespace.createElement(
   "div",
   {
-    className: chunk3S4FFEHM_js.cn(
+    className: chunkJ36K7WVK_js.cn(
       "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
       className
     ),
@@ -91,39 +87,39 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var AlertDialogTitle = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn("sb-text-lg sb-font-semibold", className),
+    className: chunkJ36K7WVK_js.cn("sb-text-lg sb-font-semibold", className),
     ...props
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var AlertDialogDescription = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn("sb-text-sm sb-text-muted-foreground", className),
+    className: chunkJ36K7WVK_js.cn("sb-text-sm sb-text-muted-foreground", className),
     ...props
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var AlertDialogAction = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(chunk3S4FFEHM_js.buttonVariants(), className),
+    className: chunkJ36K7WVK_js.cn(chunkXEMUNFCV_js.buttonVariants(), className),
     ...props
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var AlertDialogCancel = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(
-      chunk3S4FFEHM_js.buttonVariants({ variant: "outline" }),
+    className: chunkJ36K7WVK_js.cn(
+      chunkXEMUNFCV_js.buttonVariants({ variant: "outline" }),
       "sb-mt-2 sm:sb-mt-0",
       className
     ),
@@ -131,14 +127,31 @@ var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverClose = PopoverPrimitive__namespace.Close;
+var PopoverContent = React12__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React12__namespace.createElement(
+  PopoverPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: chunkJ36K7WVK_js.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__namespace.Content.displayName;
 var labelVariants = classVarianceAuthority.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 = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var Label = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   LabelPrimitive__namespace.Root,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(labelVariants(), className),
+    className: chunkJ36K7WVK_js.cn(labelVariants(), className),
     ...props
   }
 ));
@@ -146,17 +159,17 @@ Label.displayName = LabelPrimitive__namespace.Root.displayName;
 
 // src/components/ui/form.tsx
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React15__namespace.createContext(
+var FormFieldContext = React12__namespace.createContext(
   {}
 );
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ React15__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React15__namespace.createElement(reactHookForm.Controller, { ...props }));
+  return /* @__PURE__ */ React12__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React12__namespace.createElement(reactHookForm.Controller, { ...props }));
 };
 var useFormField = () => {
-  const fieldContext = React15__namespace.useContext(FormFieldContext);
-  const itemContext = React15__namespace.useContext(FormItemContext);
+  const fieldContext = React12__namespace.useContext(FormFieldContext);
+  const itemContext = React12__namespace.useContext(FormItemContext);
   const { getFieldState, formState } = reactHookForm.useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
@@ -172,30 +185,30 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React15__namespace.createContext(
+var FormItemContext = React12__namespace.createContext(
   {}
 );
-var FormItem = React15__namespace.forwardRef(({ className, ...props }, ref) => {
-  const id = React15__namespace.useId();
-  return /* @__PURE__ */ React15__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React15__namespace.createElement("div", { ref, className: chunk3S4FFEHM_js.cn("sb-space-y-2", className), ...props }));
+var FormItem = React12__namespace.forwardRef(({ className, ...props }, ref) => {
+  const id = React12__namespace.useId();
+  return /* @__PURE__ */ React12__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React12__namespace.createElement("div", { ref, className: chunkJ36K7WVK_js.cn("sb-space-y-2", className), ...props }));
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React15__namespace.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React12__namespace.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ React15__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement(
     Label,
     {
       ref,
-      className: chunk3S4FFEHM_js.cn(error && "sb-text-destructive", className),
+      className: chunkJ36K7WVK_js.cn(error && "sb-text-destructive", className),
       htmlFor: formItemId,
       ...props
     }
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React15__namespace.forwardRef(({ ...props }, ref) => {
+var FormControl = React12__namespace.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ React15__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement(
     reactSlot.Slot,
     {
       ref,
@@ -207,14 +220,14 @@ var FormControl = React15__namespace.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React12__namespace.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ React15__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement(
     "p",
     {
       ref,
       id: formDescriptionId,
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.cn(
         "sb-text-sm sb-font-roboto sb-text-muted-foreground",
         className
       ),
@@ -223,18 +236,18 @@ var FormDescription = React15__namespace.forwardRef(({ className, ...props }, re
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React15__namespace.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React12__namespace.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
     return null;
   }
-  return /* @__PURE__ */ React15__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement(
     "p",
     {
       ref,
       id: formMessageId,
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.cn(
         "sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
         className
       ),
@@ -244,29 +257,12 @@ var FormMessage = React15__namespace.forwardRef(({ className, children, ...props
   );
 });
 FormMessage.displayName = "FormMessage";
-var Popover = PopoverPrimitive__namespace.Root;
-var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverClose = PopoverPrimitive__namespace.Close;
-var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React15__namespace.createElement(
-  PopoverPrimitive__namespace.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: chunk3S4FFEHM_js.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__namespace.Content.displayName;
 var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var TabsList = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   TabsPrimitive__namespace.List,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(
+    className: chunkJ36K7WVK_js.cn(
       "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6",
       className
     ),
@@ -274,11 +270,11 @@ var TabsList = React15__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var TabsTrigger = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(
+    className: chunkJ36K7WVK_js.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
     ),
@@ -286,11 +282,11 @@ var TabsTrigger = React15__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var TabsContent = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   TabsPrimitive__namespace.Content,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(
+    className: chunkJ36K7WVK_js.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
     ),
@@ -298,21 +294,13 @@ var TabsContent = React15__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var Image = (props) => {
-  if (typeof NextImage__default.default !== "undefined") {
-    return /* @__PURE__ */ React15__namespace.createElement(NextImage__default.default.default, { ...props });
-  }
-  return /* @__PURE__ */ React15__namespace.createElement("img", { ...props });
-};
-
-// src/components/ui/media-input.tsx
 var MediaInput = (props) => {
   const { onFilesChange, limit = 32, multiple = false, onError } = props;
-  const id = React15__namespace.useId();
-  const [queue, setQueue] = React15__namespace.useState([]);
-  const [sources, setSources] = React15__namespace.useState(props.files ?? []);
+  const id = React12__namespace.useId();
+  const [queue, setQueue] = React12__namespace.useState([]);
+  const [sources, setSources] = React12__namespace.useState(props.files ?? []);
   const maxConcurrentUploads = 3;
-  const uploadingCountRef = React15__namespace.useRef(0);
+  const uploadingCountRef = React12__namespace.useRef(0);
   const handleFilesAdd = async (e) => {
     const files = e.target.files;
     if (!files || files.length === 0) {
@@ -383,42 +371,42 @@ var MediaInput = (props) => {
       body: JSON.stringify({ src })
     });
   };
-  return /* @__PURE__ */ React15__namespace.createElement("div", { className: chunk3S4FFEHM_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React15__namespace.createElement(MediaInputItem, { key: src, className: chunk3S4FFEHM_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React15__namespace.createElement(
-    Image,
+  return /* @__PURE__ */ React12__namespace.createElement("div", { className: chunkJ36K7WVK_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12__namespace.createElement(MediaInputItem, { key: src, className: chunkJ36K7WVK_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React12__namespace.createElement(
+    chunkJ36K7WVK_js.Image,
     {
       src,
       alt: "",
       fill: true,
       className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
     }
-  ), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.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__ */ React12__namespace.createElement(
     "button",
     {
       className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
       onClick: () => handleSourceDelete(src)
     },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
-  )))), queue.map((_, i) => /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React12__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
+  )))), queue.map((_, i) => /* @__PURE__ */ React12__namespace.createElement(
     MediaInputItem,
     {
       key: i,
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.cn(
         "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
         props.itemClassName
       )
     },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
-  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React12__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
+  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React12__namespace.createElement(
     "label",
     {
       htmlFor: id,
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.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__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
-    /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
+    /* @__PURE__ */ React12__namespace.createElement(
       "input",
       {
         id,
@@ -432,10 +420,10 @@ var MediaInput = (props) => {
   ) : null);
 };
 var MediaInputItem = (props) => {
-  return /* @__PURE__ */ React15__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement(
     "div",
     {
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.cn(
         "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
         props.className
       )
@@ -475,38 +463,38 @@ var BackgroundPicker = (props) => {
     "url(https://images.unsplash.com/photo-1688822863426-8c5f9b257090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)",
     "url(https://images.unsplash.com/photo-1691225850735-6e4e51834cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)"
   ];
-  const defaultTab = React15__namespace.useMemo(() => {
+  const defaultTab = React12__namespace.useMemo(() => {
     if (background.includes("url"))
       return "image";
     if (background.includes("gradient"))
       return "gradient";
     return "solid";
   }, [background]);
-  return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-    chunk3S4FFEHM_js.Button,
+  return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
+    chunkXEMUNFCV_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.cn(
         "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
         !background && "sb-text-muted-foreground",
         className
       )
     },
-    /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React12__namespace.createElement(
       "div",
       {
         className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
         style: { background }
       }
-    ) : /* @__PURE__ */ React15__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
-  )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React15__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React15__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React15__namespace.createElement(
+    ) : /* @__PURE__ */ React12__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
+  )), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React12__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React12__namespace.createElement(
     TabsContent,
     {
       value: "solid",
       className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
     },
-    solids.map((s) => /* @__PURE__ */ React15__namespace.createElement(
+    solids.map((s) => /* @__PURE__ */ React12__namespace.createElement(
       "div",
       {
         key: s,
@@ -515,13 +503,13 @@ var BackgroundPicker = (props) => {
         onClick: () => onBackgroundChange(s)
       }
     ))
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     TabsContent,
     {
       value: "gradient",
       className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
     },
-    gradients.map((s) => /* @__PURE__ */ React15__namespace.createElement(
+    gradients.map((s) => /* @__PURE__ */ React12__namespace.createElement(
       "div",
       {
         key: s,
@@ -530,7 +518,7 @@ var BackgroundPicker = (props) => {
         onClick: () => onBackgroundChange(s)
       }
     ))
-  ), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React12__namespace.createElement(
     MediaInput,
     {
       className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -546,7 +534,7 @@ var BackgroundPicker = (props) => {
         "media-input: Error: " + e?.description
       )
     }
-  )), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React15__namespace.createElement(
+  )), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React12__namespace.createElement(
     "div",
     {
       key: s,
@@ -556,60 +544,6 @@ var BackgroundPicker = (props) => {
     }
   )))))));
 };
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}) {
-  return /* @__PURE__ */ React15__namespace.createElement(
-    reactDayPicker.DayPicker,
-    {
-      showOutsideDays,
-      className: chunk3S4FFEHM_js.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: chunk3S4FFEHM_js.cn(
-          chunk3S4FFEHM_js.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: chunk3S4FFEHM_js.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: chunk3S4FFEHM_js.cn(
-          chunk3S4FFEHM_js.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__ */ React15__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
-        IconRight: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
-      },
-      ...props
-    }
-  );
-}
-Calendar.displayName = "Calendar";
 var ColorPicker = (props) => {
   const { color, onColorChange, className } = props;
   const colors = props.colors ?? [
@@ -623,25 +557,25 @@ var ColorPicker = (props) => {
     "#009DD1",
     "#FF0000"
   ];
-  return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-    chunk3S4FFEHM_js.Button,
+  return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
+    chunkXEMUNFCV_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.cn(
         "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
         !color && "sb-text-muted-foreground",
         className
       )
     },
-    /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React12__namespace.createElement(
       "div",
       {
         className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
         style: { background: color }
       }
-    ) : /* @__PURE__ */ React15__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
-  )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React15__namespace.createElement(
+    ) : /* @__PURE__ */ React12__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
+  )), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React12__namespace.createElement(
     "div",
     {
       key: s,
@@ -651,13 +585,13 @@ var ColorPicker = (props) => {
     }
   ))));
 };
-var Input = React15__namespace.forwardRef(
+var Input = React12__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ React15__namespace.createElement(
+    return /* @__PURE__ */ React12__namespace.createElement(
       "input",
       {
         type,
-        className: chunk3S4FFEHM_js.cn(
+        className: chunkJ36K7WVK_js.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
         ),
@@ -668,48 +602,32 @@ var Input = React15__namespace.forwardRef(
   }
 );
 Input.displayName = "Input";
-var AdvancedInput = React15__namespace.forwardRef(
+var AdvancedInput = React12__namespace.forwardRef(
   ({ prepend, append, ...props }, ref) => {
-    return /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React15__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
+    return /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React12__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React12__namespace.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 = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var Switch = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   SwitchPrimitives__namespace.Root,
   {
-    className: chunk3S4FFEHM_js.cn(
+    className: chunkJ36K7WVK_js.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__ */ React15__namespace.createElement(
+  /* @__PURE__ */ React12__namespace.createElement(
     SwitchPrimitives__namespace.Thumb,
     {
-      className: chunk3S4FFEHM_js.cn(
+      className: chunkJ36K7WVK_js.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__namespace.Root.displayName;
-var Textarea = React15__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ React15__namespace.createElement(
-      "textarea",
-      {
-        className: chunk3S4FFEHM_js.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";
 var toggleVariants = classVarianceAuthority.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",
   {
@@ -730,102 +648,17 @@ var toggleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toggle = React15__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
+var Toggle = React12__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   TogglePrimitive__namespace.Root,
   {
     ref,
-    className: chunk3S4FFEHM_js.cn(toggleVariants({ variant, size, className })),
+    className: chunkJ36K7WVK_js.cn(toggleVariants({ variant, size, className })),
     ...props
   }
 ));
 Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
 
-// src/components/container-item-toolbar.tsx
-var ContainerItemToolbar = (props) => {
-  const { contentId, canBringUp = false, canBringDown = false } = props;
-  const { bringUp, bringDown } = chunk3S4FFEHM_js.useBuilder();
-  return /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React15__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React15__namespace.createElement(
-    chunk3S4FFEHM_js.Button,
-    {
-      variant: "ghost",
-      className: "sb-w-8 sb-h-8 sb-p-0",
-      onClick: () => bringUp(contentId),
-      disabled: !canBringUp
-    },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
-  ), /* @__PURE__ */ React15__namespace.createElement(
-    chunk3S4FFEHM_js.Button,
-    {
-      variant: "ghost",
-      className: "sb-w-8 sb-h-8 sb-p-0",
-      onClick: () => bringDown(contentId),
-      disabled: !canBringDown
-    },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
-  ), /* @__PURE__ */ React15__namespace.createElement(DeleteButton, { contentId })));
-};
-var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(chunk3S4FFEHM_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React15__namespace.createElement(
-    PopoverContent,
-    {
-      side: "left",
-      align: "start",
-      sideOffset: 16,
-      alignOffset: -8,
-      className: "sb-p-0",
-      collisionPadding: 16
-    },
-    /* @__PURE__ */ React15__namespace.createElement(EditPopoverInner, { id })
-  ));
-};
-var EditPopoverInner = (props) => {
-  const { id } = props;
-  const { getItem } = chunk3S4FFEHM_js.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__namespace.createElement(Tabs, null, /* @__PURE__ */ React15__namespace.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React15__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React15__namespace.createElement(ItemDesignForm, { item })));
-};
-var ContainerItemForm = (props) => {
-  const { item } = props;
-  const { patchItem } = chunk3S4FFEHM_js.useBuilder();
-  const component = chunkVMHWPKU4_js.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 = reactHookForm.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__namespace.useEffect(() => {
-    const subscription = form.watch(() => form.handleSubmit(onSubmit)());
-    return () => subscription.unsubscribe();
-  }, [form.watch, form.handleSubmit]);
-  return /* @__PURE__ */ React15__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React15__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React15__namespace.createElement(
-    FormField,
-    {
-      key: input.name,
-      control: form.control,
-      name: input.name,
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(RenderInput, { type: input.type, input, field })
-    }
-  )))));
-};
+// src/components/item-design-form.tsx
 var spacingSchema = zod.z.discriminatedUnion("indipendent", [
   zod.z.object({
     indipendent: zod.z.literal(false),
@@ -849,9 +682,9 @@ var designSchema = zod.z.object({
 });
 var ItemDesignForm = (props) => {
   const { item } = props;
-  const { patchItem } = chunk3S4FFEHM_js.useBuilder();
-  const initialPadding = chunk3S4FFEHM_js.spacing.parse(item.styles?.padding ?? "");
-  const initialMargin = chunk3S4FFEHM_js.spacing.parse(item.styles?.margin ?? "");
+  const { patchItem } = chunkXEMUNFCV_js.useBuilder();
+  const initialPadding = chunkJ36K7WVK_js.spacing.parse(item.styles?.padding ?? "");
+  const initialMargin = chunkJ36K7WVK_js.spacing.parse(item.styles?.margin ?? "");
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(designSchema),
     defaultValues: {
@@ -859,7 +692,7 @@ var ItemDesignForm = (props) => {
       background: item.styles?.background ?? "",
       color: item.styles?.color ?? "",
       padding: {
-        indipendent: chunk3S4FFEHM_js.spacing.isIndipendent(
+        indipendent: chunkJ36K7WVK_js.spacing.isIndipendent(
           item.styles?.padding ?? ""
         ),
         horizontal: initialPadding.left,
@@ -870,7 +703,7 @@ var ItemDesignForm = (props) => {
         bottom: initialPadding.bottom
       },
       margin: {
-        indipendent: chunk3S4FFEHM_js.spacing.isIndipendent(
+        indipendent: chunkJ36K7WVK_js.spacing.isIndipendent(
           item.styles?.margin ?? ""
         ),
         horizontal: initialMargin.left,
@@ -896,7 +729,7 @@ var ItemDesignForm = (props) => {
       }
     });
   };
-  React15__namespace.useEffect(() => {
+  React12__namespace.useEffect(() => {
     const subscription = form.watch(() => form.handleSubmit(onSubmit)());
     return () => subscription.unsubscribe();
   }, [form.watch, form.handleSubmit]);
@@ -904,135 +737,135 @@ var ItemDesignForm = (props) => {
     "padding.indipendent",
     "margin.indipendent"
   ]);
-  return /* @__PURE__ */ React15__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React15__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React15__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React12__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "background",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         BackgroundPicker,
         {
           background: field.value,
           onBackgroundChange: field.onChange
         }
-      )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
+      )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "color",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         ColorPicker,
         {
           color: field.value,
           onColorChange: field.onChange
         }
-      )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
+      )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement("hr", null), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "container",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         Switch,
         {
           checked: !field.value,
           onCheckedChange: (v) => field.onChange(!v)
         }
-      )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
+      )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement("hr", null), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "padding.horizontal",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "padding.vertical",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  )) : /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
+  )) : /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "padding.left",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "padding.top",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "padding.right",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "padding.bottom",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
+  ))), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "padding.indipendent",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         Toggle,
         {
           className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -1041,99 +874,99 @@ var ItemDesignForm = (props) => {
           pressed: field.value,
           onPressedChange: field.onChange
         },
-        /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
+        /* @__PURE__ */ React12__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
       ))
     }
-  ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null)), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
+  ))), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null)), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "margin.horizontal",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "margin.vertical",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  )) : /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
+  )) : /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "margin.left",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "margin.top",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "margin.right",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "margin.bottom",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+          prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
+          append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
         }
       )))
     }
-  ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
+  ))), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12__namespace.createElement(
     FormField,
     {
       control: form.control,
       name: "margin.indipendent",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         Toggle,
         {
           className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -1142,38 +975,147 @@ var ItemDesignForm = (props) => {
           pressed: field.value,
           onPressedChange: field.onChange
         },
-        /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
+        /* @__PURE__ */ React12__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
       ))
     }
-  ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null)))));
+  ))), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null)))));
+};
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ React12__namespace.createElement(
+    reactDayPicker.DayPicker,
+    {
+      showOutsideDays,
+      className: chunkJ36K7WVK_js.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: chunkJ36K7WVK_js.cn(
+          chunkXEMUNFCV_js.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: chunkJ36K7WVK_js.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: chunkJ36K7WVK_js.cn(
+          chunkXEMUNFCV_js.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__ */ React12__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
+        IconRight: () => /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+var Textarea = React12__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ React12__namespace.createElement(
+      "textarea",
+      {
+        className: chunkJ36K7WVK_js.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 } = chunkXEMUNFCV_js.useBuilder();
+  const component = chunkJ36K7WVK_js.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 = reactHookForm.useForm({
+    defaultValues: (component.inputs || []).reduce(
+      (acc, input) => ({
+        ...acc,
+        [input.name]: item?.props?.[input.name] ?? input.defaultValue
+      }),
+      {}
+    )
+  });
+  const onSubmit = (values) => {
+    patchItem(item.id, {
+      props: values
+    });
+  };
+  React12__namespace.useEffect(() => {
+    const subscription = form.watch(() => form.handleSubmit(onSubmit)());
+    return () => subscription.unsubscribe();
+  }, [form.watch, form.handleSubmit]);
+  return /* @__PURE__ */ React12__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React12__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React12__namespace.createElement(
+    FormField,
+    {
+      key: input.name,
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(RenderInput, { type: input.type, input, field })
+    }
+  )))));
 };
 var RenderInput = (props) => {
   const { type, input, field } = props;
   switch (type) {
     case "string":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "longText":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "richText":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "number":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "color":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "date":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-        chunk3S4FFEHM_js.Button,
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
+        chunkXEMUNFCV_js.Button,
         {
           variant: "outline",
           size: "sm",
-          className: chunk3S4FFEHM_js.cn(
+          className: chunkJ36K7WVK_js.cn(
             "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
             !field.value && "sb-text-muted-foreground"
           )
         },
-        /* @__PURE__ */ React15__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
-        field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React15__namespace.createElement("span", null, "Pick a date")
-      )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React15__namespace.createElement(
+        /* @__PURE__ */ React12__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+        field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React12__namespace.createElement("span", null, "Pick a date")
+      )), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12__namespace.createElement(
         Calendar,
         {
           mode: "single",
@@ -1181,11 +1123,11 @@ var RenderInput = (props) => {
           onSelect: field.onChange,
           initialFocus: true
         }
-      )))), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      )))), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "boolean":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "file":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
         MediaInput,
         {
           className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -1197,54 +1139,81 @@ var RenderInput = (props) => {
             "media-input: Error: " + e?.description
           )
         }
-      )), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
+      )), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.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 } = chunkXEMUNFCV_js.useBuilder();
+  return /* @__PURE__ */ React12__namespace.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__ */ React12__namespace.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__ */ React12__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React12__namespace.createElement(
+    chunkXEMUNFCV_js.Button,
+    {
+      variant: "ghost",
+      className: "sb-w-8 sb-h-8 sb-p-0",
+      onClick: () => bringUp(contentId),
+      disabled: !canBringUp
+    },
+    /* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
+  ), /* @__PURE__ */ React12__namespace.createElement(
+    chunkXEMUNFCV_js.Button,
+    {
+      variant: "ghost",
+      className: "sb-w-8 sb-h-8 sb-p-0",
+      onClick: () => bringDown(contentId),
+      disabled: !canBringDown
+    },
+    /* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
+  ), /* @__PURE__ */ React12__namespace.createElement(DeleteButton, { contentId })));
+};
+var EditButton = ({ id }) => {
+  return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(chunkXEMUNFCV_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12__namespace.createElement(
+    PopoverContent,
+    {
+      side: "left",
+      align: "start",
+      sideOffset: 16,
+      alignOffset: -8,
+      className: "sb-p-0",
+      collisionPadding: 16
+    },
+    /* @__PURE__ */ React12__namespace.createElement(EditPopoverInner, { id })
+  ));
+};
+var EditPopoverInner = (props) => {
+  const { id } = props;
+  const { getItem } = chunkXEMUNFCV_js.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__ */ React12__namespace.createElement(Tabs, null, /* @__PURE__ */ React12__namespace.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React12__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React12__namespace.createElement(ItemDesignForm, { item })));
+};
 var DeleteButton = ({ contentId }) => {
-  const { deleteContent } = chunk3S4FFEHM_js.useBuilder();
-  return /* @__PURE__ */ React15__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-    chunk3S4FFEHM_js.Button,
+  const { deleteContent } = chunkXEMUNFCV_js.useBuilder();
+  return /* @__PURE__ */ React12__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
+    chunkXEMUNFCV_js.Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
     },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
-  )), /* @__PURE__ */ React15__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React15__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React12__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
+  )), /* @__PURE__ */ React12__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React12__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React12__namespace.createElement(
     AlertDialogAction,
     {
-      className: chunk3S4FFEHM_js.buttonVariants({ variant: "destructive" }),
+      className: chunkXEMUNFCV_js.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__namespace.createElement(
-    "div",
-    {
-      className: chunk3S4FFEHM_js.cn("sb-relative", className),
-      style: { ...!src && { background }, ...rest }
-    },
-    src && /* @__PURE__ */ React15__namespace.createElement(
-      Image,
-      {
-        src,
-        alt: "",
-        fill: true,
-        className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
-      }
-    ),
-    container ? /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-container sb-mx-auto" }, children) : children
-  );
-};
 
 // src/components/build-container-client.tsx
 var BuildContainerInner = (props) => {
@@ -1255,14 +1224,14 @@ var BuildContainerInner = (props) => {
       "[simple-builder]: Multiple content blocks detected when using property multiple false."
     );
   }
-  return /* @__PURE__ */ React15__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React15__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React15__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React15__namespace.createElement(DesignWrapper, { styles: item.styles }, chunkVMHWPKU4_js.builder.bindComponent(item, true)), /* @__PURE__ */ React15__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12__namespace.createElement(chunkJ36K7WVK_js.DesignWrapper, { styles: item.styles }, chunkJ36K7WVK_js.builder.bindComponent(item, true)), /* @__PURE__ */ React12__namespace.createElement(
     ContainerItemToolbar,
     {
       contentId: item.id,
       canBringUp: i > 0,
       canBringDown: i < items.length - 1
     }
-  )), multiple && /* @__PURE__ */ React15__namespace.createElement(
+  )), multiple && /* @__PURE__ */ React12__namespace.createElement(
     AddContentDividerButton,
     {
       parent: id,
@@ -1273,12 +1242,12 @@ var BuildContainerInner = (props) => {
 };
 var build_container_client_default = BuildContainerInner;
 var AddContentButton = (props) => {
-  const components = chunkVMHWPKU4_js.builder.getComponents();
-  const { addContent } = chunk3S4FFEHM_js.useBuilder();
-  return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
+  const components = chunkJ36K7WVK_js.builder.getComponents();
+  const { addContent } = chunkXEMUNFCV_js.useBuilder();
+  return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
     const Icon = component.icon ?? lucideReact.ImageIcon;
-    return /* @__PURE__ */ React15__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-      chunk3S4FFEHM_js.Button,
+    return /* @__PURE__ */ React12__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
+      chunkXEMUNFCV_js.Button,
       {
         variant: "ghost",
         className: "sb-justify-start",
@@ -1291,25 +1260,24 @@ var AddContentButton = (props) => {
           );
         }
       },
-      /* @__PURE__ */ React15__namespace.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
+      /* @__PURE__ */ React12__namespace.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
       component.friendlyName ?? component.name
     ));
   }))));
 };
 var AddContentPlaceholder = (props) => {
-  return /* @__PURE__ */ React15__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React15__namespace.createElement(chunk3S4FFEHM_js.Button, { size: "sm" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
+  return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12__namespace.createElement(chunkXEMUNFCV_js.Button, { size: "sm" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
 };
 var AddContentDividerButton = (props) => {
-  return /* @__PURE__ */ React15__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement(
-    chunk3S4FFEHM_js.Button,
+  return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.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__ */ React12__namespace.createElement(
+    chunkXEMUNFCV_js.Button,
     {
       size: "sm",
       className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
     },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+    /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
     "Blok Toevoegen"
   )));
 };
 
-exports.BuildContainerInner = BuildContainerInner;
-exports.default = build_container_client_default;
+module.exports = build_container_client_default;