@simple-builder/react 1.0.3 → 1.0.4

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-PDM3LRIQ.js} +227 -262
  2. package/dist/{build-container-client-R2FNJHPM.mjs → build-container-client-Y55WZE6M.mjs} +171 -203
  3. package/dist/{builder-content-MNCJZTFS.mjs → builder-content-GELONUMY.mjs} +2 -2
  4. package/dist/{builder-content-BOQEXOAK.js → builder-content-QNCUQJUB.js} +7 -7
  5. package/dist/chunk-BSE6WW6Q.mjs +115 -0
  6. package/dist/{chunk-LPIHSXYO.mjs → chunk-EQMVGJ6X.mjs} +2 -35
  7. package/dist/chunk-J36K7WVK.js +145 -0
  8. package/dist/{chunk-N2X3IJBG.js → chunk-KOBGFPWB.js} +3 -3
  9. package/dist/{chunk-IVFWYNC3.mjs → chunk-NP2NHVJP.mjs} +2 -2
  10. package/dist/{chunk-GSOMMLCG.js → chunk-XEMUNFCV.js} +5 -40
  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-Y55WZE6M.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-NP2NHVJP.mjs';
3
+ import { buttonVariants, Button, useBuilder } from './chunk-EQMVGJ6X.mjs';
4
+ import { cn, DesignWrapper, builder, spacing, Image } from './chunk-BSE6WW6Q.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,
@@ -710,7 +701,7 @@ var ItemDesignForm = (props) => {
710
701
  }
711
702
  });
712
703
  };
713
- React13.useEffect(() => {
704
+ React12.useEffect(() => {
714
705
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
715
706
  return () => subscription.unsubscribe();
716
707
  }, [form.watch, form.handleSubmit]);
@@ -718,135 +709,135 @@ var ItemDesignForm = (props) => {
718
709
  "padding.indipendent",
719
710
  "margin.indipendent"
720
711
  ]);
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(
712
+ 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
713
  FormField,
723
714
  {
724
715
  control: form.control,
725
716
  name: "background",
726
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
717
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
727
718
  BackgroundPicker,
728
719
  {
729
720
  background: field.value,
730
721
  onBackgroundChange: field.onChange
731
722
  }
732
- )), /* @__PURE__ */ React13.createElement(FormMessage, null))
723
+ )), /* @__PURE__ */ React12.createElement(FormMessage, null))
733
724
  }
734
- ), /* @__PURE__ */ React13.createElement(
725
+ ), /* @__PURE__ */ React12.createElement(
735
726
  FormField,
736
727
  {
737
728
  control: form.control,
738
729
  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(
730
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
740
731
  ColorPicker,
741
732
  {
742
733
  color: field.value,
743
734
  onColorChange: field.onChange
744
735
  }
745
- )), /* @__PURE__ */ React13.createElement(FormMessage, null))
736
+ )), /* @__PURE__ */ React12.createElement(FormMessage, null))
746
737
  }
747
- ), /* @__PURE__ */ React13.createElement("hr", null), /* @__PURE__ */ React13.createElement(
738
+ ), /* @__PURE__ */ React12.createElement("hr", null), /* @__PURE__ */ React12.createElement(
748
739
  FormField,
749
740
  {
750
741
  control: form.control,
751
742
  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(
743
+ 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
744
  Switch,
754
745
  {
755
746
  checked: !field.value,
756
747
  onCheckedChange: (v) => field.onChange(!v)
757
748
  }
758
- )), /* @__PURE__ */ React13.createElement(FormMessage, null))
749
+ )), /* @__PURE__ */ React12.createElement(FormMessage, null))
759
750
  }
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(
751
+ ), /* @__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
752
  FormField,
762
753
  {
763
754
  control: form.control,
764
755
  name: "padding.horizontal",
765
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
756
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
766
757
  AdvancedInput,
767
758
  {
768
759
  ...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")
760
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
761
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
771
762
  }
772
763
  )))
773
764
  }
774
- ), /* @__PURE__ */ React13.createElement(
765
+ ), /* @__PURE__ */ React12.createElement(
775
766
  FormField,
776
767
  {
777
768
  control: form.control,
778
769
  name: "padding.vertical",
779
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
770
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
780
771
  AdvancedInput,
781
772
  {
782
773
  ...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")
774
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
775
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
785
776
  }
786
777
  )))
787
778
  }
788
- )) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
779
+ )) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
789
780
  FormField,
790
781
  {
791
782
  control: form.control,
792
783
  name: "padding.left",
793
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
784
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
794
785
  AdvancedInput,
795
786
  {
796
787
  ...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")
788
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
789
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
799
790
  }
800
791
  )))
801
792
  }
