@simple-builder/react 1.0.5 → 1.0.7

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 (16) hide show
  1. package/dist/{builder-content-YW6SKGMM.css → build-container-client-2WP7AN5U.css} +21 -0
  2. package/dist/{build-container-client-DKP66XWJ.js → build-container-client-6RF5K7DV.js} +621 -535
  3. package/dist/{build-container-client-VVBART5S.mjs → build-container-client-CMWYMBFS.mjs} +643 -557
  4. package/dist/{builder-content-2ZCDLKAI.mjs → builder-content-MAJ7XTFP.mjs} +2 -2
  5. package/dist/{builder-content-RAITJRFM.js → builder-content-PG6VWJYE.js} +7 -7
  6. package/dist/{build-container-client-QJL5MQR6.css → builder-content-XM6XI2VA.css} +21 -0
  7. package/dist/{chunk-PJOHRI67.js → chunk-3FCXE75X.js} +21 -24
  8. package/dist/{chunk-5YLARMT3.js → chunk-G3675W7A.js} +55 -20
  9. package/dist/{chunk-2CKQ5QRQ.js → chunk-JQVW2IR2.js} +3 -3
  10. package/dist/{chunk-V2LC2Z4Q.mjs → chunk-PL6PDFN7.mjs} +18 -21
  11. package/dist/{chunk-XHPQBTIC.mjs → chunk-YGH42ZBJ.mjs} +55 -21
  12. package/dist/{chunk-5IFB55LU.mjs → chunk-YWYOBSS7.mjs} +2 -2
  13. package/dist/index.css +21 -0
  14. package/dist/index.js +6 -6
  15. package/dist/index.mjs +2 -2
  16. package/package.json +3 -3
package/dist/{build-container-client-DKP66XWJ.js → build-container-client-6RF5K7DV.js} RENAMED
@@ -1,24 +1,23 @@
1
1
  'use client';
2
2
  'use strict';
3
3
 
4
- require('./chunk-2CKQ5QRQ.js');
5
- var chunkPJOHRI67_js = require('./chunk-PJOHRI67.js');
6
- var chunk5YLARMT3_js = require('./chunk-5YLARMT3.js');
7
- var React12 = require('react');
4
+ require('./chunk-JQVW2IR2.js');
5
+ var chunk3FCXE75X_js = require('./chunk-3FCXE75X.js');
6
+ var chunkG3675W7A_js = require('./chunk-G3675W7A.js');
7
+ var React15 = require('react');
8
8
  var lucideReact = require('lucide-react');
9
9
  var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
10
10
  var PopoverPrimitive = require('@radix-ui/react-popover');
11
- var zod$1 = require('@hookform/resolvers/zod');
11
+ var dateFns = require('date-fns');
12
12
  var reactHookForm = require('react-hook-form');
13
- var zod = require('zod');
13
+ var reactDayPicker = require('react-day-picker');
14
14
  var reactSlot = require('@radix-ui/react-slot');
15
15
  var LabelPrimitive = require('@radix-ui/react-label');
16
- var classVarianceAuthority = require('class-variance-authority');
17
- var TabsPrimitive = require('@radix-ui/react-tabs');
18
16
  var SwitchPrimitives = require('@radix-ui/react-switch');
17
+ var zod$1 = require('@hookform/resolvers/zod');
18
+ var zod = require('zod');
19
+ var TabsPrimitive = require('@radix-ui/react-tabs');
19
20
  var TogglePrimitive = require('@radix-ui/react-toggle');
20
- var dateFns = require('date-fns');
21
- var reactDayPicker = require('react-day-picker');
22
21
 
23
22
  function _interopNamespace(e) {
24
23
  if (e && e.__esModule) return e;
@@ -38,21 +37,21 @@ function _interopNamespace(e) {
38
37
  return Object.freeze(n);
39
38
  }
40
39
 
41
- var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
40
+ var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
42
41
  var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
43
42
  var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
44
43
  var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
45
- var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
46
44
  var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
45
+ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
47
46
  var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
48
47
 
49
48
  var AlertDialog = AlertDialogPrimitive__namespace.Root;
50
49
  var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
51
50
  var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
52
- var AlertDialogOverlay = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
51
+ var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
53
52
  AlertDialogPrimitive__namespace.Overlay,
54
53
  {
55
- className: chunk5YLARMT3_js.cn(
54
+ className: chunkG3675W7A_js.cn(
56
55
  "sb-fixed sb-inset-0 sb-z-50 sb-bg-background/80 sb-backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
57
56
  className
58
57
  ),
@@ -61,11 +60,11 @@ var AlertDialogOverlay = React12__namespace.forwardRef(({ className, ...props },
61
60
  }
62
61
  ));
63
62
  AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
64
- var AlertDialogContent = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React12__namespace.createElement(
63
+ var AlertDialogContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React15__namespace.createElement(
65
64
  AlertDialogPrimitive__namespace.Content,
66
65
  {
67
66
  ref,
68
- className: chunk5YLARMT3_js.cn(
67
+ className: chunkG3675W7A_js.cn(
69
68
  "sb-fixed sb-font-roboto sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
70
69
  className
71
70
  ),
@@ -76,10 +75,10 @@ AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.display
76
75
  var AlertDialogFooter = ({
77
76
  className,
78
77
  ...props
79
- }) => /* @__PURE__ */ React12__namespace.createElement(
78
+ }) => /* @__PURE__ */ React15__namespace.createElement(
80
79
  "div",
81
80
  {
82
- className: chunk5YLARMT3_js.cn(
81
+ className: chunkG3675W7A_js.cn(
83
82
  "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
84
83
  className
85
84
  ),
@@ -87,39 +86,39 @@ var AlertDialogFooter = ({
87
86
  }
88
87
  );
89
88
  AlertDialogFooter.displayName = "AlertDialogFooter";
90
- var AlertDialogTitle = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
89
+ var AlertDialogTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
91
90
  AlertDialogPrimitive__namespace.Title,
92
91
  {
93
92
  ref,
94
- className: chunk5YLARMT3_js.cn("sb-text-lg sb-font-semibold", className),
93
+ className: chunkG3675W7A_js.cn("sb-text-lg sb-font-semibold", className),
95
94
  ...props
96
95
  }
97
96
  ));
98
97
  AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
99
- var AlertDialogDescription = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
98
+ var AlertDialogDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
100
99
  AlertDialogPrimitive__namespace.Description,
101
100
  {
102
101
  ref,
103
- className: chunk5YLARMT3_js.cn("sb-text-sm sb-text-muted-foreground", className),
102
+ className: chunkG3675W7A_js.cn("sb-text-sm sb-text-muted-foreground", className),
104
103
  ...props
105
104
  }
106
105
  ));
107
106
  AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
108
- var AlertDialogAction = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
107
+ var AlertDialogAction = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
109
108
  AlertDialogPrimitive__namespace.Action,
110
109
  {
111
110
  ref,
112
- className: chunk5YLARMT3_js.cn(chunkPJOHRI67_js.buttonVariants(), className),
111
+ className: chunkG3675W7A_js.cn(chunk3FCXE75X_js.buttonVariants(), className),
113
112
  ...props
114
113
  }
115
114
  ));
116
115
  AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
117
- var AlertDialogCancel = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
116
+ var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
118
117
  AlertDialogPrimitive__namespace.Cancel,
119
118
  {
120
119
  ref,
121
- className: chunk5YLARMT3_js.cn(
122
- chunkPJOHRI67_js.buttonVariants({ variant: "outline" }),
120
+ className: chunkG3675W7A_js.cn(
121
+ chunk3FCXE75X_js.buttonVariants({ variant: "outline" }),
123
122
  "sb-mt-2 sm:sb-mt-0",
124
123
  className
125
124
  ),
@@ -130,13 +129,13 @@ AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayNa
130
129
  var Popover = PopoverPrimitive__namespace.Root;
131
130
  var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
132
131
  var PopoverClose = PopoverPrimitive__namespace.Close;
133
- var PopoverContent = React12__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React12__namespace.createElement(
132
+ var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React15__namespace.createElement(
134
133
  PopoverPrimitive__namespace.Content,
135
134
  {
136
135
  ref,
137
136
  align,
138
137
  sideOffset,
139
- className: chunk5YLARMT3_js.cn(
138
+ className: chunkG3675W7A_js.cn(
140
139
  "sb-z-50 sb-w-72 sb-font-roboto sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
141
140
  className
142
141
  ),
@@ -144,14 +143,109 @@ var PopoverContent = React12__namespace.forwardRef(({ className, align = "center
144
143
  }
145
144
  )));
146
145
  PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
147
- var labelVariants = classVarianceAuthority.cva(
148
- "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
149
- );
150
- var Label = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
146
+ function Calendar({
147
+ className,
148
+ classNames,
149
+ showOutsideDays = true,
150
+ ...props
151
+ }) {
152
+ return /* @__PURE__ */ React15__namespace.createElement(
153
+ reactDayPicker.DayPicker,
154
+ {
155
+ showOutsideDays,
156
+ className: chunkG3675W7A_js.cn("sb-p-3 sb-font-roboto", className),
157
+ classNames: {
158
+ months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
159
+ month: "sb-space-y-4",
160
+ caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
161
+ caption_label: "sb-text-sm sb-font-medium",
162
+ nav: "sb-space-x-1 sb-flex sb-items-center",
163
+ nav_button: chunkG3675W7A_js.cn(
164
+ chunk3FCXE75X_js.buttonVariants({ variant: "outline" }),
165
+ "sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
166
+ ),
167
+ nav_button_previous: "sb-absolute sb-left-1",
168
+ nav_button_next: "sb-absolute sb-right-1",
169
+ table: "sb-w-full sb-border-collapse sb-space-y-1",
170
+ head_row: "sb-flex",
171
+ head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
172
+ row: "sb-flex sb-w-full sb-mt-2",
173
+ cell: chunkG3675W7A_js.cn(
174
+ "sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
175
+ props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
176
+ ),
177
+ day: chunkG3675W7A_js.cn(
178
+ chunk3FCXE75X_js.buttonVariants({ variant: "ghost" }),
179
+ "sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
180
+ ),
181
+ day_range_start: "day-range-start",
182
+ day_range_end: "day-range-end",
183
+ day_selected: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary hover:sb-text-primary-foreground focus:sb-bg-primary focus:sb-text-primary-foreground",
184
+ day_today: "sb-bg-accent sb-text-accent-foreground",
185
+ day_outside: "day-outside sb-text-muted-foreground sb-opacity-50 aria-selected:sb-bg-accent/50 aria-selected:sb-text-muted-foreground aria-selected:sb-opacity-30",
186
+ day_disabled: "sb-text-muted-foreground sb-opacity-50",
187
+ day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
188
+ day_hidden: "invisible",
189
+ ...classNames
190
+ },
191
+ components: {
192
+ IconLeft: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
193
+ IconRight: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
194
+ },
195
+ ...props
196
+ }
197
+ );
198
+ }
199
+ Calendar.displayName = "Calendar";
200
+ var ColorPicker = (props) => {
201
+ const { color, onColorChange, className } = props;
202
+ const colors = props.colors ?? [
203
+ "#000000",
204
+ "#ffffff",
205
+ "#0f172a",
206
+ "#F1F5F9",
207
+ "#64748B",
208
+ "#E6007E",
209
+ "#F8FAFC",
210
+ "#009DD1",
211
+ "#FF0000"
212
+ ];
213
+ return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
214
+ chunk3FCXE75X_js.Button,
215
+ {
216
+ variant: "outline",
217
+ size: "sm",
218
+ className: chunkG3675W7A_js.cn(
219
+ "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
220
+ !color && "sb-text-muted-foreground",
221
+ className
222
+ )
223
+ },
224
+ /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React15__namespace.createElement(
225
+ "div",
226
+ {
227
+ className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
228
+ style: { background: color }
229
+ }
230
+ ) : /* @__PURE__ */ React15__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
231
+ )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React15__namespace.createElement(
232
+ "div",
233
+ {
234
+ key: s,
235
+ style: { background: s },
236
+ className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
237
+ onClick: () => onColorChange(s)
238
+ }
239
+ ))));
240
+ };
241
+ var labelVariants = chunkG3675W7A_js.tv({
242
+ base: "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
243
+ });
244
+ var Label = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
151
245
  LabelPrimitive__namespace.Root,
152
246
  {
153
247
  ref,
154
- className: chunk5YLARMT3_js.cn(labelVariants(), className),
248
+ className: labelVariants({ className }),
155
249
  ...props
156
250
  }
157
251
  ));
@@ -159,17 +253,17 @@ Label.displayName = LabelPrimitive__namespace.Root.displayName;
159
253
 
160
254
  // src/components/ui/form.tsx
161
255
  var Form = reactHookForm.FormProvider;
162
- var FormFieldContext = React12__namespace.createContext(
256
+ var FormFieldContext = React15__namespace.createContext(
163
257
  {}
164
258
  );
165
259
  var FormField = ({
166
260
  ...props
167
261
  }) => {
168
- return /* @__PURE__ */ React12__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React12__namespace.createElement(reactHookForm.Controller, { ...props }));
262
+ return /* @__PURE__ */ React15__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React15__namespace.createElement(reactHookForm.Controller, { ...props }));
169
263
  };
