@simple-builder/react 1.0.9 → 1.0.10

package/dist/{build-container-client-BOFDDL56.mjs → build-container-client-WS5CHAV7.mjs}

@@ -1,13 +1,13 @@
 'use client';
-import './chunk-LULPEBSO.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-2GQCSML3.mjs';
-import { cn, tv, DesignWrapper, builder, Image } from './chunk-OCMLPCSW.mjs';
+import './chunk-BP6PJZIZ.mjs';
+import { buttonVariants, Button, useBuilder } from './chunk-2PY5SZFT.mjs';
+import { cn, tv, DesignWrapper, builder, Image } from './chunk-LEULOM72.mjs';
 import * as React11 from 'react';
-import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
+import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { format } from 'date-fns';
-import { useFormContext, useForm, FormProvider, Controller } from 'react-hook-form';
+import { useFormContext, useForm, useFieldArray, FormProvider, Controller } from 'react-hook-form';
 import { DayPicker } from 'react-day-picker';
 import { Slot } from '@radix-ui/react-slot';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -16,6 +16,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
@@ -558,30 +559,128 @@ var ContainerItemForm = (props) => {
     return () => subscription.unsubscribe();
   }, [form.watch, form.handleSubmit]);
   return /* @__PURE__ */ React11.createElement(Form, { ...form }, /* @__PURE__ */ React11.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React11.createElement(
-    FormField,
+    RenderFormField,
     {
       key: input.name,
-      control: form.control,
-      name: input.name,
-      render: ({ field }) => /* @__PURE__ */ React11.createElement(RenderInput, { type: input.type, input, field })
+      type: input.type,
+      input,
+      form
     }
   )))));
 };
+var RenderFormField = (props) => {
+  const { type, input, form } = props;
+  const fieldArray = useFieldArray({
+    control: form.control,
+    name: input.name
+  });
+  if (input.multiple) {
+    return /* @__PURE__ */ React11.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
+      (field, i) => type !== "grouped" ? /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: field.id,
+          control: form.control,
+          name: `${input.name}.${i}`,
+          render: ({ field: field2 }) => /* @__PURE__ */ React11.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React11.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React11.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React11.createElement(XIcon, { className: "sb-h-4 sb-w-4" })))
+        }
+      ) : /* @__PURE__ */ React11.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React11.createElement(
+        RenderFormField,
+        {
+          key: field.id,
+          form,
+          type,
+          input: {
+            ...input,
+            name: `${input.name}.${i}`,
+            multiple: false,
+            friendlyName: ""
+          }
+        }
+      ), /* @__PURE__ */ React11.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.createElement(XIcon, { className: "sb-h-4 sb-w-4" })
+      ))
+    ), /* @__PURE__ */ React11.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: 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.createElement(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.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null))
+        }
+      );
+    case "grouped":
+      return /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React11.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.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Input, { ...field });
     case "longText":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     case "richText":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Textarea, { ...field });
     case "number":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Input, { type: "number", ...field });
     case "color":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
     case "date":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
         Button,
         {
           variant: "outline",
@@ -601,11 +700,11 @@ var RenderInput = (props) => {
           onSelect: field.onChange,
           initialFocus: true
         }
-      )))), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      )));
     case "boolean":
