@simple-builder/react 1.0.4 → 1.0.5

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

@@ -1,9 +1,9 @@
 'use client';
 'use strict';
 
-require('./chunk-KOBGFPWB.js');
-var chunkXEMUNFCV_js = require('./chunk-XEMUNFCV.js');
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+require('./chunk-2CKQ5QRQ.js');
+var chunkPJOHRI67_js = require('./chunk-PJOHRI67.js');
+var chunk5YLARMT3_js = require('./chunk-5YLARMT3.js');
 var React12 = require('react');
 var lucideReact = require('lucide-react');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
@@ -52,7 +52,7 @@ var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
 var AlertDialogOverlay = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   AlertDialogPrimitive__namespace.Overlay,
   {
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_js.cn(
       "sb-fixed sb-inset-0 sb-z-50 sb-bg-background/80 sb-backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
       className
     ),
@@ -65,7 +65,7 @@ var AlertDialogContent = React12__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Content,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_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
     ),
@@ -79,7 +79,7 @@ var AlertDialogFooter = ({
 }) => /* @__PURE__ */ React12__namespace.createElement(
   "div",
   {
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_js.cn(
       "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
       className
     ),
@@ -91,7 +91,7 @@ var AlertDialogTitle = React12__namespace.forwardRef(({ className, ...props }, r
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn("sb-text-lg sb-font-semibold", className),
+    className: chunk5YLARMT3_js.cn("sb-text-lg sb-font-semibold", className),
     ...props
   }
 ));
@@ -100,7 +100,7 @@ var AlertDialogDescription = React12__namespace.forwardRef(({ className, ...prop
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn("sb-text-sm sb-text-muted-foreground", className),
+    className: chunk5YLARMT3_js.cn("sb-text-sm sb-text-muted-foreground", className),
     ...props
   }
 ));
@@ -109,7 +109,7 @@ var AlertDialogAction = React12__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(chunkXEMUNFCV_js.buttonVariants(), className),
+    className: chunk5YLARMT3_js.cn(chunkPJOHRI67_js.buttonVariants(), className),
     ...props
   }
 ));
@@ -118,8 +118,8 @@ var AlertDialogCancel = React12__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(
-      chunkXEMUNFCV_js.buttonVariants({ variant: "outline" }),
+    className: chunk5YLARMT3_js.cn(
+      chunkPJOHRI67_js.buttonVariants({ variant: "outline" }),
       "sb-mt-2 sm:sb-mt-0",
       className
     ),
@@ -136,7 +136,7 @@ var PopoverContent = React12__namespace.forwardRef(({ className, align = "center
     ref,
     align,
     sideOffset,
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_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
     ),
@@ -151,7 +151,7 @@ var Label = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @
   LabelPrimitive__namespace.Root,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(labelVariants(), className),
+    className: chunk5YLARMT3_js.cn(labelVariants(), className),
     ...props
   }
 ));