802
- ), /* @__PURE__ */ React13.createElement(
793
+ ), /* @__PURE__ */ React12.createElement(
803
794
  FormField,
804
795
  {
805
796
  control: form.control,
806
797
  name: "padding.top",
807
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
798
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
808
799
  AdvancedInput,
809
800
  {
810
801
  ...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")
802
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
803
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
813
804
  }
814
805
  )))
815
806
  }
816
- ), /* @__PURE__ */ React13.createElement(
807
+ ), /* @__PURE__ */ React12.createElement(
817
808
  FormField,
818
809
  {
819
810
  control: form.control,
820
811
  name: "padding.right",
821
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
812
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
822
813
  AdvancedInput,
823
814
  {
824
815
  ...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")
816
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
817
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
827
818
  }
828
819
  )))
829
820
  }
830
- ), /* @__PURE__ */ React13.createElement(
821
+ ), /* @__PURE__ */ React12.createElement(
831
822
  FormField,
832
823
  {
833
824
  control: form.control,
834
825
  name: "padding.bottom",
835
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
826
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
836
827
  AdvancedInput,
837
828
  {
838
829
  ...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")
830
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
831
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
841
832
  }
842
833
  )))
843
834
  }
844
- ))), /* @__PURE__ */ React13.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13.createElement(
835
+ ))), /* @__PURE__ */ React12.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12.createElement(
845
836
  FormField,
846
837
  {
847
838
  control: form.control,
848
839
  name: "padding.indipendent",
849
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
840
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
850
841
  Toggle,
851
842
  {
852
843
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -855,99 +846,99 @@ var ItemDesignForm = (props) => {
855
846
  pressed: field.value,
856
847
  onPressedChange: field.onChange
857
848
  },
858
- /* @__PURE__ */ React13.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
849
+ /* @__PURE__ */ React12.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
859
850
  ))
860
851
  }
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(
852
+ ))), /* @__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
853
  FormField,
863
854
  {
864
855
  control: form.control,
865
856
  name: "margin.horizontal",
866
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
857
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
867
858
  AdvancedInput,
868
859
  {
869
860
  ...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")
861
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
862
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
872
863
  }
873
864
  )))
874
865
  }
875
- ), /* @__PURE__ */ React13.createElement(
866
+ ), /* @__PURE__ */ React12.createElement(
876
867
  FormField,
877
868
  {
878
869
  control: form.control,
879
870
  name: "margin.vertical",
880
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
871
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
881
872
  AdvancedInput,
882
873
  {
883
874
  ...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")
875
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
876
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
886
877
  }
887
878
  )))
888
879
  }
889
- )) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
880
+ )) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
890
881
  FormField,
891
882
  {
892
883
  control: form.control,
893
884
  name: "margin.left",
894
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
885
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
895
886
  AdvancedInput,
896
887
  {
897
888
  ...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")
889
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
890
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
900
891
  }
901
892
  )))
902
893
  }
903
- ), /* @__PURE__ */ React13.createElement(
894
+ ), /* @__PURE__ */ React12.createElement(
904
895
  FormField,
905
896
  {
906
897
  control: form.control,
907
898
  name: "margin.top",
908
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
899
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
909
900
  AdvancedInput,
910
901
  {
911
902
  ...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")
903
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
904
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
914
905
  }
915
906
  )))
916
907
  }
917
- ), /* @__PURE__ */ React13.createElement(
908
+ ), /* @__PURE__ */ React12.createElement(
918
909
  FormField,
919
910
  {
920
911
  control: form.control,
921
912
  name: "margin.right",
922
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
913
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
923
914
  AdvancedInput,
924
915
  {
925
916
  ...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")
917
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
918
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
928
919
  }
929
920
  )))
930
921
  }
931
- ), /* @__PURE__ */ React13.createElement(
922
+ ), /* @__PURE__ */ React12.createElement(
932
923
  FormField,
933
924
  {
934
925
  control: form.control,
935
926
  name: "margin.bottom",
936
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormItem, null, /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
927
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
937
928
  AdvancedInput,
938
929
  {
939
930
  ...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")
931
+ prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
932
+ append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
942
933
  }
943
934
  )))
944
935
  }
945
- ))), /* @__PURE__ */ React13.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13.createElement(
936
+ ))), /* @__PURE__ */ React12.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12.createElement(
946
937
  FormField,
947
938
  {
948
939
  control: form.control,
949
940
  name: "margin.indipendent",
950
- render: ({ field }) => /* @__PURE__ */ React13.createElement(FormControl, null, /* @__PURE__ */ React13.createElement(
941
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
951
942
  Toggle,
952
943
  {
953
944
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -956,10 +947,10 @@ var ItemDesignForm = (props) => {
956
947
  pressed: field.value,
957
948
  onPressedChange: field.onChange
958
949
  },
959
- /* @__PURE__ */ React13.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
950
+ /* @__PURE__ */ React12.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
960
951
  ))
961
952
  }
962
- ))), /* @__PURE__ */ React13.createElement(FormMessage, null)))));
953
+ ))), /* @__PURE__ */ React12.createElement(FormMessage, null)))));
963
954
  };
