@simple-builder/react 1.0.9 → 1.0.11

package/dist/{build-container-client-PB2K64X3.js → build-container-client-QWYPV2WG.js}

@@ -1,9 +1,9 @@
 'use client';
 'use strict';
 
-require('./chunk-VFH3LVDU.js');
-var chunkYGI2WZVP_js = require('./chunk-YGI2WZVP.js');
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+require('./chunk-T4HKIDFE.js');
+var chunkGXNKJBJA_js = require('./chunk-GXNKJBJA.js');
+var chunkB4NNVFW6_js = require('./chunk-B4NNVFW6.js');
 var React11 = require('react');
 var lucideReact = require('lucide-react');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
@@ -18,6 +18,7 @@ var zod$1 = require('@hookform/resolvers/zod');
 var zod = require('zod');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var TogglePrimitive = require('@radix-ui/react-toggle');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -44,6 +45,7 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
@@ -51,7 +53,7 @@ var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
 var AlertDialogOverlay = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
   AlertDialogPrimitive__namespace.Overlay,
   {
-    className: chunkECJUPPTG_js.cn(
+    className: chunkB4NNVFW6_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
     ),
@@ -64,7 +66,7 @@ var AlertDialogContent = React11__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Content,
   {
     ref,
-    className: chunkECJUPPTG_js.cn(
+    className: chunkB4NNVFW6_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
     ),
@@ -78,7 +80,7 @@ var AlertDialogFooter = ({
 }) => /* @__PURE__ */ React11__namespace.createElement(
   "div",
   {
-    className: chunkECJUPPTG_js.cn(
+    className: chunkB4NNVFW6_js.cn(
       "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
       className
     ),
@@ -90,7 +92,7 @@ var AlertDialogTitle = React11__namespace.forwardRef(({ className, ...props }, r
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
-    className: chunkECJUPPTG_js.cn("sb-text-lg sb-font-semibold", className),
+    className: chunkB4NNVFW6_js.cn("sb-text-lg sb-font-semibold", className),
     ...props
   }
 ));
@@ -99,7 +101,7 @@ var AlertDialogDescription = React11__namespace.forwardRef(({ className, ...prop
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
-    className: chunkECJUPPTG_js.cn("sb-text-sm sb-text-muted-foreground", className),
+    className: chunkB4NNVFW6_js.cn("sb-text-sm sb-text-muted-foreground", className),
     ...props
   }
 ));
@@ -108,7 +110,7 @@ var AlertDialogAction = React11__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
-    className: chunkECJUPPTG_js.cn(chunkYGI2WZVP_js.buttonVariants(), className),
+    className: chunkB4NNVFW6_js.cn(chunkGXNKJBJA_js.buttonVariants(), className),
     ...props
   }
 ));
@@ -117,8 +119,8 @@ var AlertDialogCancel = React11__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
-    className: chunkECJUPPTG_js.cn(
-      chunkYGI2WZVP_js.buttonVariants({ variant: "outline" }),
+    className: chunkB4NNVFW6_js.cn(
+      chunkGXNKJBJA_js.buttonVariants({ variant: "outline" }),
       "sb-mt-2 sm:sb-mt-0",
       className
     ),
@@ -135,7 +137,7 @@ var PopoverContent = React11__namespace.forwardRef(({ className, align = "center
     ref,
     align,
     sideOffset,
-    className: chunkECJUPPTG_js.cn(
+    className: chunkB4NNVFW6_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
     ),
@@ -153,15 +155,15 @@ function Calendar({
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
-      className: chunkECJUPPTG_js.cn("sb-p-3 sb-font-roboto", className),
+      className: chunkB4NNVFW6_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: chunkECJUPPTG_js.cn(
-          chunkYGI2WZVP_js.buttonVariants({ variant: "outline" }),
+        nav_button: chunkB4NNVFW6_js.cn(
+          chunkGXNKJBJA_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",
@@ -170,12 +172,12 @@ function Calendar({
         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: chunkECJUPPTG_js.cn(
+        cell: chunkB4NNVFW6_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: chunkECJUPPTG_js.cn(
-          chunkYGI2WZVP_js.buttonVariants({ variant: "ghost" }),
+        day: chunkB4NNVFW6_js.cn(
+          chunkGXNKJBJA_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",
@@ -211,11 +213,11 @@ var ColorPicker = (props) => {
     "#FF0000"
   ];
   return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
-    chunkYGI2WZVP_js.Button,
+    chunkGXNKJBJA_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_js.cn(
         "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
         !color && "sb-text-muted-foreground",
         className
@@ -238,7 +240,7 @@ var ColorPicker = (props) => {
     }
   ))));
 };
-var labelVariants = chunkECJUPPTG_js.tv({
+var labelVariants = chunkB4NNVFW6_js.tv({
   base: "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
 });
 var Label = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
@@ -284,7 +286,7 @@ var FormItemContext = React11__namespace.createContext(
 );
 var FormItem = React11__namespace.forwardRef(({ className, ...props }, ref) => {
   const id = React11__namespace.useId();
-  return /* @__PURE__ */ React11__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React11__namespace.createElement("div", { ref, className: chunkECJUPPTG_js.cn("sb-space-y-2", className), ...props }));
+  return /* @__PURE__ */ React11__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React11__namespace.createElement("div", { ref, className: chunkB4NNVFW6_js.cn("sb-space-y-2", className), ...props }));
 });
 FormItem.displayName = "FormItem";
 var FormLabel = React11__namespace.forwardRef(({ className, ...props }, ref) => {
@@ -293,7 +295,7 @@ var FormLabel = React11__namespace.forwardRef(({ className, ...props }, ref) =>
     Label,
     {
       ref,
-      className: chunkECJUPPTG_js.cn(error && "sb-text-destructive", className),
+      className: chunkB4NNVFW6_js.cn(error && "sb-text-destructive", className),
       htmlFor: formItemId,
       ...props
     }
@@ -321,7 +323,7 @@ var FormDescription = React11__namespace.forwardRef(({ className, ...props }, re
     {
       ref,
       id: formDescriptionId,
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_js.cn(
         "sb-text-sm sb-font-roboto sb-text-muted-foreground",
         className
       ),
@@ -341,7 +343,7 @@ var FormMessage = React11__namespace.forwardRef(({ className, children, ...props
     {
       ref,
       id: formMessageId,
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_js.cn(
         "sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
         className
       ),
@@ -357,7 +359,7 @@ var Input = React11__namespace.forwardRef(
       "input",
       {
         type,
-        className: chunkECJUPPTG_js.cn(
+        className: chunkB4NNVFW6_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
         ),
@@ -451,8 +453,8 @@ var MediaInput = (props) => {
       body: JSON.stringify({ src })
     });
   };
-  return /* @__PURE__ */ React11__namespace.createElement("div", { className: chunkECJUPPTG_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React11__namespace.createElement(MediaInputItem, { key: src, className: chunkECJUPPTG_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React11__namespace.createElement(
-    chunkECJUPPTG_js.Image,
+  return /* @__PURE__ */ React11__namespace.createElement("div", { className: chunkB4NNVFW6_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React11__namespace.createElement(MediaInputItem, { key: src, className: chunkB4NNVFW6_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React11__namespace.createElement(
+    chunkB4NNVFW6_js.Image,
     {
       src,
       alt: "",
@@ -470,7 +472,7 @@ var MediaInput = (props) => {
     MediaInputItem,
     {
       key: i,
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_js.cn(
         "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
         props.itemClassName
       )
@@ -480,7 +482,7 @@ var MediaInput = (props) => {
     "label",
     {
       htmlFor: id,
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_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
       )
@@ -503,7 +505,7 @@ var MediaInputItem = (props) => {
   return /* @__PURE__ */ React11__namespace.createElement(
     "div",
     {
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_js.cn(
         "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
         props.className
       )
@@ -523,7 +525,7 @@ var MediaInputError = class extends Error {
 var Switch = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
   SwitchPrimitives__namespace.Root,
   {
-    className: chunkECJUPPTG_js.cn(
+    className: chunkB4NNVFW6_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
     ),
@@ -533,7 +535,7 @@ var Switch = React11__namespace.forwardRef(({ className, ...props }, ref) => /*
   /* @__PURE__ */ React11__namespace.createElement(
     SwitchPrimitives__namespace.Thumb,
     {
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_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"
       )
     }
@@ -545,7 +547,7 @@ var Textarea = React11__namespace.forwardRef(
     return /* @__PURE__ */ React11__namespace.createElement(
       "textarea",
       {
-        className: chunkECJUPPTG_js.cn(
+        className: chunkB4NNVFW6_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
         ),
@@ -560,8 +562,8 @@ Textarea.displayName = "Textarea";
 // src/components/container-item-form.tsx
 var ContainerItemForm = (props) => {
   const { item } = props;
-  const { patchItem } = chunkYGI2WZVP_js.useBuilder();
-  const component = chunkECJUPPTG_js.builder.getComponent(item.component);
+  const { patchItem } = chunkGXNKJBJA_js.useBuilder();
+  const component = chunkB4NNVFW6_js.builder.getComponent(item.component);
   if (!component) {
     throw new Error(
       `[simple-builder]: Component with id ${item.component} not found in container item form component`
@@ -586,35 +588,133 @@ var ContainerItemForm = (props) => {
     return () => subscription.unsubscribe();
   }, [form.watch, form.handleSubmit]);
   return /* @__PURE__ */ React11__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React11__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React11__namespace.createElement(
-    FormField,
+    RenderFormField,
     {
       key: input.name,
-      control: form.control,
-      name: input.name,
-      render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(RenderInput, { type: input.type, input, field })
+      type: input.type,
+      input,
+      form
     }
   )))));
 };
+var RenderFormField = (props) => {
+  const { type, input, form } = props;
+  const fieldArray = reactHookForm.useFieldArray({
+    control: form.control,
+    name: input.name
+  });
+  if (input.multiple) {
+    return /* @__PURE__ */ React11__namespace.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
+      (field, i) => type !== "grouped" ? /* @__PURE__ */ React11__namespace.createElement(
+        FormField,
+        {
+          key: field.id,
+          control: form.control,
+          name: `${input.name}.${i}`,
+          render: ({ field: field2 }) => /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React11__namespace.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React11__namespace.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })))
+        }
+      ) : /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React11__namespace.createElement(
+        RenderFormField,
+        {
+          key: field.id,
+          form,
+          type,
+          input: {
+            ...input,
+            name: `${input.name}.${i}`,
+            multiple: false,
+            friendlyName: ""
+          }
+        }
+      ), /* @__PURE__ */ React11__namespace.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => fieldArray.remove(i),
+          className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
+        },
+        /* @__PURE__ */ React11__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })
+      ))
+    ), /* @__PURE__ */ React11__namespace.createElement(
+      chunkGXNKJBJA_js.Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: chunkB4NNVFW6_js.cn(
+          "sb-w-[89%] sb-border-2 sb-border-dashed sb-text-muted-foreground",
+          type === "grouped" && "sb-w-full"
+        ),
+        onClick: () => fieldArray.append(void 0)
+      },
+      /* @__PURE__ */ React11__namespace.createElement(lucideReact.PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
+    )));
+  }
+  switch (type) {
+    case "string":
+    case "number":
+    case "longText":
+    case "richText":
+    case "color":
+    case "date":
+    case "file":
+      return /* @__PURE__ */ React11__namespace.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ React11__namespace.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null))
+        }
+      );
+    case "grouped":
+      return /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React11__namespace.createElement(
+        RenderFormField,
+        {
+          key: `${input.name}.${sub.name}`,
+          type: sub.type,
+          input: {
+            ...sub,
+            name: `${input.name}.${sub.name}`
+          },
+          form
+        }
+      ))));
+    default:
+      throw new Error(
+        `[simple-builder]: Input type "${props.type}" not supported in render form field.`
+      );
+  }
+};
 var RenderInput = (props) => {
-  const { type, input, field } = props;
+  const { type, field } = props;
   switch (type) {
     case "string":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11__namespace.createElement(Input, { ...field });
     case "longText":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
     case "richText":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11__namespace.createElement(Textarea, { ...field });
     case "number":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11__namespace.createElement(Input, { type: "number", ...field });
     case "color":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
     case "date":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
-        chunkYGI2WZVP_js.Button,
+      return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
+        chunkGXNKJBJA_js.Button,
         {
           variant: "outline",
           size: "sm",
-          className: chunkECJUPPTG_js.cn(
+          className: chunkB4NNVFW6_js.cn(
             "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
             !field.value && "sb-text-muted-foreground"
           )
@@ -629,11 +729,11 @@ var RenderInput = (props) => {
           onSelect: field.onChange,
           initialFocus: true
         }
-      )))), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
+      )));
     case "boolean":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
     case "file":
-      return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(
+      return /* @__PURE__ */ React11__namespace.createElement(
         MediaInput,
         {
           className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -645,15 +745,15 @@ var RenderInput = (props) => {
             "media-input: Error: " + e?.description
           )
         }
-      )), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
+      );
     default:
       throw new Error(
-        `[simple-builder]: Input type "${props.type}" not supported`
+        `[simple-builder]: Input type "${props.type}" not supported in render input.`
       );
   }
 };
 var Tabs = TabsPrimitive__namespace.Root;
-var tabsListVariants = chunkECJUPPTG_js.tv({
+var tabsListVariants = chunkB4NNVFW6_js.tv({
   variants: {
     variant: {
       contained: "sb-inline-flex sb-h-10 sb-items-center sb-justify-center sb-rounded-md sb-bg-muted sb-p-1 sb-text-muted-foreground",
@@ -673,7 +773,7 @@ var TabsList = React11__namespace.forwardRef(({ variant, className, ...props },
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var tabsTriggerVariants = chunkECJUPPTG_js.tv({
+var tabsTriggerVariants = chunkB4NNVFW6_js.tv({
   variants: {
     variant: {
       contained: "sb-inline-flex sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-sm sb-px-3 sb-py-1.5 sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-all focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-bg-background data-[state=active]:sb-text-foreground data-[state=active]:sb-shadow-sm",
@@ -697,7 +797,7 @@ var TabsContent = React11__namespace.forwardRef(({ className, ...props }, ref) =
   TabsPrimitive__namespace.Content,
   {
     ref,
-    className: chunkECJUPPTG_js.cn(
+    className: chunkB4NNVFW6_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
     ),
@@ -736,11 +836,11 @@ var BackgroundPicker = (props) => {
     return "solid";
   }, [background]);
   return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
-    chunkYGI2WZVP_js.Button,
+    chunkGXNKJBJA_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkECJUPPTG_js.cn(
+      className: chunkB4NNVFW6_js.cn(
         "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
         !background && "sb-text-muted-foreground",
         className
@@ -809,7 +909,7 @@ var BackgroundPicker = (props) => {
     }
   )))))));
 };
-var toggleVariants = chunkECJUPPTG_js.tv({
+var toggleVariants = chunkB4NNVFW6_js.tv({
   base: "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: {
@@ -964,7 +1064,7 @@ var designSchema = zod.z.object({
 });
 var ItemDesignForm = (props) => {
   const { item } = props;
-  const component = chunkECJUPPTG_js.builder.getComponent(item.component);
+  const component = chunkB4NNVFW6_js.builder.getComponent(item.component);
   if (!component) {
     throw new Error(
       `[simple-builder]: Component "${item.component}" not found`
@@ -1005,7 +1105,7 @@ var ItemDesignForm = (props) => {
       mobile: getDefaultDeviceValues("mobile")
     }
   });
-  const { patchItem } = chunkYGI2WZVP_js.useBuilder();
+  const { patchItem } = chunkGXNKJBJA_js.useBuilder();
   const onSubmit = (values) => {
     const { container, desktop, mobile } = values;
     const dirtyFields = form.formState.dirtyFields;
@@ -1023,6 +1123,11 @@ var ItemDesignForm = (props) => {
         if (value === desktopValue || isDirty) {
           return acc;
         }
+        if (["padding", "margin"].includes(key)) {
+          if (value === "0px" && desktopValue === "0px") {
+            return acc;
+          }
+        }
         return {
           ...acc,
           ...value && { [key]: value }
@@ -1033,8 +1138,8 @@ var ItemDesignForm = (props) => {
     patchItem(item.id, {
       styles: {
         ...container === false && { container },
-        desktop: desktopPatch,
-        mobile: mobilePatch
+        ...Object.keys(desktopPatch).length && { desktop: desktopPatch },
+        ...Object.keys(mobilePatch).length && { mobile: mobilePatch }
       }
     });
   };
@@ -1121,13 +1226,41 @@ var ItemDesignForm = (props) => {
     }
   )))));
 };
+var ScrollArea = React11__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
+  ScrollAreaPrimitive__namespace.Root,
+  {
+    ref,
+    className: chunkB4NNVFW6_js.cn("sb-relative sb-overflow-hidden", className),
+    ...props
+  },
+  /* @__PURE__ */ React11__namespace.createElement(ScrollAreaPrimitive__namespace.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
+  /* @__PURE__ */ React11__namespace.createElement(ScrollBar, null),
+  /* @__PURE__ */ React11__namespace.createElement(ScrollAreaPrimitive__namespace.Corner, null)
+));
+ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
+var ScrollBar = React11__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
+  ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: chunkB4NNVFW6_js.cn(
+      "sb-flex sb-touch-none sb-select-none sb-transition-colors",
+      orientation === "vertical" && "sb-h-full sb-w-2.5 sb-border-l sb-border-l-transparent sb-p-[1px]",
+      orientation === "horizontal" && "sb-h-2.5 sb-flex-col sb-border-t sb-border-t-transparent sb-p-[1px]",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React11__namespace.createElement(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
+));
+ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
 
 // src/components/container-item-toolbar.tsx
 var ContainerItemToolbar = (props) => {
   const { contentId, canBringUp = false, canBringDown = false } = props;
-  const { bringUp, bringDown } = chunkYGI2WZVP_js.useBuilder();
+  const { bringUp, bringDown } = chunkGXNKJBJA_js.useBuilder();
   return /* @__PURE__ */ React11__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__ */ React11__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__ */ React11__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React11__namespace.createElement(
-    chunkYGI2WZVP_js.Button,
+    chunkGXNKJBJA_js.Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0",
@@ -1136,7 +1269,7 @@ var ContainerItemToolbar = (props) => {
     },
     /* @__PURE__ */ React11__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
   ), /* @__PURE__ */ React11__namespace.createElement(
-    chunkYGI2WZVP_js.Button,
+    chunkGXNKJBJA_js.Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0",
@@ -1147,14 +1280,14 @@ var ContainerItemToolbar = (props) => {
   ), /* @__PURE__ */ React11__namespace.createElement(DeleteButton, { contentId })));
 };
 var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(chunkYGI2WZVP_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11__namespace.createElement(
+  return /* @__PURE__ */ React11__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(chunkGXNKJBJA_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11__namespace.createElement(
     PopoverContent,
     {
       side: "left",
       align: "start",
       sideOffset: 16,
       alignOffset: -8,
-      className: "sb-p-0",
+      className: "sb-p-0 sb-relative",
       collisionPadding: 16
     },
     /* @__PURE__ */ React11__namespace.createElement(EditPopoverInner, { id })
@@ -1162,19 +1295,19 @@ var EditButton = ({ id }) => {
 };
 var EditPopoverInner = (props) => {
   const { id } = props;
-  const { getItem } = chunkYGI2WZVP_js.useBuilder();
+  const { getItem } = chunkGXNKJBJA_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__ */ React11__namespace.createElement(Tabs, null, /* @__PURE__ */ React11__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React11__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11__namespace.createElement(ItemDesignForm, { item })));
+  return /* @__PURE__ */ React11__namespace.createElement(Tabs, null, /* @__PURE__ */ React11__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11__namespace.createElement(ScrollArea, null, /* @__PURE__ */ React11__namespace.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React11__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11__namespace.createElement(ItemDesignForm, { item })));
 };
 var DeleteButton = ({ contentId }) => {
-  const { deleteContent } = chunkYGI2WZVP_js.useBuilder();
+  const { deleteContent } = chunkGXNKJBJA_js.useBuilder();
   return /* @__PURE__ */ React11__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React11__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
-    chunkYGI2WZVP_js.Button,
+    chunkGXNKJBJA_js.Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
@@ -1183,7 +1316,7 @@ var DeleteButton = ({ contentId }) => {
   )), /* @__PURE__ */ React11__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React11__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React11__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React11__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React11__namespace.createElement(
     AlertDialogAction,
     {
-      className: chunkYGI2WZVP_js.buttonVariants({ variant: "destructive" }),
+      className: chunkGXNKJBJA_js.buttonVariants({ variant: "destructive" }),
       onClick: () => deleteContent(contentId)
     },
     "Verwijderen"
@@ -1199,7 +1332,7 @@ var BuildContainerInner = (props) => {
       "[simple-builder]: Multiple content blocks detected when using property multiple false."
     );
   }
-  return /* @__PURE__ */ React11__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React11__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React11__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React11__namespace.createElement(React11__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React11__namespace.createElement(chunkECJUPPTG_js.DesignWrapper, { styles: item.styles }, chunkECJUPPTG_js.builder.bindComponent(item, true)), /* @__PURE__ */ React11__namespace.createElement(
+  return /* @__PURE__ */ React11__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React11__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React11__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React11__namespace.createElement(React11__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React11__namespace.createElement(chunkB4NNVFW6_js.DesignWrapper, { styles: item.styles }, chunkB4NNVFW6_js.builder.bindComponent(item, true)), /* @__PURE__ */ React11__namespace.createElement(
     ContainerItemToolbar,
     {
       contentId: item.id,
@@ -1217,12 +1350,12 @@ var BuildContainerInner = (props) => {
 };
 var build_container_client_default = BuildContainerInner;
 var AddContentButton = (props) => {
-  const components = chunkECJUPPTG_js.builder.getComponents();
-  const { addContent } = chunkYGI2WZVP_js.useBuilder();
+  const components = chunkB4NNVFW6_js.builder.getComponents();
+  const { addContent } = chunkGXNKJBJA_js.useBuilder();
   return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React11__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
     const Icon = component.icon ?? lucideReact.ImageIcon;
     return /* @__PURE__ */ React11__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
-      chunkYGI2WZVP_js.Button,
+      chunkGXNKJBJA_js.Button,
       {
         variant: "ghost",
         className: "sb-justify-start",
@@ -1241,11 +1374,11 @@ var AddContentButton = (props) => {
   }))));
 };
 var AddContentPlaceholder = (props) => {
-  return /* @__PURE__ */ React11__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React11__namespace.createElement(chunkYGI2WZVP_js.Button, { size: "sm" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
+  return /* @__PURE__ */ React11__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React11__namespace.createElement(chunkGXNKJBJA_js.Button, { size: "sm" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
 };
 var AddContentDividerButton = (props) => {
   return /* @__PURE__ */ React11__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React11__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__ */ React11__namespace.createElement(
-    chunkYGI2WZVP_js.Button,
+    chunkGXNKJBJA_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"