@simple-builder/react 1.0.0 → 1.0.2

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkTEAHH2DG_js = require('./chunk-TEAHH2DG.js');
+var chunk3S4FFEHM_js = require('./chunk-3S4FFEHM.js');
 var chunkVMHWPKU4_js = require('./chunk-VMHWPKU4.js');
 var React15 = require('react');
 var lucideReact = require('lucide-react');
@@ -56,8 +56,8 @@ var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
 var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
   AlertDialogPrimitive__namespace.Overlay,
   {
-    className: chunkTEAHH2DG_js.cn(
-      "fixed inset-0 z-50 bg-sb-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    className: chunk3S4FFEHM_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
     ),
     ...props,
@@ -69,8 +69,8 @@ var AlertDialogContent = React15__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Content,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn(
-      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-sb-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+    className: chunk3S4FFEHM_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
     ),
     ...props
@@ -83,8 +83,8 @@ var AlertDialogFooter = ({
 }) => /* @__PURE__ */ React15__namespace.createElement(
   "div",
   {
-    className: chunkTEAHH2DG_js.cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+    className: chunk3S4FFEHM_js.cn(
+      "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
       className
     ),
     ...props
@@ -95,7 +95,7 @@ var AlertDialogTitle = React15__namespace.forwardRef(({ className, ...props }, r
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn("text-lg font-semibold", className),
+    className: chunk3S4FFEHM_js.cn("sb-text-lg sb-font-semibold", className),
     ...props
   }
 ));
@@ -104,7 +104,7 @@ var AlertDialogDescription = React15__namespace.forwardRef(({ className, ...prop
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn("text-sm text-sb-muted-foreground", className),
+    className: chunk3S4FFEHM_js.cn("sb-text-sm sb-text-muted-foreground", className),
     ...props
   }
 ));
@@ -113,7 +113,7 @@ var AlertDialogAction = React15__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn(chunkTEAHH2DG_js.buttonVariants(), className),
+    className: chunk3S4FFEHM_js.cn(chunk3S4FFEHM_js.buttonVariants(), className),
     ...props
   }
 ));
@@ -122,9 +122,9 @@ var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn(
-      chunkTEAHH2DG_js.buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
+    className: chunk3S4FFEHM_js.cn(
+      chunk3S4FFEHM_js.buttonVariants({ variant: "outline" }),
+      "sb-mt-2 sm:sb-mt-0",
       className
     ),
     ...props
@@ -132,13 +132,13 @@ var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props },
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
 var labelVariants = classVarianceAuthority.cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "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(
   LabelPrimitive__namespace.Root,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn(labelVariants(), className),
+    className: chunk3S4FFEHM_js.cn(labelVariants(), className),
     ...props
   }
 ));