964
955
  function Calendar({
965
956
  className,
@@ -967,7 +958,7 @@ function Calendar({
967
958
  showOutsideDays = true,
968
959
  ...props
969
960
  }) {
970
- return /* @__PURE__ */ React13.createElement(
961
+ return /* @__PURE__ */ React12.createElement(
971
962
  DayPicker,
972
963
  {
973
964
  showOutsideDays,
@@ -1007,17 +998,17 @@ function Calendar({
1007
998
  ...classNames
1008
999
  },
1009
1000
  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" })
1001
+ IconLeft: () => /* @__PURE__ */ React12.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
1002
+ IconRight: () => /* @__PURE__ */ React12.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
1012
1003
  },
1013
1004
  ...props
1014
1005
  }
1015
1006
  );
1016
1007
  }
1017
1008
  Calendar.displayName = "Calendar";
1018
- var Textarea = React13.forwardRef(
1009
+ var Textarea = React12.forwardRef(
1019
1010
  ({ className, ...props }, ref) => {
1020
- return /* @__PURE__ */ React13.createElement(
1011
+ return /* @__PURE__ */ React12.createElement(
1021
1012
  "textarea",
1022
1013
  {
1023
1014
  className: cn(
@@ -1056,17 +1047,17 @@ var ContainerItemForm = (props) => {
1056
1047
  props: values
1057
1048
  });
1058
1049
  };
1059
- React13.useEffect(() => {
1050
+ React12.useEffect(() => {
1060
1051
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
1061
1052
  return () => subscription.unsubscribe();
1062
1053
  }, [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(
1054
+ 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
1055
  FormField,
1065
1056
  {
1066
1057
  key: input.name,
1067
1058
  control: form.control,
1068
1059
  name: input.name,
1069
- render: ({ field }) => /* @__PURE__ */ React13.createElement(RenderInput, { type: input.type, input, field })
1060
+ render: ({ field }) => /* @__PURE__ */ React12.createElement(RenderInput, { type: input.type, input, field })
1070
1061
  }
1071
1062
  )))));
1072
1063
  };
@@ -1074,17 +1065,17 @@ var RenderInput = (props) => {
1074
1065
  const { type, input, field } = props;
1075
1066
  switch (type) {
1076
1067
  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));
1068
+ 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
1069
  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));
1070
+ 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
1071
  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));
1072
+ 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
1073
  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));
1074
+ 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
1075
  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));
1076
+ 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
1077
  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(
1078
+ 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
1079
  Button,
1089
1080
  {
1090
1081
  variant: "outline",
@@ -1094,9 +1085,9 @@ var RenderInput = (props) => {
1094
1085
  !field.value && "sb-text-muted-foreground"
1095
1086
  )
1096
1087
  },
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(
1088
+ /* @__PURE__ */ React12.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1089
+ field.value ? format(field.value, "PPP") : /* @__PURE__ */ React12.createElement("span", null, "Pick a date")
1090
+ )), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12.createElement(
1100
1091
  Calendar,
1101
1092
  {
1102
1093
  mode: "single",
@@ -1104,11 +1095,11 @@ var RenderInput = (props) => {
1104
1095
  onSelect: field.onChange,
1105
1096
  initialFocus: true
1106
1097
  }
1107
- )))), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1098
+ )))), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1108
1099
  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));
1100
+ 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
1101
  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(
1102
+ return /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
1112
1103
  MediaInput,
1113
1104
  {
1114
1105
  className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -1120,7 +1111,7 @@ var RenderInput = (props) => {
1120
1111
  "media-input: Error: " + e?.description
1121
1112
  )
1122
1113
  }
1123
- )), input.helperText && /* @__PURE__ */ React13.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13.createElement(FormMessage, null));
1114
+ )), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null));
1124
1115
  default:
