@simple-builder/react 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/{build-container-client-MHVIH442.js → build-container-client-DKP66XWJ.js} +232 -268
  2. package/dist/{build-container-client-R2FNJHPM.mjs → build-container-client-VVBART5S.mjs} +176 -209
  3. package/dist/{builder-content-MNCJZTFS.mjs → builder-content-2ZCDLKAI.mjs} +2 -2
  4. package/dist/{builder-content-BOQEXOAK.js → builder-content-RAITJRFM.js} +7 -7
  5. package/dist/{chunk-N2X3IJBG.js → chunk-2CKQ5QRQ.js} +3 -3
  6. package/dist/{chunk-IVFWYNC3.mjs → chunk-5IFB55LU.mjs} +2 -2
  7. package/dist/chunk-5YLARMT3.js +145 -0
  8. package/dist/{chunk-GSOMMLCG.js → chunk-PJOHRI67.js} +5 -40
  9. package/dist/{chunk-LPIHSXYO.mjs → chunk-V2LC2Z4Q.mjs} +2 -35
  10. package/dist/chunk-XHPQBTIC.mjs +115 -0
  11. package/dist/index.d.mts +1 -1
  12. package/dist/index.d.ts +1 -1
  13. package/dist/index.js +6 -6
  14. package/dist/index.mjs +2 -2
  15. package/package.json +2 -2
  16. package/dist/chunk-FGQSJAOO.mjs +0 -52
  17. package/dist/chunk-UZFAGH6G.js +0 -74
package/dist/{build-container-client-R2FNJHPM.mjs → build-container-client-VVBART5S.mjs} RENAMED
@@ -1,8 +1,8 @@
1
1
  'use client';
2
- import './chunk-IVFWYNC3.mjs';
3
- import { cn, buttonVariants, Button, useBuilder, spacing } from './chunk-LPIHSXYO.mjs';
4
- import { builder } from './chunk-FGQSJAOO.mjs';
5
- import * as React13 from 'react';
2
+ import './chunk-5IFB55LU.mjs';
3
+ import { buttonVariants, Button, useBuilder } from './chunk-V2LC2Z4Q.mjs';
4
+ import { cn, DesignWrapper, builder, spacing, Image } from './chunk-XHPQBTIC.mjs';
5
+ import * as React12 from 'react';
6
6
  import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon, CalendarIcon, Loader2Icon, PaintbrushIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
7
7
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
8
8
  import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -13,7 +13,6 @@ import { Slot } from '@radix-ui/react-slot';
13
13
  import * as LabelPrimitive from '@radix-ui/react-label';
14
14
  import { cva } from 'class-variance-authority';
15
15
  import * as TabsPrimitive from '@radix-ui/react-tabs';
16
- import NextImage from 'next/image';
17
16
  import * as SwitchPrimitives from '@radix-ui/react-switch';
18
17
  import * as TogglePrimitive from '@radix-ui/react-toggle';
19
18
  import { format } from 'date-fns';
@@ -22,7 +21,7 @@ import { DayPicker } from 'react-day-picker';
22
21
  var AlertDialog = AlertDialogPrimitive.Root;
23
22
  var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
24
23
  var AlertDialogPortal = AlertDialogPrimitive.Portal;
25
- var AlertDialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
24
+ var AlertDialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
26
25
  AlertDialogPrimitive.Overlay,