-      return /* @__PURE__ */ React11.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
     case "file":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React11.createElement(
         MediaInput,
         {
           className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -617,10 +716,10 @@ var RenderInput = (props) => {
             "media-input: Error: " + e?.description
           )
         }
-      )), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.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.`
       );
   }
 };
@@ -995,6 +1094,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 }
@@ -1005,8 +1109,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 }
       }
     });
   };
@@ -1093,6 +1197,34 @@ var ItemDesignForm = (props) => {
     }
   )))));
 };
+var ScrollArea = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("sb-relative sb-overflow-hidden", className),
+    ...props
+  },
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
+  /* @__PURE__ */ React11.createElement(ScrollBar, null),
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: 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.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/container-item-toolbar.tsx
 var ContainerItemToolbar = (props) => {
@@ -1119,14 +1251,14 @@ var ContainerItemToolbar = (props) => {
   ), /* @__PURE__ */ React11.createElement(DeleteButton, { contentId })));
 };
 var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React11.createElement(Popover, { modal: true }, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11.createElement(
     PopoverContent,
     {
       side: "left",
       align: "start",
       sideOffset: 16,
       alignOffset: -8,
-      className: "sb-p-0",
+      className: "sb-p-0 sb-relative",
       collisionPadding: 16
     },
     /* @__PURE__ */ React11.createElement(EditPopoverInner, { id })
@@ -1141,7 +1273,7 @@ var EditPopoverInner = (props) => {
       `[simple-builder]: Item with id ${id} not found in container item form component`
     );
   }
-  return /* @__PURE__ */ React11.createElement(Tabs, null, /* @__PURE__ */ React11.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React11.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11.createElement(ItemDesignForm, { item })));
+  return /* @__PURE__ */ React11.createElement(Tabs, null, /* @__PURE__ */ React11.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11.createElement(ScrollArea, null, /* @__PURE__ */ React11.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React11.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11.createElement(ItemDesignForm, { item })));
 };
 var DeleteButton = ({ contentId }) => {
   const { deleteContent } = useBuilder();

package/dist/{builder-content-SSON3UB4.js → builder-content-FXMV6TNF.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkYGI2WZVP_js = require('./chunk-YGI2WZVP.js');
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+var chunkNKBSQAU6_js = require('./chunk-NKBSQAU6.js');
+var chunkGP4CVRJO_js = require('./chunk-GP4CVRJO.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 } = chunkYGI2WZVP_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(chunkYGI2WZVP_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunkNKBSQAU6_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(chunkNKBSQAU6_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunkYGI2WZVP_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunkNKBSQAU6_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunkYGI2WZVP_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkECJUPPTG_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunkNKBSQAU6_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkGP4CVRJO_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/{builder-content-XM6XI2VA.css → builder-content-N7Z4YJMT.css}

@@ -186,6 +186,9 @@
 .sb-right-1 {
   right: 0.25rem;
 }
+.sb-right-2 {
+  right: 0.5rem;
+}
 .sb-right-3 {
   right: 0.75rem;
 }
@@ -198,6 +201,9 @@
 .sb-top-1\/2 {
   top: 50%;
 }
+.sb-top-2 {
+  top: 0.5rem;
+}
 .sb-top-\[50\%\] {
   top: 50%;
 }
@@ -254,6 +260,12 @@
 .sb-h-11 {
   height: 2.75rem;
 }
+.sb-h-2 {
+  height: 0.5rem;
+}
+.sb-h-2\.5 {
+  height: 0.625rem;
+}
 .sb-h-28 {
   height: 7rem;
 }
@@ -278,12 +290,24 @@
 .sb-h-auto {
   height: auto;
 }
+.sb-h-full {
+  height: 100%;
+}
+.sb-max-h-\[80vh\] {
+  max-height: 80vh;
+}
 .sb-min-h-\[60px\] {
   min-height: 60px;
 }
 .sb-w-11 {
   width: 2.75rem;
 }
+.sb-w-2 {
+  width: 0.5rem;
+}
+.sb-w-2\.5 {
+  width: 0.625rem;
+}
 .sb-w-28 {
   width: 7rem;
 }
@@ -308,6 +332,9 @@
 .sb-w-8 {
   width: 2rem;
 }
+.sb-w-\[89\%\] {
+  width: 89%;
+}
 .sb-w-auto {
   width: auto;
 }
@@ -365,6 +392,14 @@
 .sb-cursor-pointer {
   cursor: pointer;
 }
+.sb-touch-none {
+  touch-action: none;
+}
+.sb-select-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 .sb-grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -457,6 +492,9 @@
 .sb-rounded {
   border-radius: 0.25rem;
 }
+.sb-rounded-\[inherit\] {
+  border-radius: inherit;
+}
 .sb-rounded-full {
   border-radius: 9999px;
 }
@@ -481,12 +519,27 @@
 .sb-border-b-2 {
   border-bottom-width: 2px;
 }
+.sb-border-l {
+  border-left-width: 1px;
+}
+.sb-border-t {
+  border-top-width: 1px;
+}
+.sb-border-dashed {
+  border-style: dashed;
+}
 .sb-border-input {
   border-color: hsl(var(--sb-input));
 }
 .sb-border-transparent {
   border-color: transparent;
 }
+.sb-border-l-transparent {
+  border-left-color: transparent;
+}
+.sb-border-t-transparent {
+  border-top-color: transparent;
+}
 .sb-bg-accent {
   background-color: hsl(var(--sb-accent));
 }
@@ -496,6 +549,9 @@
 .sb-bg-background\/80 {
   background-color: hsl(var(--sb-background) / 0.8);
 }
+.sb-bg-border {
+  background-color: hsl(var(--sb-border));
+}
 .sb-bg-card {
   background-color: hsl(var(--sb-card));
 }
@@ -554,6 +610,9 @@
 .sb-p-6 {
   padding: 1.5rem;
 }
+.sb-p-\[1px\] {
+  padding: 1px;
+}
 .sb-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -656,6 +715,9 @@
 .sb-text-destructive-foreground {
   color: hsl(var(--sb-destructive-foreground));
 }
+.sb-text-foreground\/70 {
+  color: hsl(var(--sb-foreground) / 0.7);
+}
 .sb-text-muted-foreground {
   color: hsl(var(--sb-muted-foreground));
 }
@@ -901,6 +963,9 @@
 .hover\:sb-text-accent-foreground:hover {
   color: hsl(var(--sb-accent-foreground));
 }
+.hover\:sb-text-foreground:hover {
+  color: hsl(var(--sb-foreground));
+}
 .hover\:sb-text-muted-foreground:hover {
   color: hsl(var(--sb-muted-foreground));
 }

package/dist/{builder-content-DNX5TNK2.mjs → builder-content-O76OYDYN.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-2GQCSML3.mjs';
-import { BuildContainer } from './chunk-OCMLPCSW.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-2PY5SZFT.mjs';
+import { BuildContainer } from './chunk-LEULOM72.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{chunk-2GQCSML3.mjs → chunk-2PY5SZFT.mjs}

@@ -1,4 +1,4 @@
-import { tv, builder, insertAt } from './chunk-OCMLPCSW.mjs';
+import { tv, builder, insertAt } from './chunk-LEULOM72.mjs';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 

package/dist/{chunk-LULPEBSO.mjs → chunk-BP6PJZIZ.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-OCMLPCSW.mjs';
+import { BuildContainer } from './chunk-LEULOM72.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-DNX5TNK2.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-O76OYDYN.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-ECJUPPTG.js → chunk-GP4CVRJO.js}

@@ -116,7 +116,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3__namespace.lazy(
-  () => import('./build-container-client-PB2K64X3.js')
+  () => import('./build-container-client-SEAT672S.js')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/{chunk-OCMLPCSW.mjs → chunk-LEULOM72.mjs}

@@ -92,7 +92,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-BOFDDL56.mjs')
+  () => import('./build-container-client-WS5CHAV7.mjs')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/{chunk-YGI2WZVP.js → chunk-NKBSQAU6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+var chunkGP4CVRJO_js = require('./chunk-GP4CVRJO.js');
 var React = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 
@@ -56,7 +56,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunkECJUPPTG_js.builder.getComponent(name);
+      const component = chunkGP4CVRJO_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -78,7 +78,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => chunkECJUPPTG_js.insertAt(content2, index, entry));
+        setContent((content2) => chunkGP4CVRJO_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -88,7 +88,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: chunkECJUPPTG_js.insertAt(item.content?.[container], index, entry)
+                [container]: chunkGP4CVRJO_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -216,7 +216,7 @@ var findRecursive = (items, predicate, key = "content") => {
     }
   }
 };
-var buttonVariants = chunkECJUPPTG_js.tv({
+var buttonVariants = chunkGP4CVRJO_js.tv({
   base: "sb-inline-flex sb-uppercase sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-md sb-text-xs sb-font-semibold ring-offset-background sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50",
   variants: {
     variant: {

package/dist/{chunk-VFH3LVDU.js → chunk-QNNLXAGD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+var chunkGP4CVRJO_js = require('./chunk-GP4CVRJO.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(
-    chunkECJUPPTG_js.BuildContainer,
+    chunkGP4CVRJO_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-SSON3UB4.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-FXMV6TNF.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;