1125
1116
  throw new Error(
1126
1117
  `[simple-builder]: Input type "${props.type}" not supported`
@@ -1132,7 +1123,7 @@ var RenderInput = (props) => {
1132
1123
  var ContainerItemToolbar = (props) => {
1133
1124
  const { contentId, canBringUp = false, canBringDown = false } = props;
1134
1125
  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(
1126
+ 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
1127
  Button,
1137
1128
  {
1138
1129
  variant: "ghost",
@@ -1140,8 +1131,8 @@ var ContainerItemToolbar = (props) => {
1140
1131
  onClick: () => bringUp(contentId),
1141
1132
  disabled: !canBringUp
1142
1133
  },
1143
- /* @__PURE__ */ React13.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
1144
- ), /* @__PURE__ */ React13.createElement(
1134
+ /* @__PURE__ */ React12.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
1135
+ ), /* @__PURE__ */ React12.createElement(
1145
1136
  Button,
1146
1137
  {
1147
1138
  variant: "ghost",
@@ -1149,11 +1140,11 @@ var ContainerItemToolbar = (props) => {
1149
1140
  onClick: () => bringDown(contentId),
1150
1141
  disabled: !canBringDown
1151
1142
  },
1152
- /* @__PURE__ */ React13.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
1153
- ), /* @__PURE__ */ React13.createElement(DeleteButton, { contentId })));
1143
+ /* @__PURE__ */ React12.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
1144
+ ), /* @__PURE__ */ React12.createElement(DeleteButton, { contentId })));
1154
1145
  };
1155
1146
  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(
1147
+ 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
1148
  PopoverContent,
1158
1149
  {
1159
1150
  side: "left",
@@ -1163,7 +1154,7 @@ var EditButton = ({ id }) => {
1163
1154
  className: "sb-p-0",
1164
1155
  collisionPadding: 16
1165
1156
  },
1166
- /* @__PURE__ */ React13.createElement(EditPopoverInner, { id })
1157
+ /* @__PURE__ */ React12.createElement(EditPopoverInner, { id })
1167
1158
  ));
1168
1159
  };
1169
1160
  var EditPopoverInner = (props) => {
@@ -1175,18 +1166,18 @@ var EditPopoverInner = (props) => {
1175
1166
  `[simple-builder]: Item with id ${id} not found in container item form component`
1176
1167
  );
1177
1168
  }
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 })));
1169
+ 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
1170
  };
1180
1171
  var DeleteButton = ({ contentId }) => {
1181
1172
  const { deleteContent } = useBuilder();
1182
- return /* @__PURE__ */ React13.createElement(AlertDialog, null, /* @__PURE__ */ React13.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React13.createElement(
1173
+ return /* @__PURE__ */ React12.createElement(AlertDialog, null, /* @__PURE__ */ React12.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
1183
1174
  Button,
1184
1175
  {
1185
1176
  variant: "ghost",
1186
1177
  className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
1187
1178
  },
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(
1179
+ /* @__PURE__ */ React12.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
1180
+ )), /* @__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
1181
  AlertDialogAction,
1191
1182
  {
1192
1183
  className: buttonVariants({ variant: "destructive" }),
@@ -1195,29 +1186,6 @@ var DeleteButton = ({ contentId }) => {
1195
1186
  "Verwijderen"
1196
1187
  ))));
1197
1188
  };
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
1189
 
1222
1190
  // src/components/build-container-client.tsx
1223
1191
  var BuildContainerInner = (props) => {
@@ -1228,14 +1196,14 @@ var BuildContainerInner = (props) => {
1228
1196
  "[simple-builder]: Multiple content blocks detected when using property multiple false."
1229
1197
  );
1230
1198
  }
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(
1199
+ 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
1200
  ContainerItemToolbar,
1233
1201
  {
1234
1202
  contentId: item.id,
1235
1203
  canBringUp: i > 0,
1236
1204
  canBringDown: i < items.length - 1
1237
1205
  }
1238
- )), multiple && /* @__PURE__ */ React13.createElement(
1206
+ )), multiple && /* @__PURE__ */ React12.createElement(
1239
1207
  AddContentDividerButton,
1240
1208
  {
1241
1209
  parent: id,
@@ -1248,9 +1216,9 @@ var build_container_client_default = BuildContainerInner;
1248
1216
  var AddContentButton = (props) => {
1249
1217
  const components = builder.getComponents();
1250
1218
  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) => {
1219
+ 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
1220
  const Icon = component.icon ?? ImageIcon;
1253
- return /* @__PURE__ */ React13.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React13.createElement(
1221
+ return /* @__PURE__ */ React12.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12.createElement(
1254
1222
  Button,
1255
1223
  {
1256
1224
  variant: "ghost",
@@ -1264,22 +1232,22 @@ var AddContentButton = (props) => {
1264
1232
  );
1265
1233
  }
1266
1234
  },
1267
- /* @__PURE__ */ React13.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1235
+ /* @__PURE__ */ React12.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1268
1236
  component.friendlyName ?? component.name
1269
1237
  ));
1270
1238
  }))));
1271
1239
  };
1272
1240
  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")));
1241
+ 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
1242
  };
1275
1243
  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(
1244
+ 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
1245
  Button,
1278
1246
  {
1279
1247
  size: "sm",
1280
1248
  className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
1281
1249
  },
1282
- /* @__PURE__ */ React13.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1250
+ /* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1283
1251
  "Blok Toevoegen"
1284
1252
  )));
1285
1253
  };