170
264
  var useFormField = () => {
171
- const fieldContext = React12__namespace.useContext(FormFieldContext);
172
- const itemContext = React12__namespace.useContext(FormItemContext);
265
+ const fieldContext = React15__namespace.useContext(FormFieldContext);
266
+ const itemContext = React15__namespace.useContext(FormItemContext);
173
267
  const { getFieldState, formState } = reactHookForm.useFormContext();
174
268
  const fieldState = getFieldState(fieldContext.name, formState);
175
269
  if (!fieldContext) {
@@ -185,30 +279,30 @@ var useFormField = () => {
185
279
  ...fieldState
186
280
  };
187
281
  };
188
- var FormItemContext = React12__namespace.createContext(
282
+ var FormItemContext = React15__namespace.createContext(
189
283
  {}
190
284
  );
191
- var FormItem = React12__namespace.forwardRef(({ className, ...props }, ref) => {
192
- const id = React12__namespace.useId();
193
- return /* @__PURE__ */ React12__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React12__namespace.createElement("div", { ref, className: chunk5YLARMT3_js.cn("sb-space-y-2", className), ...props }));
285
+ var FormItem = React15__namespace.forwardRef(({ className, ...props }, ref) => {
286
+ const id = React15__namespace.useId();
287
+ return /* @__PURE__ */ React15__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React15__namespace.createElement("div", { ref, className: chunkG3675W7A_js.cn("sb-space-y-2", className), ...props }));
194
288
  });
195
289
  FormItem.displayName = "FormItem";
196
- var FormLabel = React12__namespace.forwardRef(({ className, ...props }, ref) => {
290
+ var FormLabel = React15__namespace.forwardRef(({ className, ...props }, ref) => {
197
291
  const { error, formItemId } = useFormField();
198
- return /* @__PURE__ */ React12__namespace.createElement(
292
+ return /* @__PURE__ */ React15__namespace.createElement(
199
293
  Label,
200
294
  {
201
295
  ref,
202
- className: chunk5YLARMT3_js.cn(error && "sb-text-destructive", className),
296
+ className: chunkG3675W7A_js.cn(error && "sb-text-destructive", className),
203
297
  htmlFor: formItemId,
204
298
  ...props
205
299
  }
206
300
  );
207
301
  });
208
302
  FormLabel.displayName = "FormLabel";
209
- var FormControl = React12__namespace.forwardRef(({ ...props }, ref) => {
303
+ var FormControl = React15__namespace.forwardRef(({ ...props }, ref) => {
210
304
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
211
- return /* @__PURE__ */ React12__namespace.createElement(
305
+ return /* @__PURE__ */ React15__namespace.createElement(
212
306
  reactSlot.Slot,
213
307
  {
214
308
  ref,
@@ -220,14 +314,14 @@ var FormControl = React12__namespace.forwardRef(({ ...props }, ref) => {
220
314
  );
221
315
  });
222
316
  FormControl.displayName = "FormControl";
223
- var FormDescription = React12__namespace.forwardRef(({ className, ...props }, ref) => {
317
+ var FormDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => {
224
318
  const { formDescriptionId } = useFormField();
225
- return /* @__PURE__ */ React12__namespace.createElement(
319
+ return /* @__PURE__ */ React15__namespace.createElement(
226
320
  "p",
227
321
  {
228
322
  ref,
229
323
  id: formDescriptionId,
230
- className: chunk5YLARMT3_js.cn(
324
+ className: chunkG3675W7A_js.cn(
231
325
  "sb-text-sm sb-font-roboto sb-text-muted-foreground",
232
326
  className
233
327
  ),
@@ -236,18 +330,18 @@ var FormDescription = React12__namespace.forwardRef(({ className, ...props }, re
236
330
  );
237
331
  });
238
332
  FormDescription.displayName = "FormDescription";
239
- var FormMessage = React12__namespace.forwardRef(({ className, children, ...props }, ref) => {
333
+ var FormMessage = React15__namespace.forwardRef(({ className, children, ...props }, ref) => {
240
334
  const { error, formMessageId } = useFormField();
241
335
  const body = error ? String(error?.message) : children;
242
336
  if (!body) {
243
337
  return null;
244
338
  }
245
- return /* @__PURE__ */ React12__namespace.createElement(
339
+ return /* @__PURE__ */ React15__namespace.createElement(
246
340
  "p",
247
341
  {
248
342
  ref,
249
343
  id: formMessageId,
250
- className: chunk5YLARMT3_js.cn(
344
+ className: chunkG3675W7A_js.cn(
251
345
  "sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
252
346
  className
253
347
  ),
@@ -257,50 +351,36 @@ var FormMessage = React12__namespace.forwardRef(({ className, children, ...props
257
351
  );
258
352
  });
259
353
  FormMessage.displayName = "FormMessage";
260
- var Tabs = TabsPrimitive__namespace.Root;
261
- var TabsList = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
262
- TabsPrimitive__namespace.List,
263
- {
264
- ref,
265
- className: chunk5YLARMT3_js.cn(
266
- "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6",
267
- className
268
- ),
269
- ...props
270
- }
271
- ));
272
- TabsList.displayName = TabsPrimitive__namespace.List.displayName;
273
- var TabsTrigger = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
274
- TabsPrimitive__namespace.Trigger,
275
- {
276
- ref,
277
- className: chunk5YLARMT3_js.cn(
278
- "sb-inline-flex sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-py-3 sb-text-sm sb-font-medium sb-transition-all focus-visible:sb-outline-none disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-border-black sb-border-b-2 sb-border-transparent data-[state=active]:sb-text-foreground sb-text-muted-foreground",
279
- className
280
- ),
281
- ...props
354
+ var Input = React15__namespace.forwardRef(
355
+ ({ className, type, ...props }, ref) => {
356
+ return /* @__PURE__ */ React15__namespace.createElement(
357
+ "input",
358
+ {
359
+ type,
360
+ className: chunkG3675W7A_js.cn(
361
+ "sb-flex sb-h-8 sb-w-full sb-font-roboto sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-1 sb-text-sm sb-ring-offset-background file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:ring-sb-ring focus-visible:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
362
+ className
363
+ ),
364
+ ref,
365
+ ...props
366
+ }
367
+ );
282
368
  }
283
- ));
284
- TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
285
- var TabsContent = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
286
- TabsPrimitive__namespace.Content,
287
- {
288
- ref,
289
- className: chunk5YLARMT3_js.cn(
290
- "sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
291
- className
292
- ),
293
- ...props
369
+ );
370
+ Input.displayName = "Input";
371
+ var AdvancedInput = React15__namespace.forwardRef(
372
+ ({ prepend, append, ...props }, ref) => {
373
+ return /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React15__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
294
374
  }
295
- ));
296
- TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
375
+ );
376
+ AdvancedInput.displayName = "AdvancedInput";
297
377
  var MediaInput = (props) => {
298
378
  const { onFilesChange, limit = 32, multiple = false, onError } = props;
299
- const id = React12__namespace.useId();
300
- const [queue, setQueue] = React12__namespace.useState([]);
301
- const [sources, setSources] = React12__namespace.useState(props.files ?? []);
379
+ const id = React15__namespace.useId();
380
+ const [queue, setQueue] = React15__namespace.useState([]);
381
+ const [sources, setSources] = React15__namespace.useState(props.files ?? []);
302
382
  const maxConcurrentUploads = 3;
303
- const uploadingCountRef = React12__namespace.useRef(0);
383
+ const uploadingCountRef = React15__namespace.useRef(0);
304
384
  const handleFilesAdd = async (e) => {
305
385
  const files = e.target.files;
306
386
  if (!files || files.length === 0) {
@@ -371,42 +451,42 @@ var MediaInput = (props) => {
371
451
  body: JSON.stringify({ src })
372
452
  });
373
453
  };
374
- return /* @__PURE__ */ React12__namespace.createElement("div", { className: chunk5YLARMT3_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12__namespace.createElement(MediaInputItem, { key: src, className: chunk5YLARMT3_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React12__namespace.createElement(
375
- chunk5YLARMT3_js.Image,
454
+ return /* @__PURE__ */ React15__namespace.createElement("div", { className: chunkG3675W7A_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React15__namespace.createElement(MediaInputItem, { key: src, className: chunkG3675W7A_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React15__namespace.createElement(
455
+ chunkG3675W7A_js.Image,
376
456
  {
377
457
  src,
378
458
  alt: "",
379
459
  fill: true,
380
460
  className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
381
461
  }
382
- ), /* @__PURE__ */ React12__namespace.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__namespace.createElement(
462
+ ), /* @__PURE__ */ React15__namespace.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__ */ React15__namespace.createElement(
383
463
  "button",
384
464
  {
385
465
  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",
386
466
  onClick: () => handleSourceDelete(src)
387
467
  },
388
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
389
- )))), queue.map((_, i) => /* @__PURE__ */ React12__namespace.createElement(
468
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
469
+ )))), queue.map((_, i) => /* @__PURE__ */ React15__namespace.createElement(
390
470
  MediaInputItem,
391
471
  {
392
472
  key: i,
393
- className: chunk5YLARMT3_js.cn(
473
+ className: chunkG3675W7A_js.cn(
394
474
  "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
395
475
  props.itemClassName
396
476
  )
397
477
  },
398
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
399
- )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React12__namespace.createElement(
478
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
479
+ )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React15__namespace.createElement(
400
480
  "label",
401
481
  {
402
482
  htmlFor: id,
403
- className: chunk5YLARMT3_js.cn(
483
+ className: chunkG3675W7A_js.cn(
404
484
  "sb-flex sb-h-28 sb-w-28 sb-cursor-pointer sb-items-center sb-justify-center sb-rounded-lg sb-border",
405
485
  props.itemClassName
406
486
  )
407
487
  },
408
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
409
- /* @__PURE__ */ React12__namespace.createElement(
488
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
489
+ /* @__PURE__ */ React15__namespace.createElement(
410
490
  "input",
411
491
  {
412
492
  id,
@@ -420,10 +500,10 @@ var MediaInput = (props) => {
420
500
  ) : null);
421
501
  };
422
502
  var MediaInputItem = (props) => {
423
- return /* @__PURE__ */ React12__namespace.createElement(
503
+ return /* @__PURE__ */ React15__namespace.createElement(
424
504
  "div",
425
505
  {
426
- className: chunk5YLARMT3_js.cn(
506
+ className: chunkG3675W7A_js.cn(
427
507
  "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
428
508
  props.className
429
509
  )
@@ -440,6 +520,191 @@ var MediaInputError = class extends Error {
440
520
  this.description = description;
441
521
  }
442
522
  };
523
+ var Switch = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
524
+ SwitchPrimitives__namespace.Root,
525
+ {
526
+ className: chunkG3675W7A_js.cn(
527
+ "peer sb-inline-flex sb-h-6 sb-w-11 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
528
+ className
529
+ ),
530
+ ...props,
531
+ ref
532
+ },
533
+ /* @__PURE__ */ React15__namespace.createElement(
534
+ SwitchPrimitives__namespace.Thumb,
535
+ {
536
+ className: chunkG3675W7A_js.cn(
537
+ "sb-pointer-events-none sb-block sb-h-5 sb-w-5 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-5 data-[state=unchecked]:sb-translate-x-0"
538
+ )
539
+ }
540
+ )
541
+ ));
542
+ Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
543
+ var Textarea = React15__namespace.forwardRef(
544
+ ({ className, ...props }, ref) => {
545
+ return /* @__PURE__ */ React15__namespace.createElement(
546
+ "textarea",
547
+ {
548
+ className: chunkG3675W7A_js.cn(
549
+ "sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
550
+ className
551
+ ),
552
+ ref,
553
+ ...props
554
+ }
555
+ );
556
+ }
557
+ );
558
+ Textarea.displayName = "Textarea";
559
+
560
+ // src/components/container-item-form.tsx
561
+ var ContainerItemForm = (props) => {
562
+ const { item } = props;
563
+ const { patchItem } = chunk3FCXE75X_js.useBuilder();
564
+ const component = chunkG3675W7A_js.builder.getComponent(item.component);
565
+ if (!component) {
566
+ throw new Error(
567
+ `[simple-builder]: Component with id ${item.component} not found in container item form component`
568
+ );
569
+ }
570
+ const form = reactHookForm.useForm({
571
+ defaultValues: (component.inputs || []).reduce(
572
+ (acc, input) => ({
573
+ ...acc,
574
+ [input.name]: item?.props?.[input.name] ?? input.defaultValue
575
+ }),
576
+ {}
577
+ )
578
+ });
579
+ const onSubmit = (values) => {
580
+ patchItem(item.id, {
581
+ props: values
582
+ });
583
+ };
584
+ React15__namespace.useEffect(() => {
585
+ const subscription = form.watch(() => form.handleSubmit(onSubmit)());
586
+ return () => subscription.unsubscribe();
587
+ }, [form.watch, form.handleSubmit]);
588
+ return /* @__PURE__ */ React15__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React15__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React15__namespace.createElement(
589
+ FormField,
590
+ {
591
+ key: input.name,
592
+ control: form.control,
593
+ name: input.name,
594
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(RenderInput, { type: input.type, input, field })
595
+ }
596
+ )))));
597
+ };
598
+ var RenderInput = (props) => {
599
+ const { type, input, field } = props;
600
+ switch (type) {
601
+ case "string":
602
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
603
+ case "longText":
604
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
605
+ case "richText":
606
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
607
+ case "number":
608
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
609
+ case "color":
610
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
611
+ case "date":
612
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
613
+ chunk3FCXE75X_js.Button,
614
+ {
615
+ variant: "outline",
616
+ size: "sm",
617
+ className: chunkG3675W7A_js.cn(
618
+ "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
619
+ !field.value && "sb-text-muted-foreground"
620
+ )
621
+ },
622
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
623
+ field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React15__namespace.createElement("span", null, "Pick a date")
624
+ )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React15__namespace.createElement(
625
+ Calendar,
626
+ {
627
+ mode: "single",
628
+ selected: field.value,
629
+ onSelect: field.onChange,
630
+ initialFocus: true
631
+ }
632
+ )))), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
633
+ case "boolean":
634
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
635
+ case "file":
636
+ return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
637
+ MediaInput,
638
+ {
639
+ className: "sb-grid sb-grid-cols-2 sb-gap-1",
640
+ itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
641
+ multiple: false,
642
+ onFilesChange: (files) => field.onChange(files[0]),
643
+ onError: (e) => console.error(
644
+ "[media-input]: Title: " + e?.title,
645
+ "media-input: Error: " + e?.description
646
+ )
647
+ }
648
+ )), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
649
+ default:
650
+ throw new Error(
651
+ `[simple-builder]: Input type "${props.type}" not supported`
652
+ );
653
+ }
654
+ };
655
+ var Tabs = TabsPrimitive__namespace.Root;
656
+ var tabsListVariants = chunkG3675W7A_js.tv({
657
+ variants: {
658
+ variant: {
659
+ contained: "sb-inline-flex sb-h-10 sb-items-center sb-justify-center sb-rounded-md sb-bg-muted sb-p-1 sb-text-muted-foreground",
660
+ text: "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6"
661
+ }
662
+ },
663
+ defaultVariants: {
664
+ variant: "contained"
665
+ }
666
+ });
667
+ var TabsList = React15__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
668
+ TabsPrimitive__namespace.List,
669
+ {
670
+ ref,
671
+ className: tabsListVariants({ variant, className }),
672
+ ...props
673
+ }
674
+ ));
675
+ TabsList.displayName = TabsPrimitive__namespace.List.displayName;
676
+ var tabsTriggerVariants = chunkG3675W7A_js.tv({
677
+ variants: {
678
+ variant: {
679
+ contained: "sb-inline-flex sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-sm sb-px-3 sb-py-1.5 sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-all focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-bg-background data-[state=active]:sb-text-foreground data-[state=active]:sb-shadow-sm",
680
+ text: "sb-inline-flex sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-py-3 sb-text-sm sb-font-medium sb-transition-all focus-visible:sb-outline-none disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-border-black sb-border-b-2 sb-border-transparent data-[state=active]:sb-text-foreground sb-text-muted-foreground"
681
+ }
682
+ },
683
+ defaultVariants: {
684
+ variant: "contained"
685
+ }
686
+ });
687
+ var TabsTrigger = React15__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
688
+ TabsPrimitive__namespace.Trigger,
689
+ {
690
+ ref,
691
+ className: tabsTriggerVariants({ variant, className }),
692
+ ...props
693
+ }
694
+ ));
695
+ TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
696
+ var TabsContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
697
+ TabsPrimitive__namespace.Content,
698
+ {
699
+ ref,
700
+ className: chunkG3675W7A_js.cn(
701
+ "sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
702
+ className
703
+ ),
704
+ ...props
705
+ }
706
+ ));
707
+ TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
443
708
 
444
709
  // src/components/ui/background-picker.tsx
445
710
  var BackgroundPicker = (props) => {
@@ -463,38 +728,38 @@ var BackgroundPicker = (props) => {
463
728
  "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)",
464
729
  "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)"
465
730
  ];
466
- const defaultTab = React12__namespace.useMemo(() => {
731
+ const defaultTab = React15__namespace.useMemo(() => {
467
732
  if (background.includes("url"))
468
733
  return "image";
469
734
  if (background.includes("gradient"))
470
735
  return "gradient";
471
736
  return "solid";
472
737
  }, [background]);
473
- return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
474
- chunkPJOHRI67_js.Button,
738
+ return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
739
+ chunk3FCXE75X_js.Button,
475
740
  {
476
741
  variant: "outline",
477
742
  size: "sm",
478
- className: chunk5YLARMT3_js.cn(
743
+ className: chunkG3675W7A_js.cn(
479
744
  "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
480
745
  !background && "sb-text-muted-foreground",
481
746
  className
482
747
  )
483
748
  },
484
- /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React12__namespace.createElement(
749
+ /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React15__namespace.createElement(
485
750
  "div",
486
751
  {
487
752
  className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
488
753
  style: { background }
489
754
  }
490
- ) : /* @__PURE__ */ React12__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
491
- )), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React12__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React12__namespace.createElement(
755
+ ) : /* @__PURE__ */ React15__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
756
+ )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React15__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React15__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React15__namespace.createElement(
492
757
  TabsContent,
493
758
  {
494
759
  value: "solid",
495
760
  className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
496
761
  },
497
- solids.map((s) => /* @__PURE__ */ React12__namespace.createElement(
762
+ solids.map((s) => /* @__PURE__ */ React15__namespace.createElement(
498
763
  "div",
499
764
  {
500
765
  key: s,
@@ -503,13 +768,13 @@ var BackgroundPicker = (props) => {
503
768
  onClick: () => onBackgroundChange(s)
504
769
  }
505
770
  ))
506
- ), /* @__PURE__ */ React12__namespace.createElement(
771
+ ), /* @__PURE__ */ React15__namespace.createElement(
507
772
  TabsContent,
508
773
  {
509
774
  value: "gradient",
510
775
  className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
511
776
  },
512
- gradients.map((s) => /* @__PURE__ */ React12__namespace.createElement(
777
+ gradients.map((s) => /* @__PURE__ */ React15__namespace.createElement(
513
778
  "div",
514
779
  {
515
780
  key: s,
@@ -518,7 +783,7 @@ var BackgroundPicker = (props) => {
518
783
  onClick: () => onBackgroundChange(s)
519
784
  }
520
785
  ))
521
- ), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React12__namespace.createElement(
786
+ ), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React15__namespace.createElement(
522
787
  MediaInput,
523
788
  {
524
789
  className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -534,7 +799,7 @@ var BackgroundPicker = (props) => {
534
799
  "media-input: Error: " + e?.description
535
800
  )
536
801
  }
537
- )), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React12__namespace.createElement(
802
+ )), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React15__namespace.createElement(
538
803
  "div",
539
804
  {
540
805
  key: s,
@@ -544,115 +809,29 @@ var BackgroundPicker = (props) => {
544
809
  }
545
810
  )))))));
546
811
  };
547
- var ColorPicker = (props) => {
548
- const { color, onColorChange, className } = props;
549
- const colors = props.colors ?? [
550
- "#000000",
551
- "#ffffff",
552
- "#0f172a",
553
- "#F1F5F9",
554
- "#64748B",
555
- "#E6007E",
556
- "#F8FAFC",
557
- "#009DD1",
558
- "#FF0000"
559
- ];
560
- return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
561
- chunkPJOHRI67_js.Button,
562
- {
563
- variant: "outline",
564
- size: "sm",
565
- className: chunk5YLARMT3_js.cn(
566
- "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
567
- !color && "sb-text-muted-foreground",
568
- className
569
- )
812
+ var toggleVariants = chunkG3675W7A_js.tv({
813
+ base: "sb-inline-flex sb-items-center sb-justify-center sb-rounded-md sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground",
814
+ variants: {
815
+ variant: {
816
+ default: "sb-bg-transparent",
817
+ outline: "sb-border sb-border-input sb-bg-transparent hover:sb-bg-accent hover:sb-text-accent-foreground"
570
818
  },
571
- /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React12__namespace.createElement(
572
- "div",
573
- {
574
- className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
575
- style: { background: color }
576
- }
577
- ) : /* @__PURE__ */ React12__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
578
- )), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React12__namespace.createElement(
579
- "div",
580
- {
581
- key: s,
582
- style: { background: s },
583
- className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
584
- onClick: () => onColorChange(s)
819
+ size: {
820
+ default: "sb-h-10 sb-px-3",
821
+ sm: "sb-h-9 sb-px-2.5",
822
+ lg: "sb-h-11 sb-px-5"
585
823
  }
586
- ))));
587
- };
588
- var Input = React12__namespace.forwardRef(
589
- ({ className, type, ...props }, ref) => {
590
- return /* @__PURE__ */ React12__namespace.createElement(
591
- "input",
592
- {
593
- type,
594
- className: chunk5YLARMT3_js.cn(
595
- "sb-flex sb-h-8 sb-w-full sb-font-roboto sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-1 sb-text-sm sb-ring-offset-background file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:ring-sb-ring focus-visible:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
596
- className
597
- ),
598
- ref,
599
- ...props
600
- }
601
- );
602
- }
603
- );
604
- Input.displayName = "Input";
605
- var AdvancedInput = React12__namespace.forwardRef(
606
- ({ prepend, append, ...props }, ref) => {
607
- return /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React12__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
608
- }
609
- );
610
- AdvancedInput.displayName = "AdvancedInput";
611
- var Switch = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
612
- SwitchPrimitives__namespace.Root,
613
- {
614
- className: chunk5YLARMT3_js.cn(
615
- "peer sb-inline-flex sb-h-6 sb-w-11 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
616
- className
617
- ),
618
- ...props,
619
- ref
620
824
  },
621
- /* @__PURE__ */ React12__namespace.createElement(
622
- SwitchPrimitives__namespace.Thumb,
623
- {
624
- className: chunk5YLARMT3_js.cn(
625
- "sb-pointer-events-none sb-block sb-h-5 sb-w-5 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-5 data-[state=unchecked]:sb-translate-x-0"
626
- )
627
- }
628
- )
629
- ));
630
- Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
631
- var toggleVariants = classVarianceAuthority.cva(
632
- "sb-inline-flex sb-items-center sb-justify-center sb-rounded-md sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground",
633
- {
634
- variants: {
635
- variant: {
636
- default: "sb-bg-transparent",
637
- outline: "sb-border sb-border-input sb-bg-transparent hover:sb-bg-accent hover:sb-text-accent-foreground"
638
- },
639
- size: {
640
- default: "sb-h-10 sb-px-3",
641
- sm: "sb-h-9 sb-px-2.5",
642
- lg: "sb-h-11 sb-px-5"
643
- }
644
- },
645
- defaultVariants: {
646
- variant: "default",
647
- size: "default"
648
- }
825
+ defaultVariants: {
826
+ variant: "default",
827
+ size: "default"
649
828
  }
650
- );
651
- var Toggle = React12__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
829
+ });
830
+ var Toggle = React15__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
652
831
  TogglePrimitive__namespace.Root,
653
832
  {
654
833
  ref,
655
- className: chunk5YLARMT3_js.cn(toggleVariants({ variant, size, className })),
834
+ className: toggleVariants({ variant, size, className }),
656
835
  ...props
657
836
  }
658
837
  ));
@@ -675,196 +854,262 @@ var spacingSchema = zod.z.discriminatedUnion("indipendent", [
675
854
  ]);
676
855
  var designSchema = zod.z.object({
677
856
  container: zod.z.boolean(),
678
- background: zod.z.string(),
679
- color: zod.z.string(),
680
- padding: spacingSchema,
681
- margin: spacingSchema
857
+ desktop: zod.z.object({
858
+ padding: spacingSchema.optional(),
859
+ margin: spacingSchema.optional()
860
+ }).passthrough().optional(),
861
+ mobile: zod.z.object({
862
+ padding: spacingSchema.optional(),
863
+ margin: spacingSchema.optional()
864
+ }).passthrough().optional()
682
865
  }).passthrough();
683
866
  var ItemDesignForm = (props) => {
684
867
  const { item } = props;
685
- const { patchItem } = chunkPJOHRI67_js.useBuilder();
686
- const initialPadding = chunk5YLARMT3_js.spacing.parse(item.styles?.padding ?? "");
687
- const initialMargin = chunk5YLARMT3_js.spacing.parse(item.styles?.margin ?? "");
868
+ const component = chunkG3675W7A_js.builder.getComponent(item.component);
869
+ if (!component) {
870
+ throw new Error(
871
+ `[simple-builder]: Component "${item.component}" not found`
872
+ );
873
+ }
874
+ const defaults = component.defaultStyles || {};
875
+ const { patchItem } = chunk3FCXE75X_js.useBuilder();
876
+ const [device, setDevice] = React15__namespace.useState("desktop");
877
+ const getDefaultDesktopValue = (key, initial = "") => {
878
+ const value = item.styles?.desktop?.[key];
879
+ const def = defaults?.desktop?.[key];
880
+ if (value !== void 0) {
881
+ return value;
882
+ } else if (def !== void 0) {
883
+ return def;
884
+ } else {
885
+ return initial;
886
+ }
887
+ };
888
+ const getDefaultMobileValue = (key, initial = "") => {
889
+ const value = item.styles?.mobile?.[key];
890
+ const desktopValue = item.styles?.desktop?.[key];
891
+ const def = defaults?.mobile?.[key];
892
+ const desktopDef = defaults?.desktop?.[key];
893
+ if (value !== void 0) {
894
+ return value;
895
+ } else if (def !== void 0) {
896
+ return def;
897
+ } else if (desktopValue !== void 0) {
898
+ return desktopValue;
899
+ } else if (desktopDef !== void 0) {
900
+ return desktopDef;
901
+ } else {
902
+ return initial;
903
+ }
904
+ };
905
+ const getSpacingValue = (str) => {
906
+ const parsed = chunkG3675W7A_js.spacing.parse(str);
907
+ return {
908
+ indipendent: chunkG3675W7A_js.spacing.isIndipendent(str),
909
+ horizontal: parsed.left,
910
+ vertical: parsed.top,
911
+ ...parsed
912
+ };
913
+ };
688
914
  const form = reactHookForm.useForm({
689
915
  resolver: zod$1.zodResolver(designSchema),
690
916
  defaultValues: {
691
- ...item.styles,
692
- container: item.styles?.container ?? true,
693
- background: item.styles?.background ?? "",
694
- color: item.styles?.color ?? "",
695
- padding: {
696
- indipendent: chunk5YLARMT3_js.spacing.isIndipendent(
697
- item.styles?.padding ?? ""
698
- ),
699
- horizontal: initialPadding.left,
700
- vertical: initialPadding.top,
701
- left: initialPadding.left,
702
- right: initialPadding.right,
703
- top: initialPadding.top,
704
- bottom: initialPadding.bottom
917
+ container: item.styles?.container || defaults.container || true,
918
+ desktop: {
919
+ background: getDefaultDesktopValue("background"),
920
+ color: getDefaultDesktopValue("color"),
921
+ padding: getSpacingValue(getDefaultDesktopValue("padding")),
922
+ margin: getSpacingValue(getDefaultDesktopValue("margin"))
705
923
  },
706
- margin: {
707
- indipendent: chunk5YLARMT3_js.spacing.isIndipendent(
708
- item.styles?.margin ?? ""
709
- ),
710
- horizontal: initialMargin.left,
711
- vertical: initialMargin.top,
712
- left: initialMargin.left,
713
- right: initialMargin.right,
714
- top: initialMargin.top,
715
- bottom: initialMargin.bottom
924
+ mobile: {
925
+ background: getDefaultMobileValue("background"),
926
+ color: getDefaultMobileValue("color"),
927
+ padding: getSpacingValue(getDefaultMobileValue("padding")),
928
+ margin: getSpacingValue(getDefaultMobileValue("margin"))
716
929
  }
717
930
  }
718
931
  });
719
932
  const onSubmit = (values) => {
720
- const { padding: p, margin: m, ...rest } = values;
721
- const padding = !p.indipendent ? `${p.vertical}px ${p.horizontal}px` : `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
722
- const margin = !m.indipendent ? `${m.vertical}px ${m.horizontal}px` : `${m.top}px ${m.right}px ${m.bottom}px ${m.left}px`;
933
+ const { container } = values;
934
+ const getPatchedDeviceValues = (device2 = "desktop") => {
935
+ return Object.entries(values[device2]).reduce((acc, [key, value]) => {
936
+ let res = value;
937
+ if (key === "padding" || key === "margin") {
938
+ const data = value;
939
+ const params = data.indipendent ? data : {
940
+ top: data.vertical,
941
+ bottom: data.vertical,
942
+ left: data.horizontal,
943
+ right: data.horizontal
944
+ };
945
+ res = chunkG3675W7A_js.spacing.stringify(params);
946
+ }
947
+ return {
948
+ ...acc,
949
+ ...res ? { [key]: res } : {}
950
+ };
951
+ }, {});
952
+ };
953
+ const patchedDesktopValues = getPatchedDeviceValues();
954
+ const patchedMobileValues = getPatchedDeviceValues("mobile");
723
955
  patchItem(item.id, {
724
956
  styles: {
725
- padding,
726
- margin,
727
- ...rest
957
+ ...container === false && { container },
958
+ ...Object.keys(patchedDesktopValues).length && {
959
+ desktop: patchedDesktopValues
960
+ },
961
+ ...Object.keys(patchedMobileValues).length && {
962
+ mobile: patchedMobileValues
963
+ }
728
964
  }
729
965
  });
730
966
  };
731
- React12__namespace.useEffect(() => {
967
+ React15__namespace.useEffect(() => {
732
968
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
733
969
  return () => subscription.unsubscribe();
734
970
  }, [form.watch, form.handleSubmit]);
735
971
  const [indipendentPadding, indipendentMargin] = form.watch([
736
- "padding.indipendent",
737
- "margin.indipendent"
972
+ `${device}.padding.indipendent`,
973
+ `${device}.margin.indipendent`
738
974
  ]);
739
- return /* @__PURE__ */ React12__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React12__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React12__namespace.createElement(
975
+ return /* @__PURE__ */ React15__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React15__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React15__namespace.createElement(Tabs, { defaultValue: device, onValueChange: setDevice }, /* @__PURE__ */ React15__namespace.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React15__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React15__namespace.createElement("span", null, "Mobiel")))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React15__namespace.createElement(
740
976
  FormField,
741
977
  {
742
978
  control: form.control,
743
- name: "background",
744
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
979
+ key: `${device}.background`,
980
+ name: `${device}.background`,
981
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
745
982
  BackgroundPicker,
746
983
  {
747
984
  background: field.value,
748
985
  onBackgroundChange: field.onChange
749
986
  }
750
- )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
987
+ )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
751
988
  }
752
- ), /* @__PURE__ */ React12__namespace.createElement(
989
+ ), /* @__PURE__ */ React15__namespace.createElement(
753
990
  FormField,
754
991
  {
755
992
  control: form.control,
756
- name: "color",
757
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
993
+ key: `${device}.color`,
994
+ name: `${device}.color`,
995
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
758
996
  ColorPicker,
759
997
  {
760
998
  color: field.value,
761
999
  onColorChange: field.onChange
762
1000
  }
763
- )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
1001
+ )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
764
1002
  }
765
- ), /* @__PURE__ */ React12__namespace.createElement("hr", null), /* @__PURE__ */ React12__namespace.createElement(
1003
+ ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement(
766
1004
  FormField,
767
1005
  {
768
1006
  control: form.control,
769
1007
  name: "container",
770
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1008
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
771
1009
  Switch,
772
1010
  {
773
1011
  checked: !field.value,
774
1012
  onCheckedChange: (v) => field.onChange(!v)
775
1013
  }
776
- )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
1014
+ )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
777
1015
  }
778
- ), /* @__PURE__ */ React12__namespace.createElement("hr", null), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
1016
+ ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
779
1017
  FormField,
780
1018
  {
781
1019
  control: form.control,
782
- name: "padding.horizontal",
783
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1020
+ key: `${device}.padding.horizontal`,
1021
+ name: `${device}.padding.horizontal`,
1022
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
784
1023
  AdvancedInput,
785
1024
  {
786
1025
  ...field,
787
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
788
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1026
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
1027
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
789
1028
  }
790
1029
  )))
791
1030
  }
792
- ), /* @__PURE__ */ React12__namespace.createElement(
1031
+ ), /* @__PURE__ */ React15__namespace.createElement(
793
1032
  FormField,
794
1033
  {
795
1034
  control: form.control,
796
- name: "padding.vertical",
797
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1035
+ key: `${device}.padding.vertical`,
1036
+ name: `${device}.padding.vertical`,
1037
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
798
1038
  AdvancedInput,
799
1039
  {
800
1040
  ...field,
801
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
802
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1041
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1042
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
803
1043
  }
804
1044
  )))
805
1045
  }
806
- )) : /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
1046
+ )) : /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
807
1047
  FormField,
808
1048
  {
809
1049
  control: form.control,
810
- name: "padding.left",
811
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1050
+ key: `${device}.padding.left`,
1051
+ name: `${device}.padding.left`,
1052
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
812
1053
  AdvancedInput,
813
1054
  {
814
1055
  ...field,
815
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
816
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1056
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
1057
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
817
1058
  }
818
1059
  )))
819
1060
  }
820
- ), /* @__PURE__ */ React12__namespace.createElement(
1061
+ ), /* @__PURE__ */ React15__namespace.createElement(
821
1062
  FormField,
822
1063
  {
823
1064
  control: form.control,
824
- name: "padding.top",
825
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1065
+ key: `${device}.padding.top`,
1066
+ name: `${device}.padding.top`,
1067
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
826
1068
  AdvancedInput,
827
1069
  {
828
1070
  ...field,
829
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
830
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1071
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1072
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
831
1073
  }
832
1074
  )))
833
1075
  }
834
- ), /* @__PURE__ */ React12__namespace.createElement(
1076
+ ), /* @__PURE__ */ React15__namespace.createElement(
835
1077
  FormField,
836
1078
  {
837
1079
  control: form.control,
838
- name: "padding.right",
839
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1080
+ key: `${device}.padding.right`,
1081
+ name: `${device}.padding.right`,
1082
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
840
1083
  AdvancedInput,
841
1084
  {
842
1085
  ...field,
843
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
844
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1086
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
1087
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
845
1088
  }
846
1089
  )))
847
1090
  }
848
- ), /* @__PURE__ */ React12__namespace.createElement(
1091
+ ), /* @__PURE__ */ React15__namespace.createElement(
849
1092
  FormField,
850
1093
  {
851
1094
  control: form.control,
852
- name: "padding.bottom",
853
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1095
+ key: `${device}.padding.bottom`,
1096
+ name: `${device}.padding.bottom`,
1097
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
854
1098
  AdvancedInput,
855
1099
  {
856
1100
  ...field,
857
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
858
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1101
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
1102
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
859
1103
  }
860
1104
  )))
861
1105
  }
862
- ))), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12__namespace.createElement(
1106
+ ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
863
1107
  FormField,
864
1108
  {
865
1109
  control: form.control,
866
- name: "padding.indipendent",
867
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1110
+ key: `${device}.padding.indipendent`,
1111
+ name: `${device}.padding.indipendent`,
1112
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
868
1113
  Toggle,
869
1114
  {
870
1115
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -873,99 +1118,106 @@ var ItemDesignForm = (props) => {
873
1118
  pressed: field.value,
874
1119
  onPressedChange: field.onChange
875
1120
  },
876
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
1121
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
877
1122
  ))
878
1123
  }
879
- ))), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null)), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
1124
+ ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null)), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
880
1125
  FormField,
881
1126
  {
882
1127
  control: form.control,
883
- name: "margin.horizontal",
884
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1128
+ key: `${device}.margin.horizontal`,
1129
+ name: `${device}.margin.horizontal`,
1130
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
885
1131
  AdvancedInput,
886
1132
  {
887
1133
  ...field,
888
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
889
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1134
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
1135
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
890
1136
  }
891
1137
  )))
892
1138
  }
893
- ), /* @__PURE__ */ React12__namespace.createElement(
1139
+ ), /* @__PURE__ */ React15__namespace.createElement(
894
1140
  FormField,
895
1141
  {
896
1142
  control: form.control,
897
- name: "margin.vertical",
898
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1143
+ key: `${device}.margin.vertical`,
1144
+ name: `${device}.margin.vertical`,
1145
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
899
1146
  AdvancedInput,
900
1147
  {
901
1148
  ...field,
902
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
903
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1149
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1150
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
904
1151
  }
905
1152
  )))
906
1153
  }
907
- )) : /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
1154
+ )) : /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
908
1155
  FormField,
909
1156
  {
910
1157
  control: form.control,
911
- name: "margin.left",
912
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1158
+ key: `${device}.margin.left`,
1159
+ name: `${device}.margin.left`,
1160
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
913
1161
  AdvancedInput,
914
1162
  {
915
1163
  ...field,
916
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
917
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1164
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
1165
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
918
1166
  }
919
1167
  )))
920
1168
  }
921
- ), /* @__PURE__ */ React12__namespace.createElement(
1169
+ ), /* @__PURE__ */ React15__namespace.createElement(
922
1170
  FormField,
923
1171
  {
924
1172
  control: form.control,
925
- name: "margin.top",
926
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1173
+ key: `${device}.margin.top`,
1174
+ name: `${device}.margin.top`,
1175
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
927
1176
  AdvancedInput,
928
1177
  {
929
1178
  ...field,
930
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
931
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1179
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1180
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
932
1181
  }
933
1182
  )))
934
1183
  }
935
- ), /* @__PURE__ */ React12__namespace.createElement(
1184
+ ), /* @__PURE__ */ React15__namespace.createElement(
936
1185
  FormField,
937
1186
  {
938
1187
  control: form.control,
939
- name: "margin.right",
940
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1188
+ key: `${device}.margin.right`,
1189
+ name: `${device}.margin.right`,
1190
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
941
1191
  AdvancedInput,
942
1192
  {
943
1193
  ...field,
944
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
945
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1194
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
1195
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
946
1196
  }
947
1197
  )))
948
1198
  }
949
- ), /* @__PURE__ */ React12__namespace.createElement(
1199
+ ), /* @__PURE__ */ React15__namespace.createElement(
950
1200
  FormField,
951
1201
  {
952
1202
  control: form.control,
953
- name: "margin.bottom",
954
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1203
+ key: `${device}.margin.bottom`,
1204
+ name: `${device}.margin.bottom`,
1205
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
955
1206
  AdvancedInput,
956
1207
  {
957
1208
  ...field,
958
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
959
- append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1209
+ prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
1210
+ append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
960
1211
  }
961
1212
  )))
962
1213
  }
963
- ))), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12__namespace.createElement(
1214
+ ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
964
1215
  FormField,
965
1216
  {
966
1217
  control: form.control,
967
- name: "margin.indipendent",
968
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1218
+ key: `${device}.margin.indipendent`,
1219
+ name: `${device}.margin.indipendent`,
1220
+ render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
969
1221
  Toggle,
970
1222
  {
971
1223
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -974,204 +1226,38 @@ var ItemDesignForm = (props) => {
974
1226
  pressed: field.value,
975
1227
  onPressedChange: field.onChange
976
1228
  },
977
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
1229
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
978
1230
  ))
979
1231
  }
980
- ))), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null)))));
981
- };
982
- function Calendar({
983
- className,
984
- classNames,
985
- showOutsideDays = true,
986
- ...props
987
- }) {
988
- return /* @__PURE__ */ React12__namespace.createElement(
989
- reactDayPicker.DayPicker,
990
- {
991
- showOutsideDays,
992
- className: chunk5YLARMT3_js.cn("sb-p-3 sb-font-roboto", className),
993
- classNames: {
994
- months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
995
- month: "sb-space-y-4",
996
- caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
997
- caption_label: "sb-text-sm sb-font-medium",
998
- nav: "sb-space-x-1 sb-flex sb-items-center",
999
- nav_button: chunk5YLARMT3_js.cn(
1000
- chunkPJOHRI67_js.buttonVariants({ variant: "outline" }),
1001
- "sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
1002
- ),
1003
- nav_button_previous: "sb-absolute sb-left-1",
1004
- nav_button_next: "sb-absolute sb-right-1",
1005
- table: "sb-w-full sb-border-collapse sb-space-y-1",
1006
- head_row: "sb-flex",
1007
- head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
1008
- row: "sb-flex sb-w-full sb-mt-2",
1009
- cell: chunk5YLARMT3_js.cn(
1010
- "sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
1011
- props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
1012
- ),
1013
- day: chunk5YLARMT3_js.cn(
1014
- chunkPJOHRI67_js.buttonVariants({ variant: "ghost" }),
1015
- "sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
1016
- ),
1017
- day_range_start: "day-range-start",
1018
- day_range_end: "day-range-end",
1019
- day_selected: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary hover:sb-text-primary-foreground focus:sb-bg-primary focus:sb-text-primary-foreground",
1020
- day_today: "sb-bg-accent sb-text-accent-foreground",
1021
- day_outside: "day-outside sb-text-muted-foreground sb-opacity-50 aria-selected:sb-bg-accent/50 aria-selected:sb-text-muted-foreground aria-selected:sb-opacity-30",
1022
- day_disabled: "sb-text-muted-foreground sb-opacity-50",
1023
- day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
1024
- day_hidden: "invisible",
1025
- ...classNames
1026
- },
1027
- components: {
1028
- IconLeft: () => /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
1029
- IconRight: () => /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
1030
- },
1031
- ...props
1032
- }
1033
- );
1034
- }
1035
- Calendar.displayName = "Calendar";
1036
- var Textarea = React12__namespace.forwardRef(
1037
- ({ className, ...props }, ref) => {
1038
- return /* @__PURE__ */ React12__namespace.createElement(
1039
- "textarea",
1040
- {
1041
- className: chunk5YLARMT3_js.cn(
1042
- "sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
1043
- className
1044
- ),
1045
- ref,
1046
- ...props
1047
- }
1048
- );
1049
- }
1050
- );
1051
- Textarea.displayName = "Textarea";
1052
-
1053
- // src/components/container-item-form.tsx
1054
- var ContainerItemForm = (props) => {
1055
- const { item } = props;
1056
- const { patchItem } = chunkPJOHRI67_js.useBuilder();
1057
- const component = chunk5YLARMT3_js.builder.getComponent(item.component);
1058
- if (!component) {
1059
- throw new Error(
1060
- `[simple-builder]: Component with id ${item.component} not found in container item form component`
1061
- );
1062
- }
1063
- const form = reactHookForm.useForm({
1064
- defaultValues: (component.inputs || []).reduce(
1065
- (acc, input) => ({
1066
- ...acc,
1067
- [input.name]: item?.props?.[input.name] ?? input.defaultValue
1068
- }),
1069
- {}
1070
- )
1071
- });
1072
- const onSubmit = (values) => {
1073
- patchItem(item.id, {
1074
- props: values
1075
- });
1076
- };
1077
- React12__namespace.useEffect(() => {
1078
- const subscription = form.watch(() => form.handleSubmit(onSubmit)());
1079
- return () => subscription.unsubscribe();
1080
- }, [form.watch, form.handleSubmit]);
1081
- return /* @__PURE__ */ React12__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React12__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React12__namespace.createElement(
1082
- FormField,
1083
- {
1084
- key: input.name,
1085
- control: form.control,
1086
- name: input.name,
1087
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(RenderInput, { type: input.type, input, field })
1088
- }
1089
- )))));
1090
- };
1091
- var RenderInput = (props) => {
1092
- const { type, input, field } = props;
1093
- switch (type) {
1094
- case "string":
1095
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1096
- case "longText":
1097
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1098
- case "richText":
1099
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1100
- case "number":
1101
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1102
- case "color":
1103
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1104
- case "date":
1105
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
1106
- chunkPJOHRI67_js.Button,
1107
- {
1108
- variant: "outline",
1109
- size: "sm",
1110
- className: chunk5YLARMT3_js.cn(
1111
- "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
1112
- !field.value && "sb-text-muted-foreground"
1113
- )
1114
- },
1115
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1116
- field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React12__namespace.createElement("span", null, "Pick a date")
1117
- )), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12__namespace.createElement(
1118
- Calendar,
1119
- {
1120
- mode: "single",
1121
- selected: field.value,
1122
- onSelect: field.onChange,
1123
- initialFocus: true
1124
- }
1125
- )))), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1126
- case "boolean":
1127
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1128
- case "file":
1129
- return /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
1130
- MediaInput,
1131
- {
1132
- className: "sb-grid sb-grid-cols-2 sb-gap-1",
1133
- itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
1134
- multiple: false,
1135
- onFilesChange: (files) => field.onChange(files[0]),
1136
- onError: (e) => console.error(
1137
- "[media-input]: Title: " + e?.title,
1138
- "media-input: Error: " + e?.description
1139
- )
1140
- }
1141
- )), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1142
- default:
1143
- throw new Error(
1144
- `[simple-builder]: Input type "${props.type}" not supported`
1145
- );
1146
- }
1232
+ ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))))));
1147
1233
  };
1148
1234
 
1149
1235
  // src/components/container-item-toolbar.tsx
1150
1236
  var ContainerItemToolbar = (props) => {
1151
1237
  const { contentId, canBringUp = false, canBringDown = false } = props;
1152
- const { bringUp, bringDown } = chunkPJOHRI67_js.useBuilder();
1153
- return /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React12__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React12__namespace.createElement(
1154
- chunkPJOHRI67_js.Button,
1238
+ const { bringUp, bringDown } = chunk3FCXE75X_js.useBuilder();
1239
+ return /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React15__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React15__namespace.createElement(
1240
+ chunk3FCXE75X_js.Button,
1155
1241
  {
1156
1242
  variant: "ghost",
1157
1243
  className: "sb-w-8 sb-h-8 sb-p-0",
1158
1244
  onClick: () => bringUp(contentId),
1159
1245
  disabled: !canBringUp
1160
1246
  },
1161
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
1162
- ), /* @__PURE__ */ React12__namespace.createElement(
1163
- chunkPJOHRI67_js.Button,
1247
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
1248
+ ), /* @__PURE__ */ React15__namespace.createElement(
1249
+ chunk3FCXE75X_js.Button,
1164
1250
  {
1165
1251
  variant: "ghost",
1166
1252
  className: "sb-w-8 sb-h-8 sb-p-0",
1167
1253
  onClick: () => bringDown(contentId),
1168
1254
  disabled: !canBringDown
1169
1255
  },
1170
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
1171
- ), /* @__PURE__ */ React12__namespace.createElement(DeleteButton, { contentId })));
1256
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
1257
+ ), /* @__PURE__ */ React15__namespace.createElement(DeleteButton, { contentId })));
1172
1258
  };
1173
1259
  var EditButton = ({ id }) => {
1174
- return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(chunkPJOHRI67_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12__namespace.createElement(
1260
+ return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(chunk3FCXE75X_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React15__namespace.createElement(
1175
1261
  PopoverContent,
1176
1262
  {
1177
1263
  side: "left",
@@ -1181,33 +1267,33 @@ var EditButton = ({ id }) => {
1181
1267
  className: "sb-p-0",
1182
1268
  collisionPadding: 16
1183
1269
  },
1184
- /* @__PURE__ */ React12__namespace.createElement(EditPopoverInner, { id })
1270
+ /* @__PURE__ */ React15__namespace.createElement(EditPopoverInner, { id })
1185
1271
  ));
1186
1272
  };
1187
1273
  var EditPopoverInner = (props) => {
1188
1274
  const { id } = props;
1189
- const { getItem } = chunkPJOHRI67_js.useBuilder();
1275
+ const { getItem } = chunk3FCXE75X_js.useBuilder();
1190
1276
  const item = getItem(id);
1191
1277
  if (!item) {
1192
1278
  throw new Error(
1193
1279
  `[simple-builder]: Item with id ${id} not found in container item form component`
1194
1280
  );
1195
1281
  }
1196
- return /* @__PURE__ */ React12__namespace.createElement(Tabs, null, /* @__PURE__ */ React12__namespace.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React12__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React12__namespace.createElement(ItemDesignForm, { item })));
1282
+ return /* @__PURE__ */ React15__namespace.createElement(Tabs, null, /* @__PURE__ */ React15__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React15__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React15__namespace.createElement(ItemDesignForm, { item })));
1197
1283
  };
1198
1284
  var DeleteButton = ({ contentId }) => {
1199
- const { deleteContent } = chunkPJOHRI67_js.useBuilder();
1200
- return /* @__PURE__ */ React12__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
1201
- chunkPJOHRI67_js.Button,
1285
+ const { deleteContent } = chunk3FCXE75X_js.useBuilder();
1286
+ return /* @__PURE__ */ React15__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
1287
+ chunk3FCXE75X_js.Button,
1202
1288
  {
1203
1289
  variant: "ghost",
1204
1290
  className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
1205
1291
  },
1206
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
1207
- )), /* @__PURE__ */ React12__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React12__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React12__namespace.createElement(
1292
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
1293
+ )), /* @__PURE__ */ React15__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React15__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React15__namespace.createElement(
1208
1294
  AlertDialogAction,
1209
1295
  {
1210
- className: chunkPJOHRI67_js.buttonVariants({ variant: "destructive" }),
1296
+ className: chunk3FCXE75X_js.buttonVariants({ variant: "destructive" }),
1211
1297
  onClick: () => deleteContent(contentId)
1212
1298
  },
1213
1299
  "Verwijderen"
@@ -1223,14 +1309,14 @@ var BuildContainerInner = (props) => {
1223
1309
  "[simple-builder]: Multiple content blocks detected when using property multiple false."
1224
1310
  );
1225
1311
  }
1226
- return /* @__PURE__ */ React12__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12__namespace.createElement(chunk5YLARMT3_js.DesignWrapper, { styles: item.styles }, chunk5YLARMT3_js.builder.bindComponent(item, true)), /* @__PURE__ */ React12__namespace.createElement(
1312
+ return /* @__PURE__ */ React15__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React15__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React15__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React15__namespace.createElement(chunkG3675W7A_js.DesignWrapper, { styles: item.styles }, chunkG3675W7A_js.builder.bindComponent(item, true)), /* @__PURE__ */ React15__namespace.createElement(
1227
1313
  ContainerItemToolbar,
1228
1314
  {
1229
1315
  contentId: item.id,
1230
1316
  canBringUp: i > 0,
1231
1317
  canBringDown: i < items.length - 1
1232
1318
  }
1233
- )), multiple && /* @__PURE__ */ React12__namespace.createElement(
1319
+ )), multiple && /* @__PURE__ */ React15__namespace.createElement(
1234
1320
  AddContentDividerButton,
1235
1321
  {
1236
1322
  parent: id,
@@ -1241,12 +1327,12 @@ var BuildContainerInner = (props) => {
1241
1327
  };
1242
1328
  var build_container_client_default = BuildContainerInner;
1243
1329
  var AddContentButton = (props) => {
1244
- const components = chunk5YLARMT3_js.builder.getComponents();
1245
- const { addContent } = chunkPJOHRI67_js.useBuilder();
1246
- return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
1330
+ const components = chunkG3675W7A_js.builder.getComponents();
1331
+ const { addContent } = chunk3FCXE75X_js.useBuilder();
1332
+ return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
1247
1333
  const Icon = component.icon ?? lucideReact.ImageIcon;
1248
- return /* @__PURE__ */ React12__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
1249
- chunkPJOHRI67_js.Button,
1334
+ return /* @__PURE__ */ React15__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
1335
+ chunk3FCXE75X_js.Button,
1250
1336
  {
1251
1337
  variant: "ghost",
1252
1338
  className: "sb-justify-start",
@@ -1259,22 +1345,22 @@ var AddContentButton = (props) => {
1259
1345
  );
1260
1346
  }
1261
1347
  },
1262
- /* @__PURE__ */ React12__namespace.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1348
+ /* @__PURE__ */ React15__namespace.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1263
1349
  component.friendlyName ?? component.name
1264
1350
  ));
1265
1351
  }))));
1266
1352
  };
1267
1353
  var AddContentPlaceholder = (props) => {
1268
- return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12__namespace.createElement(chunkPJOHRI67_js.Button, { size: "sm" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
1354
+ return /* @__PURE__ */ React15__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React15__namespace.createElement(chunk3FCXE75X_js.Button, { size: "sm" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
1269
1355
  };
1270
1356
  var AddContentDividerButton = (props) => {
1271
- return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React12__namespace.createElement(
1272
- chunkPJOHRI67_js.Button,
1357
+ return /* @__PURE__ */ React15__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement(
1358
+ chunk3FCXE75X_js.Button,
1273
1359
  {
1274
1360
  size: "sm",
1275
1361
  className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
1276
1362
  },
1277
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1363
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1278
1364
  "Blok Toevoegen"
1279
1365
  )));
1280
1366
  };