@simple-builder/react 1.0.4 → 1.0.6

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-PDM3LRIQ.js → build-container-client-B6ZYGDJF.js} +622 -537
  3. package/dist/{build-container-client-Y55WZE6M.mjs → build-container-client-F3SDJONS.mjs} +644 -559
  4. package/dist/{builder-content-GELONUMY.mjs → builder-content-36BOBBAF.mjs} +2 -2
  5. package/dist/{builder-content-QNCUQJUB.js → builder-content-3LSJER2M.js} +7 -7
  6. package/dist/{build-container-client-QJL5MQR6.css → builder-content-XM6XI2VA.css} +21 -0
  7. package/dist/{chunk-KOBGFPWB.js → chunk-4NWAJBFM.js} +3 -3
  8. package/dist/{chunk-NP2NHVJP.mjs → chunk-DOQHCW2T.mjs} +2 -2
  9. package/dist/{chunk-EQMVGJ6X.mjs → chunk-JF244SXI.mjs} +18 -21
  10. package/dist/{chunk-J36K7WVK.js → chunk-NVOLMEIV.js} +55 -20
  11. package/dist/{chunk-BSE6WW6Q.mjs → chunk-PIRC2EWS.mjs} +55 -21
  12. package/dist/{chunk-XEMUNFCV.js → chunk-TQITQHDC.js} +21 -24
  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-PDM3LRIQ.js → build-container-client-B6ZYGDJF.js} RENAMED
@@ -1,24 +1,23 @@
1
1
  'use client';
2
2
  'use strict';
3
3
 