27
26
  {
28
27
  className: cn(
@@ -34,7 +33,7 @@ var AlertDialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /*
34
33
  }
35
34
  ));
36
35
  AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
37
- var AlertDialogContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(AlertDialogPortal, null, /* @__PURE__ */ React13.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React13.createElement(
36
+ var AlertDialogContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(AlertDialogPortal, null, /* @__PURE__ */ React12.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React12.createElement(
38
37
  AlertDialogPrimitive.Content,
39
38
  {
40
39
  ref,
@@ -49,7 +48,7 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
49
48
  var AlertDialogFooter = ({
50
49
  className,
51
50
  ...props
52
- }) => /* @__PURE__ */ React13.createElement(
51
+ }) => /* @__PURE__ */ React12.createElement(
53
52
  "div",
54
53
  {
55
54
  className: cn(
@@ -60,7 +59,7 @@ var AlertDialogFooter = ({
60
59
  }
61
60
  );
62
61
  AlertDialogFooter.displayName = "AlertDialogFooter";
63
- var AlertDialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
62
+ var AlertDialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
64
63
  AlertDialogPrimitive.Title,
65
64
  {
66
65
  ref,
@@ -69,7 +68,7 @@ var AlertDialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @
69
68
  }
70
69
  ));
71
70
  AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
72
- var AlertDialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
71
+ var AlertDialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
73
72
  AlertDialogPrimitive.Description,
74
73
  {
75
74
  ref,
@@ -78,7 +77,7 @@ var AlertDialogDescription = React13.forwardRef(({ className, ...props }, ref) =
78
77
  }
79
78
  ));
80
79
  AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
81
- var AlertDialogAction = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
80
+ var AlertDialogAction = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
82
81
  AlertDialogPrimitive.Action,
83
82
  {
84
83
  ref,
@@ -87,7 +86,7 @@ var AlertDialogAction = React13.forwardRef(({ className, ...props }, ref) => /*
87
86
  }
88
87
  ));
89
88
  AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
90
- var AlertDialogCancel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
89
+ var AlertDialogCancel = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
91
90
  AlertDialogPrimitive.Cancel,
92
91
  {
93
92
  ref,
@@ -103,7 +102,7 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
103
102
  var Popover = PopoverPrimitive.Root;
104
103
  var PopoverTrigger = PopoverPrimitive.Trigger;
105
104
  var PopoverClose = PopoverPrimitive.Close;
106
- var PopoverContent = React13.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React13.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React13.createElement(
105
+ var PopoverContent = React12.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React12.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React12.createElement(
107
106
  PopoverPrimitive.Content,
108
107
  {
109
108
  ref,
@@ -120,7 +119,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
120
119
  var labelVariants = cva(
121
120
  "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
122
121
  );
123
- var Label = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
122
+ var Label = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
124
123
  LabelPrimitive.Root,
125
124
  {
126
125
  ref,
@@ -132,17 +131,17 @@ Label.displayName = LabelPrimitive.Root.displayName;
132
131
 
133
132
  // src/components/ui/form.tsx
134
133
  var Form = FormProvider;
135
- var FormFieldContext = React13.createContext(
134
+ var FormFieldContext = React12.createContext(
136
135
  {}
137
136
  );
138
137
  var FormField = ({
139
138
  ...props
140
139
  }) => {
141
- return /* @__PURE__ */ React13.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React13.createElement(Controller, { ...props }));
140
+ return /* @__PURE__ */ React12.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React12.createElement(Controller, { ...props }));
142
141
  };
143
142
  var useFormField = () => {
144
- const fieldContext = React13.useContext(FormFieldContext);
145
- const itemContext = React13.useContext(FormItemContext);
143
+ const fieldContext = React12.useContext(FormFieldContext);
144
+ const itemContext = React12.useContext(FormItemContext);
146
145
  const { getFieldState, formState } = useFormContext();
147
146
  const fieldState = getFieldState(fieldContext.name, formState);
148
147
  if (!fieldContext) {
@@ -158,17 +157,17 @@ var useFormField = () => {
158
157
  ...fieldState
159
158
  };
160
159
  };
161
- var FormItemContext = React13.createContext(
160
+ var FormItemContext = React12.createContext(
162
161
  {}
163
162
  );
164
- var FormItem = React13.forwardRef(({ className, ...props }, ref) => {
165
- const id = React13.useId();
166
- return /* @__PURE__ */ React13.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React13.createElement("div", { ref, className: cn("sb-space-y-2", className), ...props }));
163
+ var FormItem = React12.forwardRef(({ className, ...props }, ref) => {
164
+ const id = React12.useId();
165
+ return /* @__PURE__ */ React12.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React12.createElement("div", { ref, className: cn("sb-space-y-2", className), ...props }));
167
166
  });
168
167
  FormItem.displayName = "FormItem";
169
- var FormLabel = React13.forwardRef(({ className, ...props }, ref) => {
168
+ var FormLabel = React12.forwardRef(({ className, ...props }, ref) => {
170
169
  const { error, formItemId } = useFormField();
171
- return /* @__PURE__ */ React13.createElement(
170
+ return /* @__PURE__ */ React12.createElement(
172
171
  Label,
173
172
  {
174
173
  ref,
@@ -179,9 +178,9 @@ var FormLabel = React13.forwardRef(({ className, ...props }, ref) => {
179
178
  );
180
179
  });
181
180
  FormLabel.displayName = "FormLabel";
182
- var FormControl = React13.forwardRef(({ ...props }, ref) => {
181
+ var FormControl = React12.forwardRef(({ ...props }, ref) => {
183
182
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
184
- return /* @__PURE__ */ React13.createElement(
183
+ return /* @__PURE__ */ React12.createElement(
185
184
  Slot,
186
185
  {
187
186
  ref,
@@ -193,9 +192,9 @@ var FormControl = React13.forwardRef(({ ...props }, ref) => {
193
192
  );
194
193
  });
195
194
  FormControl.displayName = "FormControl";
196
- var FormDescription = React13.forwardRef(({ className, ...props }, ref) => {
195
+ var FormDescription = React12.forwardRef(({ className, ...props }, ref) => {
197
196
  const { formDescriptionId } = useFormField();
198
- return /* @__PURE__ */ React13.createElement(
197
+ return /* @__PURE__ */ React12.createElement(
199
198
  "p",
200
199
  {
201
200
  ref,
@@ -209,13 +208,13 @@ var FormDescription = React13.forwardRef(({ className, ...props }, ref) => {
209
208
  );
210
209
  });
211
210
  FormDescription.displayName = "FormDescription";
212
- var FormMessage = React13.forwardRef(({ className, children, ...props }, ref) => {
211
+ var FormMessage = React12.forwardRef(({ className, children, ...props }, ref) => {
213
212
  const { error, formMessageId } = useFormField();
214
213
  const body = error ? String(error?.message) : children;
215
214
  if (!body) {
216
215
  return null;
217
216
  }
218
- return /* @__PURE__ */ React13.createElement(
217
+ return /* @__PURE__ */ React12.createElement(
219
218
  "p",
220
219
  {
221
220
  ref,
@@ -231,7 +230,7 @@ var FormMessage = React13.forwardRef(({ className, children, ...props }, ref) =>
231
230
  });
232
231
  FormMessage.displayName = "FormMessage";
233
232
  var Tabs = TabsPrimitive.Root;
234
- var TabsList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
233
+ var TabsList = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
235
234
  TabsPrimitive.List,
236
235
  {
237
236
  ref,
@@ -243,7 +242,7 @@ var TabsList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
243
242
  }
244
243
  ));
245
244
  TabsList.displayName = TabsPrimitive.List.displayName;
246
- var TabsTrigger = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
245
+ var TabsTrigger = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
247
246
  TabsPrimitive.Trigger,
248
247
  {
249
248
  ref,
@@ -255,7 +254,7 @@ var TabsTrigger = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
255
254
  }
256
255
  ));
257
256
  TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
258
- var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
257
+ var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
259
258
  TabsPrimitive.Content,
260
259
  {
261
260
  ref,
@@ -267,21 +266,13 @@ var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
267
266
  }
268
267
  ));
269
268
  TabsContent.displayName = TabsPrimitive.Content.displayName;
270
- var Image = (props) => {
271
- if (typeof NextImage !== "undefined") {
272
- return /* @__PURE__ */ React13.createElement(NextImage.default, { ...props });
273
- }
274
- return /* @__PURE__ */ React13.createElement("img", { ...props });
275
- };
276
-
277
- // src/components/ui/media-input.tsx
278
269
  var MediaInput = (props) => {
279
270
  const { onFilesChange, limit = 32, multiple = false, onError } = props;
280
- const id = React13.useId();
281
- const [queue, setQueue] = React13.useState([]);
282
- const [sources, setSources] = React13.useState(props.files ?? []);
271
+ const id = React12.useId();
272
+ const [queue, setQueue] = React12.useState([]);
273
+ const [sources, setSources] = React12.useState(props.files ?? []);
283
274
  const maxConcurrentUploads = 3;
284
- const uploadingCountRef = React13.useRef(0);
275
+ const uploadingCountRef = React12.useRef(0);
285
276
  const handleFilesAdd = async (e) => {
286
277
  const files = e.target.files;
287
278
  if (!files || files.length === 0) {
@@ -352,7 +343,7 @@ var MediaInput = (props) => {
352
343
  body: JSON.stringify({ src })
353
344
  });
354
345
  };
355
- return /* @__PURE__ */ React13.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React13.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React13.createElement(
346
+ return /* @__PURE__ */ React12.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React12.createElement(
356
347
  Image,
357
348
  {
358
349
  src,
@@ -360,14 +351,14 @@ var MediaInput = (props) => {
360
351
  fill: true,
361
352
  className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
362
353
  }
363
- ), /* @__PURE__ */ React13.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React13.createElement(
354
+ ), /* @__PURE__ */ React12.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React12.createElement(
364
355
  "button",
365
356
  {
366
357
  className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
367
358
  onClick: () => handleSourceDelete(src)
368
359
  },
369
- /* @__PURE__ */ React13.createElement(Trash2Icon, { className: "sb-h-4 sb-w-4" })
370
- )))), queue.map((_, i) => /* @__PURE__ */ React13.createElement(
360
+ /* @__PURE__ */ React12.createElement(Trash2Icon, { className: "sb-h-4 sb-w-4" })
361
+ )))), queue.map((_, i) => /* @__PURE__ */ React12.createElement(
371
362
  MediaInputItem,
372
363
  {
373
364
  key: i,
@@ -376,8 +367,8 @@ var MediaInput = (props) => {
376
367
  props.itemClassName
377
368
  )
378
369
  },
379
- /* @__PURE__ */ React13.createElement(Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
380
- )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React13.createElement(
370
+ /* @__PURE__ */ React12.createElement(Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
371
+ )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React12.createElement(
381
372
  "label",
382
373
  {
383
374
  htmlFor: id,
@@ -386,8 +377,8 @@ var MediaInput = (props) => {
386
377
  props.itemClassName
387
378
  )
388
379
  },
389
- /* @__PURE__ */ React13.createElement(PlusIcon, { className: "sb-h-6 sb-w-6" }),
390
- /* @__PURE__ */ React13.createElement(
380
+ /* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-h-6 sb-w-6" }),
381
+ /* @__PURE__ */ React12.createElement(
391
382
  "input",
392
383
  {
393
384
  id,
@@ -401,7 +392,7 @@ var MediaInput = (props) => {
401
392
  ) : null);
402
393
  };
403
394
  var MediaInputItem = (props) => {
404
- return /* @__PURE__ */ React13.createElement(
395
+ return /* @__PURE__ */ React12.createElement(
405
396
  "div",
406
397
  {
407
398
  className: cn(
@@ -444,14 +435,14 @@ var BackgroundPicker = (props) => {
444
435
  "url(https://images.unsplash.com/photo-1688822863426-8c5f9b257090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)",
445
436
  "url(https://images.unsplash.com/photo-1691225850735-6e4e51834cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)"
446
437
  ];
447
- const defaultTab = React13.useMemo(() => {
438
+ const defaultTab = React12.useMemo(() => {
448
439
  if (background.includes("url"))
449
440
  return "image";
450
441
  if (background.includes("gradient"))
451
442
  return "gradient";
452
443
  return "solid";
453
444
  }, [background]);
454
- return /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
445
+ return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
455
446
  Button,
456
447
  {
457
448
  variant: "outline",
@@ -462,20 +453,20 @@ var BackgroundPicker = (props) => {
462
453
  className
463
454
  )
464
455
  },
465
- /* @__PURE__ */ React13.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React13.createElement(
456
+ /* @__PURE__ */ React12.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React12.createElement(
466
457
  "div",
467
458
  {
468
459
  className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
469
460
  style: { background }
470
461
  }
471
- ) : /* @__PURE__ */ React13.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React13.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
472
- )), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React13.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React13.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React13.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React13.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React13.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React13.createElement(
462
+ ) : /* @__PURE__ */ React12.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
463
+ )), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React12.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React12.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React12.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React12.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React12.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React12.createElement(
473
464
  TabsContent,
474
465
  {
475
466
  value: "solid",
476
467
  className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
477
468
  },
478
- solids.map((s) => /* @__PURE__ */ React13.createElement(
469
+ solids.map((s) => /* @__PURE__ */ React12.createElement(
479
470
  "div",
480
471
  {
481
472
  key: s,
@@ -484,13 +475,13 @@ var BackgroundPicker = (props) => {
484
475
  onClick: () => onBackgroundChange(s)
485
476
  }
486
477
  ))
487
- ), /* @__PURE__ */ React13.createElement(
478
+ ), /* @__PURE__ */ React12.createElement(
488
479
  TabsContent,
489
480
  {
490
481
  value: "gradient",
491
482
  className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
492
483
  },
493
- gradients.map((s) => /* @__PURE__ */ React13.createElement(
484
+ gradients.map((s) => /* @__PURE__ */ React12.createElement(
494
485
  "div",
495
486
  {
496
487
  key: s,
@@ -499,7 +490,7 @@ var BackgroundPicker = (props) => {
499
490
  onClick: () => onBackgroundChange(s)
500
491
  }
501
492
  ))
502
- ), /* @__PURE__ */ React13.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React13.createElement(
493
+ ), /* @__PURE__ */ React12.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React12.createElement(
503
494
  MediaInput,
504
495
  {
505
496
  className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -515,7 +506,7 @@ var BackgroundPicker = (props) => {
515
506
  "media-input: Error: " + e?.description
516
507
  )
517
508
  }
518
- )), /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React13.createElement(
509
+ )), /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React12.createElement(
519
510
  "div",
520
511
  {
521
512
  key: s,
@@ -538,7 +529,7 @@ var ColorPicker = (props) => {
538
529
  "#009DD1",
539
530
  "#FF0000"
540
531
  ];
541
- return /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
532
+ return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
542
533
  Button,
543
534
  {
544
535
  variant: "outline",
@@ -549,14 +540,14 @@ var ColorPicker = (props) => {
549
540
  className
550
541
  )
551
542
  },
552
- /* @__PURE__ */ React13.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React13.createElement(
543
+ /* @__PURE__ */ React12.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React12.createElement(
553
544
  "div",
554
545
  {
555
546
  className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
556
547
  style: { background: color }
557
548
  }
558
- ) : /* @__PURE__ */ React13.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React13.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
559
- )), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React13.createElement(
549
+ ) : /* @__PURE__ */ React12.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
550
+ )), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React12.createElement(
560
551
  "div",
561
552
  {
562
553
  key: s,
@@ -566,9 +557,9 @@ var ColorPicker = (props) => {
566
557
  }
567
558
  ))));
568
559
  };
569
- var Input = React13.forwardRef(
560
+ var Input = React12.forwardRef(
570
561
  ({ className, type, ...props }, ref) => {
571
- return /* @__PURE__ */ React13.createElement(
562
+ return /* @__PURE__ */ React12.createElement(
572
563
  "input",
573
564
  {
574
565
  type,
@@ -583,13 +574,13 @@ var Input = React13.forwardRef(
583
574
  }
584
575
  );
585
576
  Input.displayName = "Input";
586
- var AdvancedInput = React13.forwardRef(
577
+ var AdvancedInput = React12.forwardRef(
587
578
  ({ prepend, append, ...props }, ref) => {
588
- return /* @__PURE__ */ React13.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React13.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React13.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React13.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
579
+ return /* @__PURE__ */ React12.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React12.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React12.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React12.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
589
580
  }
590
581
  );
591
582
  AdvancedInput.displayName = "AdvancedInput";
592
- var Switch = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
583
+ var Switch = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
593
584
  SwitchPrimitives.Root,
594
585
  {
595
586
  className: cn(
@@ -599,7 +590,7 @@ var Switch = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
599
590
  ...props,
600
591
  ref
601
592
  },
602
- /* @__PURE__ */ React13.createElement(
593
+ /* @__PURE__ */ React12.createElement(
603
594
  SwitchPrimitives.Thumb,
604
595
  {
605
596
  className: cn(
@@ -629,7 +620,7 @@ var toggleVariants = cva(
629
620
  }
630
621
  }
631
622
  );
632
- var Toggle = React13.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React13.createElement(
623
+ var Toggle = React12.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React12.createElement(
633
624
  TogglePrimitive.Root,
634
625
  {
635
626
  ref,
@@ -660,7 +651,7 @@ var designSchema = z.object({
660
651
  color: z.string(),
661
652
  padding: spacingSchema,
662
653
  margin: spacingSchema
663
- });
654
+ }).passthrough();
664
655
  var ItemDesignForm = (props) => {
665
656
  const { item } = props;
666
657
  const { patchItem } = useBuilder();
@@ -669,6 +660,7 @@ var ItemDesignForm = (props) => {
669
660
  const form = useForm({
670
661
  resolver: zodResolver(designSchema),
671
662
  defaultValues: {
663
+ ...item.styles,
672
664
  container: item.styles?.container ?? true,
673
665
  background: item.styles?.background ?? "",
674
666
  color: item.styles?.color ?? "",
@@ -697,20 +689,18 @@ var ItemDesignForm = (props) => {
697
689
  }
698
690
  });
699
691
  const onSubmit = (values) => {
700
- const { container, background, color, padding: p, margin: m } = values;
692
+ const { padding: p, margin: m, ...rest } = values;
701
693
  const padding = !p.indipendent ? `${p.vertical}px ${p.horizontal}px` : `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
702
694
  const margin = !m.indipendent ? `${m.vertical}px ${m.horizontal}px` : `${m.top}px ${m.right}px ${m.bottom}px ${m.left}px`;
703
695
  patchItem(item.id, {
704
696
  styles: {
705
- container,
706
- background,
707
- color,
708
697
  padding,
709
- margin
698
+ margin,
699
+ ...rest
710
700
  }
711
701
  });
712
702
  };
713
- React13.useEffect(() => {
703
+ React12.useEffect(() => {
714
704
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
715
705
  return () => subscription.unsubscribe();
716
706
  }, [form.watch, form.handleSubmit]);
@@ -718,135 +708,135 @@ var ItemDesignForm = (props) => {
718
708
  "padding.indipendent",
719
709
  "margin.indipendent"
720
710
  ]);
721
- return /* @__PURE__ */ React13.createElement(Form, { ...form }, /* @__PURE__ */ React13.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React13.createElement(
711
+ return /* @__PURE__ */ React12.createElement(Form, { ...form }, /* @__PURE__ */ React12.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React12.createElement(
722
712
  FormField,
723
713
  {
724
714
  control: form.control,
725
715
  name: "background",
726
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
716
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
727
717
  BackgroundPicker,
728
718
  {
729
719
  background: field.value,
730
720
  onBackgroundChange: field.onChange
731
721
  }
732
- )), /* @__PURE__ */ React13.createElement(FormMessage, null))
722
+ )), /* @__PURE__ */ React12.createElement(FormMessage, null))
733
723
  }
734
- ), /* @__PURE__ */ React13.createElement(
724
+ ), /* @__PURE__ */ React12.createElement(
735
725
  FormField,
736
726
  {
737
727
  control: form.control,
738
728
  name: "color",
739
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
729
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
740
730
  ColorPicker,
741
731
  {
742
732
  color: field.value,
743
733
  onColorChange: field.onChange
744
734
  }
745
- )), /* @__PURE__ */ React13.createElement(FormMessage, null))
735
+ )), /* @__PURE__ */ React12.createElement(FormMessage, null))
746
736
  }
747
- ), /* @__PURE__ */ React13.createElement("hr", null), /* @__PURE__ */ React13.createElement(
737
+ ), /* @__PURE__ */ React12.createElement("hr", null), /* @__PURE__ */ React12.createElement(
748
738
  FormField,
749
739
  {
750
740
  control: form.control,
751
741
  name: "container",
752
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React13.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
742
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
753
743
  Switch,
754
744
  {
755
745
  checked: !field.value,
756
746
  onCheckedChange: (v) => field.onChange(!v)
757
747
  }
758
- )), /* @__PURE__ */ React13.createElement(FormMessage, null))
748
+ )), /* @__PURE__ */ React12.createElement(FormMessage, null))
759
749
  }
760
- ), /* @__PURE__ */ React13.createElement("hr", null), /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React13.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
750
+ ), /* @__PURE__ */ React12.createElement("hr", null), /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React12.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
761
751
  FormField,
762
752
  {
763
753
  control: form.control,
764
754
  name: "padding.horizontal",
765
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
755
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
766
756
  AdvancedInput,
767
757
  {
768
758
  ...field,
769
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
770
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
759
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
760
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
771
761
  }
772
762
  )))
773
763
  }
774
- ), /* @__PURE__ */ React13.createElement(
764
+ ), /* @__PURE__ */ React12.createElement(
775
765
  FormField,
776
766
  {
777
767
  control: form.control,
778
768
  name: "padding.vertical",
779
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
769
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
780
770
  AdvancedInput,
781
771
  {
782
772
  ...field,
783
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
784
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
773
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
774
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
785
775
  }
786
776
  )))
787
777
  }
788
- )) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
778
+ )) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
789
779
  FormField,
790
780
  {
791
781
  control: form.control,
792
782
  name: "padding.left",
793
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
783
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
794
784
  AdvancedInput,
795
785
  {
796
786
  ...field,
797
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
798
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
787
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
788
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
799
789
  }
800
790
  )))
801
791
  }
802
- ), /* @__PURE__ */ React13.createElement(
792
+ ), /* @__PURE__ */ React12.createElement(
803
793
  FormField,
804
794
  {
805
795
  control: form.control,
806
796
  name: "padding.top",
807
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
797
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
808
798
  AdvancedInput,
809
799
  {
810
800
  ...field,
811
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
812
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
801
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
802
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
813
803
  }
814
804
  )))
815
805
  }
816
- ), /* @__PURE__ */ React13.createElement(
806
+ ), /* @__PURE__ */ React12.createElement(
817
807
  FormField,
818
808
  {
819
809
  control: form.control,
820
810
  name: "padding.right",
821
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
811
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
822
812
  AdvancedInput,
823
813
  {
824
814
  ...field,
825
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
826
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
815
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
816
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
827
817
  }
828
818
  )))
829
819
  }
830
- ), /* @__PURE__ */ React13.createElement(
820
+ ), /* @__PURE__ */ React12.createElement(
831
821
  FormField,
832
822
  {
833
823
  control: form.control,
834
824
  name: "padding.bottom",
835
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
825
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
836
826
  AdvancedInput,
837
827
  {
838
828
  ...field,
839
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
840
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
829
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
830
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
841
831
  }
842
832
  )))
843
833
  }
844
- ))), /* @__PURE__ */ React13.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13.createElement(
834
+ ))), /* @__PURE__ */ React12.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12.createElement(
845
835
  FormField,
846
836
  {
847
837
  control: form.control,
848
838
  name: "padding.indipendent",
849
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
839
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
850
840
  Toggle,
851
841
  {
852
842
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -855,99 +845,99 @@ var ItemDesignForm = (props) => {
855
845
  pressed: field.value,
856
846
  onPressedChange: field.onChange
857
847
  },
858
- /* @__PURE__ */ React13.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
848
+ /* @__PURE__ */ React12.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
859
849
  ))
860
850
  }
861
- ))), /* @__PURE__ */ React13.createElement(FormMessage, null)), /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React13.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
851
+ ))), /* @__PURE__ */ React12.createElement(FormMessage, null)), /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React12.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
862
852
  FormField,
863
853
  {
864
854
  control: form.control,
865
855
  name: "margin.horizontal",
866
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
856
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
867
857
  AdvancedInput,
868
858
  {
869
859
  ...field,
870
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
871
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
860
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
861
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
872
862
  }
873
863
  )))
874
864
  }
875
- ), /* @__PURE__ */ React13.createElement(
865
+ ), /* @__PURE__ */ React12.createElement(
876
866
  FormField,
877
867
  {
878
868
  control: form.control,
879
869
  name: "margin.vertical",
880
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
870
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
881
871
  AdvancedInput,
882
872
  {
883
873
  ...field,
884
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
885
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
874
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
875
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
886
876
  }
887
877
  )))
888
878
  }
889
- )) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
879
+ )) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
890
880
  FormField,
891
881
  {
892
882
  control: form.control,
893
883
  name: "margin.left",
894
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
884
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
895
885
  AdvancedInput,
896
886
  {
897
887
  ...field,
898
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
899
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
888
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
889
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
900
890
  }
901
891
  )))
902
892
  }
903
- ), /* @__PURE__ */ React13.createElement(
893
+ ), /* @__PURE__ */ React12.createElement(
904
894
  FormField,
905
895
  {
906
896
  control: form.control,
907
897
  name: "margin.top",
908
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
898
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
909
899
  AdvancedInput,
910
900
  {
911
901
  ...field,
912
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
913
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
902
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
903
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
914
904
  }
915
905
  )))
916
906
  }
917
- ), /* @__PURE__ */ React13.createElement(
907
+ ), /* @__PURE__ */ React12.createElement(
918
908
  FormField,
919
909
  {
920
910
  control: form.control,
921
911
  name: "margin.right",
922
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
912
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
923
913
  AdvancedInput,
924
914
  {
925
915
  ...field,
926
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
927
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
916
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
917
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
928
918
  }
929
919
  )))
930
920
  }
931
- ), /* @__PURE__ */ React13.createElement(
921
+ ), /* @__PURE__ */ React12.createElement(
932
922
  FormField,
933
923
  {
934
924
  control: form.control,
935
925
  name: "margin.bottom",
936
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
926
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
937
927
  AdvancedInput,
938
928
  {
939
929
  ...field,
940
- prepend: /* @__PURE__ */ React13.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
941
- append: /* @__PURE__ */ React13.createElement("span", { className: "sb-text-muted-foreground" }, "px")
930
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
931
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
942
932
  }
943
933
  )))
944
934
  }
945
- ))), /* @__PURE__ */ React13.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13.createElement(
935
+ ))), /* @__PURE__ */ React12.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12.createElement(
946
936
  FormField,
947
937
  {
948
938
  control: form.control,
949
939
  name: "margin.indipendent",
950
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
940
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
951
941
  Toggle,
952
942
  {
953
943
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -956,10 +946,10 @@ var ItemDesignForm = (props) => {
956
946
  pressed: field.value,
957
947
  onPressedChange: field.onChange
958
948
  },
959
- /* @__PURE__ */ React13.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
949
+ /* @__PURE__ */ React12.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
960
950
  ))
961
951
  }
962
- ))), /* @__PURE__ */ React13.createElement(FormMessage, null)))));
952
+ ))), /* @__PURE__ */ React12.createElement(FormMessage, null)))));
963
953
  };
964
954
  function Calendar({
965
955
  className,
@@ -967,7 +957,7 @@ function Calendar({
967
957
  showOutsideDays = true,
968
958
  ...props
969
959
  }) {
970
- return /* @__PURE__ */ React13.createElement(
960
+ return /* @__PURE__ */ React12.createElement(
971
961
  DayPicker,
972
962
  {
973
963
  showOutsideDays,
@@ -1007,17 +997,17 @@ function Calendar({
1007
997
  ...classNames
1008
998
  },
1009
999
  components: {
1010
- IconLeft: () => /* @__PURE__ */ React13.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
1011
- IconRight: () => /* @__PURE__ */ React13.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
1000
+ IconLeft: () => /* @__PURE__ */ React12.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
1001
+ IconRight: () => /* @__PURE__ */ React12.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
1012
1002
  },
1013
1003
  ...props
1014
1004
  }
1015
1005
  );
1016
1006
  }
1017
1007
  Calendar.displayName = "Calendar";
1018
- var Textarea = React13.forwardRef(
1008
+ var Textarea = React12.forwardRef(
1019
1009
  ({ className, ...props }, ref) => {
1020
- return /* @__PURE__ */ React13.createElement(
1010
+ return /* @__PURE__ */ React12.createElement(
1021
1011
  "textarea",
1022
1012
  {
1023
1013
  className: cn(
@@ -1056,17 +1046,17 @@ var ContainerItemForm = (props) => {
1056
1046
  props: values
1057
1047
  });
1058
1048
  };
1059
- React13.useEffect(() => {
1049
+ React12.useEffect(() => {
1060
1050
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
1061
1051
  return () => subscription.unsubscribe();
1062
1052
  }, [form.watch, form.handleSubmit]);
1063
- return /* @__PURE__ */ React13.createElement(Form, { ...form }, /* @__PURE__ */ React13.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React13.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React13.createElement(
1053
+ return /* @__PURE__ */ React12.createElement(Form, { ...form }, /* @__PURE__ */ React12.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React12.createElement(
1064
1054
  FormField,
1065
1055
  {
1066
1056
  key: input.name,
1067
1057
  control: form.control,
1068
1058
  name: input.name,
1069
- render: ({ field }) => /* @__PURE__ */ React13.createElement(RenderInput, { type: input.type, input, field })
1059
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(RenderInput, { type: input.type, input, field })
1070
1060
  }
1071
1061
  )))));
1072
1062
  };
@@ -1074,17 +1064,17 @@ var RenderInput = (props) => {
1074
1064
  const { type, input, field } = props;
1075
1065
  switch (type) {
1076
1066
  case "string":
1077
- return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1067
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1078
1068
  case "longText":
1079
- return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1069
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1080
1070
  case "richText":
1081
- return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1071
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1082
1072
  case "number":
1083
- return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1073
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1084
1074
  case "color":
1085
- return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1075
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1086
1076
  case "date":
1087
- return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
1077
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
1088
1078
  Button,
1089
1079
  {
1090
1080
  variant: "outline",
@@ -1094,9 +1084,9 @@ var RenderInput = (props) => {
1094
1084
  !field.value && "sb-text-muted-foreground"
1095
1085
  )
1096
1086
  },
1097
- /* @__PURE__ */ React13.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1098
- field.value ? format(field.value, "PPP") : /* @__PURE__ */ React13.createElement("span", null, "Pick a date")
1099
- )), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React13.createElement(
1087
+ /* @__PURE__ */ React12.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1088
+ field.value ? format(field.value, "PPP") : /* @__PURE__ */ React12.createElement("span", null, "Pick a date")
1089
+ )), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12.createElement(
1100
1090
  Calendar,
1101
1091
  {
1102
1092
  mode: "single",
@@ -1104,11 +1094,11 @@ var RenderInput = (props) => {
1104
1094
  onSelect: field.onChange,
1105
1095
  initialFocus: true
1106
1096
  }
1107
- )))), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1097
+ )))), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1108
1098
  case "boolean":
1109
- return /* @__PURE__ */ React13.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1099
+ return /* @__PURE__ */ React12.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1110
1100
  case "file":
1111
- return /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
1101
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
1112
1102
  MediaInput,
1113
1103
  {
1114
1104
  className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -1120,7 +1110,7 @@ var RenderInput = (props) => {
1120
1110
  "media-input: Error: " + e?.description
1121
1111
  )
1122
1112
  }
1123
- )), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1113
+ )), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1124
1114
  default:
1125
1115
  throw new Error(
1126
1116
  `[simple-builder]: Input type "${props.type}" not supported`
@@ -1132,7 +1122,7 @@ var RenderInput = (props) => {
1132
1122
  var ContainerItemToolbar = (props) => {
1133
1123
  const { contentId, canBringUp = false, canBringDown = false } = props;
1134
1124
  const { bringUp, bringDown } = useBuilder();
1135
- return /* @__PURE__ */ React13.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__ */ React13.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__ */ React13.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React13.createElement(
1125
+ return /* @__PURE__ */ React12.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.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.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React12.createElement(
1136
1126
  Button,
1137
1127
  {
1138
1128
  variant: "ghost",
@@ -1140,8 +1130,8 @@ var ContainerItemToolbar = (props) => {
1140
1130
  onClick: () => bringUp(contentId),
1141
1131
  disabled: !canBringUp
1142
1132
  },
1143
- /* @__PURE__ */ React13.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
1144
- ), /* @__PURE__ */ React13.createElement(
1133
+ /* @__PURE__ */ React12.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
1134
+ ), /* @__PURE__ */ React12.createElement(
1145
1135
  Button,
1146
1136
  {
1147
1137
  variant: "ghost",
@@ -1149,11 +1139,11 @@ var ContainerItemToolbar = (props) => {
1149
1139
  onClick: () => bringDown(contentId),
1150
1140
  disabled: !canBringDown
1151
1141
  },
1152
- /* @__PURE__ */ React13.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
1153
- ), /* @__PURE__ */ React13.createElement(DeleteButton, { contentId })));
1142
+ /* @__PURE__ */ React12.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
1143
+ ), /* @__PURE__ */ React12.createElement(DeleteButton, { contentId })));
1154
1144
  };
1155
1145
  var EditButton = ({ id }) => {
1156
- return /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React13.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React13.createElement(
1146
+ return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12.createElement(
1157
1147
  PopoverContent,
1158
1148
  {
1159
1149
  side: "left",
@@ -1163,7 +1153,7 @@ var EditButton = ({ id }) => {
1163
1153
  className: "sb-p-0",
1164
1154
  collisionPadding: 16
1165
1155
  },
1166
- /* @__PURE__ */ React13.createElement(EditPopoverInner, { id })
1156
+ /* @__PURE__ */ React12.createElement(EditPopoverInner, { id })
1167
1157
  ));
1168
1158
  };
1169
1159
  var EditPopoverInner = (props) => {
@@ -1175,18 +1165,18 @@ var EditPopoverInner = (props) => {
1175
1165
  `[simple-builder]: Item with id ${id} not found in container item form component`
1176
1166
  );
1177
1167
  }
1178
- return /* @__PURE__ */ React13.createElement(Tabs, null, /* @__PURE__ */ React13.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React13.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React13.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React13.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React13.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React13.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React13.createElement(ItemDesignForm, { item })));
1168
+ return /* @__PURE__ */ React12.createElement(Tabs, null, /* @__PURE__ */ React12.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React12.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React12.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React12.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React12.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React12.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React12.createElement(ItemDesignForm, { item })));
1179
1169
  };
1180
1170
  var DeleteButton = ({ contentId }) => {
1181
1171
  const { deleteContent } = useBuilder();
1182
- return /* @__PURE__ */ React13.createElement(AlertDialog, null, /* @__PURE__ */ React13.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
1172
+ return /* @__PURE__ */ React12.createElement(AlertDialog, null, /* @__PURE__ */ React12.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
1183
1173
  Button,
1184
1174
  {
1185
1175
  variant: "ghost",
1186
1176
  className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
1187
1177
  },
1188
- /* @__PURE__ */ React13.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
1189
- )), /* @__PURE__ */ React13.createElement(AlertDialogContent, null, /* @__PURE__ */ React13.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React13.createElement(AlertDialogFooter, null, /* @__PURE__ */ React13.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React13.createElement(
1178
+ /* @__PURE__ */ React12.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
1179
+ )), /* @__PURE__ */ React12.createElement(AlertDialogContent, null, /* @__PURE__ */ React12.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React12.createElement(AlertDialogFooter, null, /* @__PURE__ */ React12.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React12.createElement(
1190
1180
  AlertDialogAction,
1191
1181
  {
1192
1182
  className: buttonVariants({ variant: "destructive" }),
@@ -1195,29 +1185,6 @@ var DeleteButton = ({ contentId }) => {
1195
1185
  "Verwijderen"
1196
1186
  ))));
1197
1187
  };
1198
- var DesignWrapper = (props) => {
1199
- const { children, className, styles } = props;
1200
- const { container = true, background, ...rest } = styles || {};
1201
- const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
1202
- const src = matches ? matches[1] : void 0;
1203
- return /* @__PURE__ */ React13.createElement(
1204
- "div",
1205
- {
1206
- className: cn("sb-relative", className),
1207
- style: { ...!src && { background }, ...rest }
1208
- },
1209
- src && /* @__PURE__ */ React13.createElement(
1210
- Image,
1211
- {
1212
- src,
1213
- alt: "",
1214
- fill: true,
1215
- className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
1216
- }
1217
- ),
1218
- container ? /* @__PURE__ */ React13.createElement("div", { className: "sb-container sb-mx-auto" }, children) : children
1219
- );
1220
- };
1221
1188
 
1222
1189
  // src/components/build-container-client.tsx
1223
1190
  var BuildContainerInner = (props) => {
@@ -1228,14 +1195,14 @@ var BuildContainerInner = (props) => {
1228
1195
  "[simple-builder]: Multiple content blocks detected when using property multiple false."
1229
1196
  );
1230
1197
  }
1231
- return /* @__PURE__ */ React13.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React13.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React13.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React13.createElement(React13.Fragment, { key: item.id }, /* @__PURE__ */ React13.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React13.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React13.createElement(
1198
+ return /* @__PURE__ */ React12.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12.createElement(React12.Fragment, { key: item.id }, /* @__PURE__ */ React12.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React12.createElement(
1232
1199
  ContainerItemToolbar,
1233
1200
  {
1234
1201
  contentId: item.id,
1235
1202
  canBringUp: i > 0,
1236
1203
  canBringDown: i < items.length - 1
1237
1204
  }
1238
- )), multiple && /* @__PURE__ */ React13.createElement(
1205
+ )), multiple && /* @__PURE__ */ React12.createElement(
1239
1206
  AddContentDividerButton,
1240
1207
  {
1241
1208
  parent: id,
@@ -1248,9 +1215,9 @@ var build_container_client_default = BuildContainerInner;
1248
1215
  var AddContentButton = (props) => {
1249
1216
  const components = builder.getComponents();
1250
1217
  const { addContent } = useBuilder();
1251
- return /* @__PURE__ */ React13.createElement(Popover, null, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React13.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React13.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
1218
+ return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
1252
1219
  const Icon = component.icon ?? ImageIcon;
1253
- return /* @__PURE__ */ React13.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React13.createElement(
1220
+ return /* @__PURE__ */ React12.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12.createElement(
1254
1221
  Button,
1255
1222
  {
1256
1223
  variant: "ghost",
@@ -1264,22 +1231,22 @@ var AddContentButton = (props) => {
1264
1231
  );
1265
1232
  }
1266
1233
  },
1267
- /* @__PURE__ */ React13.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1234
+ /* @__PURE__ */ React12.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1268
1235
  component.friendlyName ?? component.name
1269
1236
  ));
1270
1237
  }))));
1271
1238
  };
1272
1239
  var AddContentPlaceholder = (props) => {
1273
- return /* @__PURE__ */ React13.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React13.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React13.createElement(Button, { size: "sm" }, /* @__PURE__ */ React13.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
1240
+ return /* @__PURE__ */ React12.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12.createElement(Button, { size: "sm" }, /* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
1274
1241
  };
1275
1242
  var AddContentDividerButton = (props) => {
1276
- return /* @__PURE__ */ React13.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React13.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__ */ React13.createElement(
1243
+ return /* @__PURE__ */ React12.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12.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.createElement(
1277
1244
  Button,
1278
1245
  {
1279
1246
  size: "sm",
1280
1247
  className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
1281
1248
  },
1282
- /* @__PURE__ */ React13.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1249
+ /* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1283
1250
  "Blok Toevoegen"
1284
1251
  )));
1285
1252
  };