@@ -177,7 +177,7 @@ var FormItemContext = React15__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: chunkTEAHH2DG_js.cn("space-y-2", className), ...props }));
+  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 }));
 });
 FormItem.displayName = "FormItem";
 var FormLabel = React15__namespace.forwardRef(({ className, ...props }, ref) => {
@@ -186,7 +186,7 @@ var FormLabel = React15__namespace.forwardRef(({ className, ...props }, ref) =>
     Label,
     {
       ref,
-      className: chunkTEAHH2DG_js.cn(error && "text-sb-destructive", className),
+      className: chunk3S4FFEHM_js.cn(error && "sb-text-destructive", className),
       htmlFor: formItemId,
       ...props
     }
@@ -214,7 +214,10 @@ var FormDescription = React15__namespace.forwardRef(({ className, ...props }, re
     {
       ref,
       id: formDescriptionId,
-      className: chunkTEAHH2DG_js.cn("text-sm text-sb-muted-foreground", className),
+      className: chunk3S4FFEHM_js.cn(
+        "sb-text-sm sb-font-roboto sb-text-muted-foreground",
+        className
+      ),
       ...props
     }
   );
@@ -231,7 +234,10 @@ var FormMessage = React15__namespace.forwardRef(({ className, children, ...props
     {
       ref,
       id: formMessageId,
-      className: chunkTEAHH2DG_js.cn("text-sm font-medium text-sb-destructive", className),
+      className: chunk3S4FFEHM_js.cn(
+        "sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
+        className
+      ),
       ...props
     },
     body
@@ -247,8 +253,8 @@ var PopoverContent = React15__namespace.forwardRef(({ className, align = "center
     ref,
     align,
     sideOffset,
-    className: chunkTEAHH2DG_js.cn(
-      "z-50 w-72 rounded-md border bg-sb-popover p-4 text-sb-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    className: 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
@@ -260,7 +266,10 @@ var TabsList = React15__namespace.forwardRef(({ className, ...props }, ref) => /
   TabsPrimitive__namespace.List,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn("flex items-center border-b px-4 space-x-6", className),
+    className: chunk3S4FFEHM_js.cn(
+      "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6",
+      className
+    ),
     ...props
   }
 ));
@@ -269,8 +278,8 @@ var TabsTrigger = React15__namespace.forwardRef(({ className, ...props }, ref) =
   TabsPrimitive__namespace.Trigger,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn(
-      "inline-flex items-center justify-center whitespace-nowrap py-3 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-black border-b-2 border-transparent data-[state=active]:text-sb-foreground text-sb-muted-sb-foreground",
+    className: chunk3S4FFEHM_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
     ),
     ...props
@@ -281,8 +290,8 @@ var TabsContent = React15__namespace.forwardRef(({ className, ...props }, ref) =
   TabsPrimitive__namespace.Content,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn(
-      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className: chunk3S4FFEHM_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
     ),
     ...props
@@ -374,41 +383,41 @@ var MediaInput = (props) => {
       body: JSON.stringify({ src })
     });
   };
-  return /* @__PURE__ */ React15__namespace.createElement("div", { className: chunkTEAHH2DG_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React15__namespace.createElement(MediaInputItem, { key: src, className: chunkTEAHH2DG_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React15__namespace.createElement(
+  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,
     {
       src,
       alt: "",
       fill: true,
-      className: "absolute inset-0 object-cover pointer-events-none"
+      className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
     }
-  ), /* @__PURE__ */ React15__namespace.createElement("div", { className: "absolute right-1 top-1 z-30 flex items-center justify-end gap-3 opacity-0 transition-opacity group-hover:opacity-100" }, /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__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(
     "button",
     {
-      className: "flex h-8 w-8 items-center justify-center rounded-full border bg-sb-secondary text-sb-secondary-foreground opacity-90 shadow transition-opacity hover:opacity-100",
+      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: "h-4 w-4" })
+    /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
   )))), queue.map((_, i) => /* @__PURE__ */ React15__namespace.createElement(
     MediaInputItem,
     {
       key: i,
-      className: chunkTEAHH2DG_js.cn(
-        "flex h-28 w-28 items-center justify-center",
+      className: chunk3S4FFEHM_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: "h-6 w-6 animate-spin" })
+    /* @__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(
     "label",
     {
       htmlFor: id,
-      className: chunkTEAHH2DG_js.cn(
-        "flex h-28 w-28 cursor-pointer items-center justify-center rounded-lg border",
+      className: chunk3S4FFEHM_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: "h-6 w-6" }),
+    /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
     /* @__PURE__ */ React15__namespace.createElement(
       "input",
       {
@@ -417,7 +426,7 @@ var MediaInput = (props) => {
         onChange: handleFilesAdd,
         multiple,
         accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
-        className: "hidden"
+        className: "sb-hidden"
       }
     )
   ) : null);
@@ -426,8 +435,8 @@ var MediaInputItem = (props) => {
   return /* @__PURE__ */ React15__namespace.createElement(
     "div",
     {
-      className: chunkTEAHH2DG_js.cn(
-        "relative h-28 w-28 overflow-hidden rounded-lg border",
+      className: chunk3S4FFEHM_js.cn(
+        "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
         props.className
       )
     },
@@ -474,35 +483,35 @@ var BackgroundPicker = (props) => {
     return "solid";
   }, [background]);
   return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-    chunkTEAHH2DG_js.Button,
+    chunk3S4FFEHM_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkTEAHH2DG_js.cn(
-        "justify-start text-left font-normal normal-case w-full",
-        !background && "text-sb-muted-foreground",
+      className: chunk3S4FFEHM_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: "w-full flex items-center gap-2" }, background ? /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React15__namespace.createElement(
       "div",
       {
-        className: "h-4 w-4 rounded !bg-center !bg-cover transition-all border",
+        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: "h-4 w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "truncate flex-1" }, background ? background : "Kies een achtergrond"))
-  )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "w-64 p-0" }, /* @__PURE__ */ React15__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React15__namespace.createElement(TabsList, { className: "w-full" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "flex-1", value: "image" }, "Image")), /* @__PURE__ */ React15__namespace.createElement(
+    ) : /* @__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(
     TabsContent,
     {
       value: "solid",
-      className: "data-[state=active]:flex flex-wrap gap-1 p-4"
+      className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
     },
     solids.map((s) => /* @__PURE__ */ React15__namespace.createElement(
       "div",
       {
         key: s,
         style: { background: s },
-        className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
+        className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
         onClick: () => onBackgroundChange(s)
       }
     ))
@@ -510,7 +519,7 @@ var BackgroundPicker = (props) => {
     TabsContent,
     {
       value: "gradient",
-      className: "data-[state=active]:flex flex-wrap gap-1 p-4"
+      className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
     },
     gradients.map((s) => /* @__PURE__ */ React15__namespace.createElement(
       "div",
@@ -521,11 +530,11 @@ var BackgroundPicker = (props) => {
         onClick: () => onBackgroundChange(s)
       }
     ))
-  ), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "p-4 border-b" }, /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React15__namespace.createElement(
     MediaInput,
     {
-      className: "grid grid-cols-2 gap-1",
-      itemClassName: "aspect-video h-auto w-full",
+      className: "sb-grid sb-grid-cols-2 sb-gap-1",
+      itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
       multiple: false,
       onFilesChange: (files) => {
         if (!files.length)
@@ -537,12 +546,12 @@ var BackgroundPicker = (props) => {
         "media-input: Error: " + e?.description
       )
     }
-  )), /* @__PURE__ */ React15__namespace.createElement("div", { className: "grid grid-cols-2 gap-1 p-4" }, images.map((s) => /* @__PURE__ */ React15__namespace.createElement(
+  )), /* @__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(
     "div",
     {
       key: s,
       style: { backgroundImage: s },
-      className: "rounded-md bg-cover bg-center aspect-video w-full cursor-pointer border active:scale-105",
+      className: "sb-rounded-md sb-bg-cover sb-bg-center sb-aspect-video sb-w-full sb-cursor-pointer sb-border active:sb-scale-105",
       onClick: () => onBackgroundChange(s)
     }
   )))))));
@@ -557,44 +566,44 @@ function Calendar({
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
-      className: chunkTEAHH2DG_js.cn("p-3", className),
+      className: chunk3S4FFEHM_js.cn("sb-p-3 sb-font-roboto", className),
       classNames: {
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: chunkTEAHH2DG_js.cn(
-          chunkTEAHH2DG_js.buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        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: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell: "text-sb-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: chunkTEAHH2DG_js.cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-sb-accent [&:has([aria-selected].day-outside)]:bg-sb-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
+        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: chunkTEAHH2DG_js.cn(
-          chunkTEAHH2DG_js.buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        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: "bg-sb-primary text-sb-primary-foreground hover:bg-sb-primary hover:text-sb-primary-foreground focus:bg-sb-primary focus:text-sb-primary-foreground",
-        day_today: "bg-sb-accent text-sb-accent-foreground",
-        day_outside: "day-outside text-sb-muted-foreground opacity-50 aria-selected:bg-sb-accent/50 aria-selected:text-sb-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-sb-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-sb-accent aria-selected:text-sb-accent-foreground",
+        day_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: "h-4 w-4" }),
-        IconRight: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronRightIcon, { className: "h-4 w-4" })
+        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
     }
@@ -615,29 +624,29 @@ var ColorPicker = (props) => {
     "#FF0000"
   ];
   return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-    chunkTEAHH2DG_js.Button,
+    chunk3S4FFEHM_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkTEAHH2DG_js.cn(
-        "justify-start text-left font-normal normal-case w-full",
-        !color && "text-sb-muted-foreground",
+      className: chunk3S4FFEHM_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: "w-full flex items-center gap-2" }, color ? /* @__PURE__ */ React15__namespace.createElement(
+    /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React15__namespace.createElement(
       "div",
       {
-        className: "h-4 w-4 rounded !bg-center !bg-cover transition-all border",
+        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: "h-4 w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "truncate flex-1" }, color ? color : "Kies een kleur"))
-  )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "w-64 p-4 flex flex-wrap gap-1" }, colors.map((s) => /* @__PURE__ */ React15__namespace.createElement(
+    ) : /* @__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(
     "div",
     {
       key: s,
       style: { background: s },
-      className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
+      className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
       onClick: () => onColorChange(s)
     }
   ))));
@@ -648,8 +657,8 @@ var Input = React15__namespace.forwardRef(
       "input",
       {
         type,
-        className: chunkTEAHH2DG_js.cn(
-          "flex h-8 w-full rounded-md border border-sb-input bg-sb-background px-3 py-1 text-sm ring-offset-sb-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-sb-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sb-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className: chunk3S4FFEHM_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
         ),
         ref,
@@ -661,15 +670,15 @@ var Input = React15__namespace.forwardRef(
 Input.displayName = "Input";
 var AdvancedInput = React15__namespace.forwardRef(
   ({ prepend, append, ...props }, ref) => {
-    return /* @__PURE__ */ React15__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React15__namespace.createElement(Input, { ref, className: "pl-9 pr-7 text-right", ...props }), prepend && /* @__PURE__ */ React15__namespace.createElement("div", { className: "absolute top-1/2 left-3 -translate-y-1/2" }, prepend), append && /* @__PURE__ */ React15__namespace.createElement("div", { className: "absolute top-1/2 right-3 -translate-y-1/2" }, append));
+    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));
   }
 );
 AdvancedInput.displayName = "AdvancedInput";
 var Switch = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
   SwitchPrimitives__namespace.Root,
   {
-    className: chunkTEAHH2DG_js.cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sb-ring focus-visible:ring-offset-2 focus-visible:ring-offset-sb-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-sb-primary data-[state=unchecked]:bg-sb-input",
+    className: chunk3S4FFEHM_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,
@@ -678,8 +687,8 @@ var Switch = React15__namespace.forwardRef(({ className, ...props }, ref) => /*
   /* @__PURE__ */ React15__namespace.createElement(
     SwitchPrimitives__namespace.Thumb,
     {
-      className: chunkTEAHH2DG_js.cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-sb-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      className: chunk3S4FFEHM_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"
       )
     }
   )
@@ -690,8 +699,8 @@ var Textarea = React15__namespace.forwardRef(
     return /* @__PURE__ */ React15__namespace.createElement(
       "textarea",
       {
-        className: chunkTEAHH2DG_js.cn(
-          "flex min-h-[60px] w-full rounded-md border border-sb-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-sb-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sb-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className: 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,
@@ -702,17 +711,17 @@ var Textarea = React15__namespace.forwardRef(
 );
 Textarea.displayName = "Textarea";
 var toggleVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-sb-background transition-colors hover:bg-sb-muted hover:text-sb-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sb-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-sb-accent data-[state=on]:text-sb-accent-foreground",
+  "sb-inline-flex sb-items-center sb-justify-center sb-rounded-md sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-sb-accent hover:text-sb-accent-foreground"
+        default: "sb-bg-transparent",
+        outline: "sb-border sb-border-input sb-bg-transparent hover:sb-bg-accent hover:sb-text-accent-foreground"
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5"
+        default: "sb-h-10 sb-px-3",
+        sm: "sb-h-9 sb-px-2.5",
+        lg: "sb-h-11 sb-px-5"
       }
     },
     defaultVariants: {
@@ -725,7 +734,7 @@ var Toggle = React15__namespace.forwardRef(({ className, variant, size, ...props
   TogglePrimitive__namespace.Root,
   {
     ref,
-    className: chunkTEAHH2DG_js.cn(toggleVariants({ variant, size, className })),
+    className: chunk3S4FFEHM_js.cn(toggleVariants({ variant, size, className })),
     ...props
   }
 ));
@@ -734,36 +743,36 @@ 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 } = chunkTEAHH2DG_js.useBuilder();
-  return /* @__PURE__ */ React15__namespace.createElement("div", { className: "absolute z-20 top-1 right-1 rounded-md shadow flex flex-col gap-1 p-1 bg-sb-card text-sb-card-sb-foreground sb-item-toolbar opacity-0 transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "h-10 p-1 border border-sb-input bg-sb-background rounded-md text-sm font-medium flex gap-1 items-center justify-start" }, /* @__PURE__ */ React15__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React15__namespace.createElement(
-    chunkTEAHH2DG_js.Button,
+  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: "w-8 h-8 p-0",
+      className: "sb-w-8 sb-h-8 sb-p-0",
       onClick: () => bringUp(contentId),
       disabled: !canBringUp
     },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowUp, { className: "h-5 w-5" })
+    /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
   ), /* @__PURE__ */ React15__namespace.createElement(
-    chunkTEAHH2DG_js.Button,
+    chunk3S4FFEHM_js.Button,
     {
       variant: "ghost",
-      className: "w-8 h-8 p-0",
+      className: "sb-w-8 sb-h-8 sb-p-0",
       onClick: () => bringDown(contentId),
       disabled: !canBringDown
     },
-    /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowDown, { className: "h-5 w-5" })
+    /* @__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(chunkTEAHH2DG_js.Button, { variant: "ghost", className: "w-8 h-8 p-0" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.Edit2Icon, { className: "h-5 w-5" }))), /* @__PURE__ */ React15__namespace.createElement(
+  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: "p-0",
+      className: "sb-p-0",
       collisionPadding: 16
     },
     /* @__PURE__ */ React15__namespace.createElement(EditPopoverInner, { id })
@@ -771,7 +780,7 @@ var EditButton = ({ id }) => {
 };
 var EditPopoverInner = (props) => {
   const { id } = props;
-  const { getItem } = chunkTEAHH2DG_js.useBuilder();
+  const { getItem } = chunk3S4FFEHM_js.useBuilder();
   const item = getItem(id);
   if (!item) {
     throw new Error(
@@ -782,7 +791,7 @@ var EditPopoverInner = (props) => {
 };
 var ContainerItemForm = (props) => {
   const { item } = props;
-  const { patchItem } = chunkTEAHH2DG_js.useBuilder();
+  const { patchItem } = chunk3S4FFEHM_js.useBuilder();
   const component = chunkVMHWPKU4_js.builder.getComponent(item.component);
   if (!component) {
     throw new Error(
@@ -807,7 +816,7 @@ var ContainerItemForm = (props) => {
     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: "space-y-4 p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React15__namespace.createElement(
+  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,
@@ -840,9 +849,9 @@ var designSchema = zod.z.object({
 });
 var ItemDesignForm = (props) => {
   const { item } = props;
-  const { patchItem } = chunkTEAHH2DG_js.useBuilder();
-  const initialPadding = chunkTEAHH2DG_js.spacing.parse(item.styles?.padding ?? "");
-  const initialMargin = chunkTEAHH2DG_js.spacing.parse(item.styles?.margin ?? "");
+  const { patchItem } = chunk3S4FFEHM_js.useBuilder();
+  const initialPadding = chunk3S4FFEHM_js.spacing.parse(item.styles?.padding ?? "");
+  const initialMargin = chunk3S4FFEHM_js.spacing.parse(item.styles?.margin ?? "");
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(designSchema),
     defaultValues: {
@@ -850,7 +859,7 @@ var ItemDesignForm = (props) => {
       background: item.styles?.background ?? "",
       color: item.styles?.color ?? "",
       padding: {
-        indipendent: chunkTEAHH2DG_js.spacing.isIndipendent(
+        indipendent: chunk3S4FFEHM_js.spacing.isIndipendent(
           item.styles?.padding ?? ""
         ),
         horizontal: initialPadding.left,
@@ -861,7 +870,7 @@ var ItemDesignForm = (props) => {
         bottom: initialPadding.bottom
       },
       margin: {
-        indipendent: chunkTEAHH2DG_js.spacing.isIndipendent(
+        indipendent: chunk3S4FFEHM_js.spacing.isIndipendent(
           item.styles?.margin ?? ""
         ),
         horizontal: initialMargin.left,
@@ -873,13 +882,10 @@ var ItemDesignForm = (props) => {
       }
     }
   });
-  console.log("ERRORS", form.formState.errors);
-  console.log("VALUES", form.getValues());
   const onSubmit = (values) => {
     const { container, background, color, padding: p, margin: m } = values;
     const padding = !p.indipendent ? `${p.vertical}px ${p.horizontal}px` : `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
     const margin = !m.indipendent ? `${m.vertical}px ${m.horizontal}px` : `${m.top}px ${m.right}px ${m.bottom}px ${m.left}px`;
-    console.log("CALLING_PATCH_ITEM", "ITEM_ID: " + item.id);
     patchItem(item.id, {
       styles: {
         container,
@@ -898,7 +904,7 @@ 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: "space-y-4 p-4" }, /* @__PURE__ */ React15__namespace.createElement(
+  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(
     FormField,
     {
       control: form.control,
@@ -929,7 +935,7 @@ var ItemDesignForm = (props) => {
     {
       control: form.control,
       name: "container",
-      render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "flex flex-row items-center justify-between space-y-0" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
+      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(
         Switch,
         {
           checked: !field.value,
@@ -937,7 +943,7 @@ var ItemDesignForm = (props) => {
         }
       )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "grid grid-cols-[1fr,auto] gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "grid grid-cols-2 items-center gap-3" }, !indipendentPadding ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
+  ), /* @__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(
     FormField,
     {
       control: form.control,
@@ -946,8 +952,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -960,8 +966,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -974,8 +980,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -988,8 +994,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -1002,8 +1008,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4 rotate-180" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -1016,12 +1022,12 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4 -rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
-  ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
+  ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
     FormField,
     {
       control: form.control,
@@ -1029,16 +1035,16 @@ var ItemDesignForm = (props) => {
       render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
         Toggle,
         {
-          className: "shrink-0 flex w-8 h-8 p-0",
+          className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
           variant: "outline",
           size: "sm",
           pressed: field.value,
           onPressedChange: field.onChange
         },
-        /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "h-4 w-4" })
+        /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
       ))
     }
-  ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null)), /* @__PURE__ */ React15__namespace.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "grid grid-cols-[1fr,auto] gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "grid grid-cols-2 items-center gap-3" }, !indipendentMargin ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
+  ))), /* @__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(
     FormField,
     {
       control: form.control,
@@ -1047,8 +1053,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -1061,8 +1067,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -1075,8 +1081,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -1089,8 +1095,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4 rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -1103,8 +1109,8 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4 rotate-180" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
@@ -1117,12 +1123,12 @@ var ItemDesignForm = (props) => {
         AdvancedInput,
         {
           ...field,
-          prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "h-4 w-4 -rotate-90" }),
-          append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "text-sb-muted-sb-foreground" }, "px")
+          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")
         }
       )))
     }
-  ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
+  ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
     FormField,
     {
       control: form.control,
@@ -1130,13 +1136,13 @@ var ItemDesignForm = (props) => {
       render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
         Toggle,
         {
-          className: "shrink-0 flex w-8 h-8 p-0",
+          className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
           variant: "outline",
           size: "sm",
           pressed: field.value,
           onPressedChange: field.onChange
         },
-        /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "h-4 w-4" })
+        /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
       ))
     }
   ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null)))));
@@ -1156,18 +1162,18 @@ var RenderInput = (props) => {
       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));
     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(
-        chunkTEAHH2DG_js.Button,
+        chunk3S4FFEHM_js.Button,
         {
           variant: "outline",
           size: "sm",
-          className: chunkTEAHH2DG_js.cn(
-            "w-full flex justify-start text-left font-normal",
-            !field.value && "text-muted-foreground"
+          className: chunk3S4FFEHM_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: "mr-2 h-4 w-4" }),
+        /* @__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: "w-auto p-0", align: "start" }, /* @__PURE__ */ React15__namespace.createElement(
+      )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React15__namespace.createElement(
         Calendar,
         {
           mode: "single",
@@ -1177,13 +1183,13 @@ var RenderInput = (props) => {
         }
       )))), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
     case "boolean":
-      return /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "flex flex-row items-center justify-between 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__ */ 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));
     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(
         MediaInput,
         {
-          className: "grid grid-cols-2 gap-1",
-          itemClassName: "aspect-video h-auto w-full",
+          className: "sb-grid sb-grid-cols-2 sb-gap-1",
+          itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
           multiple: false,
           onFilesChange: (files) => field.onChange(files[0]),
           onError: (e) => console.error(
@@ -1199,11 +1205,18 @@ var RenderInput = (props) => {
   }
 };
 var DeleteButton = ({ contentId }) => {
-  const { deleteContent } = chunkTEAHH2DG_js.useBuilder();
-  return /* @__PURE__ */ React15__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(chunkTEAHH2DG_js.Button, { variant: "ghost", className: "w-8 h-8 p-0 text-sb-destructive" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "h-5 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(
+  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,
+    {
+      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(
     AlertDialogAction,
     {
-      className: chunkTEAHH2DG_js.buttonVariants({ variant: "destructive" }),
+      className: chunk3S4FFEHM_js.buttonVariants({ variant: "destructive" }),
       onClick: () => deleteContent(contentId)
     },
     "Verwijderen"
@@ -1217,7 +1230,7 @@ var DesignWrapper = (props) => {
   return /* @__PURE__ */ React15__namespace.createElement(
     "div",
     {
-      className: chunkTEAHH2DG_js.cn("relative", className),
+      className: chunk3S4FFEHM_js.cn("sb-relative", className),
       style: { ...!src && { background }, ...rest }
     },
     src && /* @__PURE__ */ React15__namespace.createElement(
@@ -1226,10 +1239,10 @@ var DesignWrapper = (props) => {
         src,
         alt: "",
         fill: true,
-        className: "object-cover absolute inset-0 pointer-events-none -z-[1]"
+        className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
       }
     ),
-    container ? /* @__PURE__ */ React15__namespace.createElement("div", { className: "container mx-auto" }, children) : children
+    container ? /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-container sb-mx-auto" }, children) : children
   );
 };
 
@@ -1242,7 +1255,7 @@ 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: "relative sb-container-item" }, /* @__PURE__ */ React15__namespace.createElement(DesignWrapper, { styles: item.styles }, chunkVMHWPKU4_js.builder.bindComponent(item, true)), /* @__PURE__ */ React15__namespace.createElement(
+  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(
     ContainerItemToolbar,
     {
       contentId: item.id,
@@ -1261,14 +1274,14 @@ var BuildContainerInner = (props) => {
 var build_container_client_default = BuildContainerInner;
 var AddContentButton = (props) => {
   const components = chunkVMHWPKU4_js.builder.getComponents();
-  const { addContent } = chunkTEAHH2DG_js.useBuilder();
-  return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "p-1" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "grid grid-cols-2 gap-2" }, components.map((component) => {
+  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 Icon = component.icon ?? lucideReact.ImageIcon;
     return /* @__PURE__ */ React15__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
-      chunkTEAHH2DG_js.Button,
+      chunk3S4FFEHM_js.Button,
       {
         variant: "ghost",
-        className: "justify-start",
+        className: "sb-justify-start",
         onClick: () => {
           addContent(
             component.name,
@@ -1278,22 +1291,22 @@ var AddContentButton = (props) => {
           );
         }
       },
-      /* @__PURE__ */ React15__namespace.createElement(Icon, { className: "mr-2 h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ React15__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: "flex justify-center bg-sb-primary/50 p-4" }, /* @__PURE__ */ React15__namespace.createElement(chunkTEAHH2DG_js.Button, { size: "sm" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "mr-2 h-4 w-4" }), "Blok Toevoegen")));
+  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")));
 };
 var AddContentDividerButton = (props) => {
-  return /* @__PURE__ */ React15__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "w-full h-1 -my-[2px] bg-sb-primary relative z-20 opacity-0 add-content-divider-button transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement(
-    chunkTEAHH2DG_js.Button,
+  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,
     {
       size: "sm",
-      className: "absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 shadow"
+      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: "mr-2 h-4 w-4" }),
+    /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
     "Blok Toevoegen"
   )));
 };