4
- require('./chunk-KOBGFPWB.js');
5
- var chunkXEMUNFCV_js = require('./chunk-XEMUNFCV.js');
6
- var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
7
- var React12 = require('react');
4
+ require('./chunk-4NWAJBFM.js');
5
+ var chunkTQITQHDC_js = require('./chunk-TQITQHDC.js');
6
+ var chunkNVOLMEIV_js = require('./chunk-NVOLMEIV.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: chunkJ36K7WVK_js.cn(
54
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(
67
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(
81
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn("sb-text-lg sb-font-semibold", className),
93
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn("sb-text-sm sb-text-muted-foreground", className),
102
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(chunkXEMUNFCV_js.buttonVariants(), className),
111
+ className: chunkNVOLMEIV_js.cn(chunkTQITQHDC_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: chunkJ36K7WVK_js.cn(
122
- chunkXEMUNFCV_js.buttonVariants({ variant: "outline" }),
120
+ className: chunkNVOLMEIV_js.cn(
121
+ chunkTQITQHDC_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: chunkJ36K7WVK_js.cn(
138
+ className: chunkNVOLMEIV_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: chunkNVOLMEIV_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: chunkNVOLMEIV_js.cn(
164
+ chunkTQITQHDC_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: chunkNVOLMEIV_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: chunkNVOLMEIV_js.cn(
178
+ chunkTQITQHDC_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
+ chunkTQITQHDC_js.Button,
215
+ {
216
+ variant: "outline",
217
+ size: "sm",
218
+ className: chunkNVOLMEIV_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 = chunkNVOLMEIV_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: chunkJ36K7WVK_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: chunkJ36K7WVK_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: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(error && "sb-text-destructive", className),
296
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(
324
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(
344
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_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: chunkJ36K7WVK_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: chunkNVOLMEIV_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: chunkJ36K7WVK_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: chunkJ36K7WVK_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12__namespace.createElement(MediaInputItem, { key: src, className: chunkJ36K7WVK_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React12__namespace.createElement(
375
- chunkJ36K7WVK_js.Image,
454
+ return /* @__PURE__ */ React15__namespace.createElement("div", { className: chunkNVOLMEIV_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React15__namespace.createElement(MediaInputItem, { key: src, className: chunkNVOLMEIV_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React15__namespace.createElement(
455
+ chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(
473
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(
483
+ className: chunkNVOLMEIV_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: chunkJ36K7WVK_js.cn(
506
+ className: chunkNVOLMEIV_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: chunkNVOLMEIV_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: chunkNVOLMEIV_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: chunkNVOLMEIV_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 } = chunkTQITQHDC_js.useBuilder();
564
+ const component = chunkNVOLMEIV_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
+ chunkTQITQHDC_js.Button,
614
+ {
615
+ variant: "outline",
616
+ size: "sm",
617
+ className: chunkNVOLMEIV_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 = chunkNVOLMEIV_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 = chunkNVOLMEIV_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: chunkNVOLMEIV_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
- chunkXEMUNFCV_js.Button,
738
+ return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
739
+ chunkTQITQHDC_js.Button,
475
740
  {
476
741
  variant: "outline",
477
742
  size: "sm",
478
- className: chunkJ36K7WVK_js.cn(
743
+ className: chunkNVOLMEIV_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
- chunkXEMUNFCV_js.Button,
562
- {
563
- variant: "outline",
564
- size: "sm",
565
- className: chunkJ36K7WVK_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 = chunkNVOLMEIV_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: chunkJ36K7WVK_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: chunkJ36K7WVK_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: chunkJ36K7WVK_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: chunkJ36K7WVK_js.cn(toggleVariants({ variant, size, className })),
834
+ className: toggleVariants({ variant, size, className }),
656
835
  ...props
657
836
  }
658
837
  ));
@@ -675,197 +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
682
- });
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()
865
+ }).passthrough();
683
866
  var ItemDesignForm = (props) => {
684
867
  const { item } = props;
685
- const { patchItem } = chunkXEMUNFCV_js.useBuilder();
686
- const initialPadding = chunkJ36K7WVK_js.spacing.parse(item.styles?.padding ?? "");
687
- const initialMargin = chunkJ36K7WVK_js.spacing.parse(item.styles?.margin ?? "");
868
+ const component = chunkNVOLMEIV_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 } = chunkTQITQHDC_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 = chunkNVOLMEIV_js.spacing.parse(str);
907
+ return {
908
+ indipendent: chunkNVOLMEIV_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
- container: item.styles?.container ?? true,
692
- background: item.styles?.background ?? "",
693
- color: item.styles?.color ?? "",
694
- padding: {
695
- indipendent: chunkJ36K7WVK_js.spacing.isIndipendent(
696
- item.styles?.padding ?? ""
697
- ),
698
- horizontal: initialPadding.left,
699
- vertical: initialPadding.top,
700
- left: initialPadding.left,
701
- right: initialPadding.right,
702
- top: initialPadding.top,
703
- 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"))
704
923
  },
705
- margin: {
706
- indipendent: chunkJ36K7WVK_js.spacing.isIndipendent(
707
- item.styles?.margin ?? ""
708
- ),
709
- horizontal: initialMargin.left,
710
- vertical: initialMargin.top,
711
- left: initialMargin.left,
712
- right: initialMargin.right,
713
- top: initialMargin.top,
714
- bottom: initialMargin.bottom
924
+ mobile: {
925
+ background: getDefaultMobileValue("background"),
926
+ color: getDefaultMobileValue("color"),
927
+ padding: getSpacingValue(getDefaultMobileValue("padding")),
928
+ margin: getSpacingValue(getDefaultMobileValue("margin"))
715
929
  }
716
930
  }
717
931
  });
718
932
  const onSubmit = (values) => {
719
- const { container, background, color, padding: p, margin: m } = values;
720
- const padding = !p.indipendent ? `${p.vertical}px ${p.horizontal}px` : `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
721
- 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 = chunkNVOLMEIV_js.spacing.stringify(params);
946
+ }
947
+ return {
948
+ ...acc,
949
+ ...!!res && defaults?.[device2]?.[key] !== res ? { [key]: res } : {}
950
+ };
951
+ }, {});
952
+ };
953
+ const patchedDesktopValues = getPatchedDeviceValues();
954
+ const patchedMobileValues = getPatchedDeviceValues("mobile");
722
955
  patchItem(item.id, {
723
956
  styles: {
724
- container,
725
- background,
726
- color,
727
- padding,
728
- margin
957
+ ...container === false && { container },
958
+ ...Object.keys(patchedDesktopValues).length && {
959
+ desktop: patchedDesktopValues
960
+ },
961
+ ...Object.keys(patchedMobileValues).length && {
962
+ mobile: patchedMobileValues
963
+ }
729
964
  }
730
965
  });
731
966
  };
732
- React12__namespace.useEffect(() => {
967
+ React15__namespace.useEffect(() => {
733
968
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
734
969
  return () => subscription.unsubscribe();
735
970
  }, [form.watch, form.handleSubmit]);
736
971
  const [indipendentPadding, indipendentMargin] = form.watch([
737
- "padding.indipendent",
738
- "margin.indipendent"
972
+ `${device}.padding.indipendent`,
973
+ `${device}.margin.indipendent`
739
974
  ]);
740
- 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(
741
976
  FormField,
742
977
  {
743
978
  control: form.control,
744
- name: "background",
745
- 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(
746
982
  BackgroundPicker,
747
983
  {
748
984
  background: field.value,
749
985
  onBackgroundChange: field.onChange
750
986
  }
751
- )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
987
+ )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
752
988
  }
753
- ), /* @__PURE__ */ React12__namespace.createElement(
989
+ ), /* @__PURE__ */ React15__namespace.createElement(
754
990
  FormField,
755
991
  {
756
992
  control: form.control,
757
- name: "color",
758
- 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(
759
996
  ColorPicker,
760
997
  {
761
998
  color: field.value,
762
999
  onColorChange: field.onChange
763
1000
  }
764
- )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
1001
+ )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
765
1002
  }
766
- ), /* @__PURE__ */ React12__namespace.createElement("hr", null), /* @__PURE__ */ React12__namespace.createElement(
1003
+ ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement(
767
1004
  FormField,
768
1005
  {
769
1006
  control: form.control,
770
1007
  name: "container",
771
- 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(
772
1009
  Switch,
773
1010
  {
774
1011
  checked: !field.value,
775
1012
  onCheckedChange: (v) => field.onChange(!v)
776
1013
  }
777
- )), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
1014
+ )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
778
1015
  }
779
- ), /* @__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(
780
1017
  FormField,
781
1018
  {
782
1019
  control: form.control,
783
- name: "padding.horizontal",
784
- 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(
785
1023
  AdvancedInput,
786
1024
  {
787
1025
  ...field,
788
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
789
- 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")
790
1028
  }
791
1029
  )))
792
1030
  }
793
- ), /* @__PURE__ */ React12__namespace.createElement(
1031
+ ), /* @__PURE__ */ React15__namespace.createElement(
794
1032
  FormField,
795
1033
  {
796
1034
  control: form.control,
797
- name: "padding.vertical",
798
- 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(
799
1038
  AdvancedInput,
800
1039
  {
801
1040
  ...field,
802
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
803
- 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")
804
1043
  }
805
1044
  )))
806
1045
  }
807
- )) : /* @__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(
808
1047
  FormField,
809
1048
  {
810
1049
  control: form.control,
811
- name: "padding.left",
812
- 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(
813
1053
  AdvancedInput,
814
1054
  {
815
1055
  ...field,
816
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
817
- 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")
818
1058
  }
819
1059
  )))
820
1060
  }
821
- ), /* @__PURE__ */ React12__namespace.createElement(
1061
+ ), /* @__PURE__ */ React15__namespace.createElement(
822
1062
  FormField,
823
1063
  {
824
1064
  control: form.control,
825
- name: "padding.top",
826
- 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(
827
1068
  AdvancedInput,
828
1069
  {
829
1070
  ...field,
830
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
831
- 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")
832
1073
  }
833
1074
  )))
834
1075
  }
835
- ), /* @__PURE__ */ React12__namespace.createElement(
1076
+ ), /* @__PURE__ */ React15__namespace.createElement(
836
1077
  FormField,
837
1078
  {
838
1079
  control: form.control,
839
- name: "padding.right",
840
- 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(
841
1083
  AdvancedInput,
842
1084
  {
843
1085
  ...field,
844
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
845
- 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")
846
1088
  }
847
1089
  )))
848
1090
  }
849
- ), /* @__PURE__ */ React12__namespace.createElement(
1091
+ ), /* @__PURE__ */ React15__namespace.createElement(
850
1092
  FormField,
851
1093
  {
852
1094
  control: form.control,
853
- name: "padding.bottom",
854
- 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(
855
1098
  AdvancedInput,
856
1099
  {
857
1100
  ...field,
858
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
859
- 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")
860
1103
  }
861
1104
  )))
862
1105
  }
863
- ))), /* @__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(
864
1107
  FormField,
865
1108
  {
866
1109
  control: form.control,
867
- name: "padding.indipendent",
868
- 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(
869
1113
  Toggle,
870
1114
  {
871
1115
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -874,99 +1118,106 @@ var ItemDesignForm = (props) => {
874
1118
  pressed: field.value,
875
1119
  onPressedChange: field.onChange
876
1120
  },
877
- /* @__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" })
878
1122
  ))
879
1123
  }
880
- ))), /* @__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(
881
1125
  FormField,
882
1126
  {
883
1127
  control: form.control,
884
- name: "margin.horizontal",
885
- 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(
886
1131
  AdvancedInput,
887
1132
  {
888
1133
  ...field,
889
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
890
- 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")
891
1136
  }
892
1137
  )))
893
1138
  }
894
- ), /* @__PURE__ */ React12__namespace.createElement(
1139
+ ), /* @__PURE__ */ React15__namespace.createElement(
895
1140
  FormField,
896
1141
  {
897
1142
  control: form.control,
898
- name: "margin.vertical",
899
- 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(
900
1146
  AdvancedInput,
901
1147
  {
902
1148
  ...field,
903
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
904
- 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")
905
1151
  }
906
1152
  )))
907
1153
  }
908
- )) : /* @__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(
909
1155
  FormField,
910
1156
  {
911
1157
  control: form.control,
912
- name: "margin.left",
913
- 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(
914
1161
  AdvancedInput,
915
1162
  {
916
1163
  ...field,
917
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
918
- 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")
919
1166
  }
920
1167
  )))
921
1168
  }
922
- ), /* @__PURE__ */ React12__namespace.createElement(
1169
+ ), /* @__PURE__ */ React15__namespace.createElement(
923
1170
  FormField,
924
1171
  {
925
1172
  control: form.control,
926
- name: "margin.top",
927
- 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(
928
1176
  AdvancedInput,
929
1177
  {
930
1178
  ...field,
931
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
932
- 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")
933
1181
  }
934
1182
  )))
935
1183
  }
936
- ), /* @__PURE__ */ React12__namespace.createElement(
1184
+ ), /* @__PURE__ */ React15__namespace.createElement(
937
1185
  FormField,
938
1186
  {
939
1187
  control: form.control,
940
- name: "margin.right",
941
- 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(
942
1191
  AdvancedInput,
943
1192
  {
944
1193
  ...field,
945
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
946
- 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")
947
1196
  }
948
1197
  )))
949
1198
  }
950
- ), /* @__PURE__ */ React12__namespace.createElement(
1199
+ ), /* @__PURE__ */ React15__namespace.createElement(
951
1200
  FormField,
952
1201
  {
953
1202
  control: form.control,
954
- name: "margin.bottom",
955
- 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(
956
1206
  AdvancedInput,
957
1207
  {
958
1208
  ...field,
959
- prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
960
- 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")
961
1211
  }
962
1212
  )))
963
1213
  }
964
- ))), /* @__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(
965
1215
  FormField,
966
1216
  {
967
1217
  control: form.control,
968
- name: "margin.indipendent",
969
- 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(
970
1221
  Toggle,
971
1222
  {
972
1223
  className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
@@ -975,204 +1226,38 @@ var ItemDesignForm = (props) => {
975
1226
  pressed: field.value,
976
1227
  onPressedChange: field.onChange
977
1228
  },
978
- /* @__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" })
979
1230
  ))
980
1231
  }
981
- ))), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null)))));
982
- };
983
- function Calendar({
984
- className,
985
- classNames,
986
- showOutsideDays = true,
987
- ...props
988
- }) {
989
- return /* @__PURE__ */ React12__namespace.createElement(
990
- reactDayPicker.DayPicker,
991
- {
992
- showOutsideDays,
993
- className: chunkJ36K7WVK_js.cn("sb-p-3 sb-font-roboto", className),
994
- classNames: {
995
- months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
996
- month: "sb-space-y-4",
997
- caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
998
- caption_label: "sb-text-sm sb-font-medium",
999
- nav: "sb-space-x-1 sb-flex sb-items-center",
1000
- nav_button: chunkJ36K7WVK_js.cn(
1001
- chunkXEMUNFCV_js.buttonVariants({ variant: "outline" }),
1002
- "sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
1003
- ),
1004
- nav_button_previous: "sb-absolute sb-left-1",
1005
- nav_button_next: "sb-absolute sb-right-1",
1006
- table: "sb-w-full sb-border-collapse sb-space-y-1",
1007
- head_row: "sb-flex",
1008
- head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
1009
- row: "sb-flex sb-w-full sb-mt-2",
1010
- cell: chunkJ36K7WVK_js.cn(
1011
- "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",
1012
- 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"
1013
- ),
1014
- day: chunkJ36K7WVK_js.cn(
1015
- chunkXEMUNFCV_js.buttonVariants({ variant: "ghost" }),
1016
- "sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
1017
- ),
1018
- day_range_start: "day-range-start",
1019
- day_range_end: "day-range-end",
1020
- 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",
1021
- day_today: "sb-bg-accent sb-text-accent-foreground",
1022
- 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",
1023
- day_disabled: "sb-text-muted-foreground sb-opacity-50",
1024
- day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
1025
- day_hidden: "invisible",
1026
- ...classNames
1027
- },
1028
- components: {
1029
- IconLeft: () => /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
1030
- IconRight: () => /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
1031
- },
1032
- ...props
1033
- }
1034
- );
1035
- }
1036
- Calendar.displayName = "Calendar";
1037
- var Textarea = React12__namespace.forwardRef(
1038
- ({ className, ...props }, ref) => {
1039
- return /* @__PURE__ */ React12__namespace.createElement(
1040
- "textarea",
1041
- {
1042
- className: chunkJ36K7WVK_js.cn(
1043
- "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",
1044
- className
1045
- ),
1046
- ref,
1047
- ...props
1048
- }
1049
- );
1050
- }
1051
- );
1052
- Textarea.displayName = "Textarea";
1053
-
1054
- // src/components/container-item-form.tsx
1055
- var ContainerItemForm = (props) => {
1056
- const { item } = props;
1057
- const { patchItem } = chunkXEMUNFCV_js.useBuilder();
1058
- const component = chunkJ36K7WVK_js.builder.getComponent(item.component);
1059
- if (!component) {
1060
- throw new Error(
1061
- `[simple-builder]: Component with id ${item.component} not found in container item form component`
1062
- );
1063
- }
1064
- const form = reactHookForm.useForm({
1065
- defaultValues: (component.inputs || []).reduce(
1066
- (acc, input) => ({
1067
- ...acc,
1068
- [input.name]: item?.props?.[input.name] ?? input.defaultValue
1069
- }),
1070
- {}
1071
- )
1072
- });
1073
- const onSubmit = (values) => {
1074
- patchItem(item.id, {
1075
- props: values
1076
- });
1077
- };
1078
- React12__namespace.useEffect(() => {
1079
- const subscription = form.watch(() => form.handleSubmit(onSubmit)());
1080
- return () => subscription.unsubscribe();
1081
- }, [form.watch, form.handleSubmit]);
1082
- 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(
1083
- FormField,
1084
- {
1085
- key: input.name,
1086
- control: form.control,
1087
- name: input.name,
1088
- render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(RenderInput, { type: input.type, input, field })
1089
- }
1090
- )))));
1091
- };
1092
- var RenderInput = (props) => {
1093
- const { type, input, field } = props;
1094
- switch (type) {
1095
- case "string":
1096
- 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));
1097
- case "longText":
1098
- 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));
1099
- case "richText":
1100
- 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));
1101
- case "number":
1102
- 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));
1103
- case "color":
1104
- 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));
1105
- case "date":
1106
- 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(
1107
- chunkXEMUNFCV_js.Button,
1108
- {
1109
- variant: "outline",
1110
- size: "sm",
1111
- className: chunkJ36K7WVK_js.cn(
1112
- "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
1113
- !field.value && "sb-text-muted-foreground"
1114
- )
1115
- },
1116
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1117
- field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React12__namespace.createElement("span", null, "Pick a date")
1118
- )), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12__namespace.createElement(
1119
- Calendar,
1120
- {
1121
- mode: "single",
1122
- selected: field.value,
1123
- onSelect: field.onChange,
1124
- initialFocus: true
1125
- }
1126
- )))), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1127
- case "boolean":
1128
- 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));
1129
- case "file":
1130
- 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(
1131
- MediaInput,
1132
- {
1133
- className: "sb-grid sb-grid-cols-2 sb-gap-1",
1134
- itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
1135
- multiple: false,
1136
- onFilesChange: (files) => field.onChange(files[0]),
1137
- onError: (e) => console.error(
1138
- "[media-input]: Title: " + e?.title,
1139
- "media-input: Error: " + e?.description
1140
- )
1141
- }
1142
- )), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null));
1143
- default:
1144
- throw new Error(
1145
- `[simple-builder]: Input type "${props.type}" not supported`
1146
- );
1147
- }
1232
+ ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))))));
1148
1233
  };
1149
1234
 
1150
1235
  // src/components/container-item-toolbar.tsx
1151
1236
  var ContainerItemToolbar = (props) => {
1152
1237
  const { contentId, canBringUp = false, canBringDown = false } = props;
1153
- const { bringUp, bringDown } = chunkXEMUNFCV_js.useBuilder();
1154
- 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(
1155
- chunkXEMUNFCV_js.Button,
1238
+ const { bringUp, bringDown } = chunkTQITQHDC_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
+ chunkTQITQHDC_js.Button,
1156
1241
  {
1157
1242
  variant: "ghost",
1158
1243
  className: "sb-w-8 sb-h-8 sb-p-0",
1159
1244
  onClick: () => bringUp(contentId),
1160
1245
  disabled: !canBringUp
1161
1246
  },
1162
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
1163
- ), /* @__PURE__ */ React12__namespace.createElement(
1164
- chunkXEMUNFCV_js.Button,
1247
+ /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
1248
+ ), /* @__PURE__ */ React15__namespace.createElement(
1249
+ chunkTQITQHDC_js.Button,
1165
1250
  {
1166
1251
  variant: "ghost",
1167
1252
  className: "sb-w-8 sb-h-8 sb-p-0",
1168
1253
  onClick: () => bringDown(contentId),
1169
1254
  disabled: !canBringDown
1170
1255
  },
1171
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
1172
- ), /* @__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 })));
1173
1258
  };
1174
1259
  var EditButton = ({ id }) => {
1175
- return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(chunkXEMUNFCV_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12__namespace.createElement(
1260
+ return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(chunkTQITQHDC_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(
1176
1261
  PopoverContent,
1177
1262
  {
1178
1263
  side: "left",
@@ -1182,33 +1267,33 @@ var EditButton = ({ id }) => {
1182
1267
  className: "sb-p-0",
1183
1268
  collisionPadding: 16
1184
1269
  },
1185
- /* @__PURE__ */ React12__namespace.createElement(EditPopoverInner, { id })
1270
+ /* @__PURE__ */ React15__namespace.createElement(EditPopoverInner, { id })
1186
1271
  ));
1187
1272
  };
1188
1273
  var EditPopoverInner = (props) => {
1189
1274
  const { id } = props;
1190
- const { getItem } = chunkXEMUNFCV_js.useBuilder();
1275
+ const { getItem } = chunkTQITQHDC_js.useBuilder();
1191
1276
  const item = getItem(id);
1192
1277
  if (!item) {
1193
1278
  throw new Error(
1194
1279
  `[simple-builder]: Item with id ${id} not found in container item form component`
1195
1280
  );
1196
1281
  }
1197
- 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 })));
1198
1283
  };
1199
1284
  var DeleteButton = ({ contentId }) => {
1200
- const { deleteContent } = chunkXEMUNFCV_js.useBuilder();
1201
- return /* @__PURE__ */ React12__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
1202
- chunkXEMUNFCV_js.Button,
1285
+ const { deleteContent } = chunkTQITQHDC_js.useBuilder();
1286
+ return /* @__PURE__ */ React15__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
1287
+ chunkTQITQHDC_js.Button,
1203
1288
  {
1204
1289
  variant: "ghost",
1205
1290
  className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
1206
1291
  },
1207
- /* @__PURE__ */ React12__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
1208
- )), /* @__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(
1209
1294
  AlertDialogAction,
1210
1295
  {
1211
- className: chunkXEMUNFCV_js.buttonVariants({ variant: "destructive" }),
1296
+ className: chunkTQITQHDC_js.buttonVariants({ variant: "destructive" }),
1212
1297
  onClick: () => deleteContent(contentId)
1213
1298
  },
1214
1299
  "Verwijderen"
@@ -1224,14 +1309,14 @@ var BuildContainerInner = (props) => {
1224
1309
  "[simple-builder]: Multiple content blocks detected when using property multiple false."
1225
1310
  );
1226
1311
  }
1227
- return /* @__PURE__ */ React12__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12__namespace.createElement(chunkJ36K7WVK_js.DesignWrapper, { styles: item.styles }, chunkJ36K7WVK_js.builder.bindComponent(item, true)), /* @__PURE__ */ React12__namespace.createElement(
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(chunkNVOLMEIV_js.DesignWrapper, { styles: item.styles }, chunkNVOLMEIV_js.builder.bindComponent(item, true)), /* @__PURE__ */ React15__namespace.createElement(
1228
1313
  ContainerItemToolbar,
1229
1314
  {
1230
1315
  contentId: item.id,
1231
1316
  canBringUp: i > 0,
1232
1317
  canBringDown: i < items.length - 1
1233
1318
  }
1234
- )), multiple && /* @__PURE__ */ React12__namespace.createElement(
1319
+ )), multiple && /* @__PURE__ */ React15__namespace.createElement(
1235
1320
  AddContentDividerButton,
1236
1321
  {
1237
1322
  parent: id,
@@ -1242,12 +1327,12 @@ var BuildContainerInner = (props) => {
1242
1327
  };
1243
1328
  var build_container_client_default = BuildContainerInner;
1244
1329
  var AddContentButton = (props) => {
1245
- const components = chunkJ36K7WVK_js.builder.getComponents();
1246
- const { addContent } = chunkXEMUNFCV_js.useBuilder();
1247
- 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 = chunkNVOLMEIV_js.builder.getComponents();
1331
+ const { addContent } = chunkTQITQHDC_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) => {
1248
1333
  const Icon = component.icon ?? lucideReact.ImageIcon;
1249
- return /* @__PURE__ */ React12__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
1250
- chunkXEMUNFCV_js.Button,
1334
+ return /* @__PURE__ */ React15__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
1335
+ chunkTQITQHDC_js.Button,
1251
1336
  {
1252
1337
  variant: "ghost",
1253
1338
  className: "sb-justify-start",
@@ -1260,22 +1345,22 @@ var AddContentButton = (props) => {
1260
1345
  );
1261
1346
  }
1262
1347
  },
1263
- /* @__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" }),
1264
1349
  component.friendlyName ?? component.name
1265
1350
  ));
1266
1351
  }))));
1267
1352
  };
1268
1353
  var AddContentPlaceholder = (props) => {
1269
- return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12__namespace.createElement(chunkXEMUNFCV_js.Button, { size: "sm" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
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(chunkTQITQHDC_js.Button, { size: "sm" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
1270
1355
  };
1271
1356
  var AddContentDividerButton = (props) => {
1272
- 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(
1273
- chunkXEMUNFCV_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
+ chunkTQITQHDC_js.Button,
1274
1359
  {
1275
1360
  size: "sm",
1276
1361
  className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
1277
1362
  },
1278
- /* @__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" }),
1279
1364
  "Blok Toevoegen"
1280
1365
  )));
1281
1366
  };