@@ -190,7 +190,7 @@ var FormItemContext = React12__namespace.createContext(
 );
 var FormItem = React12__namespace.forwardRef(({ className, ...props }, ref) => {
   const id = React12__namespace.useId();
-  return /* @__PURE__ */ React12__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React12__namespace.createElement("div", { ref, className: chunkJ36K7WVK_js.cn("sb-space-y-2", className), ...props }));
+  return /* @__PURE__ */ React12__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React12__namespace.createElement("div", { ref, className: chunk5YLARMT3_js.cn("sb-space-y-2", className), ...props }));
 });
 FormItem.displayName = "FormItem";
 var FormLabel = React12__namespace.forwardRef(({ className, ...props }, ref) => {
@@ -199,7 +199,7 @@ var FormLabel = React12__namespace.forwardRef(({ className, ...props }, ref) =>
     Label,
     {
       ref,
-      className: chunkJ36K7WVK_js.cn(error && "sb-text-destructive", className),
+      className: chunk5YLARMT3_js.cn(error && "sb-text-destructive", className),
       htmlFor: formItemId,
       ...props
     }
@@ -227,7 +227,7 @@ var FormDescription = React12__namespace.forwardRef(({ className, ...props }, re
     {
       ref,
       id: formDescriptionId,
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_js.cn(
         "sb-text-sm sb-font-roboto sb-text-muted-foreground",
         className
       ),
@@ -247,7 +247,7 @@ var FormMessage = React12__namespace.forwardRef(({ className, children, ...props
     {
       ref,
       id: formMessageId,
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_js.cn(
         "sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
         className
       ),
@@ -262,7 +262,7 @@ var TabsList = React12__namespace.forwardRef(({ className, ...props }, ref) => /
   TabsPrimitive__namespace.List,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_js.cn(
       "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6",
       className
     ),
@@ -274,7 +274,7 @@ var TabsTrigger = React12__namespace.forwardRef(({ className, ...props }, ref) =
   TabsPrimitive__namespace.Trigger,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_js.cn(
       "sb-inline-flex sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-py-3 sb-text-sm sb-font-medium sb-transition-all focus-visible:sb-outline-none disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-border-black sb-border-b-2 sb-border-transparent data-[state=active]:sb-text-foreground sb-text-muted-foreground",
       className
     ),
@@ -286,7 +286,7 @@ var TabsContent = React12__namespace.forwardRef(({ className, ...props }, ref) =
   TabsPrimitive__namespace.Content,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_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
     ),
@@ -371,8 +371,8 @@ var MediaInput = (props) => {
       body: JSON.stringify({ src })
     });
   };
-  return /* @__PURE__ */ React12__namespace.createElement("div", { className: chunkJ36K7WVK_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12__namespace.createElement(MediaInputItem, { key: src, className: chunkJ36K7WVK_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React12__namespace.createElement(
-    chunkJ36K7WVK_js.Image,
+  return /* @__PURE__ */ React12__namespace.createElement("div", { className: chunk5YLARMT3_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12__namespace.createElement(MediaInputItem, { key: src, className: chunk5YLARMT3_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React12__namespace.createElement(
+    chunk5YLARMT3_js.Image,
     {
       src,
       alt: "",
@@ -390,7 +390,7 @@ var MediaInput = (props) => {
     MediaInputItem,
     {
       key: i,
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_js.cn(
         "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
         props.itemClassName
       )
@@ -400,7 +400,7 @@ var MediaInput = (props) => {
     "label",
     {
       htmlFor: id,
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_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
       )
@@ -423,7 +423,7 @@ var MediaInputItem = (props) => {
   return /* @__PURE__ */ React12__namespace.createElement(
     "div",
     {
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_js.cn(
         "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
         props.className
       )
@@ -471,11 +471,11 @@ var BackgroundPicker = (props) => {
     return "solid";
   }, [background]);
   return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
-    chunkXEMUNFCV_js.Button,
+    chunkPJOHRI67_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_js.cn(
         "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
         !background && "sb-text-muted-foreground",
         className
@@ -558,11 +558,11 @@ var ColorPicker = (props) => {
     "#FF0000"
   ];
   return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
-    chunkXEMUNFCV_js.Button,
+    chunkPJOHRI67_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_js.cn(
         "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
         !color && "sb-text-muted-foreground",
         className
@@ -591,7 +591,7 @@ var Input = React12__namespace.forwardRef(
       "input",
       {
         type,
-        className: chunkJ36K7WVK_js.cn(
+        className: chunk5YLARMT3_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
         ),
@@ -611,7 +611,7 @@ AdvancedInput.displayName = "AdvancedInput";
 var Switch = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
   SwitchPrimitives__namespace.Root,
   {
-    className: chunkJ36K7WVK_js.cn(
+    className: chunk5YLARMT3_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
     ),
@@ -621,7 +621,7 @@ var Switch = React12__namespace.forwardRef(({ className, ...props }, ref) => /*
   /* @__PURE__ */ React12__namespace.createElement(
     SwitchPrimitives__namespace.Thumb,
     {
-      className: chunkJ36K7WVK_js.cn(
+      className: chunk5YLARMT3_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"
       )
     }
@@ -652,7 +652,7 @@ var Toggle = React12__namespace.forwardRef(({ className, variant, size, ...props
   TogglePrimitive__namespace.Root,
   {
     ref,
-    className: chunkJ36K7WVK_js.cn(toggleVariants({ variant, size, className })),
+    className: chunk5YLARMT3_js.cn(toggleVariants({ variant, size, className })),
     ...props
   }
 ));
@@ -679,20 +679,21 @@ var designSchema = zod.z.object({
   color: zod.z.string(),
   padding: spacingSchema,
   margin: spacingSchema
-});
+}).passthrough();
 var ItemDesignForm = (props) => {
   const { item } = props;
-  const { patchItem } = chunkXEMUNFCV_js.useBuilder();
-  const initialPadding = chunkJ36K7WVK_js.spacing.parse(item.styles?.padding ?? "");
-  const initialMargin = chunkJ36K7WVK_js.spacing.parse(item.styles?.margin ?? "");
+  const { patchItem } = chunkPJOHRI67_js.useBuilder();
+  const initialPadding = chunk5YLARMT3_js.spacing.parse(item.styles?.padding ?? "");
+  const initialMargin = chunk5YLARMT3_js.spacing.parse(item.styles?.margin ?? "");
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(designSchema),
     defaultValues: {
+      ...item.styles,
       container: item.styles?.container ?? true,
       background: item.styles?.background ?? "",
       color: item.styles?.color ?? "",
       padding: {
-        indipendent: chunkJ36K7WVK_js.spacing.isIndipendent(
+        indipendent: chunk5YLARMT3_js.spacing.isIndipendent(
           item.styles?.padding ?? ""
         ),
         horizontal: initialPadding.left,
@@ -703,7 +704,7 @@ var ItemDesignForm = (props) => {
         bottom: initialPadding.bottom
       },
       margin: {
-        indipendent: chunkJ36K7WVK_js.spacing.isIndipendent(
+        indipendent: chunk5YLARMT3_js.spacing.isIndipendent(
           item.styles?.margin ?? ""
         ),
         horizontal: initialMargin.left,
@@ -716,16 +717,14 @@ var ItemDesignForm = (props) => {
     }
   });
   const onSubmit = (values) => {
-    const { container, background, color, padding: p, margin: m } = values;
+    const { padding: p, margin: m, ...rest } = values;
     const padding = !p.indipendent ? `${p.vertical}px ${p.horizontal}px` : `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
     const margin = !m.indipendent ? `${m.vertical}px ${m.horizontal}px` : `${m.top}px ${m.right}px ${m.bottom}px ${m.left}px`;
     patchItem(item.id, {
       styles: {
-        container,
-        background,
-        color,
         padding,
-        margin
+        margin,
+        ...rest
       }
     });
   };
@@ -990,15 +989,15 @@ function Calendar({
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
-      className: chunkJ36K7WVK_js.cn("sb-p-3 sb-font-roboto", className),
+      className: chunk5YLARMT3_js.cn("sb-p-3 sb-font-roboto", className),
       classNames: {
         months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
         month: "sb-space-y-4",
         caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
         caption_label: "sb-text-sm sb-font-medium",
         nav: "sb-space-x-1 sb-flex sb-items-center",
-        nav_button: chunkJ36K7WVK_js.cn(
-          chunkXEMUNFCV_js.buttonVariants({ variant: "outline" }),
+        nav_button: chunk5YLARMT3_js.cn(
+          chunkPJOHRI67_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",
@@ -1007,12 +1006,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: chunkJ36K7WVK_js.cn(
+        cell: chunk5YLARMT3_js.cn(
           "sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
           props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
         ),
-        day: chunkJ36K7WVK_js.cn(
-          chunkXEMUNFCV_js.buttonVariants({ variant: "ghost" }),
+        day: chunk5YLARMT3_js.cn(
+          chunkPJOHRI67_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",
@@ -1039,7 +1038,7 @@ var Textarea = React12__namespace.forwardRef(
     return /* @__PURE__ */ React12__namespace.createElement(
       "textarea",
       {
-        className: chunkJ36K7WVK_js.cn(
+        className: chunk5YLARMT3_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
         ),
@@ -1054,8 +1053,8 @@ Textarea.displayName = "Textarea";
 // src/components/container-item-form.tsx
 var ContainerItemForm = (props) => {
   const { item } = props;
-  const { patchItem } = chunkXEMUNFCV_js.useBuilder();
-  const component = chunkJ36K7WVK_js.builder.getComponent(item.component);
+  const { patchItem } = chunkPJOHRI67_js.useBuilder();
+  const component = chunk5YLARMT3_js.builder.getComponent(item.component);
   if (!component) {
     throw new Error(
       `[simple-builder]: Component with id ${item.component} not found in container item form component`
@@ -1104,11 +1103,11 @@ var RenderInput = (props) => {
       return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
     case "date":
       return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
-        chunkXEMUNFCV_js.Button,
+        chunkPJOHRI67_js.Button,
         {
           variant: "outline",
           size: "sm",
-          className: chunkJ36K7WVK_js.cn(
+          className: chunk5YLARMT3_js.cn(
             "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
             !field.value && "sb-text-muted-foreground"
           )
@@ -1150,9 +1149,9 @@ var RenderInput = (props) => {
 // src/components/container-item-toolbar.tsx
 var ContainerItemToolbar = (props) => {
   const { contentId, canBringUp = false, canBringDown = false } = props;
-  const { bringUp, bringDown } = chunkXEMUNFCV_js.useBuilder();
+  const { bringUp, bringDown } = chunkPJOHRI67_js.useBuilder();
   return /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React12__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React12__namespace.createElement(
-    chunkXEMUNFCV_js.Button,
+    chunkPJOHRI67_js.Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0",
@@ -1161,7 +1160,7 @@ var ContainerItemToolbar = (props) => {
     },
     /* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
   ), /* @__PURE__ */ React12__namespace.createElement(
-    chunkXEMUNFCV_js.Button,
+    chunkPJOHRI67_js.Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0",
@@ -1172,7 +1171,7 @@ var ContainerItemToolbar = (props) => {
   ), /* @__PURE__ */ React12__namespace.createElement(DeleteButton, { contentId })));
 };
 var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(chunkXEMUNFCV_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(chunkPJOHRI67_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12__namespace.createElement(
     PopoverContent,
     {
       side: "left",
@@ -1187,7 +1186,7 @@ var EditButton = ({ id }) => {
 };
 var EditPopoverInner = (props) => {
   const { id } = props;
-  const { getItem } = chunkXEMUNFCV_js.useBuilder();
+  const { getItem } = chunkPJOHRI67_js.useBuilder();
   const item = getItem(id);
   if (!item) {
     throw new Error(
@@ -1197,9 +1196,9 @@ var EditPopoverInner = (props) => {
   return /* @__PURE__ */ React12__namespace.createElement(Tabs, null, /* @__PURE__ */ React12__namespace.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React12__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React12__namespace.createElement(ItemDesignForm, { item })));
 };
 var DeleteButton = ({ contentId }) => {
-  const { deleteContent } = chunkXEMUNFCV_js.useBuilder();
+  const { deleteContent } = chunkPJOHRI67_js.useBuilder();
   return /* @__PURE__ */ React12__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
-    chunkXEMUNFCV_js.Button,
+    chunkPJOHRI67_js.Button,
     {
       variant: "ghost",
       className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
@@ -1208,7 +1207,7 @@ var DeleteButton = ({ contentId }) => {
   )), /* @__PURE__ */ React12__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React12__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React12__namespace.createElement(
     AlertDialogAction,
     {
-      className: chunkXEMUNFCV_js.buttonVariants({ variant: "destructive" }),
+      className: chunkPJOHRI67_js.buttonVariants({ variant: "destructive" }),
       onClick: () => deleteContent(contentId)
     },
     "Verwijderen"
@@ -1224,7 +1223,7 @@ var BuildContainerInner = (props) => {
       "[simple-builder]: Multiple content blocks detected when using property multiple false."
     );
   }
-  return /* @__PURE__ */ React12__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12__namespace.createElement(chunkJ36K7WVK_js.DesignWrapper, { styles: item.styles }, chunkJ36K7WVK_js.builder.bindComponent(item, true)), /* @__PURE__ */ React12__namespace.createElement(
+  return /* @__PURE__ */ React12__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12__namespace.createElement(chunk5YLARMT3_js.DesignWrapper, { styles: item.styles }, chunk5YLARMT3_js.builder.bindComponent(item, true)), /* @__PURE__ */ React12__namespace.createElement(
     ContainerItemToolbar,
     {
       contentId: item.id,
@@ -1242,12 +1241,12 @@ var BuildContainerInner = (props) => {
 };
 var build_container_client_default = BuildContainerInner;
 var AddContentButton = (props) => {
-  const components = chunkJ36K7WVK_js.builder.getComponents();
-  const { addContent } = chunkXEMUNFCV_js.useBuilder();
+  const components = chunk5YLARMT3_js.builder.getComponents();
+  const { addContent } = chunkPJOHRI67_js.useBuilder();
   return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
     const Icon = component.icon ?? lucideReact.ImageIcon;
     return /* @__PURE__ */ React12__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
-      chunkXEMUNFCV_js.Button,
+      chunkPJOHRI67_js.Button,
       {
         variant: "ghost",
         className: "sb-justify-start",
@@ -1266,11 +1265,11 @@ var AddContentButton = (props) => {
   }))));
 };
 var AddContentPlaceholder = (props) => {
-  return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12__namespace.createElement(chunkXEMUNFCV_js.Button, { size: "sm" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
+  return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12__namespace.createElement(chunkPJOHRI67_js.Button, { size: "sm" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
 };
 var AddContentDividerButton = (props) => {
   return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React12__namespace.createElement(
-    chunkXEMUNFCV_js.Button,
+    chunkPJOHRI67_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"

package/dist/{build-container-client-Y55WZE6M.mjs → build-container-client-VVBART5S.mjs}

@@ -1,7 +1,7 @@
 'use client';
-import './chunk-NP2NHVJP.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-EQMVGJ6X.mjs';
-import { cn, DesignWrapper, builder, spacing, Image } from './chunk-BSE6WW6Q.mjs';
+import './chunk-5IFB55LU.mjs';
+import { buttonVariants, Button, useBuilder } from './chunk-V2LC2Z4Q.mjs';
+import { cn, DesignWrapper, builder, spacing, Image } from './chunk-XHPQBTIC.mjs';
 import * as React12 from 'react';
 import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon, CalendarIcon, Loader2Icon, PaintbrushIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -651,7 +651,7 @@ var designSchema = z.object({
   color: z.string(),
   padding: spacingSchema,
   margin: spacingSchema
-});
+}).passthrough();
 var ItemDesignForm = (props) => {
   const { item } = props;
   const { patchItem } = useBuilder();
@@ -660,6 +660,7 @@ var ItemDesignForm = (props) => {
   const form = useForm({
     resolver: zodResolver(designSchema),
     defaultValues: {
+      ...item.styles,
       container: item.styles?.container ?? true,
       background: item.styles?.background ?? "",
       color: item.styles?.color ?? "",
@@ -688,16 +689,14 @@ var ItemDesignForm = (props) => {
     }
   });
   const onSubmit = (values) => {
-    const { container, background, color, padding: p, margin: m } = values;
+    const { padding: p, margin: m, ...rest } = values;
     const padding = !p.indipendent ? `${p.vertical}px ${p.horizontal}px` : `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
     const margin = !m.indipendent ? `${m.vertical}px ${m.horizontal}px` : `${m.top}px ${m.right}px ${m.bottom}px ${m.left}px`;
     patchItem(item.id, {
       styles: {
-        container,
-        background,
-        color,
         padding,
-        margin
+        margin,
+        ...rest
       }
     });
   };

package/dist/{builder-content-GELONUMY.mjs → builder-content-2ZCDLKAI.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-EQMVGJ6X.mjs';
-import { BuildContainer } from './chunk-BSE6WW6Q.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-V2LC2Z4Q.mjs';
+import { BuildContainer } from './chunk-XHPQBTIC.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{builder-content-QNCUQJUB.js → builder-content-RAITJRFM.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkXEMUNFCV_js = require('./chunk-XEMUNFCV.js');
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunkPJOHRI67_js = require('./chunk-PJOHRI67.js');
+var chunk5YLARMT3_js = require('./chunk-5YLARMT3.js');
 var React2 = require('react');
 
 function _interopNamespace(e) {
@@ -25,17 +25,17 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 var BuilderHeader = () => {
-  const { save } = chunkXEMUNFCV_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-grid sb-grid-cols-3 sb-gap-4 sb-items-center sb-p-2 sb-shadow-lg sb-sticky sb-inset-x-0 sb-top-0 sb-bg-background sb-z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-flex sb-gap-4 sb-items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunkXEMUNFCV_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunkPJOHRI67_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-grid sb-grid-cols-3 sb-gap-4 sb-items-center sb-p-2 sb-shadow-lg sb-sticky sb-inset-x-0 sb-top-0 sb-bg-background sb-z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-flex sb-gap-4 sb-items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunkPJOHRI67_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunkXEMUNFCV_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunkPJOHRI67_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunkXEMUNFCV_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkJ36K7WVK_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunkPJOHRI67_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunk5YLARMT3_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/{chunk-KOBGFPWB.js → chunk-2CKQ5QRQ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunk5YLARMT3_js = require('./chunk-5YLARMT3.js');
 var React = require('react');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var StaticContent = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(
-    chunkJ36K7WVK_js.BuildContainer,
+    chunk5YLARMT3_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-QNCUQJUB.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-RAITJRFM.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;

package/dist/{chunk-NP2NHVJP.mjs → chunk-5IFB55LU.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-BSE6WW6Q.mjs';
+import { BuildContainer } from './chunk-XHPQBTIC.mjs';
 import * as React from 'react';
 import { lazy } from 'react';
 
@@ -15,6 +15,6 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = lazy(() => import('./builder-content-GELONUMY.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-2ZCDLKAI.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-J36K7WVK.js → chunk-5YLARMT3.js}

@@ -125,7 +125,7 @@ var DesignWrapper = (props) => {
   );
 };
 var BuildContainerInner = React3__namespace.lazy(
-  () => import('./build-container-client-PDM3LRIQ.js')
+  () => import('./build-container-client-DKP66XWJ.js')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/{chunk-XEMUNFCV.js → chunk-PJOHRI67.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunk5YLARMT3_js = require('./chunk-5YLARMT3.js');
 var React = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
@@ -59,7 +59,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunkJ36K7WVK_js.builder.getComponent(name);
+      const component = chunk5YLARMT3_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -81,7 +81,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => chunkJ36K7WVK_js.insertAt(content2, index, entry));
+        setContent((content2) => chunk5YLARMT3_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -91,7 +91,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: chunkJ36K7WVK_js.insertAt(item.content?.[container], index, entry)
+                [container]: chunk5YLARMT3_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -246,7 +246,7 @@ var Button = React__namespace.forwardRef(
     return /* @__PURE__ */ React__namespace.createElement(
       Comp,
       {
-        className: chunkJ36K7WVK_js.cn(buttonVariants({ variant, size, className })),
+        className: chunk5YLARMT3_js.cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
       }

package/dist/{chunk-EQMVGJ6X.mjs → chunk-V2LC2Z4Q.mjs}

@@ -1,4 +1,4 @@
-import { cn, builder, insertAt } from './chunk-BSE6WW6Q.mjs';
+import { cn, builder, insertAt } from './chunk-XHPQBTIC.mjs';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';

package/dist/{chunk-BSE6WW6Q.mjs → chunk-XHPQBTIC.mjs}

@@ -101,7 +101,7 @@ var DesignWrapper = (props) => {
   );
 };
 var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-Y55WZE6M.mjs')
+  () => import('./build-container-client-VVBART5S.mjs')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkKOBGFPWB_js = require('./chunk-KOBGFPWB.js');
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunk2CKQ5QRQ_js = require('./chunk-2CKQ5QRQ.js');
+var chunk5YLARMT3_js = require('./chunk-5YLARMT3.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkKOBGFPWB_js.BuilderContent; }
+  get: function () { return chunk2CKQ5QRQ_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkKOBGFPWB_js.StaticContent; }
+  get: function () { return chunk2CKQ5QRQ_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunkJ36K7WVK_js.BuildContainer; }
+  get: function () { return chunk5YLARMT3_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkJ36K7WVK_js.builder; }
+  get: function () { return chunk5YLARMT3_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-NP2NHVJP.mjs';
-export { BuildContainer, builder } from './chunk-BSE6WW6Q.mjs';
+export { BuilderContent, StaticContent } from './chunk-5IFB55LU.mjs';
+export { BuildContainer, builder } from './chunk-XHPQBTIC.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -44,7 +44,7 @@
     "server-only": "^0.0.1",
     "tailwind-merge": "^2.2.0",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.0.4"
+    "@simple-builder/server": "1.0.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0",